/* Shared tokens and components for the Apointly CRM screens, following style-guide.txt / style-guide.html (violet/indigo, light + dark). */ :root { --bg-app: #FBFBFE; --bg-card: #FFFFFF; --bg-subtle: #F3E8FF; --bg-hover: #F8F5FF; --text-primary: #1E1B4B; --text-secondary: #4C1D95; --text-muted: #94A3B8; --text-on-primary: #FFFFFF; --border-color: #E9D5FF; --border-focus: #C084FC; --primary: #7C3AED; --primary-hover: #6D28D9; --primary-light: #F3E8FF; --status-succes-text: #047857; --status-succes-bg: #ECFDF5; --status-succes-border: #A7F3D0; --status-warning-text: #B45309; --status-warning-bg: #FFFBEB; --status-warning-border: #FDE68A; --status-danger-text: #B91C1C; --status-danger-bg: #FEF2F2; --status-danger-border: #FECACA; --radius-card: 12px; --radius-input: 8px; --radius-full: 9999px; --shadow-card: 0 1px 3px 0 rgba(124, 58, 237, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.05); --shadow-elevated: 0 10px 15px -3px rgba(124, 58, 237, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.05); --font-sans: 'Inter', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg-app: #100B22; --bg-card: #191330; --bg-subtle: #2C2153; --bg-hover: #211A3D; --text-primary: #F5F3FF; --text-secondary: #C4B5FD; --text-muted: #8B85A6; --text-on-primary: #100B22; --border-color: #34294F; --border-focus: #A78BFA; --primary: #8B5CF6; --primary-hover: #A78BFA; --primary-light: #2C2153; --status-succes-text: #6EE7B7; --status-succes-bg: #08251C; --status-succes-border: #115E43; --status-warning-text: #FCD34D; --status-warning-bg: #2B2108; --status-warning-border: #7C5710; --status-danger-text: #FCA5A5; --status-danger-bg: #2B1212; --status-danger-border: #7F1D1D; --shadow-card: 0 1px 2px 0 rgba(0, 0, 0, 0.5); --shadow-elevated: 0 12px 24px -6px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(139, 92, 246, 0.12); } } :root[data-theme="dark"] { --bg-app: #100B22; --bg-card: #191330; --bg-subtle: #2C2153; --bg-hover: #211A3D; --text-primary: #F5F3FF; --text-secondary: #C4B5FD; --text-muted: #8B85A6; --text-on-primary: #100B22; --border-color: #34294F; --border-focus: #A78BFA; --primary: #8B5CF6; --primary-hover: #A78BFA; --primary-light: #2C2153; --status-succes-text: #6EE7B7; --status-succes-bg: #08251C; --status-succes-border: #115E43; --status-warning-text: #FCD34D; --status-warning-bg: #2B2108; --status-warning-border: #7C5710; --status-danger-text: #FCA5A5; --status-danger-bg: #2B1212; --status-danger-border: #7F1D1D; --shadow-card: 0 1px 2px 0 rgba(0, 0, 0, 0.5); --shadow-elevated: 0 12px 24px -6px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(139, 92, 246, 0.12); } /* --- Kleurthema's: elk hieronder is een variant van dezelfde tokens hierboven (die zelf "paars", de standaard, blijven), geselecteerd via [data-kleurthema] op (zie internal/server.Chrome). Status-tokens (succes/warning/danger) zijn semantisch en blijven ongewijzigd — alleen de merk-/achtergrondkleuren wisselen per thema. Elk thema heeft dezelfde drie blokken als paars hierboven: licht (default), volgt-systeem-donker, en expliciet donker. */ [data-kleurthema="blauw"] { --bg-app: #FBFDFE; --bg-card: #FFFFFF; --bg-subtle: #DBEAFE; --bg-hover: #EFF6FF; --text-primary: #172554; --text-secondary: #1E3A8A; --text-muted: #94A3B8; --text-on-primary: #FFFFFF; --border-color: #BFDBFE; --border-focus: #60A5FA; --primary: #2563EB; --primary-hover: #1D4ED8; --primary-light: #DBEAFE; --shadow-card: 0 1px 3px 0 rgba(37, 99, 235, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.05); --shadow-elevated: 0 10px 15px -3px rgba(37, 99, 235, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.05); } @media (prefers-color-scheme: dark) { [data-kleurthema="blauw"]:not([data-theme="light"]) { --bg-app: #0A1220; --bg-card: #131E33; --bg-subtle: #1E3358; --bg-hover: #16233F; --text-primary: #EFF6FF; --text-secondary: #93C5FD; --text-muted: #7F8FAE; --text-on-primary: #0A1220; --border-color: #24365A; --border-focus: #60A5FA; --primary: #3B82F6; --primary-hover: #60A5FA; --primary-light: #1E3358; --shadow-card: 0 1px 2px 0 rgba(0, 0, 0, 0.5); --shadow-elevated: 0 12px 24px -6px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(59, 130, 246, 0.12); } } [data-kleurthema="blauw"][data-theme="dark"] { --bg-app: #0A1220; --bg-card: #131E33; --bg-subtle: #1E3358; --bg-hover: #16233F; --text-primary: #EFF6FF; --text-secondary: #93C5FD; --text-muted: #7F8FAE; --text-on-primary: #0A1220; --border-color: #24365A; --border-focus: #60A5FA; --primary: #3B82F6; --primary-hover: #60A5FA; --primary-light: #1E3358; --shadow-card: 0 1px 2px 0 rgba(0, 0, 0, 0.5); --shadow-elevated: 0 12px 24px -6px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(59, 130, 246, 0.12); } [data-kleurthema="groen"] { --bg-app: #FBFEFC; --bg-card: #FFFFFF; --bg-subtle: #D1FAE5; --bg-hover: #ECFDF5; --text-primary: #022C22; --text-secondary: #065F46; --text-muted: #94A3B8; --text-on-primary: #FFFFFF; --border-color: #A7F3D0; --border-focus: #34D399; --primary: #059669; --primary-hover: #047857; --primary-light: #D1FAE5; --shadow-card: 0 1px 3px 0 rgba(5, 150, 105, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.05); --shadow-elevated: 0 10px 15px -3px rgba(5, 150, 105, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.05); } @media (prefers-color-scheme: dark) { [data-kleurthema="groen"]:not([data-theme="light"]) { --bg-app: #08170F; --bg-card: #0F2A1B; --bg-subtle: #123B26; --bg-hover: #0D2115; --text-primary: #ECFDF5; --text-secondary: #6EE7B7; --text-muted: #7FA396; --text-on-primary: #08170F; --border-color: #1B4230; --border-focus: #34D399; --primary: #10B981; --primary-hover: #34D399; --primary-light: #123B26; --shadow-card: 0 1px 2px 0 rgba(0, 0, 0, 0.5); --shadow-elevated: 0 12px 24px -6px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(16, 185, 129, 0.12); } } [data-kleurthema="groen"][data-theme="dark"] { --bg-app: #08170F; --bg-card: #0F2A1B; --bg-subtle: #123B26; --bg-hover: #0D2115; --text-primary: #ECFDF5; --text-secondary: #6EE7B7; --text-muted: #7FA396; --text-on-primary: #08170F; --border-color: #1B4230; --border-focus: #34D399; --primary: #10B981; --primary-hover: #34D399; --primary-light: #123B26; --shadow-card: 0 1px 2px 0 rgba(0, 0, 0, 0.5); --shadow-elevated: 0 12px 24px -6px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(16, 185, 129, 0.12); } [data-kleurthema="amber"] { --bg-app: #FFFDFA; --bg-card: #FFFFFF; --bg-subtle: #FEF3C7; --bg-hover: #FFFBEB; --text-primary: #451A03; --text-secondary: #92400E; --text-muted: #9C9284; --text-on-primary: #FFFFFF; --border-color: #FDE68A; --border-focus: #FBBF24; --primary: #D97706; --primary-hover: #B45309; --primary-light: #FEF3C7; --shadow-card: 0 1px 3px 0 rgba(217, 119, 6, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.05); --shadow-elevated: 0 10px 15px -3px rgba(217, 119, 6, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.05); } @media (prefers-color-scheme: dark) { [data-kleurthema="amber"]:not([data-theme="light"]) { --bg-app: #1A1206; --bg-card: #2B1F0D; --bg-subtle: #3D2C0F; --bg-hover: #241A09; --text-primary: #FFFBEB; --text-secondary: #FCD34D; --text-muted: #A99A7E; --text-on-primary: #1A1206; --border-color: #4A3717; --border-focus: #FBBF24; --primary: #F59E0B; --primary-hover: #FBBF24; --primary-light: #3D2C0F; --shadow-card: 0 1px 2px 0 rgba(0, 0, 0, 0.5); --shadow-elevated: 0 12px 24px -6px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(245, 158, 11, 0.12); } } [data-kleurthema="amber"][data-theme="dark"] { --bg-app: #1A1206; --bg-card: #2B1F0D; --bg-subtle: #3D2C0F; --bg-hover: #241A09; --text-primary: #FFFBEB; --text-secondary: #FCD34D; --text-muted: #A99A7E; --text-on-primary: #1A1206; --border-color: #4A3717; --border-focus: #FBBF24; --primary: #F59E0B; --primary-hover: #FBBF24; --primary-light: #3D2C0F; --shadow-card: 0 1px 2px 0 rgba(0, 0, 0, 0.5); --shadow-elevated: 0 12px 24px -6px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(245, 158, 11, 0.12); } [data-kleurthema="rood"] { --bg-app: #FFFDFD; --bg-card: #FFFFFF; --bg-subtle: #FFE4E6; --bg-hover: #FFF1F2; --text-primary: #4C0519; --text-secondary: #9F1239; --text-muted: #9C939A; --text-on-primary: #FFFFFF; --border-color: #FECDD3; --border-focus: #FB7185; --primary: #E11D48; --primary-hover: #BE123C; --primary-light: #FFE4E6; --shadow-card: 0 1px 3px 0 rgba(225, 29, 72, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.05); --shadow-elevated: 0 10px 15px -3px rgba(225, 29, 72, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.05); } @media (prefers-color-scheme: dark) { [data-kleurthema="rood"]:not([data-theme="light"]) { --bg-app: #1B0910; --bg-card: #2C1119; --bg-subtle: #3D1A25; --bg-hover: #241014; --text-primary: #FFF1F2; --text-secondary: #FDA4AF; --text-muted: #A98D95; --text-on-primary: #1B0910; --border-color: #4A1F2A; --border-focus: #FB7185; --primary: #F43F5E; --primary-hover: #FB7185; --primary-light: #3D1A25; --shadow-card: 0 1px 2px 0 rgba(0, 0, 0, 0.5); --shadow-elevated: 0 12px 24px -6px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(244, 63, 94, 0.12); } } [data-kleurthema="rood"][data-theme="dark"] { --bg-app: #1B0910; --bg-card: #2C1119; --bg-subtle: #3D1A25; --bg-hover: #241014; --text-primary: #FFF1F2; --text-secondary: #FDA4AF; --text-muted: #A98D95; --text-on-primary: #1B0910; --border-color: #4A1F2A; --border-focus: #FB7185; --primary: #F43F5E; --primary-hover: #FB7185; --primary-light: #3D1A25; --shadow-card: 0 1px 2px 0 rgba(0, 0, 0, 0.5); --shadow-elevated: 0 12px 24px -6px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(244, 63, 94, 0.12); } [data-kleurthema="teal"] { --bg-app: #FAFEFE; --bg-card: #FFFFFF; --bg-subtle: #CCFBF1; --bg-hover: #F0FDFA; --text-primary: #042F2E; --text-secondary: #115E59; --text-muted: #94A3B8; --text-on-primary: #FFFFFF; --border-color: #99F6E4; --border-focus: #2DD4BF; --primary: #0D9488; --primary-hover: #0F766E; --primary-light: #CCFBF1; --shadow-card: 0 1px 3px 0 rgba(13, 148, 136, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.05); --shadow-elevated: 0 10px 15px -3px rgba(13, 148, 136, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.05); } @media (prefers-color-scheme: dark) { [data-kleurthema="teal"]:not([data-theme="light"]) { --bg-app: #071716; --bg-card: #0E2624; --bg-subtle: #123A36; --bg-hover: #0B1E1C; --text-primary: #F0FDFA; --text-secondary: #5EEAD4; --text-muted: #7FA3A0; --text-on-primary: #071716; --border-color: #1B4440; --border-focus: #2DD4BF; --primary: #14B8A6; --primary-hover: #2DD4BF; --primary-light: #123A36; --shadow-card: 0 1px 2px 0 rgba(0, 0, 0, 0.5); --shadow-elevated: 0 12px 24px -6px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(20, 184, 166, 0.12); } } [data-kleurthema="teal"][data-theme="dark"] { --bg-app: #071716; --bg-card: #0E2624; --bg-subtle: #123A36; --bg-hover: #0B1E1C; --text-primary: #F0FDFA; --text-secondary: #5EEAD4; --text-muted: #7FA3A0; --text-on-primary: #071716; --border-color: #1B4440; --border-focus: #2DD4BF; --primary: #14B8A6; --primary-hover: #2DD4BF; --primary-light: #123A36; --shadow-card: 0 1px 2px 0 rgba(0, 0, 0, 0.5); --shadow-elevated: 0 12px 24px -6px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(20, 184, 166, 0.12); } * { box-sizing: border-box; } ::selection { background: var(--primary-light); color: var(--text-primary); } /* Reserveert altijd ruimte voor de verticale scrollbalk, ongeacht of de pagina op dit moment lang genoeg is om 'm nodig te hebben. Zonder dit verschuift .app-shell's margin:0 auto-centrering zichtbaar zodra een scherm met wisselende inhoud (bijv. een tabblad dat langer is dan de andere) de balk laat verschijnen/verdwijnen — scrollbar-gutter:stable is de moderne oplossing, overflow-y:scroll de fallback voor browsers die scrollbar-gutter nog niet kennen. */ html { overflow-y: scroll; scrollbar-gutter: stable; } body { background: var(--bg-app); color: var(--text-primary); font-family: var(--font-sans); line-height: 1.5; -webkit-font-smoothing: antialiased; margin: 0; } a { color: var(--primary); } a:hover { color: var(--primary-hover); } :focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; border-radius: 4px; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } .app-shell { max-width: 1360px; margin: 0 auto; padding: clamp(1.25rem, 4vw, 2.5rem) clamp(1rem, 3vw, 2rem) 2rem; } header.hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; flex-wrap: wrap; border-bottom: 1px solid var(--border-color); padding-bottom: 1.6rem; margin-bottom: 1.8rem; } .eyebrow { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--primary); margin: 0 0 0.55rem; } h1 { font-size: 1.9rem; font-weight: 800; letter-spacing: -0.015em; margin: 0 0 0.5rem; text-wrap: balance; } .dek { color: var(--text-secondary); font-size: 0.95rem; max-width: 52ch; margin: 0; } .hero-meta { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-muted); text-align: right; line-height: 1.7; display: flex; flex-direction: column; align-items: flex-end; gap: 0.6rem; } .hero-toolbar { display: flex; align-items: center; gap: 0.5rem; } /* "AI actief"-lampje: knippert groen zolang de voice/chat-agent van deze tenant recent een tool-endpoint heeft aangeroepen, zie ai-status.js. */ .ai-status { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-sans); font-size: 0.78rem; font-weight: 500; color: var(--text-muted); padding: 0.3rem 0.7rem; border-radius: 999px; border: 1px solid var(--border-color); background: var(--bg-subtle); transition: color 200ms ease, border-color 200ms ease, background 200ms ease; } .ai-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); flex: none; transition: background 200ms ease; } .ai-status.is-active { color: var(--status-succes-text); border-color: var(--status-succes-border); background: var(--status-succes-bg); } .ai-status.is-active .ai-status-dot { background: var(--status-succes-text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--status-succes-text) 25%, transparent); animation: ai-status-knipper 1s ease-in-out infinite; } @keyframes ai-status-knipper { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } @media (prefers-reduced-motion: reduce) { .ai-status.is-active .ai-status-dot { animation: none; } } .lang-switch { display: inline-flex; gap: 0.2rem; padding: 0.2rem; background: var(--bg-subtle); border-radius: var(--radius-full); } .lang-pill { font-family: var(--font-sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; color: var(--text-secondary); background: none; border: none; border-radius: var(--radius-full); padding: 0.3rem 0.65rem; cursor: pointer; } .lang-pill:hover { color: var(--text-primary); } .lang-pill.is-active { background: var(--bg-card); color: var(--primary); box-shadow: var(--shadow-card); cursor: default; } .theme-toggle-btn { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; background: var(--bg-subtle); color: var(--text-secondary); border: none; border-radius: var(--radius-full); cursor: pointer; } .theme-toggle-btn:hover { color: var(--primary); } .theme-toggle-btn:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; } .layout { display: grid; grid-template-columns: 1fr 320px; gap: 1.4rem; align-items: start; } @media (max-width: 900px) { .layout { grid-template-columns: 1fr; } .summary-col { position: static !important; } } .main-col { display: flex; flex-direction: column; gap: 1.2rem; } .summary-col { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 1rem; } .card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 1.4rem 1.5rem; } .card-title { font-size: 1rem; font-weight: 700; margin: 0 0 1rem; } .card-title-row { display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; margin-bottom: 0.3rem; } .menu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; } .menu-tile { display: flex; flex-direction: column; align-items: center; gap: 0.8rem; text-align: center; text-decoration: none; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 1.7rem 1rem; font-family: var(--font-sans); color: var(--text-primary); cursor: pointer; position: relative; transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease; } .menu-tile:hover { border-color: var(--border-focus); box-shadow: var(--shadow-elevated); transform: translateY(-2px); } .menu-tile-icon { width: 52px; height: 52px; border-radius: var(--radius-full); background: var(--primary-light); color: var(--primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .menu-tile-label { font-size: 0.88rem; font-weight: 600; } .version-banner { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; background: var(--status-warning-bg); color: var(--status-warning-text); border-bottom: 1px solid var(--status-warning-border); padding: 0.65rem 1rem; font-family: var(--font-sans); font-size: 0.85rem; font-weight: 500; text-align: center; } .version-banner[hidden] { display: none; } .version-banner-btn { background: var(--status-warning-text); color: var(--status-warning-bg); border: none; border-radius: var(--radius-full); padding: 0.35rem 0.9rem; font-size: 0.78rem; font-weight: 700; cursor: pointer; font-family: var(--font-sans); flex-shrink: 0; } .version-banner-btn:hover { opacity: 0.85; } .menu-tile-badge { position: absolute; top: 0.6rem; right: 0.6rem; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; padding: 0.15rem 0.45rem; border-radius: var(--radius-full); background: var(--status-warning-bg); color: var(--status-warning-text); border: 1px solid var(--status-warning-border); } .menu-tile-badge--optioneel { background: var(--primary-light); color: var(--primary); border-color: var(--primary); } .menu-tile.is-locked { opacity: 0.5; cursor: not-allowed; } .menu-tile.is-locked:hover { border-color: var(--border-color); box-shadow: var(--shadow-card); transform: none; opacity: 0.62; } .menu-tile-lock { position: absolute; top: 0.6rem; left: 0.6rem; width: 22px; height: 22px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; background: var(--bg-subtle); color: var(--text-muted); border: 1px solid var(--border-color); } .field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.1rem; } .custom-velden-grid { display: flex; flex-wrap: wrap; gap: 1.1rem; align-items: flex-start; } .custom-velden-grid .field { min-width: 90px; } .field label { display: block; font-size: 0.78rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 0.4rem; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .field-label-standalone { display: block; font-size: 0.78rem; font-weight: 600; color: var(--text-secondary); margin: 0.3rem 0 0.6rem; } .tel-invoer { display: flex; gap: 0.5rem; } .tel-invoer .tel-nummer { flex: 1 1 auto; min-width: 0; } .tel-landcode-toggle { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; } .tel-landcode-toggle img { display: block; width: 18px; height: 18px; border-radius: 3px; object-fit: cover; flex: none; } .tel-landcode-toggle .tel-landcode-chevron { flex: none; opacity: 0.6; } .tel-landcode-menu { width: 230px; padding: 0.5rem; } .tel-landcode-menu .tel-landcode-filter { width: 100%; margin-bottom: 0.4rem; } .tel-landcode-lijst { max-height: 240px; overflow-y: auto; } .tel-landcode-item { display: flex; align-items: center; gap: 0.55rem; } .tel-landcode-item img { width: 18px; height: 18px; border-radius: 3px; object-fit: cover; flex: none; } .tel-landcode-item[hidden] { display: none; } .input, .select, textarea.input { width: 100%; background: var(--bg-card); border: 1px solid var(--border-color); color: var(--text-primary); font-family: var(--font-sans); font-size: 0.86rem; border-radius: var(--radius-input); padding: 0.55rem 0.75rem; } textarea.input { resize: vertical; } .input::placeholder { color: var(--text-muted); } .input-wrap { position: relative; } .input-wrap .input { padding-right: 2.5rem; } .input-eye { position: absolute; top: 50%; right: 0.5rem; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 1.8rem; height: 1.8rem; padding: 0; border: none; border-radius: 6px; background: none; color: var(--text-muted); cursor: pointer; } .input-eye:hover { color: var(--text-primary); background: var(--bg-hover); } .input-eye svg { display: block; } .input:focus, .select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); } .input:disabled { background: var(--bg-subtle); color: var(--text-muted); cursor: not-allowed; } .static-value { font-size: 0.86rem; color: var(--text-primary); padding: 0.55rem 0; } .hint { font-size: 0.8rem; color: var(--text-muted); margin: 0.5rem 0 0; } .check-row { display: flex; align-items: center; gap: 0.55rem; font-size: 0.85rem; cursor: pointer; } .check-row input { accent-color: var(--primary); width: 15px; height: 15px; } .opt-row { display: flex; flex-wrap: wrap; gap: 0.85rem; } .opt-card { flex: 1 1 190px; text-align: left; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-card); padding: 0.95rem 1.05rem; cursor: pointer; font-family: var(--font-sans); display: flex; flex-direction: column; gap: 0.3rem; transition: border-color 150ms, background-color 150ms, box-shadow 150ms; } .opt-card:hover { border-color: var(--border-focus); } .opt-card.is-selected { border-color: var(--primary); background: var(--primary-light); box-shadow: 0 0 0 1px var(--primary); } .opt-title { font-weight: 600; font-size: 0.9rem; color: var(--text-primary); } .opt-desc { font-size: 0.78rem; color: var(--text-muted); } .opt-list { margin: 0.3rem 0 0; padding-left: 1.1rem; font-size: 0.78rem; color: var(--text-secondary); } .opt-list li { margin-bottom: 0.15rem; } /* Kleurthema-keuze op /instellingen: een .opt-card met een kleurstip ervoor i.p.v. een titel/omschrijving-paar. */ .opt-title-row { display: flex; align-items: center; gap: 0.5rem; } .kleurthema-dot { width: 0.95rem; height: 0.95rem; border-radius: 999px; border: 1px solid rgba(0, 0, 0, 0.15); flex: none; } .btn { font-family: var(--font-sans); font-weight: 500; font-size: 0.86rem; padding: 0.55rem 1.05rem; border-radius: var(--radius-input); border: 1px solid transparent; cursor: pointer; transition: background-color 150ms, border-color 150ms, color 150ms; } .btn:disabled { opacity: 0.6; cursor: not-allowed; } .btn--sm { font-size: 0.78rem; padding: 0.42rem 0.8rem; } .btn--primary { background: var(--primary); color: var(--text-on-primary); box-shadow: var(--shadow-card); } .btn--primary:hover { background: var(--primary-hover); } .btn--outline { background: var(--bg-card); color: var(--text-primary); border-color: var(--border-color); } .btn--outline:hover { background: var(--bg-hover); border-color: var(--border-focus); } .btn--ghost { background: transparent; color: var(--text-secondary); } .btn--ghost:hover { background: var(--bg-subtle); } .badge { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.28rem 0.7rem; border-radius: var(--radius-full); font-size: 0.72rem; font-weight: 600; border: 1px solid; } .badge--neutral { color: var(--text-secondary); background: var(--bg-subtle); border-color: var(--border-color); } .badge--succes { color: var(--status-succes-text); background: var(--status-succes-bg); border-color: var(--status-succes-border); } .badge--warning { color: var(--status-warning-text); background: var(--status-warning-bg); border-color: var(--status-warning-border); } .badge--danger { color: var(--status-danger-text); background: var(--status-danger-bg); border-color: var(--status-danger-border); font-weight: 700; } .filiaal-list { display: flex; flex-direction: column; border: 1px solid var(--border-color); border-radius: var(--radius-input); margin-top: 0.8rem; overflow: hidden; } .filiaal-row { display: flex; align-items: center; justify-content: space-between; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--border-color); background: var(--bg-card); position: relative; } .filiaal-row:last-child { border-bottom: none; } .filiaal-naam { font-size: 0.88rem; font-weight: 600; } .filiaal-plaats { font-size: 0.78rem; color: var(--text-muted); } .empty-state { font-size: 0.85rem; color: var(--text-muted); border: 1px dashed var(--border-color); border-radius: var(--radius-input); padding: 1rem; text-align: center; margin-top: 0.8rem; } .add-filiaal-form { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border-color); } .allergie-list { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.8rem; } .allergie-row { border: 1px solid var(--border-color); border-radius: var(--radius-input); padding: 0.8rem 0.9rem; background: var(--bg-card); position: relative; } .allergie-row.is-ernstig { border-color: var(--status-danger-border); } .allergie-header { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; } .allergie-naam-wrap { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .allergie-naam { font-size: 0.9rem; font-weight: 700; } .allergie-meta { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.35rem; } .allergie-reactie { font-size: 0.82rem; color: var(--text-secondary); margin-top: 0.3rem; } .allergie-audit { font-size: 0.72rem; color: var(--text-muted); margin-top: 0.5rem; font-family: var(--font-mono); } [hidden] { display: none !important; } .dropdown { position: relative; display: inline-block; } .dropdown [data-dropdown-toggle] { display: inline-flex; align-items: center; justify-content: center; } .dropdown-menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 160px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-input); box-shadow: var(--shadow-elevated); padding: 0.35rem; z-index: 10; } .dropdown:not(.is-open) .dropdown-menu { display: none; } .dropdown-item { display: block; width: 100%; text-align: left; text-decoration: none; background: none; border: none; font-family: var(--font-sans); font-size: 0.83rem; color: var(--text-primary); padding: 0.5rem 0.6rem; border-radius: 6px; cursor: pointer; box-sizing: border-box; } .dropdown-item:hover { background: var(--bg-hover); } .dropdown-item.is-danger { color: var(--status-danger-text); } .dropdown-item.is-danger:hover { background: var(--status-danger-bg); } .summary-eyebrow { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--primary); margin: 0 0 0.4rem; } .summary-name { font-size: 1.1rem; font-weight: 700; margin: 0 0 0.7rem; text-wrap: balance; } .summary-badges { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; } .summary-rows { display: flex; flex-direction: column; gap: 0.55rem; border-top: 1px solid var(--border-color); padding-top: 0.8rem; } .summary-row { display: flex; justify-content: space-between; gap: 0.8rem; font-size: 0.82rem; } .summary-row span:first-child { color: var(--text-muted); } .summary-row span:last-child { color: var(--text-primary); font-weight: 500; text-align: right; } .summary-note p { font-size: 0.8rem; color: var(--text-muted); margin: 0; } .action-bar { position: sticky; bottom: 0; display: flex; justify-content: flex-end; align-items: center; gap: 0.7rem; background: var(--bg-app); border-top: 1px solid var(--border-color); padding: 1rem 0 0.2rem; margin-top: 1.8rem; } .toast { position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%) translateY(120%); background: var(--text-primary); color: var(--bg-card); font-size: 0.85rem; font-weight: 500; padding: 0.7rem 1.1rem; border-radius: var(--radius-input); box-shadow: var(--shadow-elevated); transition: transform 220ms ease; z-index: 50; } .toast.is-visible { transform: translateX(-50%) translateY(0); } .modal-overlay { position: fixed; inset: 0; background: rgba(16, 11, 34, 0.45); display: flex; align-items: center; justify-content: center; z-index: 100; } .modal-box { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-card); box-shadow: var(--shadow-elevated); padding: 2rem 2.6rem; display: flex; flex-direction: column; align-items: center; gap: 1.1rem; } .modal-text { font-size: 0.86rem; color: var(--text-secondary); margin: 0; } .spinner-ring { position: relative; width: 40px; height: 40px; } .spinner-ring span { position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: var(--primary); animation: spinner-dot-fade 1.1s linear infinite; } .spinner-ring span:nth-child(1) { transform: rotate(0deg) translate(17px) rotate(0deg); animation-delay: -0.963s; } .spinner-ring span:nth-child(2) { transform: rotate(45deg) translate(17px) rotate(-45deg); animation-delay: -0.825s; } .spinner-ring span:nth-child(3) { transform: rotate(90deg) translate(17px) rotate(-90deg); animation-delay: -0.688s; } .spinner-ring span:nth-child(4) { transform: rotate(135deg) translate(17px) rotate(-135deg); animation-delay: -0.55s; } .spinner-ring span:nth-child(5) { transform: rotate(180deg) translate(17px) rotate(-180deg); animation-delay: -0.413s; } .spinner-ring span:nth-child(6) { transform: rotate(225deg) translate(17px) rotate(-225deg); animation-delay: -0.275s; } .spinner-ring span:nth-child(7) { transform: rotate(270deg) translate(17px) rotate(-270deg); animation-delay: -0.138s; } .spinner-ring span:nth-child(8) { transform: rotate(315deg) translate(17px) rotate(-315deg); animation-delay: 0s; } @keyframes spinner-dot-fade { 0%, 100% { opacity: 0.15; } 50% { opacity: 1; } } .tabs { display: flex; gap: 0.3rem; border-bottom: 1px solid var(--border-color); margin-bottom: 1.2rem; overflow-x: auto; overflow-y: hidden; } .tab { font-family: var(--font-sans); font-size: 0.85rem; font-weight: 500; color: var(--text-muted); background: none; border: none; border-bottom: 2px solid transparent; padding: 0.6rem 0.9rem; cursor: pointer; margin-bottom: -1px; white-space: nowrap; } .tab:hover { color: var(--text-primary); } .tab[aria-selected="true"] { color: var(--primary); border-color: var(--primary); font-weight: 600; } .tab-panel[hidden] { display: none; } .tab-panel { display: flex; flex-direction: column; gap: 1.2rem; } /* overflow-x:auto blijft scrollen mogelijk houden voor een brede tabel op een smal scherm — alleen de scrollbar zelf is verborgen (blijft sleep-/swipebaar), cross-browser: scrollbar-width voor Firefox, -ms-overflow-style voor oudere Edge/IE, ::-webkit-scrollbar voor Chrome/Safari/Edge Chromium. */ .table-wrap { overflow-x: auto; border: 1px solid var(--border-color); border-radius: var(--radius-card); background: var(--bg-card); scrollbar-width: none; -ms-overflow-style: none; } .table-wrap::-webkit-scrollbar { display: none; } table.data { width: 100%; border-collapse: collapse; font-size: 0.85rem; } table.data th, table.data td { padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid var(--border-color); } table.data thead th { font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); background: var(--bg-subtle); } table.data tbody tr:last-child td { border-bottom: none; } table.data tbody tr:hover { background: var(--bg-hover); } table.data td.num { font-variant-numeric: tabular-nums; color: var(--text-muted); } table.data td.mono { font-family: var(--font-mono); font-size: 0.82rem; } /* Laatste kolom (meestal het actiemenu) blijft altijd zichtbaar, ook als de tabel op een smal scherm horizontaal moet scrollen binnen .table-wrap. */ table.data th:last-child, table.data td:last-child { position: sticky; right: 0; z-index: 1; border-left: 1px solid var(--border-color); } table.data td:last-child { background: var(--bg-card); } table.data tbody tr:hover td:last-child { background: var(--bg-hover); } .alert { display: flex; gap: 0.7rem; align-items: flex-start; border: 1px solid; border-radius: var(--radius-input); padding: 0.85rem 1rem; font-size: 0.85rem; } .alert--warning { color: var(--status-warning-text); background: var(--status-warning-bg); border-color: var(--status-warning-border); } .alert--danger { color: var(--status-danger-text); background: var(--status-danger-bg); border-color: var(--status-danger-border); } .login-shell { min-height: 100vh; display: flex; } .login-panel { flex: 1 1 42%; min-width: 280px; background: var(--primary); display: flex; align-items: center; justify-content: center; padding: 2rem; } .login-logo { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; text-align: center; } .login-logo-naam { color: var(--text-on-primary); font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; text-wrap: balance; } .login-logo-sub { color: var(--text-on-primary); opacity: 0.85; font-size: 1rem; font-weight: 500; letter-spacing: 0.01em; transition: opacity 220ms ease; } .login-logo-sub.is-fading { opacity: 0; } .login-side { flex: 1 1 58%; display: flex; align-items: center; justify-content: center; background: var(--bg-app); padding: 2rem; } .login-card { width: min(400px, 100%); background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-card); box-shadow: var(--shadow-elevated); overflow: hidden; } .login-card-head { padding: 1.3rem; text-align: center; background: var(--bg-subtle); border-bottom: 1px solid var(--border-color); } .login-card-head h1 { margin: 0; font-size: 1.3rem; font-weight: 700; } .login-card-body { padding: 1.6rem; display: flex; flex-direction: column; gap: 1rem; } .login-step { display: flex; flex-direction: column; gap: 1.3rem; } .login-stap-titel { font-size: 1rem; font-weight: 700; color: var(--text-primary); margin: 0; line-height: 1.35; } .login-identifier { font-size: 0.85rem; color: var(--text-secondary); margin: 0; line-height: 1.4; } .login-identifier strong { color: var(--text-primary); font-weight: 600; word-break: break-all; } .login-actions { display: flex; align-items: center; gap: 1.2rem; margin-top: 0.6rem; } .login-submit { text-transform: uppercase; letter-spacing: 0.04em; padding-left: 1.8rem; padding-right: 1.8rem; } .login-forgot { font-size: 0.8rem; } .login-back { text-align: center; margin: 0; } @media (max-width: 720px) { .login-shell { flex-direction: column; } .login-panel { flex: 0 0 auto; padding: 2.5rem 1.5rem; } } /* --- Weekkalender (/afspraken week-weergave) --- */ .week-kalender { overflow-x: auto; border: 1px solid var(--border-color); border-radius: var(--radius-card); background: var(--bg-card); } .week-kalender-header { display: grid; grid-template-columns: 56px repeat(7, minmax(120px, 1fr)); border-bottom: 1px solid var(--border-color); } .week-kalender-hoek { border-right: 1px solid var(--border-color); } .week-kalender-dagkop { padding: 0.6rem 0.4rem; text-align: center; font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); border-right: 1px solid var(--border-color); text-transform: capitalize; } .week-kalender-dagkop:last-child { border-right: none; } .week-kalender-dagkop.is-vandaag { color: var(--primary); background: var(--bg-subtle); } .week-kalender-body { display: grid; grid-template-columns: 56px repeat(7, minmax(120px, 1fr)); } .week-kalender-uren { border-right: 1px solid var(--border-color); } .week-kalender-uur-label { height: 56px; box-sizing: border-box; padding: 0 0.4rem 0 0; text-align: right; font-size: 0.72rem; color: var(--text-muted); transform: translateY(-0.55em); } .week-kalender-dag-kolom { position: relative; border-right: 1px solid var(--border-color); cursor: pointer; background-image: repeating-linear-gradient(to bottom, var(--border-color) 0, var(--border-color) 1px, transparent 1px, transparent 56px); } .week-kalender-dag-kolom:last-child { border-right: none; } .week-kalender-event { position: absolute; box-sizing: border-box; overflow: hidden; padding: 2px 6px; border-radius: 6px; font-size: 0.72rem; line-height: 1.3; cursor: pointer; border: 1px solid var(--primary); background: var(--primary-light); color: var(--text-primary); } .week-kalender-event strong { font-variant-numeric: tabular-nums; } .week-kalender-event.is-geannuleerd { background: var(--bg-subtle); border-color: var(--border-color); color: var(--text-muted); text-decoration: line-through; } .week-kalender-event.is-voltooid { background: var(--bg-subtle); border-color: var(--border-color); color: var(--text-secondary); } .week-kalender-event.is-no_show { background: var(--status-danger-bg); border-color: var(--status-danger-border); color: var(--status-danger-text); text-decoration: line-through; } .detail-list { display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 0.8rem; margin: 0.2rem 0 0.6rem; font-size: 0.88rem; } .detail-list dt { color: var(--text-muted); } .detail-list dd { margin: 0; color: var(--text-primary); } /* --- Kleur-presets (behandelingen) --- */ .kleur-swatches { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.4rem; } .kleur-swatch { width: 32px; height: 32px; border-radius: var(--radius-full); border: 2px solid transparent; cursor: pointer; padding: 0; box-shadow: 0 0 0 1px var(--border-color) inset; } .kleur-swatch:hover { transform: scale(1.08); } .kleur-swatch.is-selected { border-color: var(--text-primary); box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 4px var(--text-primary); } .kleur-dot { display: inline-block; width: 10px; height: 10px; border-radius: var(--radius-full); margin-right: 0.5rem; vertical-align: middle; } .kleur-swatch-sm { display: inline-block; width: 14px; height: 14px; border-radius: var(--radius-full); box-shadow: 0 0 0 1px var(--border-color) inset; } /* --- Tijdsloten met behandelaar-tags (/afspraken/nieuw) — per uur op één regel (flex-wrap), zodat de sloten-lijst compact blijft en niet elk tijdstip een eigen volle-breedte regel kost. --- */ .sloten-lijst { display: flex; flex-direction: column; margin-top: 0.6rem; max-height: 340px; overflow-y: auto; border: 1px solid var(--border-color); border-radius: var(--radius-input); } .sloten-uur-groep { display: flex; align-items: flex-start; gap: 0.7rem; padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--border-color); } .sloten-uur-groep:last-child { border-bottom: none; } .sloten-uur-label { font-family: var(--font-mono); font-size: 0.78rem; font-weight: 700; color: var(--text-muted); min-width: 40px; padding-top: 0.4rem; } .sloten-uur-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; flex: 1; } /* .slot-chip is nu een niet-klikbare pil (één per tijdstip, niet meer per tijdstip+behandelaar); de avatar-rondjes erin zijn de klikbare elementen — zo verschijnt 13:45 met twee behandelaars als één tijdstip met twee rondjes i.p.v. twee losse "13:45"-tegels. */ .slot-chip { display: inline-flex; align-items: center; gap: 0.35rem; font-family: var(--font-mono); font-size: 0.76rem; font-weight: 600; padding: 0.3rem 0.5rem; border-radius: var(--radius-full); border: 1px solid var(--border-color); background: var(--bg-subtle); color: var(--text-secondary); white-space: nowrap; } .slot-chip-tijd { padding-left: 0.15rem; } .behandelaar-avatar { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; border: 2px solid transparent; padding: 0; background: var(--primary); color: var(--text-on-primary); cursor: pointer; font-family: var(--font-sans); font-size: 0.62rem; font-weight: 700; letter-spacing: 0; } .behandelaar-avatar:hover { transform: scale(1.1); } .behandelaar-avatar.is-selected { border-color: var(--text-primary); box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 4px var(--primary); } /* --- Dossier-tabblad (patiëntformulier) — Quill.js rich-text editor, quill.snow.css levert de toolbar/editor-chrome; hier alleen de rand/ afronding laten aansluiten bij .input/.card. Bewuste v1-beperking: de toolbar-iconen van Quill's "snow"-thema passen zich niet vanzelf aan het donker-thema/kleurthema-systeem aan. --- */ .dossier-editor { border: 1px solid var(--border-color); border-radius: var(--radius-input); overflow: hidden; } .dossier-editor .ql-toolbar.ql-snow { border: none; border-bottom: 1px solid var(--border-color); } .dossier-editor .ql-container.ql-snow { border: none; min-height: 320px; font-family: var(--font-sans); font-size: 0.95rem; }