/* =========================================================================== Vitaro Pro — gedeelde basisstijl Kleurvariabelen: Ochtendlicht/Etiketbord-palet (uit de goedgekeurde mockups fresh_f_ochtendlicht.html + fresh_g_etiketbord.html), gemapt op de BESTAANDE variabele-namen — dit laat de honderden bestaande gebruiksplekken door het hele systeem ongewijzigd, alleen de onderliggende kleurwaarde verandert. =========================================================================== */ :root { --teal: #3fc9b8; --td: #1a9d8c; --tdim: #e8f9f6; --tmid: #a8e0dd; --ink: #26323e; --im: #5c6b7a; --is: #9aa6b2; --bdr: #ece6dc; --sand: #fbf7f0; --orange: #ffb37a; --odim: #fff1e3; --obdr: #f5c98c; --red: #e85d76; --green: #2bb8a8; --rad: 12px; --surface: #ffffff; --blue: #7ec8e3; --bdim2: #eef0fb; --gold: #e88a3f; --gdim2: #fff1e3; --gdim: #eafaf6; --rdim: #ffeef1; } /* Pagina-achtergrond: de zachte, radiale Ochtendlicht-gradient, systeembreed op elke pagina — zie de complete body-regel verderop in dit bestand (font-family, kleur, margin), waar deze gradient nu in is samengevoegd om te voorkomen dat een latere regel 'm overschrijft. */ /* ---- Hoog-contrast thema (Fase 6, toegankelijkheid) ---- Herdefinieert alleen de kleurvariabelen — layout, afstand en structuur blijven ongewijzigd. Geactiveerd via class="hc" op , gezet door assets/js/contrast-toggle.js. Witte tekst op zwarte achtergrond, net als de "Verhoog contrast"-optie op iOS. */ html.hc { --teal: #ffffff; --td: #ffffff; --tdim: #1a1a1a; --tmid: #ffffff; --ink: #ffffff; --im: #e5e5e5; --is: #b3b3b3; --bdr: #ffffff; --sand: #000000; --orange: #ffffff; --odim: #1a1a1a; --obdr: #ffffff; --red: #ffffff; --green: #ffffff; --surface: #000000; } html.hc body { background: #000000; color: #ffffff; } /* Plekken die nog hardcoded 'white'/zwart gebruiken i.p.v. var(--surface) — dit dekt de meest voorkomende, herkenbare gevallen (kaarten, modals, topbars). Zie README Fase 6 voor de volledige uitleg van deze beperking. */ html.hc .frame, html.hc .card, html.hc .modal-box, html.hc .phone-frame, html.hc .cd-card, html.hc .cd-plan-frame, html.hc .client-card, html.hc [style*="background:white"], html.hc [style*="background: white"] { background: #000000 !important; border-color: #ffffff !important; } /* ---- Toegankelijkheid-schakelaar (topbar-knop, beide kanten) ---- Positie hier op één plek aanpasbaar: verplaats de knop later door alleen .a11y-toggle-btn's `order`/marge in deze regel te wijzigen, niet door elders in de codebase te zoeken. */ .a11y-toggle-btn { width: 36px; height: 36px; border-radius: 9px; border: 1.5px solid var(--bdr); background: var(--sand); display: flex; align-items: center; justify-content: center; font-size: 16px; cursor: pointer; flex-shrink: 0; line-height: 1; } .a11y-toggle-btn:hover { border-color: var(--td); } html.hc .a11y-toggle-btn { background: #ffffff; color: #000000; border-color: #ffffff; } /* Klant-kant: geen vaste topbar in de pagina-shell (die wisselt per scherm), dus de knop staat hier los, vast gepositioneerd. Positie hier op één plek aan te passen — bijv. wijzig 'top'/'right' in 'bottom'/'left' om 'm linksonder te zetten. */ .a11y-toggle-btn-fixed { position: fixed; top: 16px; right: 16px; z-index: 50; background: white; box-shadow: 0 2px 8px rgba(0,0,0,.12); } * { box-sizing: border-box; } body { font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: var(--ink); background: radial-gradient(circle at 10% 0%, #fff7ed 0%, #f0fbf9 35%, #eef6fb 100%); margin: 0; } /* ---- Auth pages (login, forgot/reset password) ---- */ body.auth-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: linear-gradient(135deg, var(--tdim), var(--sand)); } .auth-card { background: white; border-radius: 18px; box-shadow: 0 10px 40px rgba(0,0,0,.08); padding: 40px 36px; width: 100%; max-width: 380px; } .auth-logo { font-size: 22px; font-weight: 700; color: var(--td); margin-bottom: 18px; } .auth-card h1 { font-size: 22px; margin: 0 0 6px; } .auth-sub { color: var(--im); font-size: 13.5px; margin: 0 0 20px; } .auth-card label { display: block; font-size: 12.5px; font-weight: 600; color: var(--im); margin: 14px 0 5px; } .auth-card input[type=email], .auth-card input[type=password], .auth-card input[type=text] { width: 100%; padding: 10px 13px; border: 1.5px solid var(--bdr); border-radius: 9px; font-size: 14px; outline: none; transition: border-color .15s; } .auth-card input:focus { border-color: var(--teal); } .auth-link { display: block; text-align: center; margin-top: 18px; font-size: 13px; color: var(--td); text-decoration: none; } .auth-link:hover { text-decoration: underline; } .lang-switcher { display: flex; justify-content: center; gap: 6px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--bdr); } .lang-link { padding: 4px 10px; border-radius: 100px; font-size: 11.5px; font-weight: 700; color: var(--is); text-decoration: none; border: 1px solid var(--bdr); } .lang-link:hover { color: var(--im); border-color: var(--is); } .lang-link.active { background: var(--td); color: white; border-color: var(--td); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 18px; border-radius: 9px; border: none; cursor: pointer; font-size: 14px; font-weight: 600; text-decoration: none; transition: all .15s; } .btn-primary { background: var(--td); color: white; transition: background 0.15s; } .btn-primary:hover { background: var(--td-hover, var(--cmd-sage-d-hover, #145e5b)); } .btn-block { width: 100%; margin-top: 20px; } .btn-danger { background: var(--odim); color: var(--orange); border: 1px solid var(--obdr); } .alert { padding: 11px 14px; border-radius: 9px; font-size: 13px; margin-bottom: 14px; } .alert-error { background: #fdeeee; color: var(--red); border: 1px solid #f3c6c2; } .alert-success { background: #eafaf1; color: var(--green); border: 1px solid #b9e8cd; } /* ---- App shell (admin & dietist panels) ---- */ .app-shell { display: flex; min-height: 100vh; } .app-sidebar { width: 230px; background: white; border-right: 1px solid var(--bdr); padding: 24px 18px; flex-shrink: 0; } /* ---- Zijbalk: glas-effect, drijvend (Ochtendlicht) ---- */ .app-shell { padding: 18px; gap: 18px; } .app-sidebar { width: 250px; background: rgba(255,255,255,.7); backdrop-filter: blur(14px); border-radius: 28px; padding: 24px 18px; box-shadow: 0 8px 30px rgba(38,50,62,.07); border: 1px solid rgba(255,255,255,.8); flex-shrink: 0; align-self: flex-start; max-height: calc(100vh - 36px); overflow-y: auto; } .app-sidebar .logo { font-size: 18px; font-weight: 800; color: var(--td); display: flex; align-items: center; gap: 9px; margin-bottom: 20px; } .app-sidebar .logo .logo-bowl { font-size: 24px; } .navgroup { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--is); margin: 18px 10px 7px; } .module-link { display: block; padding: 10px 12px; border-radius: 8px; color: #7c5cbf; text-decoration: none; font-size: 14px; margin-bottom: 3px; font-weight: 500; } .module-link:hover, .module-link.active { background: #f1ecfb; color: #7c5cbf; } .app-sidebar nav.nav a { display: flex; align-items: center; gap: 11px; padding: 10px 13px; border-radius: 16px; text-decoration: none; font-size: 13.5px; font-weight: 700; margin-bottom: 3px; color: var(--im); } .app-sidebar nav.nav a .pill { width: 30px; height: 30px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; background: rgba(255,255,255,.6); } .app-sidebar nav.nav a.active { background: white; color: var(--td); box-shadow: 0 4px 12px rgba(38,50,62,.08); } .app-sidebar nav.nav a.active .pill { background: linear-gradient(135deg, var(--teal), var(--td)); color: white; } .app-sidebar nav.nav a:not(.active):hover { background: rgba(255,255,255,.5); } .app-main { flex: 1; padding: 6px 40px 40px; max-width: 1160px; width: 100%; box-sizing: border-box; } .app-topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; } .app-topbar h1 { font-size: 24px; margin: 0; } /* ---- Header rechts: instellingen-knop \u2192 datum \u2192 profielblok (Etiketbord) ---- */ .hdr-right { display: flex; align-items: center; gap: 16px; } .hdr-date { font-size: 13px; color: var(--is); font-weight: 600; } .settings-btn { width: 34px; height: 34px; border-radius: 10px; border: 2px solid var(--ink); background: white; color: var(--ink); display: flex; align-items: center; justify-content: center; font-size: 15px; text-decoration: none; flex-shrink: 0; } .hdr-profile { display: flex; align-items: center; gap: 10px; } .hdr-profile img, .hdr-profile div { border-radius: 10px !important; } /* overschrijft specifiek hier de inline border-radius:50% van renderAvatarHtml() (zowel de foto als de initialen-fallback) — die gedeelde helper blijft elders ongewijzigd rond */ .hdr-profile-name { font-size: 13.5px; font-weight: 700; color: var(--ink); } /* ---- Instellingenpagina met tabbladen (dietist/instellingen.php, admin/instellingen.php) ---- */ .settings-tabbar { display: flex; gap: 6px; border-bottom: 2px solid var(--bdr); margin-bottom: 24px; flex-wrap: wrap; } .settings-tab-btn { background: none; border: none; padding: 12px 16px; font-size: 13.5px; font-weight: 700; color: var(--im); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; } .settings-tab-btn.active { color: var(--td); border-bottom-color: var(--teal); } .settings-tabpanel { display: none; } .settings-tabpanel.active { display: block; } .owner-badge { display: inline-block; background: var(--odim); color: #a8650e; font-size: 10px; font-weight: 800; padding: 3px 8px; border-radius: 6px; margin-left: 8px; text-transform: uppercase; letter-spacing: .03em; vertical-align: middle; } .card { background: white; border: 1px solid var(--bdr); border-radius: var(--rad); padding: 22px; margin-bottom: 18px; } table.data-table { width: 100%; border-collapse: collapse; font-size: 13.5px; } table.data-table th { text-align: left; padding: 10px 12px; color: var(--is); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--bdr); } table.data-table td { padding: 11px 12px; border-bottom: 1px solid var(--bdr); } table.data-table tr:hover td { background: var(--tdim); } .admin-email-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; } .admin-email-display { font-size: 13px; word-break: break-all; } .admin-email-open { padding: 4px 10px !important; font-size: 11.5px !important; white-space: nowrap; } .admin-modal { position: fixed; inset: 0; z-index: 10000; display: none; align-items: center; justify-content: center; padding: 20px; } .admin-modal.open { display: flex; } .admin-modal-backdrop { position: absolute; inset: 0; background: rgba(15, 30, 28, 0.5); } .admin-modal-panel { position: relative; width: min(480px, 100%); background: #fff; border-radius: 14px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2); overflow: hidden; } .admin-modal-hdr { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--bdr); background: linear-gradient(135deg, #f6faf8, #fff); } .admin-modal-hdr h3 { margin: 0; font-size: 16px; } .admin-modal-close { border: none; background: transparent; font-size: 24px; cursor: pointer; color: var(--is); } .admin-modal-body { padding: 18px; } .admin-modal-intro { margin: 0 0 14px; font-size: 13px; line-height: 1.5; color: var(--im); } .admin-modal-meta { display: grid; gap: 8px; margin-bottom: 16px; padding: 12px; border-radius: 10px; background: var(--sand); border: 1px solid var(--bdr); font-size: 13px; } .admin-modal-label { color: var(--is); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; display: block; margin-bottom: 2px; } .admin-modal-field label { display: block; margin-bottom: 6px; font-size: 12.5px; font-weight: 700; } .admin-modal-field input { width: 100%; padding: 10px 12px; border: 1.5px solid var(--bdr); border-radius: 9px; font-size: 14px; } .admin-modal-check { display: flex; align-items: flex-start; gap: 10px; margin: 16px 0; font-size: 12.5px; line-height: 1.45; color: var(--im); cursor: pointer; } .admin-modal-check input { margin-top: 3px; flex-shrink: 0; } .admin-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; } .badge { display: inline-block; padding: 2px 9px; border-radius: 100px; font-size: 11px; font-weight: 600; } .badge-actief { background: #eafaf1; color: var(--green); } .badge-geblokkeerd, .badge-gearchiveerd { background: #fdeeee; color: var(--red); } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .form-grid label { display: block; font-size: 12.5px; font-weight: 600; color: var(--im); margin-bottom: 5px; } .form-grid input, .form-grid select, .form-grid textarea { width: 100%; padding: 9px 12px; border: 1.5px solid var(--bdr); border-radius: 9px; font-size: 13.5px; outline: none; } .form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus { border-color: var(--teal); } /* ---- Gedeelde klant-statuspil + dot — gebruikt door dietist/klanten.php EN dietist/klant-traject.php (assets/js/journey.js). Eén bron, geen duplicatie: dezelfde klassen, dezelfde kleuren, op beide plekken. ---- */ .cc-status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 100px; font-size: 11.5px; font-weight: 700; } .cc-status-pill.new { background: var(--bdim2); color: var(--blue); } .cc-status-pill.progress { background: var(--gdim2); color: var(--gold); } .cc-status-pill.ontrack { background: var(--gdim); color: var(--green); } .cc-status-pill.attention { background: var(--rdim); color: var(--red); } .cc-status-pill.completed { background: var(--sand); color: var(--im); border: 1px solid var(--bdr); } .cc-status-dot { width: 6px; height: 6px; border-radius: 50%; } .cc-status-dot.new { background: var(--blue); } .cc-status-dot.progress { background: var(--gold); } .cc-status-dot.ontrack { background: var(--green); } .cc-status-dot.attention { background: var(--red); } /* ---- Klant-identiteitsheader boven de tabbladbalk op klant-bekijken.php — bewust in app.css (globaal geladen), niet journey.css (alleen op het Traject-tabblad), zodat de klantnaam op alle 4 tabbladen identiek zichtbaar is, al vóór journey.js zijn eigen render heeft gedaan. ---- */ .client-id-header { display: flex; align-items: center; gap: 14px; padding: 16px 22px; background: white; border: 1px solid var(--bdr); border-radius: 14px; margin-bottom: 14px; } .client-id-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--tdim); color: var(--td); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; flex-shrink: 0; } .client-id-info h2 { margin: 0; font-size: 16.5px; color: var(--ink); } .client-id-info .sub { font-size: 12px; color: var(--is); margin-top: 1px; } .client-id-status { margin-left: auto; text-align: right; } .client-id-status .cc-flow-subtext { font-size: 11px; color: var(--is); margin-top: 3px; } .ch-edit-pencil { font-size: 13px; cursor: pointer; opacity: .55; margin-left: 4px; } .ch-edit-pencil:hover { opacity: 1; } .ch-menu { color: var(--is); font-size: 16px; cursor: pointer; padding: 4px 6px; } .ch-menu-wrap { position: relative; } .ch-menu-dropdown { position: absolute; top: 100%; right: 0; margin-top: 6px; background: white; border: 1px solid var(--bdr); border-radius: 11px; box-shadow: 0 6px 20px rgba(0,0,0,.1); min-width: 180px; z-index: 60; overflow: hidden; } .ch-menu-dropdown a { display: block; padding: 10px 14px; font-size: 13px; color: var(--ink); text-decoration: none; } .ch-menu-dropdown a:hover { background: var(--sand); } .cc-flow-subtext { font-size: 10.5px; color: var(--is); margin-top: 4px; }