/* ════════════════════════════════════════════════════════════════════════ VEXTRO PORTAAL — DESIGN SYSTEM v4 Volledig thema-bewust (Dark / Light / Discord), met een animatie-laag, merk-gradients, een geanimeerd logo, en een geadvanceerd profieldropdown- component. ALLE tokens uit v3 blijven bestaan onder dezelfde naam — elke pagina die al tegen v3 bouwde blijft gewoon werken, maar reageert nu ook automatisch op het gekozen thema. Geen enkele pagina hoeft nog eigen overrides te schrijven. ── Hoe het thema-systeem werkt ── 1. :root definieert de DARK-tokens (het bestaande, ongewijzigde thema). 2. [data-theme="light"] / [data-theme="discord"] herdefiniëren dezelfde variabelenamen. Omdat elke component al via var(--token) werkt, volgt de hele UI het thema automatisch — nul aanpassingen nodig in bestaande EJS/HTML. 3. Zet het thema door `data-theme="dark|light|discord"` op te zetten. Zie de meegeleverde `vxtTheme` helper onderaan dit bestand (als commentaar/snippet) voor het bewaren van de keuze in localStorage. ════════════════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700;800;900&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap'); :root, [data-theme="dark"] { /* ── Oppervlakken ── */ --bg-void: #03090b; --bg-sidebar: #04100f; --bg-surface: #06181a; --bg-surface-2: #0a2024; --bg-elevated: #0d2a2d; --bg-overlay: rgba(2, 8, 9, 0.82); /* ── Randen & lijnen ── */ --border-soft: rgba(45, 212, 212, 0.12); --border-strong: rgba(45, 212, 212, 0.3); --border-hairline: rgba(255, 255, 255, 0.06); --border-hairline-2: rgba(255, 255, 255, 0.03); /* ── Merkaccent (teal/cyan) ── */ --accent: #25d6d6; --accent-2: #6ee7e0; --accent-dim: #1a9b9b; --accent-glow: rgba(37, 214, 214, 0.28); --accent-soft: rgba(37, 214, 214, 0.08); --accent-ink: #03171a; /* ── Secundaire accenten ── */ --violet: #a855f7; --violet-soft: rgba(168, 85, 247, 0.1); --amber: #f3a712; --amber-soft: rgba(243, 167, 18, 0.1); --green: #16c98a; --green-soft: rgba(22, 201, 138, 0.1); --red: #f1495a; --red-soft: rgba(241, 73, 90, 0.1); --gold: #facc15; --gold-soft: rgba(250, 204, 21, 0.1); --discord: #5865f2; /* ── Tekst ── */ --text-primary: #f3fbfb; --text-secondary: #aec4c5; --text-muted: #5e7c7d; --text-faint: rgba(255, 255, 255, 0.22); /* ── Merk-gradients & glans (nieuw in v4) ── */ --gradient-brand: linear-gradient(135deg, var(--accent) 0%, var(--violet) 100%); --gradient-brand-soft: linear-gradient(135deg, rgba(37,214,214,.16) 0%, rgba(168,85,247,.14) 100%); --gradient-mesh: radial-gradient(700px 500px at 14% -8%, rgba(37, 214, 214, 0.09), transparent 60%), radial-gradient(600px 480px at 100% 110%, rgba(168, 85, 247, 0.07), transparent 60%); --gradient-sheen: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.12) 45%, rgba(255,255,255,.22) 50%, rgba(255,255,255,.12) 55%, transparent 70%); --scrollbar-thumb: rgba(37, 214, 214, 0.16); --scrollbar-thumb-hover: rgba(37, 214, 214, 0.32); --login-radial: radial-gradient(circle at 50% 40%, #06222a 0%, var(--bg-void) 65%); --overlay-blur: 14px; --theme-transition: background-color .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease); /* ── Typografie ── */ --font-display: 'Montserrat', sans-serif; --font-body: 'Space Grotesk', sans-serif; --font-mono: 'JetBrains Mono', 'Courier New', monospace; /* ── Maatvoering ── */ --radius-sm: 7px; --radius-md: 11px; --radius-lg: 16px; --shadow-card: 0 18px 40px rgba(0, 0, 0, 0.38); --shadow-lift: 0 22px 50px rgba(0, 0, 0, 0.45), 0 0 30px rgba(37, 214, 214, 0.07); --ease: cubic-bezier(0.4, 0, 0.2, 1); /* ── Back-compat: oudere/legacy markup gebruikt deze namen ── */ --bg-dark: var(--bg-void); --bg-card: var(--bg-surface); --accent-cyan: var(--accent); --accent-color: var(--accent); --border-vxt: var(--border-soft); } /* ══════════════════════ THEMA: LIGHT ══════════════════════ Zelfde variabelenamen, lichte oppervlakken. Alle bestaande componenten (cards, sidebar, modals, badges, ...) volgen dit automatisch omdat ze allemaal via var(--token) werken. */ [data-theme="light"] { --bg-void: #f4f8f9; --bg-sidebar: #ffffff; --bg-surface: #ffffff; --bg-surface-2: #eef4f5; --bg-elevated: #ffffff; --bg-overlay: rgba(244, 248, 249, 0.86); --border-soft: rgba(16, 130, 130, 0.16); --border-strong: rgba(16, 130, 130, 0.35); --border-hairline: rgba(4, 20, 22, 0.08); --border-hairline-2: rgba(4, 20, 22, 0.04); --accent: #0d9c98; --accent-2: #14b8a6; --accent-dim: #0b7d7a; --accent-glow: rgba(13, 156, 152, 0.22); --accent-soft: rgba(13, 156, 152, 0.09); --accent-ink: #ffffff; --violet: #8b5cf6; --violet-soft: rgba(139, 92, 246, 0.1); --amber: #b8790a; --amber-soft: rgba(184, 121, 10, 0.1); --green: #0d9668; --green-soft: rgba(13, 150, 104, 0.1); --red: #d8394a; --red-soft: rgba(216, 57, 74, 0.1); --gold: #b7930a; --gold-soft: rgba(183, 147, 10, 0.1); --discord: #5865f2; --text-primary: #0b2224; --text-secondary: #3f5c5e; --text-muted: #7c9698; --text-faint: rgba(11, 34, 36, 0.25); --gradient-brand: linear-gradient(135deg, var(--accent) 0%, var(--violet) 100%); --gradient-brand-soft: linear-gradient(135deg, rgba(13,156,152,.1) 0%, rgba(139,92,246,.09) 100%); --gradient-mesh: radial-gradient(700px 500px at 14% -8%, rgba(13, 156, 152, 0.07), transparent 60%), radial-gradient(600px 480px at 100% 110%, rgba(139, 92, 246, 0.05), transparent 60%); --gradient-sheen: linear-gradient(100deg, transparent 30%, rgba(11,34,36,.05) 45%, rgba(11,34,36,.09) 50%, rgba(11,34,36,.05) 55%, transparent 70%); --scrollbar-thumb: rgba(13, 156, 152, 0.2); --scrollbar-thumb-hover: rgba(13, 156, 152, 0.38); --login-radial: radial-gradient(circle at 50% 40%, #e3f3f2 0%, var(--bg-void) 65%); --shadow-card: 0 12px 30px rgba(11, 34, 36, 0.08); --shadow-lift: 0 18px 40px rgba(11, 34, 36, 0.12), 0 0 24px rgba(13, 156, 152, 0.06); } /* ══════════════════════ THEMA: DISCORD ══════════════════════ Volgt de Discord-huisstijl (blurple + donkere "chat"-oppervlakken) voor gebruikers die het portaal naast Discord open hebben staan. */ [data-theme="discord"] { --bg-void: #1e1f22; --bg-sidebar: #2b2d31; --bg-surface: #313338; --bg-surface-2: #383a40; --bg-elevated: #3f4147; --bg-overlay: rgba(30, 31, 34, 0.86); --border-soft: rgba(88, 101, 242, 0.22); --border-strong: rgba(88, 101, 242, 0.45); --border-hairline: rgba(255, 255, 255, 0.06); --border-hairline-2: rgba(255, 255, 255, 0.03); --accent: #5865f2; --accent-2: #8891f5; --accent-dim: #4552c9; --accent-glow: rgba(88, 101, 242, 0.35); --accent-soft: rgba(88, 101, 242, 0.12); --accent-ink: #ffffff; --violet: #eb459e; --violet-soft: rgba(235, 69, 158, 0.12); --amber: #f0b232; --amber-soft: rgba(240, 178, 50, 0.1); --green: #23a55a; --green-soft: rgba(35, 165, 90, 0.12); --red: #f23f42; --red-soft: rgba(242, 63, 66, 0.12); --gold: #f0b232; --gold-soft: rgba(240, 178, 50, 0.1); --discord: #5865f2; --text-primary: #f2f3f5; --text-secondary: #b5bac1; --text-muted: #80848e; --text-faint: rgba(255, 255, 255, 0.22); --gradient-brand: linear-gradient(135deg, #5865f2 0%, #eb459e 100%); --gradient-brand-soft: linear-gradient(135deg, rgba(88,101,242,.18) 0%, rgba(235,69,158,.14) 100%); --gradient-mesh: radial-gradient(700px 500px at 14% -8%, rgba(88, 101, 242, 0.14), transparent 60%), radial-gradient(600px 480px at 100% 110%, rgba(235, 69, 158, 0.08), transparent 60%); --gradient-sheen: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.10) 45%, rgba(255,255,255,.16) 50%, rgba(255,255,255,.10) 55%, transparent 70%); --scrollbar-thumb: rgba(88, 101, 242, 0.28); --scrollbar-thumb-hover: rgba(88, 101, 242, 0.45); --login-radial: radial-gradient(circle at 50% 40%, #3a3d7a 0%, var(--bg-void) 65%); --shadow-card: 0 18px 40px rgba(0, 0, 0, 0.45); --shadow-lift: 0 22px 50px rgba(0, 0, 0, 0.5), 0 0 30px rgba(88, 101, 242, 0.12); } /* Zachte overgang wanneer het thema wisselt, i.p.v. een harde flits */ html[data-theme] body, html[data-theme] .sidebar, html[data-theme] .card, html[data-theme] .topbar, html[data-theme] .modal-backdrop .modal, html[data-theme] .user-menu-panel { transition: var(--theme-transition); } /* ════════════════════ RESET & BASIS ════════════════════ */ * { box-sizing: border-box; } html { scrollbar-color: var(--scrollbar-thumb) transparent; } body { background: var(--bg-void); color: var(--text-primary); font-family: var(--font-body); margin: 0; display: flex; min-height: 100vh; overflow: hidden; position: relative; } /* Stille ambient gloed achter de hele app — diepte zonder afleiding, volgt het thema */ body::before { content: ''; position: fixed; inset: 0; background: var(--gradient-mesh); pointer-events: none; z-index: 0; transition: var(--theme-transition); } a { color: inherit; } h1, h2, h3, h4, h5 { font-family: var(--font-display); margin: 0; color: var(--text-primary); } p { color: var(--text-secondary); } ul { margin: 0; padding: 0; } ::selection { background: var(--accent-glow); color: var(--text-primary); } *:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } .text-cyan { color: var(--accent); font-weight: 700; } .text-center { text-align: center; } .hidden-box { display: none !important; } /* ════════════════════ SIGNATUUR: FACET-MOTIEF ════════════════════ Afgeleid van de diagonale vlakken in het Vextro-merkteken — een terugkerend, rustig accent op hero-elementen i.p.v. willekeurige flair. */ .facet-edge { position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--accent) 0%, rgba(37, 214, 214, 0.35) 38%, transparent 70%); border-radius: var(--radius-lg) var(--radius-lg) 0 0; } .facet-corner { position: absolute; top: 0; right: 0; width: 86px; height: 86px; overflow: hidden; pointer-events: none; opacity: 0.5; } .facet-corner::before, .facet-corner::after { content: ''; position: absolute; background: var(--accent); transform: rotate(-38deg); } .facet-corner::before { width: 7px; height: 130px; top: -38px; right: 26px; opacity: 0.5; } .facet-corner::after { width: 14px; height: 130px; top: -52px; right: 4px; background: rgba(110, 231, 224, 0.5); opacity: 0.35; } /* ════════════════════ ANIMATIES ════════════════════ */ @keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: scale(1); } } @keyframes livePulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.7); } } @keyframes spin360 { to { transform: rotate(360deg); } } @keyframes shimmerText { 0% { opacity: 0.35; } 50% { opacity: 0.85; } 100% { opacity: 0.35; } } .enter-fade { animation: fadeUp 0.45s var(--ease) both; } .enter-fade.d1 { animation-delay: .04s; } .enter-fade.d2 { animation-delay: .08s; } .enter-fade.d3 { animation-delay: .12s; } .enter-fade.d4 { animation-delay: .16s; } /* ════════════════════ V4: MERK-GRADIENTS, LOGO & EXTRA MOTION ════════════════════ */ @keyframes gradientDrift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes logoGlowPulse { 0%, 100% { box-shadow: 0 0 0 1px var(--border-soft), 0 6px 16px var(--accent-glow); } 50% { box-shadow: 0 0 0 1px var(--border-strong), 0 8px 26px var(--accent-glow); } } @keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } @keyframes popIn { from { opacity: 0; transform: scale(.92) translateY(4px); } to { opacity: 1; transform: scale(1) translateY(0); } } @keyframes sheenSweep { from { background-position: -200% 0; } to { background-position: 200% 0; } } @keyframes skeletonPulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } } @keyframes menuIn { from { opacity: 0; transform: scale(.94) translateY(-6px); } to { opacity: 1; transform: scale(1) translateY(0); } } @keyframes ringSpin { to { transform: rotate(360deg); } } /* Gradient tekst — voor logo/wordmark en koppen die extra nadruk verdienen */ .brand-gradient-text { background: var(--gradient-brand); background-size: 200% 200%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: gradientDrift 6s ease-in-out infinite; } /* Geanimeerd logo — zacht ademende gloed, subtiele tilt bij hover */ .brand-mark-animated { position: relative; border-radius: 9px; animation: logoGlowPulse 3.2s ease-in-out infinite; transition: transform .3s var(--ease); } .brand-mark-animated:hover { transform: rotate(-4deg) scale(1.05); } /* Zwevend accent (bv. voor lege-staat iconen, badges) */ .anim-float { animation: floatY 3.4s ease-in-out infinite; } /* Sheen — glanzende veeg over gradient-oppervlakken (knoppen, kaarten) */ .gradient-sheen { position: relative; overflow: hidden; } .gradient-sheen::after { content: ''; position: absolute; inset: 0; background: var(--gradient-sheen); background-size: 200% 100%; animation: sheenSweep 3.5s linear infinite; pointer-events: none; mix-blend-mode: overlay; } /* Skeleton-loader — voor async content i.p.v. lege flits */ .skeleton { background: var(--bg-surface-2); border-radius: var(--radius-sm); animation: skeletonPulse 1.4s ease-in-out infinite; } /* ════════════════════ SIDEBAR — v5 ════════════════════ Vernieuwde look t.o.v. v4: - Categorie-headers (.sidebar-label) hebben nu een eigen accent-icoon. - Nieuw: .tussenkop is visueel losgekoppeld van .sidebar-label — een stille, kleine subkop mét bullet-tick voor subgroepen binnen één categorie (bv. "Beoordelingen" binnen "Afdeling & Personeel"), zodat grote groepen leesbaar blijven zonder er losse categorieën van te maken. - Item-iconen zijn nu "chips" (zelfde motief als de rest van het systeem, zie .mc-log-icon / .mc-row-av-fb), i.p.v. kale glyphs. - Actieve/hover items krijgen een gloeiende linker-rail i.p.v. enkel een vlakke achtergrond — zelfde taal als de rail-accenten die elders in het portaal gebruikt worden (zie .mc-row). - Brand-blok heeft een levende statusdot en een dunne gradient-lijn onderaan; de footer-user is nu een eigen kaartje i.p.v. losse rij. Alles blijft volledig thema-bewust via var(--token). */ .sidebar { width: 276px; flex-shrink: 0; background: var(--bg-sidebar); border-right: 1px solid var(--border-soft); display: flex; flex-direction: column; height: 100vh; box-sizing: border-box; position: relative; z-index: 2; transition: width .28s var(--ease); } /* ── Ingeklapte staat (icon-only rail) ── Wordt geactiveerd door .sidebar.collapsed op de root-container. Labels, groepskoppen en tussenkopjes verdwijnen; alleen de icon-chips blijven zichtbaar, gecentreerd. Zie collapse-knop en tooltip-laag verderop. */ .sidebar.collapsed { width: 84px; } .sidebar.collapsed .sidebar-brand { padding: 22px 0 17px; justify-content: center; } .sidebar.collapsed .sidebar-brand .brand-text, .sidebar.collapsed .sidebar-label, .sidebar.collapsed .tussenkop, .sidebar.collapsed .sidebar-item span, .sidebar.collapsed .menu-link span, .sidebar.collapsed .soon-badge, .sidebar.collapsed .footer-user-text, .sidebar.collapsed .logout-btn span { display: none; } .sidebar.collapsed .sidebar-menu { padding: 14px 12px 10px; align-items: center; } .sidebar.collapsed .sidebar-item, .sidebar.collapsed .menu-link { justify-content: center; padding: 9px; } .sidebar.collapsed .sidebar-item::before, .sidebar.collapsed .menu-link::before { display: none; } .sidebar.collapsed .footer-user { justify-content: center; padding: 8px; } .sidebar.collapsed .logout-btn { padding: 9px; } /* ── Collapse/expand-knop ── Rond knopje dat half over de rechterrand van de sidebar hangt, zoals in het referentieontwerp. Chevron draait 180° bij inklappen. */ .sidebar-collapse-btn { position: absolute; top: 30px; right: -13px; width: 26px; height: 26px; border-radius: 50%; background: var(--violet); color: #fff; border: 3px solid var(--bg-void); display: flex; align-items: center; justify-content: center; font-size: 0.62rem; cursor: pointer; z-index: 6; padding: 0; box-shadow: 0 4px 10px rgba(0,0,0,.28); transition: background .18s var(--ease), transform .18s var(--ease); } .sidebar-collapse-btn:hover { background: var(--accent-dim); transform: scale(1.08); } .sidebar-collapse-btn i { transition: transform .3s var(--ease); } .sidebar.collapsed .sidebar-collapse-btn i { transform: rotate(180deg); } /* ── Tooltip-laag ── Alleen zichtbaar op de collapse-knop (altijd) en op sidebar-items wanneer de sidebar is ingeklapt (want dan is het label onzichtbaar). */ .sidebar-collapse-btn[data-tooltip]::after, .sidebar.collapsed .sidebar-item[data-tooltip]::after, .sidebar.collapsed .menu-link[data-tooltip]::after { content: attr(data-tooltip); position: absolute; left: 100%; top: 50%; transform: translateY(-50%) translateX(4px); margin-left: 10px; background: var(--bg-elevated); color: var(--text-primary); font-size: 0.78rem; font-weight: 600; padding: 7px 13px; border-radius: var(--radius-sm); white-space: nowrap; box-shadow: var(--shadow-card); border: 1px solid var(--border-hairline); opacity: 0; pointer-events: none; transition: opacity .15s var(--ease), transform .15s var(--ease); z-index: 40; } .sidebar-collapse-btn:hover[data-tooltip]::after { opacity: 1; transform: translateY(-50%) translateX(0); } .sidebar.collapsed .sidebar-item:hover[data-tooltip]::after, .sidebar.collapsed .menu-link:hover[data-tooltip]::after { opacity: 1; transform: translateY(-50%) translateX(0); } .sidebar-brand { padding: 22px 20px 17px; display: flex; align-items: center; gap: 12px; position: relative; } .sidebar-brand::after { content: ''; position: absolute; left: 20px; right: 20px; bottom: 0; height: 1px; background: linear-gradient(90deg, var(--accent) 0%, rgba(168, 85, 247, 0.4) 55%, transparent 90%); opacity: 0.55; } .sidebar-brand img.brand-mark { width: 34px; height: 34px; border-radius: 9px; box-shadow: 0 0 0 1px var(--border-soft), 0 6px 16px var(--accent-glow); flex-shrink: 0; animation: logoGlowPulse 3.2s ease-in-out infinite; transition: transform .3s var(--ease); } .sidebar-brand img.brand-mark:hover { transform: rotate(-4deg) scale(1.06); } .sidebar-brand .brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; } .sidebar-brand .brand-text .logo, .sidebar-brand .brand-text h2 { font-family: var(--font-display); font-weight: 900; font-size: 1.18rem; color: var(--text-primary); letter-spacing: 0.2px; margin: 0; } .sidebar-brand .brand-text .logo span, .sidebar-brand .brand-text h2 span { background: var(--gradient-brand); background-size: 200% 200%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: gradientDrift 6s ease-in-out infinite; } .sidebar-brand .panel-version { display: flex; align-items: center; font-family: var(--font-mono); font-size: 0.62rem; color: var(--text-muted); letter-spacing: 0.5px; } .brand-live-dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px var(--green); margin-right: 6px; flex-shrink: 0; animation: livePulse 2.4s ease-in-out infinite; } .sidebar-menu { flex: 1; padding: 14px 12px 10px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; overflow-x: hidden; } .sidebar-group { display: flex; flex-direction: column; gap: 3px; padding-top: 6px; } .sidebar-group + .sidebar-group { border-top: 1px solid var(--border-hairline-2); margin-top: 4px; } .sidebar-label { display: flex; align-items: center; gap: 7px; font-family: var(--font-display); font-size: 0.63rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1.6px; font-weight: 800; padding: 8px 8px 8px; } .sidebar-label i { width: 14px; text-align: center; font-size: 0.66rem; color: var(--accent); opacity: 0.85; flex-shrink: 0; } /* Tussenkop: stille subkop vóór een blokje items binnen dezelfde categorie. Bewust kleiner/rustiger dan .sidebar-label zodat het schema categorie > subgroep visueel meteen duidelijk is. */ .tussenkop { position: relative; font-family: var(--font-mono); font-size: 0.6rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: 1.3px; font-weight: 700; padding: 11px 8px 5px 17px; } .tussenkop::before { content: ''; position: absolute; left: 4px; top: 50%; transform: translateY(-46%); width: 4px; height: 4px; border-radius: 50%; background: var(--accent-dim); } .sidebar-group > .tussenkop:first-of-type { padding-top: 2px; } .sidebar-items-list { display: flex; flex-direction: column; gap: 1px; } .sidebar-item, .menu-link { display: flex; align-items: center; gap: 10px; padding: 7px 12px 7px 15px; color: var(--text-secondary); text-decoration: none; font-size: 0.87rem; font-weight: 500; border-radius: var(--radius-sm); transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease); position: relative; border: 1px solid transparent; } /* Gloeiende linker-rail i.p.v. platte achtergrond-highlight — zelfde visuele taal als de rail-accenten bij werkbonnen/producties. */ .sidebar-item::before, .menu-link::before { content: ''; position: absolute; left: 2px; top: 50%; transform: translateY(-50%); width: 3px; height: 0; border-radius: 3px; background: var(--accent); transition: height .18s var(--ease); } .sidebar-item i, .menu-icon { width: 25px; height: 25px; display: flex; align-items: center; justify-content: center; border-radius: 7px; font-size: 0.8rem; color: var(--text-muted); background: transparent; transition: color .15s var(--ease), background .15s var(--ease); flex-shrink: 0; } .sidebar-item:hover:not(.disabled-item):not(.disabled), .menu-link:hover:not(.disabled) { background: rgba(37, 214, 214, 0.05); color: var(--text-primary); } .sidebar-item:hover i, .menu-link:hover .menu-icon { color: var(--text-primary); background: rgba(255, 255, 255, 0.05); } .sidebar-item:hover::before, .menu-link:hover:not(.disabled)::before { height: 34%; } /* Actieve pagina = volledig gevulde "pil" i.p.v. de vlakke tint van hiervoor — donkere thema's (dark/discord) krijgen een verzadigde violet pil met witte tekst/icoon; het lichte thema krijgt een zachte lavendel-pil met violette tekst/icoon (zelfde patroon als het referentieontwerp). */ .sidebar-item.active, .menu-link.active { background: var(--violet) !important; border-color: transparent !important; color: #fff !important; font-weight: 700 !important; border-radius: 999px; box-shadow: 0 6px 18px var(--violet-soft); } .sidebar-item.active i, .menu-link.active .menu-icon { color: #fff !important; background: rgba(255, 255, 255, 0.2); } .sidebar-item.active::before, .menu-link.active::before { display: none; } [data-theme="light"] .sidebar-item.active, [data-theme="light"] .menu-link.active { background: var(--violet-soft) !important; color: var(--violet) !important; box-shadow: none; } [data-theme="light"] .sidebar-item.active i, [data-theme="light"] .menu-link.active .menu-icon { color: var(--violet) !important; background: rgba(139, 92, 246, 0.16); } .sidebar-item.admin-link, .menu-link.admin-link { color: #e8b659; } .sidebar-item.admin-link:hover, .menu-link.admin-link:hover { background: rgba(243, 167, 18, 0.06); color: #ffce72; } .sidebar-item.admin-link i { color: #e8b659; } .sidebar-item.admin-link::before { background: var(--amber); } .sidebar-item.disabled-item, .menu-link.disabled, .disabled-item { opacity: 0.4; cursor: not-allowed; } .sidebar-item.disabled-item i { background: transparent; } .soon-badge { font-family: var(--font-mono); margin-left: auto; flex-shrink: 0; background: rgba(243, 167, 18, 0.14); border: 1px solid rgba(243, 167, 18, 0.3); color: var(--amber); font-size: 0.58rem; font-weight: 700; padding: 2px 6px; border-radius: 20px; letter-spacing: 0.3px; white-space: nowrap; } .sidebar-footer { padding: 12px; border-top: 1px solid var(--border-hairline-2); display: flex; flex-direction: column; gap: 8px; } .footer-user { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: var(--radius-md); background: var(--bg-surface); border: 1px solid var(--border-hairline); transition: border-color .18s var(--ease); } .footer-user:hover { border-color: var(--border-soft); } .footer-user img { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--border-soft); object-fit: cover; flex-shrink: 0; } .footer-user-text { display: flex; flex-direction: column; min-width: 0; } .footer-username { font-size: 0.86rem; font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .footer-user-role { font-size: 0.71rem; color: var(--text-muted); } .logout-btn { display: flex; align-items: center; justify-content: center; gap: 7px; background: rgba(241, 73, 90, 0.07); border: 1px solid rgba(241, 73, 90, 0.18); color: var(--red); text-decoration: none; padding: 9px; border-radius: var(--radius-sm); font-size: 0.82rem; font-weight: 700; transition: all .2s var(--ease); } .logout-btn:hover { background: var(--red); color: #fff; box-shadow: 0 6px 16px rgba(241, 73, 90, 0.25); } .sidebar-menu::-webkit-scrollbar { width: 4px; } .sidebar-menu::-webkit-scrollbar-thumb { background: rgba(37, 214, 214, 0.12); border-radius: 10px; } /* ════════════════════ HOOFDLAYOUT ════════════════════ */ .main-content { flex: 1; height: 100vh; display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; z-index: 1; } .content-scroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 22px 28px 48px; box-sizing: border-box; } /* ════════════════════ TOPBAR ════════════════════ */ .topbar-wrap { padding: 16px 24px 0; flex-shrink: 0; } .topbar { background: rgba(7, 22, 24, 0.7); backdrop-filter: blur(10px); border: 1px solid var(--border-hairline); border-radius: var(--radius-md); padding: 11px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 60px; box-sizing: border-box; } .topbar-brandbit { display: flex; align-items: center; gap: 9px; min-width: 0; } .topbar-brandbit .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent-glow); flex-shrink: 0; } .topbar-brandbit span { font-family: var(--font-display); font-weight: 800; font-size: 0.95rem; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .topbar-brandbit small { font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-muted); margin-left: 6px; white-space: nowrap; } .topbar-right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; } .topbar-clock { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; border-right: 1px solid var(--border-hairline); padding-right: 14px; } .topbar-clock i { color: var(--accent); font-size: 0.75rem; } .topbar-user { display: flex; align-items: center; gap: 10px; } .topbar-user-text { display: flex; flex-direction: column; line-height: 1.2; text-align: right; } .topbar-user-name { font-size: 0.84rem; font-weight: 700; color: var(--text-primary); } .topbar-user-role { font-size: 0.68rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; } .topbar-avatar { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--accent); object-fit: cover; } .topbar-logout { color: var(--red); text-decoration: none; font-size: 0.8rem; font-weight: 700; display: flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: var(--radius-sm); background: rgba(241, 73, 90, 0.06); border: 1px solid rgba(241, 73, 90, 0.16); transition: background .2s var(--ease); } .topbar-logout:hover { background: rgba(241, 73, 90, 0.18); } /* ════════════════════ PAGE HEAD ════════════════════ */ .page-head { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 24px; } .page-head-left { display: flex; align-items: flex-start; gap: 14px; min-width: 0; } .page-head-icon { width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--accent-soft); border: 1px solid var(--border-soft); display: flex; align-items: center; justify-content: center; color: var(--accent); font-size: 1.15rem; flex-shrink: 0; } .page-head-icon.violet { background: var(--violet-soft); border-color: rgba(168,85,247,.25); color: var(--violet); } .page-head-icon.green { background: var(--green-soft); border-color: rgba(22,201,138,.25); color: var(--green); } .page-head-icon.amber { background: var(--amber-soft); border-color: rgba(243,167,18,.25); color: var(--amber); } .page-head-icon.red { background: var(--red-soft); border-color: rgba(241,73,90,.25); color: var(--red); } .page-head h1 { font-size: 1.55rem; font-weight: 900; letter-spacing: -0.2px; line-height: 1.2; } .page-head h1 span { color: var(--accent); } .page-head p { margin: 4px 0 0; font-size: 0.88rem; color: var(--text-muted); } .page-head-back { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; font-weight: 600; color: var(--text-muted); text-decoration: none; transition: color .15s; margin-bottom: 10px; } .page-head-back:hover { color: var(--accent); } .page-head-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } /* ════════════════════ KAARTEN ════════════════════ */ .card { background: var(--bg-surface); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: 24px; position: relative; box-shadow: var(--shadow-card); } .card-header-action { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; gap: 10px; } .card h3 { font-weight: 700; font-size: 1.08rem; } .card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; } .card-head-left { display: flex; align-items: center; gap: 13px; min-width: 0; } .card-head-icon { width: 38px; height: 38px; border-radius: 10px; background: var(--accent-soft); border: 1px solid var(--border-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; } .card-head-icon.violet { background: var(--violet-soft); border-color: rgba(168,85,247,.22); color: var(--violet); } .card-head-title h3 { font-size: 1.02rem; font-weight: 800; } .card-head-title p { margin: 3px 0 0; font-size: 0.8rem; color: var(--text-muted); } .empty-state, .empty-vxt, .empty-text { text-align: center; color: var(--text-muted); padding: 38px 20px; border: 1px dashed var(--border-hairline); border-radius: var(--radius-md); font-size: 0.9rem; width: 100%; box-sizing: border-box; } .empty-state i, .empty-vxt i { font-size: 1.5rem; display: block; margin-bottom: 10px; opacity: 0.3; } /* ════════════════════ KNOPPEN ════════════════════ */ .btn-primary, .btn-ghost, .btn-outline, .btn-danger, .btn-success, .btn-modern, .hr-btn-save, .btn-submit-vxt, .btn-action-sm { display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-family: var(--font-display); font-weight: 700; font-size: 0.82rem; border-radius: var(--radius-sm); padding: 10px 18px; cursor: pointer; border: 1px solid transparent; transition: all .18s var(--ease); text-decoration: none; white-space: nowrap; } .btn-primary, .btn-modern.btn-primary, .hr-btn-save, .btn-submit-vxt { background: var(--accent); color: var(--accent-ink); } .btn-primary:hover, .hr-btn-save:hover, .btn-submit-vxt:hover { background: var(--accent-2); box-shadow: 0 0 18px var(--accent-glow); transform: translateY(-1px); } .btn-ghost, .btn-outline, .btn-modern.btn-outline { background: rgba(255, 255, 255, 0.04); color: var(--text-primary); border-color: rgba(255, 255, 255, 0.1); } .btn-ghost:hover, .btn-outline:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.22); } .btn-action-sm { background: transparent; border-color: var(--accent); color: var(--accent); padding: 7px 13px; font-size: 0.76rem; } .btn-action-sm:hover { background: var(--accent); color: var(--accent-ink); } .btn-danger, .btn-modern.btn-danger, .hr-btn-delete { background: var(--red-soft); border-color: rgba(241, 73, 90, 0.3); color: var(--red); } .btn-danger:hover, .hr-btn-delete:hover { background: var(--red); color: #fff; } .btn-success, .btn-modern.btn-success { background: var(--green-soft); border-color: rgba(22, 201, 138, 0.3); color: var(--green); } .btn-success:hover { background: var(--green); color: #042018; } .btn-secondary { background: var(--accent-soft); border-color: var(--border-soft); color: var(--accent); } .btn-secondary:hover { background: rgba(37, 214, 214, 0.16); border-color: var(--accent); } .btn-discord { display: flex; align-items: center; justify-content: center; gap: 11px; background: var(--discord); color: #fff; text-decoration: none; padding: 14px; border-radius: var(--radius-sm); font-weight: 700; font-size: 0.95rem; box-shadow: 0 6px 18px rgba(88, 101, 242, 0.28); transition: all .2s var(--ease); position: relative; overflow: hidden; } .btn-discord:hover { background: #4752c4; transform: translateY(-2px); box-shadow: 0 10px 22px rgba(88, 101, 242, 0.4); } .btn-discord::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent); transition: left .5s; } .btn-discord:hover::before { left: 100%; } /* ════════════════════ FORMVELDEN ════════════════════ */ .field, .fb-field { display: flex; flex-direction: column; gap: 7px; } .field-row-2, .fb-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .f-label, .fb-label { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1.1px; color: var(--text-muted); font-family: var(--font-display); display: flex; align-items: center; gap: 6px; } .f-label i, .fb-label i { color: var(--accent); font-size: 0.68rem; } .f-input, .f-select, .f-textarea, .fb-input, .fb-select, .fb-textarea, .modern-input, .vxt-input, .vxt-textarea, .ac-search-input, .ac-select, .search-bar, .filter-select { width: 100%; box-sizing: border-box; background: rgba(0, 0, 0, 0.28) !important; border: 1px solid rgba(255, 255, 255, 0.09) !important; border-radius: var(--radius-sm) !important; color: var(--text-primary) !important; font-family: var(--font-body); font-size: 0.9rem; padding: 11px 14px; transition: border-color .18s, box-shadow .18s; } .f-input::placeholder, .f-textarea::placeholder, .fb-input::placeholder, .fb-textarea::placeholder, .modern-input::placeholder, .vxt-input::placeholder, .vxt-textarea::placeholder { color: rgba(255,255,255,0.2); } .f-input:focus, .f-select:focus, .f-textarea:focus, .fb-input:focus, .fb-select:focus, .fb-textarea:focus, .modern-input:focus, .vxt-input:focus, .vxt-textarea:focus, .ac-search-input:focus, .ac-select:focus, .search-bar:focus, .filter-select:focus { outline: none !important; border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-soft); } .f-select, .fb-select, select.modern-input, .filter-select, .ac-select { -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235e7c7d' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 14px center !important; padding-right: 34px; cursor: pointer; } select option { background: #0a1f21; color: #fff; } .form-hint { font-size: 0.74rem; color: var(--text-muted); display: flex; align-items: center; gap: 5px; } .form-hint i { color: var(--accent); } /* Checkbox grid (afdelingen / flags) */ .check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; } .check-item { display: flex; align-items: flex-start; gap: 10px; padding: 11px 13px; border-radius: 9px; border: 1px solid var(--border-hairline); background: rgba(0,0,0,0.18); cursor: pointer; transition: border-color .15s, background .15s; user-select: none; } .check-item:hover:not(.locked) { border-color: var(--border-soft); background: var(--accent-soft); } .check-item.locked { opacity: 0.4; cursor: not-allowed; } .check-item input[type="checkbox"] { margin: 2px 0 0; accent-color: var(--accent); width: 14px; height: 14px; cursor: pointer; flex-shrink: 0; } .check-item.locked input { cursor: not-allowed; } .check-item-text strong { display: block; font-size: 0.86rem; color: var(--text-primary); font-weight: 600; line-height: 1.2; } .check-item-text small { font-size: 0.72rem; color: var(--text-muted); line-height: 1.3; } /* Inklapbare formulieren (admin acties) */ .collapse, .hidden-admin-form, .create-collapse { max-height: 0; overflow: hidden; opacity: 0; transition: max-height .4s var(--ease), opacity .3s var(--ease), margin .3s var(--ease); margin-bottom: 0; display: flex !important; flex-direction: column; gap: 12px; } .collapse.open, .hidden-admin-form.open, .create-collapse.open { max-height: 2000px; opacity: 1; margin-bottom: 22px; } .hidden-admin-form, .create-collapse > .card, .create-collapse { background: rgba(0,0,0,0.22); border: 1px dashed var(--border-strong); border-radius: var(--radius-md); padding: 16px; } .create-collapse { padding: 0; background: none; border: none; } .hidden-admin-form input, .hidden-admin-form textarea, .hidden-admin-form select { background: rgba(0,0,0,0.3); border: 1px solid var(--border-hairline); padding: 9px 11px; border-radius: 6px; color: #fff; font-family: inherit; font-size: 0.88rem; } /* ════════════════════ MELDINGEN ════════════════════ */ .alert, .alert-banner, .toast { padding: 13px 16px; border-radius: var(--radius-sm); margin-bottom: 18px; font-size: 0.88rem; display: flex; align-items: center; gap: 9px; animation: fadeUp .35s var(--ease) both; } .alert-success, .alert-banner.succes, .toast.succes { background: var(--green-soft); border: 1px solid var(--green); color: var(--green); } .alert-error, .alert-banner.fout, .toast.fout { background: var(--red-soft); border: 1px solid var(--red); color: var(--red); } /* ════════════════════ BADGES ════════════════════ */ .vxt-badge, .badge, .mini-badge, .badge-type { display: inline-flex; align-items: center; gap: 4px; font-size: 0.68rem; font-weight: 800; padding: 3px 9px; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.3px; background: rgba(255,255,255,0.04); color: var(--text-secondary); border: 1px solid var(--border-hairline); } .vxt-badge.cyan, .vxt-badge.online { background: var(--accent-soft); color: var(--accent); border-color: var(--border-soft); } .vxt-badge.offline { background: rgba(255,255,255,0.02); color: var(--text-muted); } .flag-badge { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-display); font-size: 0.6rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; padding: 2px 7px; border-radius: 4px; margin: 2px 2px 2px 0; } .flag-badge.niv-0 { background: rgba(255,255,255,0.05); color: var(--text-muted); border: 1px solid var(--border-hairline); } .flag-badge.niv-1 { background: var(--accent-soft); color: var(--accent); border: 1px solid var(--border-soft); } .flag-badge.niv-2 { background: var(--violet-soft); color: var(--violet); border: 1px solid rgba(168,85,247,.2); } .flag-badge.niv-3 { background: var(--amber-soft); color: var(--amber); border: 1px solid rgba(243,167,18,.2); } .flag-badge.niv-4 { background: var(--red-soft); color: var(--red); border: 1px solid rgba(241,73,90,.2); } .flag-badge.ster { background: var(--gold-soft); color: var(--gold); border: 1px solid rgba(250,204,21,.25); } .sa-badge { display: inline-flex; align-items: center; gap: 4px; background: var(--gold-soft); border: 1px solid rgba(250,204,21,.3); color: var(--gold); font-size: 0.62rem; font-weight: 800; padding: 3px 8px; border-radius: 5px; text-transform: uppercase; } .status-badge, .status-indicator-badge, .s-badge { font-size: 0.72rem; font-weight: 700; padding: 4px 11px; border-radius: 5px; border: 1px solid; display: inline-flex; align-items: center; gap: 5px; text-transform: uppercase; letter-spacing: 0.3px; } .status-badge.behandeling, .s-badge.behandeling { color: var(--amber); background: var(--amber-soft); border-color: rgba(243,167,18,.35); } .status-badge.goedgekeurd, .s-badge.goedgekeurd { color: var(--green); background: var(--green-soft); border-color: rgba(22,201,138,.35); } .status-badge.afgewezen, .s-badge.afgewezen { color: var(--red); background: var(--red-soft); border-color: rgba(241,73,90,.35); } .tag-alert { font-size: 0.64rem; font-weight: 800; padding: 2px 8px; border-radius: 4px; text-transform: uppercase; letter-spacing: .3px; } .tag-alert.belangrijk { background: var(--red-soft); color: var(--red); } .tag-alert.informatie { background: var(--accent-soft); color: var(--accent); } .tag-alert.update { background: var(--violet-soft); color: var(--violet); } .tag-alert.regel { background: var(--amber-soft); color: var(--amber); } /* ════════════════════ STAT TEGELS ════════════════════ */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; } .stat-card, .stat-mini, .stat-tile { background: var(--bg-surface); border: 1px solid var(--border-hairline); border-radius: var(--radius-md); padding: 16px 18px; display: flex; align-items: center; gap: 14px; } .stat-mini { padding: 14px 16px; } .stat-card { justify-content: space-between; } .stat-icon, .stat-mini-icon { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; } .stat-title { font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; font-weight: 700; letter-spacing: .4px; } .stat-value { font-size: 1.7rem; font-weight: 900; color: var(--text-primary); margin-top: 2px; font-family: var(--font-display); line-height: 1; } .stat-card.cyan .stat-value, .stat-card.cyan { border-color: var(--border-soft); } .stat-card.paars .stat-value { color: var(--violet); } .stat-card.geel .stat-value { color: var(--amber); } .stat-card.groen .stat-value { color: var(--green); } /* ════════════════════ TABELLEN ════════════════════ */ .table-wrap, .ac-table-wrap { overflow-x: auto; border-radius: var(--radius-md); border: 1px solid var(--border-hairline); } .data-table, .ac-table { width: 100%; border-collapse: collapse; font-size: 0.87rem; } .data-table th, .ac-table th { font-family: var(--font-display); font-size: 0.64rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1.1px; color: var(--text-muted); padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--border-hairline); background: rgba(0,0,0,0.18); white-space: nowrap; } .data-table td, .ac-table td { padding: 13px 16px; border-bottom: 1px solid var(--border-hairline-2); vertical-align: middle; color: var(--text-secondary); } .data-table tbody tr, .ac-table tbody tr { transition: background .15s; cursor: pointer; } .data-table tbody tr:hover, .ac-table tbody tr:hover { background: var(--accent-soft); } .data-table tbody tr.actief-rij, .ac-table tbody tr.actief-rij { background: rgba(37,214,214,0.07); border-left: 3px solid var(--accent); } .data-table tbody tr:last-child td, .ac-table tbody tr:last-child td { border-bottom: none; } .ac-empty { text-align: center !important; padding: 36px !important; color: var(--text-muted); cursor: default !important; } .ac-user-cel { display: flex; align-items: center; gap: 11px; } .ac-avatar, .table-avatar { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--border-hairline); object-fit: cover; flex-shrink: 0; } .ac-user-naam { font-weight: 700; color: var(--text-primary); font-size: 0.89rem; } .ac-user-id { font-size: 0.68rem; color: var(--text-muted); font-family: var(--font-mono); } .ac-actie-btn { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-size: 0.7rem; font-weight: 800; padding: 5px 12px; border-radius: 6px; border: none; white-space: nowrap; } .ac-actie-btn.edit { background: var(--accent-soft); border: 1px solid var(--border-soft); color: var(--accent); } .ac-actie-btn.readonly { background: rgba(255,255,255,0.02); border: 1px solid var(--border-hairline); color: var(--text-muted); } /* ════════════════════ TABS ════════════════════ */ .tab-nav { display: flex; gap: 6px; margin-bottom: 22px; border-bottom: 1px solid var(--border-hairline); flex-wrap: wrap; } .tab-btn, .tab-btn-vxt { background: transparent; border: none; color: var(--text-muted); font-family: var(--font-display); font-size: 0.86rem; font-weight: 700; padding: 10px 16px; cursor: pointer; border-bottom: 2px solid transparent; transition: all .2s; display: inline-flex; align-items: center; gap: 8px; } .tab-btn:hover, .tab-btn-vxt:hover { color: var(--text-primary); } .tab-btn.active-tab, .tab-btn-vxt.active { border-bottom-color: var(--accent) !important; color: var(--text-primary) !important; } .tab-content, .tab-content-vxt { display: none; animation: fadeUp .3s var(--ease) both; } .tab-content.active, .tab-content-vxt.active { display: block; } /* ════════════════════ MODALS ════════════════════ */ .modal-backdrop { display: none; position: fixed; inset: 0; background: var(--bg-overlay); backdrop-filter: blur(var(--overlay-blur, 7px)); z-index: 9999; justify-content: center; align-items: center; } .modal-box { background: var(--bg-surface-2); border: 1px solid var(--border-strong); padding: 26px; border-radius: var(--radius-lg); width: 100%; max-width: 460px; color: var(--text-primary); box-shadow: var(--shadow-lift); animation: fadeIn .2s var(--ease); max-height: 86vh; overflow-y: auto; -webkit-overflow-scrolling: touch; } .score-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.9rem; color: var(--text-secondary); } .numeric-input { width: 70px !important; text-align: center; font-weight: 700; color: var(--accent) !important; } /* ════════════════════ GEVAARSZONE ════════════════════ */ .danger-zone { margin-top: 28px; padding-top: 22px; border-top: 1px solid rgba(241,73,90,0.16); display: none; } .danger-zone h4 { font-family: var(--font-display); font-size: 0.82rem; font-weight: 900; color: var(--red); text-transform: uppercase; letter-spacing: 1px; margin: 0 0 6px; } .danger-zone p { font-size: 0.81rem; color: var(--text-muted); margin: 0 0 13px; } .danger-form { display: flex; gap: 10px; max-width: 460px; flex-wrap: wrap; } .danger-input { flex: 1; min-width: 180px; background: rgba(0,0,0,0.3); border: 1px solid rgba(241,73,90,0.28); border-radius: 8px; color: #fff; font-family: var(--font-body); font-size: 0.87rem; padding: 10px 13px; } .danger-input:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(241,73,90,.1); } .status-banner { display: flex; align-items: center; gap: 11px; padding: 11px 15px; border-radius: var(--radius-sm); font-size: 0.84rem; font-weight: 600; margin-bottom: 22px; } .status-banner.editable { background: var(--accent-soft); border: 1px solid var(--border-soft); color: var(--accent); } .status-banner.readonly { background: rgba(255,255,255,0.02); border: 1px solid var(--border-hairline); color: var(--text-muted); } .status-banner.superadmin { background: var(--gold-soft); border: 1px solid rgba(250,204,21,.25); color: var(--gold); } /* ════════════════════ WELKOMSTKAART (dashboard) ════════════════════ */ .welcome-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 22px; margin-bottom: 26px; align-items: start; } @media (max-width: 1100px) { .welcome-grid { grid-template-columns: 1fr; } } .welcome-card { background: linear-gradient(150deg, #082226 0%, #051416 70%); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: 26px; box-shadow: var(--shadow-lift); overflow: hidden; } .welcome-avatar-wrapper { position: relative; flex-shrink: 0; } .welcome-avatar-wrapper img, .welcome-avatar-fallback { width: 68px; height: 68px; border-radius: 50%; border: 2px solid var(--accent); box-shadow: 0 0 18px var(--accent-glow); object-fit: cover; } .welcome-avatar-fallback { display: flex; align-items: center; justify-content: center; background: var(--accent); color: var(--accent-ink); font-weight: 800; font-size: 1.5rem; font-family: var(--font-display); } .quick-actions-divider span { font-family: var(--font-display); font-size: 0.73rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1.3px; color: var(--accent); } .quick-actions-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px,1fr)); gap: 10px; } .btn-action-quick { display: flex; align-items: center; gap: 10px; background: rgba(37,214,214,0.04); border: 1px solid var(--border-soft); color: var(--text-primary); padding: 11px 14px; border-radius: 9px; text-decoration: none; font-size: 0.86rem; font-weight: 600; transition: all .18s var(--ease); } .btn-action-quick:hover { background: rgba(37,214,214,0.12); border-color: var(--accent); transform: translateY(-1px); } .btn-action-quick i { color: var(--accent); } .mini-stat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); gap: 10px; } .mini-stat-tile { background: rgba(255,255,255,0.02); border: 1px solid var(--border-hairline); border-left: 3px solid var(--accent); padding: 11px 14px; border-radius: 7px; } .mini-stat-tile .lbl { font-size: 0.63rem; font-weight: 700; text-transform: uppercase; color: var(--text-muted); letter-spacing: .4px; display: block; } .mini-stat-tile .val { font-size: 1.25rem; font-weight: 800; color: var(--text-primary); margin-top: 2px; display: block; } .activity-row { display: flex; align-items: center; justify-content: space-between; background: rgba(255,255,255,0.015); border: 1px solid var(--border-hairline-2); padding: 10px 13px; border-radius: 7px; font-size: 0.82rem; } .activity-row .ic { width: 26px; height: 26px; border-radius: 6px; background: var(--accent-soft); border: 1px solid var(--border-soft); display: flex; align-items: center; justify-content: center; color: var(--accent); font-size: 0.78rem; flex-shrink: 0; } .activity-row time { color: var(--text-faint); font-size: 0.7rem; font-family: var(--font-mono); flex-shrink: 0; } /* ════════════════════ LIVE DISCORD-STATS PANEEL ════════════════════ */ .stats-card-sidebar { background: var(--bg-sidebar); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: 20px; display: flex; flex-direction: column; box-shadow: var(--shadow-card); } .live-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .live-header h3 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1.4px; } .live-badge { display: flex; align-items: center; gap: 5px; background: var(--red-soft); border: 1px solid rgba(241,73,90,.28); padding: 3px 9px; border-radius: 20px; font-size: 0.58rem; font-weight: 900; color: var(--red); letter-spacing: 1.4px; font-family: var(--font-display); } .live-dot { width: 6px; height: 6px; background: var(--red); border-radius: 50%; animation: livePulse 1.5s ease-in-out infinite; } .stats-error { display: none; background: var(--red-soft); border: 1px solid rgba(241,73,90,.3); color: var(--red); font-size: 0.76rem; padding: 8px 11px; border-radius: 7px; margin-bottom: 12px; align-items: center; gap: 7px; } .stats-error.show { display: flex; } .guild-info-row { display: flex; align-items: center; gap: 10px; background: var(--accent-soft); border: 1px solid var(--border-soft); border-radius: 8px; padding: 9px 12px; margin-bottom: 13px; } .guild-icon { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--accent); object-fit: cover; flex-shrink: 0; } .guild-icon-placeholder { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--border-soft); background: var(--accent-soft); display: flex; align-items: center; justify-content: center; font-size: 0.95rem; flex-shrink: 0; } .guild-text .guild-name { font-size: 0.85rem; font-weight: 700; color: var(--text-primary); line-height: 1.2; } .guild-text .guild-id-text { font-size: 0.64rem; color: var(--text-muted); font-family: var(--font-mono); } .discord-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-bottom: 13px; } .discord-stat-box { background: rgba(0,0,0,0.22); border: 1px solid var(--border-hairline-2); border-radius: 8px; padding: 10px 11px; display: flex; flex-direction: column; gap: 2px; transition: border-color .4s, box-shadow .4s; } .discord-stat-box.flash { border-color: var(--border-soft); box-shadow: 0 0 12px rgba(37,214,214,0.08); } .dstat-label { font-size: 0.64rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; } .dstat-value { font-size: 1.2rem; font-weight: 800; font-family: var(--font-display); color: var(--text-primary); } .dstat-value.loading { color: var(--text-faint); animation: shimmerText 1.4s ease-in-out infinite; } .dstat-sub { font-size: 0.62rem; color: var(--text-muted); } .boost-tier-bar { height: 4px; background: rgba(255,255,255,0.06); border-radius: 3px; margin-top: 4px; overflow: hidden; } .boost-tier-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--violet), var(--accent)); transition: width .6s var(--ease); } .section-divider { border: none; border-top: 1px solid var(--border-hairline); margin: 13px 0; } .stats-section-label { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--text-muted); margin: 0 0 9px; } .bot-stat-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.83rem; color: var(--text-secondary); padding: 5px 0; } .ping-chip { font-family: var(--font-mono); font-weight: 700; font-size: 0.78rem; padding: 2px 8px; border-radius: 5px; background: rgba(255,255,255,0.04); } .ping-chip.good { color: var(--green); background: var(--green-soft); } .ping-chip.ok { color: var(--amber); background: var(--amber-soft); } .ping-chip.bad { color: var(--red); background: var(--red-soft); } .server-stat-line { display: flex; justify-content: space-between; font-size: 0.92rem; padding: 6px 0; border-bottom: 1px solid var(--border-hairline-2); } .refresh-row { display: flex; justify-content: space-between; align-items: center; margin-top: 13px; padding-top: 11px; border-top: 1px solid var(--border-hairline); } .last-updated-text { font-size: 0.68rem; color: var(--text-muted); } .refresh-timer { font-family: var(--font-mono); font-size: 0.7rem; color: var(--accent); background: var(--accent-soft); padding: 2px 8px; border-radius: 10px; } /* ════════════════════ TRIPLE GRID / TIMELINE / MVDM ════════════════════ */ .dashboard-triple-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 22px; align-items: start; } @media (max-width: 1280px) { .dashboard-triple-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 880px) { .dashboard-triple-grid { grid-template-columns: 1fr; } } .grid-column { display: flex; flex-direction: column; gap: 22px; } .events-timeline { margin-top: 5px; display: flex; flex-direction: column; gap: 13px; } .event-timeline-item { display: flex; gap: 14px; align-items: center; background: rgba(255,255,255,0.012); padding: 11px; border-radius: 9px; border: 1px solid var(--border-hairline-2); } .event-date-badge { background: var(--bg-elevated); border: 1px solid var(--border-soft); border-radius: 7px; min-width: 50px; text-align: center; padding: 6px 0; display: flex; flex-direction: column; } .ev-day { font-size: 1.15rem; font-weight: 800; color: var(--accent); font-family: var(--font-display); } .ev-month { font-size: 0.66rem; text-transform: uppercase; color: var(--text-muted); } .event-details h4 { font-size: 0.92rem; font-weight: 700; } .event-details small { color: var(--text-muted); font-size: 0.76rem; } .mvdm-card { background: linear-gradient(180deg, rgba(168,85,247,0.06) 0%, var(--bg-surface) 65%); border: 1px solid rgba(168,85,247,.22); overflow: hidden; } .mvdm-ribbon { position: absolute; top: 16px; right: -27px; background: var(--violet); color: #fff; font-size: 0.62rem; font-weight: 900; padding: 4px 28px; transform: rotate(45deg); font-family: var(--font-display); } .mvdm-avatar-glow img { width: 92px; height: 92px; border-radius: 50%; border: 3px solid var(--violet); box-shadow: 0 0 22px rgba(168,85,247,.3); margin: 16px auto 13px; display: block; } .mvdm-reason { background: rgba(0,0,0,0.2); padding: 14px; border-radius: 9px; margin-top: 16px; border-left: 3px solid var(--violet); text-align: left; } .mvdm-reason h5 { font-size: 0.72rem; text-transform: uppercase; color: var(--text-muted); margin: 0 0 4px; letter-spacing: .4px; } .mvdm-reason p { font-style: italic; font-size: 0.88rem; color: #e6d7fb; margin: 0; } .mvdm-period { color: var(--text-muted); font-size: 0.76rem; display: block; margin-top: 12px; } .mvdm-empty { text-align: center; color: var(--text-muted); font-size: 0.86rem; padding: 30px 10px; } .mvdm-profile h2 { font-size: 1.25rem; margin-top: 4px; } .news-item { padding: 14px 0; border-bottom: 1px solid var(--border-hairline-2); } .news-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; flex-wrap: wrap; gap: 5px; } .news-item h4 { font-size: 1.02rem; margin: 0 0 4px; } .news-item p { font-size: 0.88rem; margin: 0; line-height: 1.45; } /* ════════════════════ LOGIN ════════════════════ */ .login-body { background: var(--login-radial); display: flex; align-items: center; justify-content: center; min-height: 100vh; margin: 0; overflow: hidden; position: relative; width: 100%; } .login-body::before { content: ''; position: absolute; width: 360px; height: 360px; background: var(--accent-glow); filter: blur(130px); border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: .55; animation: loginGlow 8s infinite ease-in-out; z-index: 1; } @keyframes loginGlow { 0%, 100% { transform: translate(-50%,-50%) scale(1); opacity: .45; } 50% { transform: translate(-50%,-50%) scale(1.25); opacity: .75; } } .particles { position: absolute; inset: 0; overflow: hidden; z-index: 1; pointer-events: none; } .particle { position: absolute; display: block; border-radius: 50%; background: rgba(37,214,214,.22); bottom: -20px; animation: floatUp 13s infinite linear; } .particle:nth-child(1) { left: 8%; width: 5px; height: 5px; animation-duration: 14s; animation-delay: 1s; } .particle:nth-child(2) { left: 22%; width: 9px; height: 9px; animation-duration: 18s; animation-delay: 3s; } .particle:nth-child(3) { left: 38%; width: 4px; height: 4px; animation-duration: 12s; } .particle:nth-child(4) { left: 56%; width: 7px; height: 7px; animation-duration: 16s; animation-delay: 5s; } .particle:nth-child(5) { left: 71%; width: 11px; height: 11px; animation-duration: 22s; animation-delay: 2s; } .particle:nth-child(6) { left: 86%; width: 5px; height: 5px; animation-duration: 15s; animation-delay: 7s; } @keyframes floatUp { 0% { transform: translateY(0) rotate(0); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(-105vh) rotate(330deg); opacity: 0; } } .login-container { position: relative; z-index: 2; width: 100%; max-width: 420px; padding: 20px; box-sizing: border-box; animation: loginCardIn .65s cubic-bezier(.2,.8,.2,1) both; perspective: 1000px; } @keyframes loginCardIn { from { opacity: 0; transform: scale(.93) translateY(18px); } to { opacity: 1; transform: scale(1) translateY(0); } } .login-card { background: rgba(4, 14, 16, 0.86); backdrop-filter: blur(12px); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: 38px 36px; text-align: center; box-shadow: var(--shadow-lift); position: relative; overflow: hidden; transition: transform .5s cubic-bezier(.2,.8,.2,1), border-color .4s, box-shadow .4s; transform-style: preserve-3d; } .login-card:hover { border-color: var(--border-strong); box-shadow: 0 28px 55px rgba(0,0,0,.6), 0 0 32px var(--accent-glow); transform: rotateY(3deg) rotateX(1.5deg) scale(1.008); } .login-mark { width: 56px; height: 56px; border-radius: 16px; margin: 0 auto 16px; display: block; box-shadow: 0 0 24px var(--accent-glow), 0 0 0 1px var(--border-soft); } .login-logo { font-family: var(--font-display); font-weight: 900; color: var(--text-primary); margin: 0; font-size: 1.95rem; letter-spacing: .5px; } .login-logo span { color: var(--accent); } .login-subtitle { color: var(--text-muted); font-size: 0.86rem; margin: 7px 0 30px; text-transform: uppercase; letter-spacing: 1.4px; } .error-banner { margin-bottom: 22px; display: flex; align-items: center; gap: 11px; text-align: left; background: var(--red-soft); border: 1px solid rgba(241,73,90,.25); padding: 13px; border-radius: 8px; color: #ff9aa4; font-size: 0.87rem; animation: shake .4s ease-in-out; } @keyframes shake { 0%,100% { transform: translateX(0); } 20%,60% { transform: translateX(-6px); } 40%,80% { transform: translateX(6px); } } .login-footnote { margin-top: 32px; border-top: 1px solid var(--border-hairline); padding-top: 20px; } .login-footnote p { color: rgba(255,255,255,0.25); font-size: 0.74rem; margin: 0; line-height: 1.55; } /* ════════════════════ FEEDBACKFORMULIER ════════════════════ */ .fb-card-header, .ac-card-header { display: flex; align-items: center; gap: 13px; margin-bottom: 22px; flex-wrap: wrap; justify-content: space-between; } .fb-card-header-icon, .ac-card-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--accent-soft); border: 1px solid var(--border-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 1.05rem; flex-shrink: 0; } .ac-card-icon.purple { background: var(--violet-soft); border-color: rgba(168,85,247,.25); color: var(--violet); } .ac-card-header-left, .fb-card-header { display: flex; align-items: center; gap: 13px; } .fb-card-header h3, .ac-card-title h3 { font-size: 1.02rem; font-weight: 800; } .fb-card-header p, .ac-card-title p { margin: 3px 0 0; font-size: 0.8rem; color: var(--text-muted); } .fb-form { display: flex; flex-direction: column; gap: 22px; } .fb-divider { border: none; border-top: 1px solid var(--border-hairline); margin: 2px 0; } .type-switcher { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .type-tab { display: flex; align-items: center; gap: 12px; background: rgba(0,0,0,0.2); border: 1px solid var(--border-hairline); border-radius: var(--radius-md); padding: 14px; cursor: pointer; transition: all .2s var(--ease); } .type-tab-icon { font-size: 1.5rem; } .type-tab-text strong { display: block; color: var(--text-primary); font-size: 0.9rem; } .type-tab-text span { font-size: 0.76rem; color: var(--text-muted); } .type-tab.active-suggestie { border-color: var(--border-soft); background: var(--accent-soft); } .type-tab.active-bug { border-color: rgba(241,73,90,.3); background: var(--red-soft); } .priority-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-top: 10px; } .priority-card { background: rgba(0,0,0,0.2); border: 1px solid var(--border-hairline); border-radius: var(--radius-sm); padding: 13px; cursor: pointer; text-align: center; transition: all .18s; } .priority-card strong { display: block; color: var(--text-primary); font-size: 0.86rem; margin: 6px 0 3px; } .priority-card small { color: var(--text-muted); font-size: 0.7rem; } .priority-dot { width: 9px; height: 9px; border-radius: 50%; margin: 0 auto; } .priority-dot.laag { background: var(--accent); } .priority-dot.gemiddeld { background: var(--amber); } .priority-dot.hoog { background: var(--red); } .priority-card.selected-laag { border-color: var(--border-soft); background: var(--accent-soft); } .priority-card.selected-gemiddeld { border-color: rgba(243,167,18,.3); background: var(--amber-soft); } .priority-card.selected-hoog { border-color: rgba(241,73,90,.3); background: var(--red-soft); } .vereist-badge { background: var(--red-soft); color: var(--red); font-size: 0.6rem; font-weight: 800; padding: 2px 6px; border-radius: 4px; margin-left: 5px; } .hoog-alert { display: none; align-items: center; gap: 9px; background: var(--red-soft); border: 1px solid rgba(241,73,90,.25); color: #ff9aa4; padding: 10px 13px; border-radius: 8px; font-size: 0.8rem; margin-top: 10px; } .hoog-alert.zichtbaar { display: flex; } .upload-zone { border: 1.5px dashed var(--border-hairline); border-radius: var(--radius-md); padding: 26px; text-align: center; cursor: pointer; transition: all .18s; position: relative; } .upload-zone:hover, .upload-zone.dragover { border-color: var(--accent); background: var(--accent-soft); } .upload-zone i { font-size: 1.7rem; color: var(--accent); display: block; margin-bottom: 8px; } .upload-zone p { margin: 0; font-size: 0.86rem; color: var(--text-secondary); } .upload-zone small { color: var(--text-muted); } .upload-zone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .upload-preview { display: none; align-items: center; gap: 10px; background: var(--accent-soft); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 11px 14px; font-size: 0.85rem; } .upload-preview.zichtbaar { display: flex; } .upload-preview button { background: none; border: none; color: var(--text-muted); cursor: pointer; margin-left: auto; } .fb-actions { display: flex; gap: 12px; padding-top: 6px; border-top: 1px solid var(--border-hairline); } .btn-verstuur, .btn-annuleren { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; border-radius: var(--radius-sm); padding: 11px 20px; cursor: pointer; text-decoration: none; border: 1px solid transparent; transition: all .18s var(--ease); } .btn-verstuur { background: var(--accent); color: var(--accent-ink); } .btn-verstuur:hover { background: var(--accent-2); box-shadow: 0 0 16px var(--accent-glow); } .btn-annuleren { background: rgba(255,255,255,0.04); color: var(--text-primary); border-color: var(--border-hairline); } .btn-annuleren:hover { background: rgba(255,255,255,0.08); } .fb-info-title { font-family: var(--font-display); font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: var(--text-primary); } .fb-info-card { display: flex; flex-direction: column; gap: 14px; } .fb-info-item { display: flex; gap: 10px; } .fb-info-item i { color: var(--accent); margin-top: 2px; flex-shrink: 0; width: 16px; } .fb-info-item p { margin: 0; font-size: 0.83rem; color: var(--text-secondary); line-height: 1.45; } .fb-info-item p strong { display: block; color: var(--text-primary); font-size: 0.86rem; } /* ════════════════════ VACATURES (medewerker) ════════════════════ */ .filter-pill { background: rgba(255,255,255,0.04); border: 1px solid var(--border-hairline); color: var(--text-secondary); font-size: 0.78rem; font-weight: 600; padding: 6px 14px; border-radius: 20px; cursor: pointer; transition: all .18s; } .filter-pill:hover { border-color: var(--border-soft); color: var(--text-primary); } .filter-pill.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 700; } .vac-card { background: var(--bg-surface); border: 1px solid var(--border-hairline); border-radius: var(--radius-lg); padding: 20px; display: flex; flex-direction: column; gap: 13px; transition: border-color .2s, transform .2s; } .vac-card:hover { border-color: var(--border-soft); } .afd-badge { display: inline-flex; align-items: center; gap: 5px; background: var(--accent-soft); border: 1px solid var(--border-soft); color: var(--accent); font-size: 0.72rem; font-weight: 700; padding: 3px 9px; border-radius: 14px; text-transform: capitalize; } .vereisten-list { margin: 0; padding-left: 18px; font-size: 0.84rem; color: var(--text-secondary); line-height: 1.65; } .btn-solliciteer { display: inline-flex; align-items: center; gap: 7px; background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: 0.84rem; padding: 8px 16px; border-radius: var(--radius-sm); text-decoration: none; transition: all .18s; } .btn-solliciteer:hover { background: var(--accent-2); transform: translateX(2px); } .btn-locked { display: inline-flex; align-items: center; gap: 7px; color: var(--text-muted); font-size: 0.82rem; font-weight: 600; background: rgba(255,255,255,0.02); padding: 8px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border-hairline); } .history-item { background: var(--bg-surface); border: 1px solid var(--border-hairline); border-radius: var(--radius-md); padding: 14px; cursor: pointer; transition: border-color .2s; } .history-item:hover { border-color: var(--border-soft); } .history-item.open .toggle-icon, .history-item.open .chevron-icon { transform: rotate(180deg); } .history-answers { max-height: 0; overflow: hidden; transition: max-height .35s var(--ease); } .history-item.open .history-answers { max-height: 600px; margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--border-hairline); } .answer-block, .ans-block { margin-bottom: 11px; } .answer-block .vraag, .ans-vraag { font-size: 0.78rem; color: var(--text-muted); font-weight: 600; margin-bottom: 3px; } .answer-block .antwoord, .ans-antwoord { font-size: 0.86rem; color: var(--text-secondary); background: rgba(0,0,0,0.18); padding: 9px 11px; border-radius: 7px; } /* ════════════════════ VACATURES BEHEER ════════════════════ */ .inzending-card { background: var(--bg-surface); border: 1px solid var(--border-hairline); border-radius: var(--radius-md); overflow: hidden; transition: border-color .2s; } .inzending-card:hover { border-color: var(--border-soft); } .inzending-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px; cursor: pointer; flex-wrap: wrap; } .chevron-icon { color: var(--text-muted); font-size: 0.78rem; transition: transform .2s; } .inzending-body { max-height: 0; overflow: hidden; transition: max-height .35s var(--ease); padding: 0 16px; } .inzending-card.open .inzending-body { max-height: 800px; padding-bottom: 16px; } .vac-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--bg-surface); border: 1px solid var(--border-hairline); border-radius: var(--radius-md); padding: 14px 16px; flex-wrap: wrap; } .vac-row.gesloten { opacity: 0.6; } .v-badge-open { background: var(--green-soft); color: var(--green); font-size: 0.65rem; font-weight: 800; padding: 2px 8px; border-radius: 4px; text-transform: uppercase; } .v-badge-closed { background: var(--red-soft); color: var(--red); font-size: 0.65rem; font-weight: 800; padding: 2px 8px; border-radius: 4px; text-transform: uppercase; } .btn-toggle, .btn-delete, .btn-publish, .btn-goed, .btn-afwijs { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-weight: 700; font-size: 0.78rem; padding: 8px 13px; border-radius: 7px; cursor: pointer; border: 1px solid transparent; transition: all .18s; } .btn-toggle { background: rgba(255,255,255,0.04); border-color: var(--border-hairline); color: var(--text-primary); } .btn-toggle:hover { background: rgba(255,255,255,0.08); } .btn-delete { background: var(--red-soft); border-color: rgba(241,73,90,.28); color: var(--red); padding: 8px 11px; } .btn-delete:hover { background: var(--red); color: #fff; } .btn-publish { background: var(--accent); color: var(--accent-ink); padding: 11px 22px; font-size: 0.85rem; } .btn-publish:hover { background: var(--accent-2); box-shadow: 0 0 16px var(--accent-glow); } .btn-goed { background: var(--green-soft); border-color: rgba(22,201,138,.3); color: var(--green); } .btn-goed:hover { background: var(--green); color: #042018; } .btn-afwijs { background: var(--red-soft); border-color: rgba(241,73,90,.3); color: var(--red); } .btn-afwijs:hover { background: var(--red); color: #fff; } .vxt-label { display: block; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); font-family: var(--font-display); margin-bottom: 7px; } /* ════════════════════ MEDEWERKERSKAARTEN / DOSSIERS ════════════════════ */ .medewerkers-card-grid, .grid-auto-fill { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; } .employee-list-card, .person-card { background: linear-gradient(180deg, #07191c 0%, var(--bg-surface) 100%); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); transition: transform .2s, border-color .2s; padding: 22px 18px; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; } .employee-list-card:hover, .person-card:hover { transform: translateY(-3px); border-color: rgba(168,85,247,.32); } .employee-card-avatar, .person-card img.pc-avatar { width: 80px; height: 80px; border-radius: 50%; border: 3px solid var(--accent); box-shadow: 0 0 16px var(--accent-glow); margin-bottom: 13px; object-fit: cover; } .employee-card-details { margin: 13px 0; font-size: 0.88rem; border-top: 1px solid var(--border-hairline-2); padding-top: 9px; width: 100%; } .employee-card-details p { margin: 4px 0; color: var(--text-secondary); } .btn-edit-employee-card { display: block; text-align: center; background: var(--violet-soft); border: 1px solid rgba(168,85,247,.3); color: #cda2fb; text-decoration: none; padding: 8px; border-radius: var(--radius-sm); font-size: 0.84rem; font-weight: 700; margin-top: 14px; transition: all .2s; width: 100%; box-sizing: border-box; } .btn-edit-employee-card:hover { background: var(--violet); color: #fff; box-shadow: 0 0 14px rgba(168,85,247,.32); } /* Dossierlijst */ .dossier-row { display: flex; align-items: center; gap: 15px; border-left: 4px solid var(--accent); text-decoration: none; color: inherit; transition: transform .18s, border-color .18s; } .dossier-row:hover { transform: translateX(2px); } .dossier-row.inactief { border-left-color: var(--red); } /* ════════════════════ AFDELINGSBEHEER ════════════════════ */ .medewerker-card { background: var(--bg-surface); border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: 19px; display: flex; flex-direction: column; gap: 12px; position: relative; } /* ════════════════════ ACCOUNTBEHEER: AANMAAK-PREVIEW ════════════════════ */ .create-preview { background: var(--accent-soft); border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: 16px 18px; display: flex; flex-wrap: wrap; gap: 18px; } .preview-item { display: flex; flex-direction: column; gap: 3px; } .preview-label { font-size: 0.64rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); font-family: var(--font-display); font-weight: 700; } .preview-val { font-size: 0.87rem; color: var(--text-primary); font-weight: 600; } .preview-val.empty { color: var(--text-muted); font-style: italic; } .section-label { font-size: 0.72rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; margin: 0 0 8px; } /* ════════════════════ HANDBOEKEN ════════════════════ */ .afdeling-card { background: linear-gradient(180deg, #07191c 0%, var(--bg-surface) 100%); border: 1px solid var(--border-soft); display: flex; flex-direction: column; gap: 14px; } .handboek-item { background: rgba(0,0,0,0.2); border: 1px solid var(--border-hairline-2); padding: 12px; border-radius: var(--radius-sm); display: flex; flex-direction: column; gap: 8px; transition: border-color .2s; } .handboek-item:hover { border-color: var(--border-soft); } /* ════════════════════ KWALITEITSRONDES / VERZOEKEN ════════════════════ */ .verzoek-row { background: var(--bg-overlay); border: 1px solid var(--border-hairline); padding: 18px; border-radius: var(--radius-md); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; } .hr-action-box { width: 100%; max-width: 280px; background: rgba(0,0,0,0.16); padding: 12px; border-radius: var(--radius-md); border: 1px solid var(--border-hairline-2); display: flex; } .scores-grid { display: flex; gap: 15px; background: rgba(255,255,255,0.02); padding: 6px 12px; border-radius: 6px; font-size: 0.8rem; margin-top: 8px; border: 1px solid var(--border-hairline-2); color: var(--text-muted); width: max-content; flex-wrap: wrap; } .scores-grid strong { color: var(--text-primary); } /* ════════════════════ HR ACCOUNT ROW (legacy account-management) ════════════════════ */ .hr-account-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; background: rgba(255,255,255,0.012); border: 1px solid var(--border-hairline); padding: 20px; border-radius: var(--radius-md); flex-wrap: wrap; } .hr-user-info { display: flex; align-items: center; gap: 15px; min-width: 200px; } .hr-user-info img { width: 45px; height: 45px; border-radius: 50%; border: 2px solid rgba(168,85,247,.4); } .hr-user-info h4 { font-size: 1.05rem; } .hr-flags-holder { display: flex; flex-wrap: wrap; gap: 10px; background: rgba(0,0,0,0.2); padding: 8px 12px; border-radius: 6px; border: 1px solid var(--border-hairline-2); font-size: 0.85rem; } .hr-flags-holder label { display: flex; align-items: center; gap: 4px; color: #fff; margin: 0; cursor: pointer; } /* ════════════════════ RESPONSIEF ════════════════════ */ @media (max-width: 980px) { .sidebar { position: fixed; left: -280px; transition: left .25s var(--ease); z-index: 50; } .sidebar.open { left: 0; } .content-scroll { padding: 18px 16px 40px; } .topbar-wrap { padding: 12px 14px 0; } .field-row-2, .fb-grid-2 { grid-template-columns: 1fr; } } .sidebar-link:hover { background: rgba(255, 255, 255, 0.04); color: var(--accent-color) !important; } .sidebar-link.active { background: rgba(33, 194, 194, 0.08) !important; border-left: 3px solid var(--accent-color); color: #fff !important; font-weight: 700; } /* ════════════════════ SALDO SYSTEEM ════════════════════ */ /* ── Uitbetaling knoppen ── */ .saldo-payout-btn { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border-radius: var(--radius-md); border: 1px solid var(--border-hairline); background: rgba(255,255,255,0.025); color: var(--text-primary); cursor: pointer; transition: all 0.2s var(--ease); font-family: var(--font-body); text-align: left; } .saldo-payout-btn i { font-size: 1.1rem; flex-shrink: 0; width: 22px; text-align: center; } .saldo-payout-btn div { display: flex; flex-direction: column; gap: 2px; } .saldo-payout-btn strong { font-size: 0.87rem; font-weight: 700; display: block; line-height: 1.2; } .saldo-payout-btn small { font-size: 0.74rem; color: var(--text-muted); line-height: 1.3; } /* Doneer */ .saldo-payout-btn.donate { border-color: rgba(241,73,90,0.2); } .saldo-payout-btn.donate i { color: var(--red); } .saldo-payout-btn.donate:hover { background: var(--red-soft); border-color: rgba(241,73,90,0.45); transform: translateX(3px); } /* Robux */ .saldo-payout-btn.robux { border-color: rgba(37,214,214,0.2); } .saldo-payout-btn.robux i { color: var(--accent); } .saldo-payout-btn.robux:hover { background: var(--accent-soft); border-color: var(--border-strong); transform: translateX(3px); } /* Goederen */ .saldo-payout-btn.goederen { border-color: rgba(243,167,18,0.2); } .saldo-payout-btn.goederen i { color: var(--amber); } .saldo-payout-btn.goederen:hover { background: var(--amber-soft); border-color: rgba(243,167,18,0.45); transform: translateX(3px); } /* ========================================================================== VEXTRO PREMIUM SALDO COMPONENTEN (REDESIGN ADDITIONS) ========================================================================== */ /* 1. Hero Top Card & Balance Styling */ .premium-wallet-card { background: linear-gradient(135deg, var(--bg-surface) 0%, #051c20 100%) !important; border-color: rgba(45, 212, 212, 0.25) !important; box-shadow: 0 8px 32px rgba(3, 9, 11, 0.5); } .wallet-glow { position: absolute; top: -50%; right: -20%; width: 250px; height: 250px; background: radial-gradient(circle, rgba(45, 212, 212, 0.12) 0%, transparent 70%); pointer-events: none; } .huge-crypto-balance { font-family: var(--font-mono); font-size: 3.4rem; font-weight: 800; color: #fff; text-shadow: 0 0 20px rgba(45, 212, 212, 0.3); line-height: 1; } .huge-crypto-balance .currency-sign { color: var(--accent); font-size: 1.8rem; font-weight: 500; margin-right: 8px; vertical-align: super; } /* 2. Management Mededeling */ .management-announcement { background: rgba(243, 167, 18, 0.05); border-left: 3px solid var(--amber); border-top: 1px solid rgba(243, 167, 18, 0.15); border-right: 1px solid rgba(243, 167, 18, 0.15); border-bottom: 1px solid rgba(243, 167, 18, 0.15); border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 24px; } .announcement-title { font-size: 0.72rem; font-weight: 900; text-transform: uppercase; letter-spacing: 1.2px; color: var(--amber); margin: 0 0 6px 0; font-family: var(--font-display); } .announcement-text { margin: 0; font-size: 0.88rem; color: var(--text-secondary); line-height: 1.6; } /* 3. Grid & Knoppen voor Uitbetalingen */ .payout-grid-container { display: flex; gap: 12px; flex-wrap: wrap; } .payout-card-button { width: 100%; background: rgba(255, 255, 255, 0.02); border: 1px solid var(--border-hairline); border-radius: var(--radius-md); padding: 16px 12px; display: flex; flex-direction: column; align-items: center; text-align: center; cursor: pointer; transition: all 0.25s var(--ease); } .payout-card-button .payout-icon { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; margin-bottom: 12px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.05); transition: transform 0.3s var(--ease); } .payout-card-button .payout-title { font-family: var(--font-display); font-weight: 800; font-size: 0.88rem; color: var(--text-primary); margin-bottom: 4px; } .payout-card-button .payout-sub { font-size: 0.72rem; color: var(--text-muted); line-height: 1.3; } .payout-card-button:hover { transform: translateY(-2px); background: rgba(255, 255, 255, 0.04); } .payout-card-button:hover .payout-icon { transform: scale(1.1); } /* Button variants */ .payout-card-button.donate:hover { border-color: rgba(241,73,90,0.4); box-shadow: 0 4px 15px rgba(241,73,90,0.1); } .payout-card-button.donate:hover .payout-icon { background: var(--red-soft); color: var(--red); } .payout-card-button.robux:hover { border-color: rgba(45,212,212,0.4); box-shadow: 0 4px 15px rgba(45,212,212,0.1); } .payout-card-button.robux:hover .payout-icon { background: var(--accent-soft); color: var(--accent); } .payout-card-button.assets:hover { border-color: rgba(243,167,18,0.4); box-shadow: 0 4px 15px rgba(243,167,18,0.1); } .payout-card-button.assets:hover .payout-icon { background: var(--amber-soft); color: var(--amber); } /* 4. Premium Afdelingskaarten */ .afdeling-premium-card { position: relative; overflow: hidden; transition: all 0.3s var(--ease); } .afdeling-premium-card:hover { transform: translateY(-4px); border-color: rgba(45, 212, 212, 0.3) !important; box-shadow: 0 6px 20px rgba(0,0,0,0.4); } .afdeling-card-line { position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: var(--border-soft); } .afdeling-card-line.bg-support { background: linear-gradient(90deg, var(--accent), #00bcff); } .afdeling-card-line.bg-marketing { background: linear-gradient(90deg, #ff7b00, #ffae00); } .afdeling-card-line.bg-beoordelaar { background: linear-gradient(90deg, var(--amber), #ffe600); } .card-head-icon.icon-support { color: var(--accent); background: var(--accent-soft); } .card-head-icon.icon-marketing { color: #ff7b00; background: rgba(255,123,0,0.1); border-color: rgba(255,123,0,0.2); } .card-head-icon.icon-beoordelaar { color: var(--amber); background: var(--amber-soft); } .formule-tag { display: inline-flex; align-items: center; font-size: 0.68rem; font-weight: 700; padding: 2px 8px; border-radius: 4px; background: rgba(255,255,255,0.04); color: var(--text-muted); } .formule-tag.formula-support { color: var(--accent); background: var(--accent-soft); } .formule-tag.formula-marketing { color: #ff7b00; background: rgba(255,123,0,0.08); } .afdeling-balance-box { background: rgba(0, 0, 0, 0.25); border: 1px dashed var(--border-hairline); border-radius: var(--radius-md); padding: 16px; text-align: center; margin-bottom: 18px; } .afdeling-balance-box .balance-title { display: block; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); margin-bottom: 4px; } .afdeling-balance-box .balance-value { font-family: var(--font-mono); font-size: 1.8rem; font-weight: 700; color: #fff; } .afdeling-balance-box .balance-unit { color: var(--text-muted); font-size: 1.1rem; margin-right: 4px; } .formula-code-badge { color: var(--accent) !important; font-size: 0.78rem !important; background: var(--accent-soft) !important; padding: 2px 8px !important; border-radius: 4px !important; font-family: var(--font-mono); } /* 5. Transacties & Geschiedenis */ .transaction-table-container { background: rgba(0,0,0,0.1); border-radius: var(--radius-md); } .transaction-row { display: flex; justify-content: space-between; align-items: center; background: rgba(6, 24, 26, 0.4); padding: 14px 20px; border-radius: var(--radius-sm); border: 1px solid var(--border-hairline); transition: all 0.2s var(--ease); } .transaction-row:hover { background: rgba(10, 32, 36, 0.6); border-color: rgba(45, 212, 212, 0.15); } .tx-icon-circle { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.95rem; background: rgba(255,255,255,0.04); } .tx-icon-circle.doneren { color: var(--red); background: var(--red-soft); } .tx-icon-circle.robux { color: var(--accent); background: var(--accent-soft); } .tx-icon-circle.goederen { color: var(--amber); background: var(--amber-soft); } .tx-user-title { color: #fff; display: block; font-size: 0.9rem; font-weight: 700; } .tx-type-text { font-size: 0.85rem; color: var(--text-secondary); display: block; } .tx-date { font-size: 0.72rem; color: var(--text-muted); display: block; margin-top: 2px; } .premium-status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 12px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; } .premium-status-pill.success { background: var(--green-soft); color: var(--green); } .premium-status-pill.pending { background: var(--amber-soft); color: var(--amber); } .tx-delete-btn { background: transparent; border: 1px solid rgba(241,73,90,0.2); color: rgba(241,73,90,0.6); padding: 6px 10px; border-radius: var(--radius-sm); cursor: pointer; transition: all 0.2s; } .tx-delete-btn:hover { background: var(--red-soft); color: var(--red); border-color: var(--red); } /* ═══════════════════════════════════════════════════════════════════ BEOORDELINGEN — NEXT LEVEL UI Medewerker-combobox, medewerker-profiel modal & zoekbalk. Gedeeld door Beoordelingen.ejs & Beoordelingen-beheer.ejs. ═══════════════════════════════════════════════════════════════════ */ /* ─── Zoekbalk (boven de takenlijst) ─── */ .bd-searchbar { position: relative; flex: 1; min-width: 220px; } .bd-searchbar i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 0.82rem; pointer-events: none; } .bd-searchbar input { width: 100%; box-sizing: border-box; background: rgba(0,0,0,.22); border: 1px solid var(--border-hairline); border-radius: 20px; color: var(--text-primary); font-family: var(--font-body); font-size: 0.83rem; padding: 8px 14px 8px 34px; transition: border-color .18s, background .18s; } .bd-searchbar input::placeholder { color: var(--text-muted); } .bd-searchbar input:focus { outline: none; border-color: var(--accent); background: rgba(0,0,0,.32); } .bd-searchbar .bd-searchbar-clear { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 0.78rem; cursor: pointer; display: none; } .bd-searchbar.has-value .bd-searchbar-clear { display: block; } .bd-searchbar .bd-searchbar-clear:hover { color: var(--text-primary); } /* ─── Medewerker score-badge (gemiddelde ster-score) ─── */ .bd-avg-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 0.68rem; font-weight: 800; font-family: var(--font-display); padding: 3px 9px; border-radius: 20px; background: var(--amber-soft); color: var(--amber); border: 1px solid rgba(243,167,18,.28); } .bd-avg-badge i { font-size: 0.65rem; } .bd-avg-badge.empty { background: rgba(255,255,255,.04); color: var(--text-muted); border-color: var(--border-hairline); } /* ─── Combobox (medewerker / beoordelaar selectie) ─── */ .bd-combo { position: relative; } .bd-combo-trigger { width: 100%; box-sizing: border-box; display: flex; align-items: center; gap: 10px; background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.09); border-radius: var(--radius-sm); color: var(--text-primary); font-family: var(--font-body); font-size: 0.88rem; text-align: left; padding: 9px 12px; cursor: pointer; transition: border-color .18s, box-shadow .18s; } .bd-combo-trigger:hover { border-color: var(--border-soft); } .bd-combo.open .bd-combo-trigger { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .bd-combo-trigger-empty { color: var(--text-muted); } .bd-combo-trigger .bd-combo-av, .bd-combo-trigger .bd-combo-av-fb { width: 24px; height: 24px; font-size: 0.62rem; flex-shrink: 0; } .bd-combo-trigger-info { display: flex; flex-direction: column; min-width: 0; flex: 1; } .bd-combo-trigger-naam { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bd-combo-trigger-sub { font-size: 0.68rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bd-combo-trigger .fa-chevron-down { margin-left: auto; font-size: 0.7rem; color: var(--text-muted); transition: transform .18s; flex-shrink: 0; } .bd-combo.open .bd-combo-trigger .fa-chevron-down { transform: rotate(180deg); } .bd-combo-panel { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 60; background: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: var(--radius-md); box-shadow: 0 16px 40px rgba(0,0,0,.45); opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .16s var(--ease), transform .16s var(--ease); overflow: hidden; } .bd-combo.open .bd-combo-panel { opacity: 1; transform: translateY(0); pointer-events: all; } .bd-combo-search { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border-hairline); } .bd-combo-search i { color: var(--text-muted); font-size: 0.78rem; } .bd-combo-search input { flex: 1; background: none; border: none; outline: none; color: var(--text-primary); font-family: var(--font-body); font-size: 0.85rem; } .bd-combo-search input::placeholder { color: var(--text-muted); } .bd-combo-list { max-height: 260px; overflow-y: auto; padding: 6px; } .bd-combo-option { display: flex; align-items: center; gap: 10px; padding: 8px 9px; border-radius: var(--radius-sm); cursor: pointer; transition: background .12s; } .bd-combo-option:hover, .bd-combo-option.highlighted { background: var(--accent-soft); } .bd-combo-option.selected { background: rgba(37,214,214,.14); } .bd-combo-av { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border-soft); flex-shrink: 0; } .bd-combo-av-fb { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; background: var(--amber-soft); border: 2px solid rgba(243,167,18,.3); display: flex; align-items: center; justify-content: center; font-size: 0.78rem; font-weight: 900; color: var(--amber); } .bd-combo-info { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: 1px; } .bd-combo-naam { font-size: 0.85rem; font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bd-combo-meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .bd-combo-functie { font-size: 0.68rem; color: var(--accent); font-weight: 700; } .bd-combo-afdeling { font-size: 0.68rem; color: var(--text-muted); } .bd-combo-afdeling::before { content: '·'; margin-right: 6px; color: var(--text-muted); } .bd-combo-functie + .bd-combo-afdeling::before { content: '·'; } .bd-combo-openaantal { font-size: 0.66rem; font-weight: 800; color: var(--text-muted); background: rgba(255,255,255,.05); border-radius: 10px; padding: 1px 7px; flex-shrink: 0; } .bd-combo-check { color: var(--accent); font-size: 0.78rem; opacity: 0; flex-shrink: 0; } .bd-combo-option.selected .bd-combo-check { opacity: 1; } .bd-combo-empty { padding: 18px 10px; text-align: center; font-size: 0.8rem; color: var(--text-muted); } /* ─── Geselecteerde-medewerker previewkaart (in het aanmaak-formulier) ─── */ .bd-medewerker-preview { display: flex; align-items: center; gap: 12px; background: rgba(0,0,0,.2); border: 1px dashed var(--border-hairline); border-radius: var(--radius-md); padding: 12px 14px; margin-top: 10px; display: none; } .bd-medewerker-preview.visible { display: flex; } .bd-medewerker-preview .bd-combo-av, .bd-medewerker-preview .bd-combo-av-fb { width: 42px; height: 42px; font-size: 1rem; } .bd-medewerker-preview-info { flex: 1; min-width: 0; } .bd-medewerker-preview-naam { font-family: var(--font-display); font-weight: 800; font-size: 0.92rem; color: var(--text-primary); } .bd-medewerker-preview-sub { font-size: 0.75rem; color: var(--text-muted); margin-top: 2px; } .bd-medewerker-preview-btn { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; background: var(--violet-soft); border: 1px solid rgba(168,85,247,.3); color: var(--violet); font-size: 0.76rem; font-weight: 700; padding: 7px 12px; border-radius: var(--radius-sm); cursor: pointer; transition: all .15s; } .bd-medewerker-preview-btn:hover { background: var(--violet); color: #fff; } /* ─── Kleine "geschiedenis"-actieknop (icon-only, o.a. in beheerkaarten) ─── */ .bd-history-btn { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.03); border: 1px solid var(--border-soft); color: var(--text-secondary); font-size: 0.74rem; font-weight: 700; padding: 6px 11px; border-radius: var(--radius-sm); cursor: pointer; transition: all .15s; } .bd-history-btn:hover { background: var(--violet-soft); border-color: rgba(168,85,247,.3); color: var(--violet); } /* ─── Medewerker-profiel modal ─── */ .bd-profiel-header { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; } .bd-profiel-avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border-soft); flex-shrink: 0; } .bd-profiel-avatar-fb { width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0; background: var(--amber-soft); border: 2px solid rgba(243,167,18,.3); display: flex; align-items: center; justify-content: center; font-size: 1.35rem; font-weight: 900; color: var(--amber); } .bd-profiel-naam { font-family: var(--font-display); font-weight: 900; font-size: 1.1rem; color: var(--text-primary); } .bd-profiel-sub { font-size: 0.8rem; color: var(--text-muted); margin-top: 2px; } .bd-profiel-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 10px; margin-bottom: 18px; } .bd-profiel-stat { background: rgba(0,0,0,.22); border: 1px solid var(--border-hairline); border-radius: var(--radius-sm); padding: 10px 12px; text-align: center; } .bd-profiel-stat .v { font-family: var(--font-display); font-weight: 900; font-size: 1.25rem; color: var(--text-primary); line-height: 1; } .bd-profiel-stat .l { font-size: 0.62rem; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); font-weight: 800; margin-top: 5px; display: block; } .bd-profiel-stat.amber .v { color: var(--amber); } .bd-profiel-stat.green .v { color: var(--green); } .bd-profiel-stat.red .v { color: var(--red); } .bd-profiel-bars { margin-bottom: 20px; } .bd-profiel-bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .bd-profiel-bar-label { flex: 0 0 150px; font-size: 0.78rem; color: var(--text-secondary); } .bd-profiel-bar-track { flex: 1; height: 7px; background: rgba(255,255,255,.06); border-radius: 20px; overflow: hidden; } .bd-profiel-bar-fill { height: 100%; background: linear-gradient(90deg, var(--amber), #ffce6b); border-radius: 20px; transition: width .4s var(--ease); } .bd-profiel-bar-val { flex: 0 0 32px; text-align: right; font-size: 0.76rem; font-weight: 800; color: var(--text-muted); font-family: var(--font-mono); } .bd-profiel-list-label { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: var(--text-muted); margin: 0 0 10px; } .bd-profiel-empty { text-align: center; padding: 24px 10px; color: var(--text-muted); font-size: 0.85rem; } .bd-profiel-loading { text-align: center; padding: 30px 10px; color: var(--text-muted); font-size: 0.85rem; } .bd-profiel-loading i { display: block; font-size: 1.4rem; margin-bottom: 8px; animation: bd-spin 0.9s linear infinite; } @keyframes bd-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ─── Medewerker-profiel modal: geschiedenislijst per ingediende beoordeling ─── NIEUW: ontbrak volledig. buildProfielHtml() in Beoordelingen-beheer.ejs genereerde deze classes al, maar zonder opmaak (elders alleen page-scoped gedefinieerd in Beoordelingen.ejs, niet gedeeld via style.css). ─── */ .bd-geschiedenis-item { background: rgba(255,255,255,.02); border: 1px solid var(--border-hairline); border-radius: var(--radius-sm); padding: 11px 14px; margin-bottom: 9px; } .bd-geschiedenis-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .bd-geschiedenis-meta { flex: 1; min-width: 140px; display: flex; gap: 18px; flex-wrap: wrap; font-size: 0.8rem; } .bd-geschiedenis-meta .k { color: var(--text-muted); font-size: 0.68rem; text-transform: uppercase; letter-spacing: .5px; display: block; } .bd-geschiedenis-meta .v { color: var(--text-primary); font-weight: 700; } .bd-geschiedenis-detail { display: none; width: 100%; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-hairline-2); } .bd-geschiedenis-detail.open { display: block; } .bd-gd-crit { display: flex; justify-content: space-between; align-items: center; font-size: 0.78rem; margin-bottom: 6px; color: var(--text-secondary); } .bd-gd-opm { font-size: 0.76rem; color: var(--text-muted); margin: 2px 0 10px; padding-left: 2px; line-height: 1.5; } /* Losstaande sterren-mini (los van .bd-score-row, o.a. in de profiel-modal) */ .stars-mini { display: inline-flex; gap: 2px; } .stars-mini i { color: rgba(255,255,255,.15); font-size: 0.78rem; } .stars-mini i.active { color: var(--amber); } /* "Klaar voor live" / "Meer training nodig"-vlaggen in de profiel-modal */ .bd-gd-flag { display: inline-flex; align-items: center; gap: 6px; font-size: 0.72rem; font-weight: 700; padding: 5px 10px; border-radius: var(--radius-sm); margin-top: 8px; margin-right: 6px; } .bd-gd-flag.live { background: var(--green-soft); color: var(--green); border: 1px solid rgba(22,201,138,.3); } .bd-gd-flag.training { background: var(--amber-soft); color: var(--amber); border: 1px solid rgba(243,167,18,.3); } /* ═══════════════════════════════════════════════════════════════════ DASHBOARD v4 — RESTYLE Verfijnde look voor het dashboard: zachtere diepte, duidelijkere hiërarchie, subtiele hover-motion. Additief bovenop de bestaande design tokens — geen bestaande classes worden verwijderd. ═══════════════════════════════════════════════════════════════════ */ /* ─── Kaarten krijgen wat meer leven ─── */ .card { transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease); } .welcome-grid .card:hover, .dashboard-triple-grid .card:hover { border-color: var(--border-strong); } /* ─── Welkomstkaart: zacht stralend mesh op de achtergrond ─── */ .welcome-card { overflow: hidden; } .welcome-card::after { content: ''; position: absolute; inset: 0; background: radial-gradient(420px 260px at 92% -10%, rgba(37, 214, 214, 0.10), transparent 65%), radial-gradient(320px 220px at -5% 115%, rgba(168, 85, 247, 0.07), transparent 65%); pointer-events: none; z-index: 0; } .welcome-card > * { position: relative; z-index: 1; } .welcome-avatar-wrapper { position: relative; } .welcome-avatar-wrapper::before { content: ''; position: absolute; inset: -4px; border-radius: 50%; background: conic-gradient(from 0deg, var(--accent), var(--violet), var(--accent)); opacity: .55; animation: dashRingSpin 6s linear infinite; z-index: -1; } @keyframes dashRingSpin { to { transform: rotate(360deg); } } .mini-stat-tile { transition: transform .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease); } .mini-stat-tile:hover { transform: translateY(-2px); background: rgba(255,255,255,0.02); } .btn-action-quick { transition: transform .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease), color .18s var(--ease); } .btn-action-quick:hover { transform: translateY(-2px); } .activity-row { transition: background .18s var(--ease); border-radius: var(--radius-sm); } .activity-row:hover { background: rgba(255,255,255,0.025); } /* ─── Kolomkaarten: subtiele top-accent per kaarttype ─── */ .dashboard-triple-grid .card { position: relative; } .news-item, .event-timeline-item { transition: transform .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease); } .news-item:hover, .event-timeline-item:hover { transform: translateX(2px); } /* ─── MVDM kaart: net iets meer glans ─── */ .mvdm-card { position: relative; overflow: hidden; } .mvdm-avatar-glow img { transition: transform .3s var(--ease); } .mvdm-card:hover .mvdm-avatar-glow img { transform: scale(1.04); } /* ═══════════════════════════════════════════════════════════════════ BEOORDELINGEN — Klikbare samenvattingskaart + browse-modal Op het dashboard tonen we alleen een compacte samenvatting; de volledige, doorbladerbare lijst met details opent in een modal. Beoordelaar-identiteit en eindoordeel (klaar voor live / meer training) worden hier bewust nooit getoond — die data komt de server sowieso niet eens uit (zie route-selectie in pagina.js). ═══════════════════════════════════════════════════════════════════ */ .beo-summary-card { cursor: pointer; user-select: none; } .beo-summary-card:hover { border-color: rgba(243,167,18,.4); box-shadow: var(--shadow-card), 0 0 0 1px rgba(243,167,18,.08); } .beo-summary-card:active { transform: scale(0.995); } .beo-summary-latest { background: rgba(0,0,0,0.18); border: 1px solid var(--border-hairline-2); border-left: 3px solid var(--amber); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 13px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .beo-summary-latest-info strong { color: var(--text-primary); font-size: 0.9rem; display: block; } .beo-summary-latest-info span { font-size: 0.75rem; color: var(--text-muted); } .beo-summary-latest-score { display: flex; align-items: center; gap: 6px; flex-shrink: 0; font-family: var(--font-display); font-weight: 900; color: var(--amber); } .beo-summary-cta { margin-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 0.8rem; color: var(--text-muted); padding-top: 12px; border-top: 1px solid var(--border-hairline-2); transition: color .18s var(--ease); } .beo-summary-card:hover .beo-summary-cta { color: var(--amber); } .beo-summary-cta i.fa-chevron-right { transition: transform .18s var(--ease); } .beo-summary-card:hover .beo-summary-cta i.fa-chevron-right { transform: translateX(3px); } /* ─── Modal ─── */ .modal-backdrop.show { display: flex; } .beo-modal-box { max-width: 640px; padding: 0; display: flex; flex-direction: column; max-height: 82vh; } .beo-modal-header { display: flex; align-items: center; gap: 13px; padding: 22px 24px 18px; border-bottom: 1px solid var(--border-hairline); flex-shrink: 0; } .beo-modal-header-title { flex: 1; min-width: 0; } .beo-modal-header-title h3 { font-size: 1.05rem; font-weight: 800; } .beo-modal-header-title p { margin: 3px 0 0; font-size: 0.8rem; color: var(--text-muted); } .beo-modal-close { flex-shrink: 0; width: 32px; height: 32px; border-radius: 8px; background: rgba(255,255,255,0.04); border: 1px solid var(--border-hairline); color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .15s var(--ease); font-size: 0.85rem; } .beo-modal-close:hover { background: var(--red-soft); color: var(--red); border-color: rgba(241,73,90,.3); } .beo-modal-list { overflow-y: auto; padding: 16px 24px 24px; display: flex; flex-direction: column; gap: 10px; } .beo-modal-item { background: rgba(0,0,0,0.18); border: 1px solid var(--border-hairline-2); border-radius: var(--radius-sm); overflow: hidden; transition: border-color .18s var(--ease); } .beo-modal-item.latest { border-left: 3px solid var(--amber); } .beo-modal-item:hover { border-color: var(--border-soft); } .beo-modal-item-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 14px; cursor: pointer; user-select: none; flex-wrap: wrap; } .beo-modal-item-titel { color: var(--text-primary); font-size: 0.9rem; font-weight: 700; } .beo-modal-item-datum { font-size: 0.74rem; color: var(--text-muted); margin-top: 2px; } .beo-modal-item-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .beo-modal-item-score { font-size: 0.76rem; color: var(--text-muted); } .beo-modal-item-score .stars i { color: var(--amber); font-size: 0.7rem; margin-right: 1px; } .beo-modal-item-chevron { color: var(--text-muted); font-size: 0.78rem; transition: transform .2s var(--ease); } .beo-modal-item.open .beo-modal-item-chevron { transform: rotate(180deg); color: var(--amber); } .beo-modal-item-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s var(--ease); } .beo-modal-item.open .beo-modal-item-body { grid-template-rows: 1fr; } .beo-modal-item-body-inner { overflow: hidden; } .beo-modal-item-body-content { padding: 0 14px 14px; border-top: 1px solid var(--border-hairline-2); padding-top: 12px; margin-top: -1px; } .beo-crit-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; margin-bottom: 5px; } .beo-crit-row .naam { color: var(--text-secondary); } .beo-crit-row .stars i { color: var(--amber); font-size: 0.68rem; margin-right: 1px; } .beo-crit-opm { margin: 0 0 8px; font-size: 0.75rem; color: var(--text-muted); padding-left: 2px; line-height: 1.5; } .beo-extra-quote { margin: 10px 0 0; font-size: 0.81rem; color: var(--text-secondary); border-top: 1px solid var(--border-hairline); padding-top: 9px; line-height: 1.5; } .beo-extra-quote i { color: var(--accent); margin-right: 5px; font-size: 0.72rem; } .beo-modal-empty { text-align: center; padding: 40px 20px; color: var(--text-muted); font-size: 0.9rem; } .beo-modal-empty i { display: block; font-size: 1.8rem; margin-bottom: 10px; opacity: .5; } /* ══════════════════════════════════════════════════ RICH TEXT EDITOR (.rte) — vet/cursief/meerdere regels voor de opmerkingenvelden bij Beoordelingen ══════════════════════════════════════════════════ */ .rte { border: 1px solid var(--border-hairline); border-radius: var(--radius-sm); background: rgba(0,0,0,.22); overflow: hidden; transition: border-color .15s, box-shadow .15s; } .rte:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .rte-toolbar { display: flex; gap: 4px; padding: 6px 7px; border-bottom: 1px solid var(--border-hairline); background: rgba(255,255,255,.02); } .rte-btn { width: 28px; height: 26px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border-hairline); background: rgba(255,255,255,.03); color: var(--text-secondary); border-radius: 6px; font-size: 0.72rem; cursor: pointer; transition: all .15s; } .rte-btn:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); } .rte-btn.active { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); } .rte-input { min-height: 40px; max-height: 200px; overflow-y: auto; padding: 9px 12px; font-size: 0.85rem; line-height: 1.5; color: var(--text-primary); font-family: inherit; outline: none; white-space: pre-wrap; word-wrap: break-word; } .rte-input-lg { min-height: 70px; } .rte-input:empty:before { content: attr(data-placeholder); color: var(--text-muted); pointer-events: none; } .rte-input b, .rte-input strong { font-weight: 800; color: var(--text-primary); } .rte-input i, .rte-input em { font-style: italic; } /* Weergave van opgeslagen rich-text (read-only, o.a. in geschiedenis/beheer) */ .bd-score-opm b, .bd-score-opm strong, .bd-gd-opm b, .bd-gd-opm strong { font-weight: 800; } .bd-score-opm i, .bd-score-opm em, .bd-gd-opm i, .bd-gd-opm em { font-style: italic; } /* ═══════════════════════════════════════════════════════════════════ V4 — PROFIEL-DROPDOWN (.user-menu) Vervangt/verrijkt de statische .topbar-user: een klikbaar profiel met foto, statusdot, rol-badge, thema-switcher en menu-items. Werkt met elk thema zonder aanpassing (alles via var(--token)). ── Benodigde HTML (bv. in partials/header.ejs) ── ── Benodigde JS (eenmalig, bv. onderaan je layout) ── (function () { var root = document.documentElement; var saved = localStorage.getItem('vxt-theme') || 'dark'; root.setAttribute('data-theme', saved); var menu = document.getElementById('user-menu'); var trigger = document.getElementById('user-menu-trigger'); var panel = document.getElementById('user-menu-panel'); if (trigger && panel) { trigger.addEventListener('click', function (e) { e.stopPropagation(); var open = menu.classList.toggle('open'); trigger.setAttribute('aria-expanded', open ? 'true' : 'false'); }); document.addEventListener('click', function (e) { if (!menu.contains(e.target)) { menu.classList.remove('open'); trigger.setAttribute('aria-expanded', 'false'); } }); document.addEventListener('keydown', function (e) { if (e.key === 'Escape') { menu.classList.remove('open'); trigger.setAttribute('aria-expanded', 'false'); } }); } document.querySelectorAll('.theme-switch-btn').forEach(function (btn) { btn.classList.toggle('active', btn.dataset.themeChoice === saved); btn.addEventListener('click', function () { var choice = btn.dataset.themeChoice; root.setAttribute('data-theme', choice); localStorage.setItem('vxt-theme', choice); document.querySelectorAll('.theme-switch-btn').forEach(function (b) { b.classList.toggle('active', b === btn); }); }); }); })(); Tip: zet het eerste blokje (data-theme uit localStorage zetten) het liefst als klein inline