/* ================================================================
* Theme system
* - Base palette lives on :root (light by default).
* - Dark mode via [data-theme="dark"] OR prefers-color-scheme.
* - Accent palette via [data-accent="..."] on .
* - JS theme-picker (in een vervolg-commit) zet deze attributes en
* bewaart de keuze in localStorage.
* ================================================================ */
:root {
/* Neutral surfaces — light */
--bg: #eef1f6;
--bg-subtle: #f6f8fb;
--surface: #ffffff;
--surface-elev: #ffffff;
--text: #1c1f23;
--muted: #5b6470;
--border: #dee2e8;
--border-soft: #ebeef2;
--danger: #b3261e;
--danger-bg: #fdecea;
--radius: 12px;
--radius-sm: 8px;
--radius-lg: 18px;
/* Zachte, gelaagde schaduwen (Linear/shadcn-achtige 'lift', referentie geen
dependency). MD #3 styling-pass. */
--shadow-sm: 0 1px 2px rgba(20, 30, 50, 0.04), 0 1px 3px rgba(20, 30, 50, 0.06);
--shadow-md: 0 4px 12px -2px rgba(20, 30, 50, 0.10), 0 2px 6px -2px rgba(20, 30, 50, 0.06);
--shadow-lg: 0 14px 32px -8px rgba(20, 30, 50, 0.16), 0 6px 14px -6px rgba(20, 30, 50, 0.09);
/* Accent — default = indigo. Per accent overschrijven we deze 3 onder. */
--accent: #4f46e5;
--accent-hover: #4338ca;
--accent-soft: #eef2ff;
--focus-ring: 0 0 0 3px rgba(79, 70, 229, 0.28);
}
/* Accent presets — keuze via data-accent="..." op . */
:root[data-accent="indigo"] {
--accent: #4f46e5; --accent-hover: #4338ca; --accent-soft: #eef2ff;
--focus-ring: 0 0 0 3px rgba(79, 70, 229, 0.28);
}
:root[data-accent="teal"] {
--accent: #0d9488; --accent-hover: #0f766e; --accent-soft: #e6fffb;
--focus-ring: 0 0 0 3px rgba(13, 148, 136, 0.28);
}
:root[data-accent="emerald"] {
--accent: #059669; --accent-hover: #047857; --accent-soft: #ecfdf5;
--focus-ring: 0 0 0 3px rgba(5, 150, 105, 0.28);
}
:root[data-accent="rose"] {
--accent: #e11d48; --accent-hover: #be123c; --accent-soft: #fff1f3;
--focus-ring: 0 0 0 3px rgba(225, 29, 72, 0.28);
}
:root[data-accent="blue"] {
--accent: #2c5fb3; --accent-hover: #234a8c; --accent-soft: #e8f0fb;
--focus-ring: 0 0 0 3px rgba(44, 95, 179, 0.28);
}
/* Dark mode — opt-in (data-theme=dark) OR system preference fallback. */
:root[data-theme="dark"],
:root[data-theme="dark"][data-accent] {
--bg: #11141a;
--bg-subtle: #161a21;
--surface: #1d2129;
--surface-elev: #232831;
--text: #e8ebee;
--muted: #9aa3ad;
--border: #2e353c;
--border-soft: #262c33;
--danger: #ff7a73;
--danger-bg: #3a1f1d;
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.35);
--shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.5), 0 2px 6px -2px rgba(0, 0, 0, 0.4);
--shadow-lg: 0 14px 32px -8px rgba(0, 0, 0, 0.6), 0 6px 14px -6px rgba(0, 0, 0, 0.45);
}
/* Dark mode accent variants — lichter + soft tint die op donkere achtergrond werkt */
:root[data-theme="dark"][data-accent="indigo"] {
--accent: #818cf8; --accent-hover: #a5b4fc; --accent-soft: #1e1b4b;
--focus-ring: 0 0 0 3px rgba(129, 140, 248, 0.32);
}
:root[data-theme="dark"][data-accent="teal"] {
--accent: #2dd4bf; --accent-hover: #5eead4; --accent-soft: #134e4a;
--focus-ring: 0 0 0 3px rgba(45, 212, 191, 0.32);
}
:root[data-theme="dark"][data-accent="emerald"] {
--accent: #34d399; --accent-hover: #6ee7b7; --accent-soft: #064e3b;
--focus-ring: 0 0 0 3px rgba(52, 211, 153, 0.32);
}
:root[data-theme="dark"][data-accent="rose"] {
--accent: #fb7185; --accent-hover: #fda4af; --accent-soft: #4c0519;
--focus-ring: 0 0 0 3px rgba(251, 113, 133, 0.32);
}
:root[data-theme="dark"][data-accent="blue"] {
--accent: #6ea3ff; --accent-hover: #94bdff; --accent-soft: #1c2a44;
--focus-ring: 0 0 0 3px rgba(110, 163, 255, 0.32);
}
/* System dark mode fallback — alleen actief als gebruiker geen expliciete keuze heeft */
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) {
--bg: #11141a;
--bg-subtle: #161a21;
--surface: #1d2129;
--surface-elev: #232831;
--text: #e8ebee;
--muted: #9aa3ad;
--border: #2e353c;
--border-soft: #262c33;
--danger: #ff7a73;
--danger-bg: #3a1f1d;
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.35);
--shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.5), 0 2px 6px -2px rgba(0, 0, 0, 0.4);
--shadow-lg: 0 14px 32px -8px rgba(0, 0, 0, 0.6), 0 6px 14px -6px rgba(0, 0, 0, 0.45);
--accent: #818cf8;
--accent-hover: #a5b4fc;
--accent-soft: #1e1b4b;
--focus-ring: 0 0 0 3px rgba(129, 140, 248, 0.32);
}
}
* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
background: var(--bg);
color: var(--text);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-size: 15px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* 'clip' i.p.v. 'hidden': clipt horizontaal MAAR maakt geen scroll-container,
zodat de sticky .topbar aan de viewport blijft plakken (header stabiel,
content scrollt). 'hidden' brak sticky (forceerde overflow-y:auto). Oude
Safari zonder clip valt terug op visible — breekt sticky óók niet; de
hoofd-content wordt nog steeds geclipt door .app-content. */
overflow-x: clip;
/* Geen rubber-band bounce bij doorscrollen voorbij de rand — die liet de
sticky header even meebewegen ("wriggle"). Schakelt ook pull-to-refresh uit,
wat voor een app-achtige ervaring gewenst is. */
overscroll-behavior-y: none;
}
.app-content > section { min-width: 0; } /* voorkom grid-blowout door brede children */
.app-content { min-width: 0; overflow-x: hidden; }
.admin-section { min-width: 0; max-width: 100%; }
.admin-groups { min-width: 0; max-width: 100%; box-sizing: border-box; }
.admin-groups-table { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.admin-toolbar { min-width: 0; max-width: 100%; }
.admin-form { min-width: 0; max-width: 100%; box-sizing: border-box; }
/* tabular numbers everywhere so columns align */
.ring-pct, .ring-value, .ring-grade-label,
.period-value, .period-pct, .day-total-value,
.meal-item-meta, .meal-totals,
.measurements-table td {
font-variant-numeric: tabular-nums;
}
.measurements-table td.row-actions {
white-space: nowrap;
text-align: right;
}
.measurements-table td.row-actions button + button {
margin-left: 10px;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
/* ===== Side effects (Bijwerkingen) view ===== */
.effects-table {
background: var(--surface);
border: 1px solid var(--border-soft);
border-radius: var(--radius);
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin-top: 12px;
}
/* Edit + delete buttons in a standalone side-effect row. */
.sa-row-actions { display: inline-flex; gap: 12px; align-items: center; }
.effects-table table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.effects-table th,
.effects-table td {
padding: 8px 10px;
text-align: left;
border-bottom: 1px solid var(--border);
}
.effects-table th { background: var(--bg); font-weight: 500; color: var(--muted); }
.effects-table tr:last-child td { border-bottom: 0; }
.effects-table .effects-row { cursor: pointer; }
/* Side-effect note: show the text (not just a ✎ marker), readable + wrapping. */
.effects-table .se-note { display: inline-block; max-width: 260px; white-space: normal; font-size: 12px; color: var(--muted); line-height: 1.4; }
.effects-table .effects-row.filled { background: rgba(99, 102, 241, 0.06); }
.effects-table .effects-row:hover { background: rgba(99, 102, 241, 0.10); }
.effects-modal {
width: min(95vw, 720px);
max-width: 720px;
}
.effects-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1px 24px;
margin-bottom: 10px;
}
@media (max-width: 640px) {
.effects-grid { grid-template-columns: 1fr; }
}
/* Grid 1fr auto: label links, controls altijd op dezelfde X-positie
binnen elke kolom van .effects-grid. Zo lijnen de getallen netjes uit. */
.effect-row {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 10px;
padding: 2px 0;
}
/* Sticky Save/acties zodat de knop nooit van het scherm valt bij de 16-rij-
grid (ook op desktop binnen de 90vh-scroll van .modal). */
.effects-modal .modal-actions {
position: sticky;
bottom: 0;
background: var(--surface-elev);
padding-top: 10px;
margin-top: 8px;
border-top: 1px solid var(--border-soft);
}
.effect-row label {
font-weight: 500;
margin: 0;
line-height: 1.2;
}
.effect-controls {
display: flex;
align-items: center;
gap: 4px;
}
/* Hogere specificity via attribute-selector — anders wint het generieke
`input[type="text"] { width: 100%; }` blok hieronder in de file. */
.effect-controls input[type="text"] {
width: 34px;
text-align: center;
padding: 3px 2px;
font-variant-numeric: tabular-nums;
}
.effect-controls .chip {
padding: 3px 9px;
min-width: 0;
font-size: 15px;
line-height: 1;
}
.effects-notes-label {
display: block;
margin-top: 10px;
margin-bottom: 4px;
font-weight: 500;
}
.no-se-toggle {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 12px;
font-weight: 500;
cursor: pointer;
}
.no-se-toggle input { width: auto; margin: 0; }
.effects-grid.dimmed { opacity: 0.4; pointer-events: none; }
/* Profile-pagina shortcut naar Voeding-database (na verplaatsing uit topbar). */
.profile-quicklinks {
display: flex;
gap: 8px;
margin: -8px 0 18px;
flex-wrap: wrap;
}
.quicklink-card {
display: inline-flex;
align-items: center;
padding: 8px 14px;
border: 1px solid var(--border);
border-radius: var(--radius);
font-size: 14px;
text-decoration: none;
color: var(--text);
background: var(--surface);
}
.quicklink-card:hover { background: var(--bg); text-decoration: none; }
/* Referrals tab — code + share-link blok + stats. */
.referral-card {
background: var(--surface);
border: 1px solid var(--border-soft);
border-radius: var(--radius);
padding: 16px;
margin: 12px 0 24px;
}
.referral-row {
display: flex;
flex-direction: column;
gap: 6px;
padding: 8px 0;
}
.referral-row + .referral-row {
border-top: 1px solid var(--border);
margin-top: 4px;
}
.referral-row label {
font-size: 12px;
font-weight: 600;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.referral-value {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.referral-code,
.referral-link {
flex: 1;
background: var(--bg);
padding: 8px 12px;
border-radius: var(--radius-sm);
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 14px;
border: 1px solid var(--border);
word-break: break-all;
min-width: 0;
}
.referral-code { letter-spacing: 0.05em; font-weight: 600; }
.referral-stats-head {
margin: 24px 0 10px;
font-size: 14px;
font-weight: 600;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.referral-stats {
display: grid;
grid-template-columns: repeat(5, 1fr); /* alle 5 boxen op één regel (desktop) */
gap: 8px;
}
@media (max-width: 640px) {
.referral-stats { grid-template-columns: repeat(2, 1fr); }
}
.referral-stat {
background: var(--surface);
border: 1px solid var(--border-soft);
border-radius: var(--radius);
padding: 12px;
text-align: center;
}
.referral-stat .kpi-value { font-size: 22px; font-weight: 700; }
/* Verstuurd-overzicht: welk kanaal + (bij e-mail) de ontvanger + datum. */
.referral-sent { margin-top: 16px; }
/* Per-kanaal telling als chips boven de lijst. */
.referral-sent-summary { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.referral-sent-chip {
font-size: 12px;
color: var(--muted);
background: var(--bg-subtle);
border: 1px solid var(--border-soft);
border-radius: 999px;
padding: 3px 10px;
}
.referral-sent-chip strong { color: var(--text); font-weight: 700; }
/* Lijst scrollt bij veel uitnodigingen (~5 zichtbaar, rest scrollbaar). */
.referral-sent-list {
list-style: none;
margin: 8px 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 6px;
max-height: 240px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.referral-sent-item {
display: flex;
align-items: baseline;
gap: 8px;
padding: 7px 10px;
background: var(--surface);
border: 1px solid var(--border-soft);
border-radius: var(--radius-sm);
font-size: 13px;
}
.referral-sent-ch { font-weight: 600; color: var(--text); flex: 0 0 auto; }
.referral-sent-to { color: var(--muted); min-width: 0; overflow-wrap: anywhere; flex: 0 1 auto; }
.referral-sent-status { flex: 0 0 auto; font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 999px; background: var(--bg-subtle); color: var(--muted); }
.referral-sent-status.is-joined { background: var(--accent-soft); color: var(--accent); }
.referral-sent-status.is-sub { background: var(--grade-great-bg); color: var(--text); }
.referral-sent-when { margin-left: auto; color: var(--muted); font-size: 12px; white-space: nowrap; flex: 0 0 auto; }
.referral-sent-del {
flex: 0 0 auto;
background: none;
border: none;
color: var(--muted);
cursor: pointer;
font-size: 12px;
line-height: 1;
padding: 2px 4px;
border-radius: 6px;
opacity: 0.55;
}
.referral-sent-del:hover, .referral-sent-del:active { opacity: 1; color: var(--danger, #e11d48); }
/* Social share-knoppen onder de deel-link. */
.referral-share-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin-top: 14px;
}
.referral-share-label {
width: 100%;
font-size: 12px;
font-weight: 600;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.share-btn {
width: 38px;
height: 38px;
border-radius: 50%;
border: none;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: #fff;
padding: 0;
transition: transform 0.12s, opacity 0.12s;
}
.share-btn svg { width: 18px; height: 18px; }
.share-btn:hover { transform: scale(1.08); }
.share-btn:active { transform: scale(0.96); }
.share-whatsapp { background: #25d366; }
.share-x { background: #000; }
.share-fb { background: #1877f2; }
.share-linkedin { background: #0a66c2; }
.share-telegram { background: #229ed9; }
.share-line { background: #06c755; }
.share-email { background: #6b7280; }
[data-theme="dark"] .share-x { background: #1d1d1d; border: 1px solid #444; }
/* Inline e-mail-share formulier (klapt open onder de share-knoppen). */
.referral-email-form {
margin-top: 14px;
padding: 14px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--accent-soft);
}
.referral-email-row {
display: flex;
gap: 8px;
align-items: center;
}
.referral-email-input {
flex: 1;
min-width: 0;
}
.referral-email-row .primary { white-space: nowrap; }
.referral-email-hint {
margin: 8px 0 0;
font-size: 12px;
color: var(--muted);
}
@media (max-width: 480px) {
.referral-email-row { flex-wrap: wrap; }
.referral-email-row .primary { width: 100%; }
}
/* Welkom-banner op signup-pagina als de bezoeker via een referral-link kwam. */
.referral-welcome {
background: var(--accent-soft);
border: 1px solid var(--accent);
border-radius: var(--radius);
padding: 12px 14px;
margin: 0 0 16px;
text-align: center;
font-size: 14px;
}
.referral-welcome strong { display: block; margin-bottom: 4px; }
.referral-welcome p { margin: 0; color: var(--muted); }
/* Honger-grens waarschuwing (1200/1500 kcal). Toont een warning-label met
info-knop op plekken waar dagtotaal kcal of target onder de grens komt. */
.hunger-warning {
display: flex;
align-items: center;
gap: 8px;
margin-top: 8px;
padding: 6px 10px;
background: rgba(217, 119, 6, 0.12);
border: 1px solid rgba(217, 119, 6, 0.30);
border-radius: var(--radius-sm);
font-size: 13px;
color: #b45309;
}
[data-theme="dark"] .hunger-warning,
@media (prefers-color-scheme: dark) {
.hunger-warning {
background: rgba(245, 158, 11, 0.16);
color: #fbbf24;
}
}
.hunger-warning-text { flex: 1; font-weight: 500; }
/* Vet-aandeel readout + Slim aanvullen (Smart Top-Up).
Stuurt de late-dag-aanvulling richting mager eiwit i.p.v. vet. */
.macro-insight {
margin-top: 10px;
padding: 6px 10px;
border-radius: var(--radius-sm);
font-size: 13px;
color: var(--muted);
background: var(--bg-subtle);
border: 1px solid var(--border-soft);
}
.macro-insight.high {
background: rgba(217, 119, 6, 0.12);
border-color: rgba(217, 119, 6, 0.30);
color: #b45309;
}
[data-theme="dark"] .macro-insight.high,
@media (prefers-color-scheme: dark) {
.macro-insight.high { background: rgba(245, 158, 11, 0.16); color: #fbbf24; }
}
.topup-card {
margin-top: 10px;
padding: 12px 14px;
border-radius: var(--radius-sm);
background: var(--accent-soft);
border: 1px solid var(--accent);
max-width: 100%;
min-width: 0;
overflow-wrap: anywhere;
}
.topup-card.lean {
background: rgba(217, 119, 6, 0.10);
border-color: rgba(217, 119, 6, 0.35);
}
/* ===== MD #1: prominente meal-add knoppen + inklapbare aanbeveling ===== */
.meal-add-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.meal-add-btn {
flex: 0 0 auto; /* basis: sizet op inhoud (gestandaardiseerde primaire actie) */
min-width: 120px;
padding: 11px 14px;
border: none;
border-radius: var(--radius-sm);
background: var(--accent);
color: #fff;
font: inherit;
font-weight: 600;
font-size: 14px;
cursor: pointer;
transition: background 0.15s ease;
}
.meal-add-btn:hover { background: var(--accent-hover); }
.meal-add-btn:disabled { opacity: 0.55; cursor: progress; }
/* In de Meals add-rij delen de 4 knoppen de breedte; daar wél uitrekken. */
.meal-add-row .meal-add-btn { flex: 1 1 auto; }
/* Actie-toolbar onder de menutitel (zelfde stijl als de meals-toolbar).
Gebruikt door Injecties en Bijwerkingen om de knoppen bovenaan te groeperen. */
.action-toolbar {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 16px;
flex-wrap: wrap;
}
.rec-collapsible { margin-top: 10px; }
.rec-toggle {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border: 1px solid var(--border-soft);
border-radius: 999px;
background: var(--bg-subtle, transparent);
color: var(--text);
font: inherit;
font-weight: 600;
font-size: 13px;
cursor: pointer;
}
.rec-toggle:hover { border-color: var(--accent); color: var(--accent); }
.rec-chev { font-size: 11px; color: var(--muted); }
.rec-panel { margin-top: 8px; }
.rec-note { margin: 0 0 8px; font-size: 13px; color: var(--text); line-height: 1.5; overflow-wrap: anywhere; }
/* ===== MD #2: onboarding action-pane (welkom + setup-checklist) ===== */
.ob-pane {
margin: 0 0 20px;
padding: 20px 20px 18px;
border: 1px solid var(--accent);
border-radius: var(--radius-lg, 18px);
background: var(--accent-soft);
box-shadow: var(--shadow-lg);
}
.ob-pane-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ob-pane-headtext { min-width: 0; }
.ob-pane-title { margin: 0; font-size: 1.15rem; font-weight: 700; color: var(--text); }
.ob-pane-sub { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.ob-dismiss {
flex: 0 0 auto; width: 30px; height: 30px;
border: 1px solid var(--border-soft); border-radius: 8px;
background: var(--surface); color: var(--muted);
font-size: 18px; line-height: 1; cursor: pointer;
}
.ob-dismiss:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.ob-dismiss:disabled { opacity: 0.4; cursor: not-allowed; }
.ob-dismiss-hint { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
/* Top-right Reset + Close buttons (replaces the bare × ). */
.ob-pane-actions { flex: 0 0 auto; display: flex; gap: 8px; }
.ob-headbtn {
padding: 6px 14px; border: 1px solid var(--border-soft); border-radius: 8px;
background: var(--surface); color: var(--text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.ob-headbtn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.ob-headbtn:disabled { opacity: 0.4; cursor: not-allowed; }
.ob-headbtn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.ob-headbtn-primary:hover:not(:disabled) { background: var(--accent-hover); color: #fff; }
.ob-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 10px;
margin-top: 14px;
}
.ob-card {
display: flex; flex-direction: column;
padding: 12px 14px;
border: 1px solid var(--border); border-radius: var(--radius-sm, 10px);
background: var(--surface);
min-height: 175px; /* uniforme hoogte over alle 8 kaarten (intro + stappen),
zodat de twee rijen even hoog zijn los van tekstlengte;
geen overflow/scroll, kaarten groeien alleen indien nodig. */
}
.ob-card.tier1 { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.ob-card.intro { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
/* (dimming dropped per Hans — all cards full contrast; tier-1 keeps only the accent border) */
/* "Read this first" content-modal (reuses .modal/.modal-backdrop shell). */
.intro-modal { max-width: 760px; }
.intro-lead { margin: 0 0 14px; font-size: 16px; font-weight: 600; line-height: 1.45; color: var(--text); }
.intro-story { margin: 0 0 12px; font-size: 13.5px; line-height: 1.55; color: var(--text); }
.intro-close { margin: 8px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--text); }
.intro-signature { margin: 14px 0 0; font-size: 13.5px; font-weight: 600; color: var(--text); }
.intro-readfull { margin: 14px 0 0; font-size: 13px; }
.intro-readfull a { color: var(--accent); text-decoration: underline; }
.intro-modal-foot { padding: 14px 16px; border-top: 1px solid var(--border-soft); display: flex; justify-content: flex-end; }
.intro-modal-foot .primary { padding: 8px 18px; }
/* Post-setup referral-mention (dashboard, los van de Welcome-pane) */
.ref-mention {
display: flex; align-items: center; justify-content: space-between; gap: 14px;
margin: 0 0 16px; padding: 12px 16px;
background: var(--accent-soft); border: 1px solid var(--accent);
border-radius: 12px;
}
.ref-mention-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ref-mention-text strong { font-size: 14px; color: var(--text); }
.ref-mention-text span { font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.ref-mention-btn {
flex: 0 0 auto; padding: 8px 18px; border-radius: 999px;
background: var(--accent); color: #fff; border: 0; font-weight: 700; cursor: pointer;
}
.ref-mention-btn:hover { filter: brightness(1.05); }
@media (max-width: 640px) {
.ref-mention { flex-direction: column; align-items: stretch; }
.ref-mention-btn { width: 100%; }
}
.ob-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.ob-card-title { font-weight: 700; font-size: 14px; color: var(--text); }
.ob-badge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.ob-badge.done { background: rgba(22,163,74,0.14); color: #16a34a; }
.ob-badge.action { background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent); }
.ob-badge.info { background: var(--bg-subtle, rgba(0,0,0,0.05)); color: var(--muted); }
.ob-badge.plus { background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent); } /* Basic: Plus-only teaser */
.ob-badge.todo { background: var(--bg-subtle, rgba(0,0,0,0.05)); color: var(--muted); }
button.ob-badge { border: none; font: inherit; cursor: pointer; } /* intro: badge is een toggle-knop */
button.ob-badge.done { cursor: pointer; }
.ob-card-desc { margin: 0 0 10px; font-size: 12px; color: var(--muted); flex: 1; }
.ob-card-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; } /* knop onderaan, uitgelijnd over kaarten */
.ob-btn {
padding: 7px 14px; border: none; border-radius: 8px;
background: var(--accent); color: #fff; font: inherit; font-weight: 600; font-size: 13px; cursor: pointer;
}
.ob-btn:hover { background: var(--accent-hover); }
.ob-btn-confirm {
align-self: flex-start; margin-bottom: 8px; /* boven de Open-knop; Open lijnt zo uit met andere kaarten */
padding: 7px 12px; border: 1px solid var(--border-soft); border-radius: 8px;
background: var(--surface); color: var(--text); font: inherit; font-weight: 600; font-size: 13px; cursor: pointer;
}
#profile-scale { scroll-margin-top: 70px; } /* deep-link vanuit onboarding "Weight source" */
.ob-btn-confirm:hover { border-color: var(--accent); color: var(--accent); }
.ob-tick {
padding: 7px 14px; border: none; border-radius: 8px;
background: var(--accent); color: #fff; font: inherit; font-weight: 600; font-size: 13px; cursor: pointer;
}
.ob-tick:hover { background: var(--accent-hover); }
.ob-tick.done { background: rgba(22,163,74,0.14); color: #16a34a; }
@media (max-width: 640px) { .ob-cards { grid-template-columns: 1fr; } }
/* "Toon stappenplan"-knopje: verschijnt als de pane gedismissed is (on/off). */
.ob-restore {
display: inline-flex; align-items: center; gap: 6px;
margin: 0 0 16px;
padding: 7px 14px;
border: 1px solid var(--border-soft); border-radius: 999px;
background: var(--bg-subtle, transparent); color: var(--muted);
font: inherit; font-weight: 600; font-size: 13px; cursor: pointer;
}
.ob-restore:hover { border-color: var(--accent); color: var(--accent); }
.ob-restore::before { content: "✨"; font-size: 12px; }
.retake-setup-btn { margin-top: 14px; font-size: 13px; }
.topup-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; max-width: 100%; }
.topup-title { font-weight: 700; font-size: 14px; color: var(--text); }
.topup-sub { font-size: 13px; color: var(--muted); min-width: 0; flex: 1 1 100%; overflow-wrap: anywhere; }
.topup-reason { margin: 8px 0 0; font-size: 13px; color: var(--text); overflow-wrap: anywhere; }
.topup-empty { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.topup-find { margin-top: 10px; background: none; border: none; color: var(--accent); font-size: 13px; font-weight: 600; cursor: pointer; padding: 4px 0; align-self: flex-start; }
.topup-find:hover { color: var(--accent-hover); text-decoration: underline; }
.topup-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; max-height: 232px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
/* ~4 items zichtbaar (item min 44px + 8px gap), scroll voor de rest. Ruimte rechts
zodat de scrollbar de kaarten niet overlapt. */
.topup-list { padding-right: 4px; }
.topup-item {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1px;
width: 100%;
min-width: 0;
min-height: 44px;
padding: 6px 12px;
text-align: left;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
background: var(--bg-subtle);
cursor: pointer;
}
.topup-item:hover, .topup-item:active { border-color: var(--accent); background: var(--accent-soft); }
.topup-item.static { cursor: default; }
.topup-item.static:hover, .topup-item.static:active { border-color: var(--border); background: var(--bg-subtle); }
/* Full row width so name + macros wrap WITHIN the row instead of sizing to
content and running off the right edge (align-items:flex-start shrinks them). */
.topup-item-name { font-weight: 600; font-size: 14px; color: var(--text); width: 100%; min-width: 0; overflow-wrap: anywhere; }
.topup-item-macros { font-size: 12px; color: var(--muted); width: 100%; min-width: 0; line-height: 1.25; overflow-wrap: anywhere; }
/* Dagelijkse welzijn-score (Meals) */
.wellbeing-card {
margin-top: 10px;
padding: 12px 14px;
border-radius: var(--radius-sm);
background: var(--bg-subtle);
border: 1px solid var(--border-soft);
}
.wellbeing-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.wellbeing-prompt { font-weight: 700; font-size: 14px; color: var(--text); }
.wellbeing-hint { font-size: 12px; color: var(--muted); }
.wellbeing-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 10px;
}
.wb-chip {
min-width: 36px;
min-height: 40px;
flex: 1 1 36px;
padding: 0;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
background: var(--bg);
color: var(--text);
font-size: 15px;
font-weight: 600;
cursor: pointer;
}
.wb-chip:hover, .wb-chip:active { border-color: var(--accent); }
.wb-chip.on {
background: var(--accent);
border-color: var(--accent);
color: #fff;
}
.wellbeing-saved { display: inline-block; margin-top: 8px; font-size: 12px; color: var(--muted); }
/* Photo-scan modal */
.scan-modal { max-width: 560px; }
/* Scan modals zijn altijd een flex-kolom: alleen de body scrollt, de
actie-footer blijft gepind. Lost iOS-portret op waar een sticky
last-child (de log/opslaan-knop) niet omhoog in beeld werd getrokken. */
.modal.scan-modal {
display: flex;
flex-direction: column;
overflow: hidden;
}
.scan-modal .modal-body {
flex: 1 1 auto;
min-height: 0; /* let the flex body shrink + scroll internally so the pinned
footer (Log) stays in view when content is tall (e.g. with a
suggestion box) instead of being clipped past 100vh */
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.scan-footer {
flex-shrink: 0;
display: flex;
justify-content: space-between;
gap: 8px;
padding: 12px 16px;
/* clear the iOS home indicator so Log isn't tucked under it */
padding-bottom: calc(12px + env(safe-area-inset-bottom));
border-top: 1px solid var(--border-soft);
background: var(--surface-elev);
}
.scan-choose { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 8px 0; }
.scan-status { font-size: 13px; color: var(--muted); margin: 0; }
.scan-photo-btn {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
width: 100%;
max-width: 320px;
padding: 28px 18px;
border: 2px dashed var(--border);
border-radius: var(--radius-sm);
background: var(--bg-subtle);
color: var(--text);
font-weight: 600;
cursor: pointer;
}
.scan-photo-btn:hover { border-color: var(--accent); background: var(--accent-soft); }
.scan-photo-btn input[type="file"] { display: none; }
.scan-photo-btn.disabled { opacity: .5; cursor: not-allowed; }
.scan-photo-btn.disabled:hover { border-color: var(--border); background: var(--bg-subtle); }
.scan-photo-icon { font-size: 30px; line-height: 1; }
.scan-hint { font-size: 12px; color: var(--muted); margin: 4px 0 0; text-align: center; }
.scan-analyzing { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 32px 0; color: var(--muted); }
.scan-spinner {
width: 34px; height: 34px;
border: 3px solid var(--border);
border-top-color: var(--accent);
border-radius: 50%;
animation: scan-spin .8s linear infinite;
}
@keyframes scan-spin { to { transform: rotate(360deg); } }
.scan-error-box { padding: 8px 0; }
.scan-date-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.scan-date-row label { font-size: 13px; color: var(--muted); }
.scan-date-row input { flex: 1; max-width: 200px; }
.scan-mealtype { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.mt-chip {
flex: 1 1 auto;
min-height: 40px;
padding: 6px 12px;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
background: var(--bg);
color: var(--text);
font-size: 13px;
font-weight: 600;
cursor: pointer;
}
.mt-chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.scan-items { display: flex; flex-direction: column; gap: 12px; }
.scan-item { border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 10px 12px; background: var(--bg-subtle); }
.scan-item-head { display: flex; align-items: center; gap: 8px; }
.scan-item-name { flex: 1; font-weight: 600; padding: 6px 8px; }
.scan-item-del { font-size: 15px; line-height: 1; color: var(--accent); }
.scan-item-conf { display: inline-block; margin: 4px 0 8px; font-size: 11px; color: var(--muted); }
.scan-item-conf.low { color: #b45309; }
.scan-item-conf.high { color: var(--accent); }
.scan-fields { display: flex; flex-wrap: wrap; gap: 8px; }
.scan-fields label { display: flex; flex-direction: column; font-size: 11px; color: var(--muted); flex: 1 1 56px; gap: 2px; }
.scan-fields input { width: 100%; padding: 6px 6px; font-size: 14px; }
.scan-fields .scan-protein input { border-color: var(--accent); }
/* Scan-correction suggestion ("adjust to your usual?") — per line, suggest-only. */
.scan-suggest {
margin-top: 10px;
padding: 10px 12px;
border: 1px solid var(--accent);
border-radius: var(--radius-sm);
background: var(--indigo-tint, rgba(99, 102, 241, 0.07));
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 12px;
}
.scan-suggest-body { display: flex; flex-direction: column; gap: 2px; flex: 1 1 60%; min-width: 0; }
.scan-suggest-title { font-size: 12px; font-weight: 600; color: var(--text); }
.scan-suggest-macros { font-size: 12px; color: var(--muted); }
.scan-suggest-alt { font-size: 11px; color: var(--muted); opacity: 0.8; }
.scan-suggest-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.scan-suggest-accept {
font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 999px;
border: none; background: var(--accent); color: #fff; cursor: pointer;
}
.scan-suggest-dismiss {
font-size: 12px; padding: 6px 10px; border-radius: 999px;
border: 1px solid var(--border-soft); background: transparent; color: var(--muted); cursor: pointer;
}
.scan-suggest-done { display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 600; color: var(--accent); }
.scan-save-food {
display: inline-block; margin-top: 8px; font-size: 12px; padding: 5px 10px;
border-radius: 999px; border: 1px dashed var(--border-soft); background: transparent;
color: var(--muted); cursor: pointer;
}
.scan-save-food:hover { border-color: var(--accent); color: var(--accent); }
.scan-total {
display: flex; flex-wrap: wrap; gap: 6px 16px;
margin: 16px 0 6px;
padding: 10px 12px;
border-radius: var(--radius-sm);
background: var(--accent-soft);
font-size: 14px;
}
.scan-total-kcal strong { font-size: 16px; }
.scan-total-protein strong { color: var(--accent); }
.scan-notes { font-size: 13px; color: var(--muted); font-style: italic; margin: 8px 0 0; }
/* Body-composition scan (InBody/DEXA) confirm fields */
.bc-source { margin-bottom: 4px; }
.bc-source .scan-status { display: block; margin-bottom: 6px; }
.bc-fields { display: flex; flex-direction: column; gap: 10px; }
.bc-field { display: flex; flex-direction: column; gap: 3px; }
.bc-field > label { font-size: 13px; font-weight: 600; color: var(--text); }
.bc-field-input { display: flex; align-items: center; gap: 6px; }
.bc-field-input input { flex: 1; padding: 7px 8px; font-size: 15px; }
.bc-unit { font-size: 13px; color: var(--muted); min-width: 24px; }
.scan-analyze-btn { width: 100%; margin-top: 2px; }
.bc-field-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.bc-provenance { font-size: 11px; color: #b45309; }
/* Pro v1 insights */
.insights-panel {
margin: 6px 0 22px;
padding: 14px 16px;
border-radius: var(--radius-sm);
background: var(--accent-soft);
border: 1px solid var(--accent);
}
.insights-title { margin: 0 0 4px; font-size: 15px; }
.insights-header { margin: 0 0 12px; font-size: 12px; color: var(--muted); }
.insights-list { display: flex; flex-direction: column; gap: 10px; }
.insight-card {
padding: 10px 12px;
border-radius: var(--radius-sm);
background: var(--bg);
border: 1px solid var(--border-soft);
border-left: 3px solid var(--accent);
}
.insight-card.early { border-left-color: #d97706; }
.insight-card p { margin: 0; font-size: 14px; color: var(--text); line-height: 1.45; }
.insights-empty { margin: 0; font-size: 13px; color: var(--muted); }
/* Basic teasers: advertise the Plus feature with a sample + upgrade trigger.
The sample card is dashed/muted so it reads as an example, not the user's
own computed result. Shared by the insights panel and the meals rec panel. */
.insights-teaser-body { margin: 0 0 12px; font-size: 13px; color: var(--text); line-height: 1.5; }
.insight-card.sample { border-left-style: dashed; opacity: .85; }
.rec-teaser { display: flex; flex-direction: column; gap: 8px; }
.rec-teaser-sample { margin: 0; font-size: 12px; color: var(--muted); line-height: 1.45; font-style: italic; }
.rec-teaser .ob-btn, .insights-teaser .ob-btn { align-self: flex-start; margin-top: 4px; }
/* Losse (gedateerde) bijwerkingen */
.standalone-section { margin-top: 22px; }
.standalone-head {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 8px;
}
.standalone-head h3 { margin: 0; font-size: 15px; }
.linklike.danger { color: var(--accent); font-size: 16px; line-height: 1; }
.linklike.danger:hover { color: var(--accent-hover); }
.hunger-info-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
padding: 0;
border: 0;
background: none;
color: var(--muted);
cursor: pointer;
vertical-align: middle;
}
.hunger-info-btn:hover { color: var(--accent); }
.hunger-info-btn .info-icon { width: 16px; height: 16px; display: block; }
.hunger-info-btn:hover {
background: currentColor;
color: var(--surface);
}
/* Kritieke ondergrens (< 800 kcal) — rode variant naast de amber hunger-grens. */
.hunger-warning.critical {
background: rgba(220, 38, 38, 0.12);
border-color: rgba(220, 38, 38, 0.40);
color: #b91c1c;
}
[data-theme="dark"] .hunger-warning.critical,
@media (prefers-color-scheme: dark) {
.hunger-warning.critical {
background: rgba(248, 113, 113, 0.18);
color: #fca5a5;
}
}
.hunger-help-host.hidden { display: none; }
.info-popup-host.hidden { display: none; }
/* Table inside an info popup (e.g. "what an InBody/DEXA scan reads"). */
.info-popup-modal .info-table {
width: 100%;
border-collapse: collapse;
margin: 12px 0;
font-size: 14px;
}
.info-popup-modal .info-table th,
.info-popup-modal .info-table td {
border-bottom: 1px solid var(--border, #e2e8f0);
padding: 7px 10px;
text-align: left;
}
.info-popup-modal .info-table th { font-weight: 600; color: var(--muted, #64748b); }
.info-popup-modal .info-table .c { text-align: center; width: 4.5rem; }
.info-popup-modal .info-notes {
margin: 12px 0 0;
padding-left: 18px;
font-size: 13px;
color: var(--muted, #64748b);
}
.info-popup-modal .info-notes li { margin-bottom: 5px; }
/* ℹ in een smal invoer-cel: pin 'm rechtsboven (uit de flow) zodat de label op
z'n eigen regel blijft en de waarde er direct onder staat (niet omlaag geduwd). */
.field-info { position: relative; }
.field-info > label { padding-right: 22px; }
.field-info > label > .hunger-info-btn { position: absolute; top: 0; right: 0; }
.hunger-help-modal {
width: min(95vw, 560px);
}
.hunger-help-modal ul {
margin: 8px 0 12px 22px;
}
.hunger-help-modal li {
margin-bottom: 4px;
}
/* Sectie-header met titel links en actie-knop rechts (b.v. Injecties > Historie). */
.section-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin: 24px 0 12px;
flex-wrap: wrap;
}
.section-head .section-title {
margin: 0;
}
h2 { font-size: 22px; font-weight: 600; margin: 0 0 18px; letter-spacing: -0.01em; }
/* Tier badge next to the Dashboard / Profile heading (C1). */
h2.with-tier { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tier-badge {
font-size: 12px; font-weight: 700; letter-spacing: 0.02em;
padding: 3px 10px; border-radius: 999px;
background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent);
white-space: nowrap;
}
.tier-basic .tier-badge { background: var(--bg-subtle, rgba(0,0,0,0.05)); color: var(--muted); border-color: var(--border-soft); }
h3 { font-weight: 600; letter-spacing: -0.005em; }
/* ===== Login ===== */
.login-shell {
min-height: 100vh;
display: grid;
place-items: center;
padding: 24px;
}
.login-card {
width: 100%;
max-width: 360px;
background: var(--surface);
border: 1px solid var(--border-soft);
border-radius: var(--radius);
padding: 32px 28px;
box-shadow: var(--shadow-md);
}
.login-card h1 {
margin: 0 0 4px;
font-size: 22px;
letter-spacing: -0.01em;
}
.login-card .subtitle {
margin: 0 0 20px;
color: var(--muted);
font-size: 13px;
}
/* Lucht tussen de Inloggen-knop en de "Nog geen account?"-regel eronder. */
.login-card .primary + .subtitle {
margin-top: 18px;
}
label {
display: block;
font-size: 13px;
color: var(--muted);
margin-bottom: 4px;
}
input[type="email"],
input[type="password"],
input[type="text"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
textarea,
select {
width: 100%;
padding: 9px 12px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--surface);
color: var(--text);
font: inherit;
text-align: left;
transition: border-color 0.12s, box-shadow 0.12s;
box-sizing: border-box;
}
/* iOS Safari rendert default centered en met
inconsistente hoogte. Reset zodat hij identiek oogt aan andere inputs. */
input[type="date"],
input[type="time"],
input[type="datetime-local"] {
-webkit-appearance: none;
appearance: none;
min-height: 40px;
text-align: left;
}
/* De waarde-tekst zit op iOS/Safari in een pseudo-element met eigen
text-align en flex. Forceer links + niet rekken. */
input[type="date"]::-webkit-date-and-time-value,
input[type="time"]::-webkit-date-and-time-value,
input[type="datetime-local"]::-webkit-date-and-time-value {
text-align: left;
}
input[type="date"]::-webkit-datetime-edit,
input[type="time"]::-webkit-datetime-edit,
input[type="datetime-local"]::-webkit-datetime-edit {
text-align: left;
display: block;
}
input:focus, textarea:focus, select:focus {
outline: 0;
border-color: var(--accent);
box-shadow: var(--focus-ring);
}
/* Dark mode: maak de native date/time picker icon zichtbaar (default zwart
op donkere achtergrond = onzichtbaar). 'invert' draait kleuren om zonder
nieuwe SVG nodig. */
:root[data-theme="dark"] input::-webkit-calendar-picker-indicator,
:root[data-theme="dark"] input::-webkit-inner-spin-button {
filter: invert(0.85);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) input::-webkit-calendar-picker-indicator,
:root:not([data-theme]) input::-webkit-inner-spin-button {
filter: invert(0.85);
}
}
.field { margin-bottom: 14px; }
button {
font: inherit;
}
button.primary {
padding: 10px 16px;
border: 0;
border-radius: var(--radius);
background: var(--accent);
color: white;
font-weight: 500;
cursor: pointer;
box-shadow: var(--shadow-sm);
transition: background 0.12s, box-shadow 0.12s, transform 0.06s;
}
.login-card button.primary { width: 100%; }
button.primary:hover { background: var(--accent-hover); box-shadow: var(--shadow-md); }
button.primary:active { transform: translateY(1px); box-shadow: var(--shadow-sm); }
button.primary:disabled { opacity: 0.55; cursor: progress; box-shadow: none; }
button.primary:focus-visible { outline: 0; box-shadow: var(--focus-ring), var(--shadow-sm); }
button.ghost:focus-visible,
button.linklike:focus-visible,
.unit-toggle:focus-visible {
outline: 0;
box-shadow: var(--focus-ring);
}
.error {
margin: 0 0 14px;
padding: 9px 11px;
background: var(--danger-bg);
color: var(--danger);
border-radius: var(--radius);
font-size: 13px;
}
/* ===== App shell ===== */
.app-shell {
min-height: 100vh;
display: grid;
grid-template-rows: auto 1fr;
}
.topbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 20px;
background: var(--surface);
border-bottom: 1px solid var(--border);
box-shadow: var(--shadow-sm);
position: sticky;
top: 0;
z-index: 20;
}
.topbar .brand {
font-weight: 700;
font-size: 22px;
letter-spacing: -0.01em;
color: var(--text);
display: flex;
align-items: center; /* center i.p.v. baseline: logo is een geneste flexbox,
baseline werd uit de doos gesynthetiseerd → versie scheef */
gap: 8px;
}
.topbar .brand-word { white-space: nowrap; }
.topbar .brand .version {
font-size: 12px;
font-weight: 500;
color: var(--muted);
font-variant-numeric: tabular-nums;
margin-left: 6px; /* inline ná het woord → deelt de tekst-baseline (bottom lijnt met 'Glippier') */
}
/* Versie is een link naar de changelog: subtiel (erft de muted look), geen
standaard-blauw/underline; pas bij hover een accent-hint. */
.topbar .brand a.version { text-decoration: none; cursor: pointer; }
.topbar .brand a.version:hover { color: var(--accent); text-decoration: underline; }
.app-footer a.version { color: var(--muted); text-decoration: none; cursor: pointer; }
.app-footer a.version:hover { color: var(--accent); text-decoration: underline; }
.topbar nav {
display: flex;
gap: 4px;
}
.topbar nav a {
color: var(--muted);
font-size: 14px;
font-weight: 600;
padding: 6px 12px;
border-radius: var(--radius-sm);
transition: background 0.12s, color 0.12s;
display: inline-flex;
align-items: center;
gap: 6px;
}
.topbar nav a:hover {
color: var(--text);
background: var(--bg-subtle);
text-decoration: none;
}
.topbar nav a.active {
color: var(--accent);
background: var(--accent-soft);
text-decoration: none;
}
/* Inline SVG nav-icons (Lucide-stijl, zelfde lijn als landing-page). */
.topbar nav .nav-icon {
width: 18px;
height: 18px;
flex-shrink: 0;
}
.topbar .user {
display: flex;
align-items: center;
gap: 14px;
font-size: 13px;
color: var(--muted);
}
.topbar .user > span { font-weight: 500; color: var(--text); }
.topbar .user-link {
display: inline-flex;
align-items: center;
gap: 6px;
font-weight: 500;
color: var(--text);
text-decoration: none;
padding: 4px 10px 4px 8px;
border: 1px solid var(--border-soft);
border-radius: 999px;
background: var(--bg-subtle, transparent);
transition: background 0.15s, border-color 0.15s, color 0.15s;
line-height: 1;
}
.topbar .user-link:hover {
background: var(--accent-soft, rgba(99,102,241,0.10));
border-color: var(--accent);
color: var(--accent);
}
.topbar .user-link.active {
background: var(--accent-soft, rgba(99,102,241,0.16));
border-color: var(--accent);
color: var(--accent);
}
.topbar .user-link-icon { width: 18px; height: 18px; line-height: 1; }
/* Pill die WIENS data je bekijkt voor partner/doctor/admin. */
.viewing-customer-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: 999px;
background: var(--accent-soft);
color: var(--accent);
font-size: 12px;
font-weight: 500;
border: 1px solid var(--accent);
}
.viewing-customer-pill svg { flex-shrink: 0; }
.viewing-customer-pill strong { font-weight: 700; }
/* Memberships-blok in Group-tab voor partner/doctor — lijst van groepen
met "Verlaten"-knop per item. */
.memberships-block {
background: var(--surface);
border: 1px solid var(--border-soft);
border-radius: var(--radius);
padding: 14px 16px;
margin: 0 0 16px;
}
.memberships-block .small { margin: 0 0 10px; }
.memberships-list {
list-style: none;
margin: 0;
padding: 0;
}
.memberships-list li {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 0;
border-top: 1px solid var(--border);
}
.memberships-list li:first-child { border-top: 0; }
.memberships-list li span { font-weight: 500; }
.topbar .user-link-name { font-size: inherit; }
.topbar .user-link-crown { font-size: 13px; line-height: 1; margin-right: 1px; }
.topbar .context-chip { display: none; } /* context info is af te lezen uit switcher + Profiel */
.topbar .customer-switch {
padding: 4px 8px;
border-radius: 6px;
border: 1px solid var(--border, #d1d5db);
background: var(--bg, #fff);
color: var(--text);
font-size: 13px;
max-width: 220px;
}
.topbar .locale-select {
padding: 4px 4px;
border-radius: 6px;
border: 1px solid var(--border, #d1d5db);
background: var(--bg, #fff);
color: var(--text);
font-size: 12px;
cursor: pointer;
width: 78px;
}
/* Taalkiezer in de topbar — flag-trigger + popup (zelfde stijl als landing). */
[x-cloak] { display: none !important; }
.topbar .lang-select { position: relative; display: inline-flex; }
.topbar .lang-trigger { min-width: 36px; padding: 0 9px; font-size: 16px; line-height: 1; }
.topbar .lang-menu {
position: absolute;
top: calc(100% + 6px);
right: 0;
z-index: 60;
margin: 0;
padding: 6px;
list-style: none;
/* Fit the content (flag + ISO code + check) instead of a fixed wide box, so
the menu sits snugly below the flag rather than sprawling left. */
width: max-content;
min-width: 96px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.45);
}
.topbar .lang-menu li { margin: 0; }
.topbar .lang-item {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 12px;
border-radius: 8px;
color: var(--text);
text-decoration: none;
font-size: 14px;
white-space: nowrap;
}
.topbar .lang-item:hover { background: var(--bg-subtle); text-decoration: none; }
.topbar .lang-item .lang-flag { font-size: 17px; }
.topbar .lang-item.is-current { font-weight: 700; }
.topbar .lang-item.is-current .lang-name::after { content: " ✓"; color: var(--accent); }
.topbar .lang-item.is-soon { opacity: 0.4; pointer-events: none; }
.group-filter-tabs { margin: 4px 0 12px; flex-wrap: wrap; gap: 4px; }
.app-footer {
display: none; /* default verborgen, alleen mobile toont 'm */
padding: 12px 16px;
text-align: center;
font-size: 11px;
color: var(--muted);
border-top: 1px solid var(--border-soft);
gap: 6px;
align-items: center;
justify-content: center;
}
.app-footer .brand-small { font-weight: 600; font-size: 15px; }
/* app-footer blijft verborgen: de versie staat nu naast het logo in de topbar
(ook op mobiel/tablet), dus geen versie meer onderaan. */
.measurements-table th.sortable { cursor: pointer; user-select: none; }
.measurements-table th.sortable:hover { color: var(--accent); }
@media (max-width: 900px) {
.topbar .user-link { padding: 3px 6px; max-width: 28vw; overflow: hidden; }
.topbar .user-link-icon { display: none; }
.topbar .user-link-name {
font-size: 12px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.topbar .customer-switch {
width: 130px;
max-width: 35vw;
padding: 3px 4px;
font-size: 11px;
}
.topbar .locale-select {
padding: 2px 0;
font-size: 11px;
width: 52px;
min-width: 0;
text-align: center;
}
.topbar .user button.linklike { padding: 4px 4px; font-size: 12px; }
}
.topbar .logout-btn { font-size: 16px; padding: 4px 6px; }
.topbar button.linklike {
background: transparent;
border: 0;
color: var(--accent);
cursor: pointer;
font: inherit;
padding: 4px 8px;
border-radius: var(--radius-sm);
}
.topbar button.linklike:hover {
text-decoration: none;
background: var(--bg-subtle);
}
/* Tablet + phone: nav drops to its own full-width row, controls condense.
Breakpoint at 900px so a portrait iPad (768-834) also wraps instead of
overflowing the viewport (which pushed page content off-screen too). */
@media (max-width: 900px) {
.topbar {
padding: 8px 10px;
flex-wrap: wrap;
gap: 6px 10px;
max-width: 100vw;
}
.topbar .brand { font-size: 18px; }
.topbar nav {
order: 3;
width: 100%;
justify-content: space-around;
border-top: 1px solid var(--border-soft);
padding-top: 8px;
margin-top: 4px;
}
.topbar nav a {
flex: 1;
min-width: 0;
justify-content: center;
font-size: 10px;
padding: 6px 2px;
flex-direction: column;
gap: 2px;
}
.topbar .user {
font-size: 12px;
gap: 4px;
flex-wrap: wrap;
justify-content: flex-end;
max-width: 100%;
min-width: 0;
}
.topbar .user button.linklike { padding: 4px 6px; font-size: 12px; }
.context-chip {
font-size: 0.74rem;
padding: 2px 6px;
max-width: 60vw;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.app-content {
padding: 24px;
max-width: 1100px;
width: 100%;
margin: 0 auto;
}
@media (max-width: 640px) {
.app-content { padding: 16px 12px 80px; }
}
.placeholder {
padding: 40px;
text-align: center;
color: var(--muted);
background: var(--surface);
border: 1px dashed var(--border);
border-radius: var(--radius);
}
.placeholder.small { padding: 12px; font-size: 13px; }
/* ===== Meals ===== */
.meals-toolbar {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 16px;
flex-wrap: wrap;
}
.meals-toolbar input[type="date"] { width: auto; }
@media (max-width: 640px) {
.meals-toolbar .ghost { padding: 8px 10px; font-size: 13px; }
}
button.ghost {
padding: 7px 12px;
border: 1px solid var(--border);
background: var(--surface);
color: var(--text);
border-radius: var(--radius);
font: inherit;
cursor: pointer;
}
button.ghost:hover { border-color: var(--accent); color: var(--accent); }
/* Preview = secundaire maar gekleurde actie (zacht accent), naast de volle
primary 'Export & email'. */
button.preview-btn {
padding: 7px 14px;
border: 1px solid var(--accent);
background: var(--accent-soft);
color: var(--accent);
border-radius: var(--radius);
font: inherit;
font-weight: 600;
cursor: pointer;
}
button.preview-btn:hover { background: var(--accent); color: #fff; }
button.preview-btn:focus-visible { outline: 0; box-shadow: var(--focus-ring), var(--shadow-sm); }
.meal-section {
background: var(--surface);
border: 1px solid var(--border-soft);
border-radius: var(--radius);
margin-bottom: 14px;
padding: 14px 18px;
box-shadow: var(--shadow-sm);
}
.meal-section-icon {
margin-right: 8px;
font-size: 18px;
vertical-align: -1px;
}
.meal-section-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 6px;
}
.meal-section-head h3 { margin: 0; font-size: 15px; }
.meal-card {
border-top: 1px dashed var(--border);
padding: 8px 0;
}
.meal-card:first-of-type { border-top: 0; }
.meal-item {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
padding: 5px 0;
}
.meal-item-main { flex: 1 1 auto; min-width: 0; }
.meal-item-name { font-weight: 500; word-break: break-word; }
.meal-item-meta { font-size: 12px; color: var(--muted); word-break: break-word; }
.meal-item-actions { display: flex; gap: 8px; flex-shrink: 0; }
.meal-item-actions .linklike { padding: 4px 8px; min-width: 32px; min-height: 32px; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; }
.linklike.danger { color: var(--danger); }
.meal-card-foot {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 6px;
font-size: 12px;
color: var(--muted);
flex-wrap: wrap;
gap: 8px;
}
.meal-card-actions {
display: flex;
gap: 12px;
align-items: center;
flex-shrink: 0;
flex-wrap: wrap;
}
.meal-card-actions .linklike { padding: 4px 8px; font-size: 13px; min-height: 32px; display: inline-flex; align-items: center; }
@media (max-width: 640px) {
.meals-toolbar { gap: 6px; }
.meals-toolbar .ghost { padding: 6px 8px; font-size: 12px; }
.meal-card-foot { font-size: 11px; }
.meal-card-actions { gap: 8px; }
.meal-section-head .ghost { padding: 6px 10px; font-size: 13px; }
}
.meal-card.highlight {
animation: meal-item-flash 1.8s ease-out;
border-radius: var(--radius-sm);
}
.checkbox-row {
display: flex;
align-items: flex-start;
gap: 8px;
margin: 8px 0;
font-size: 13px;
cursor: pointer;
}
.checkbox-row input[type="checkbox"] { width: auto; margin-top: 2px; }
.checkbox-list {
display: flex;
flex-direction: column;
gap: 4px;
border: 1px solid var(--border-soft);
border-radius: var(--radius-sm);
padding: 8px 12px;
max-height: 200px;
overflow-y: auto;
background: var(--surface);
}
.my-groups-list {
list-style: none;
padding: 0;
margin: 0 0 12px;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.my-groups-list li {
background: var(--bg-subtle);
border: 1px solid var(--border-soft);
border-radius: 12px;
padding: 4px 10px;
font-size: 0.92rem;
}
.lookup-results {
list-style: none;
padding: 0;
margin: 6px 0 12px;
max-height: 200px;
overflow-y: auto;
border: 1px solid var(--border-soft);
border-radius: var(--radius-sm);
}
.lookup-results li {
padding: 8px 12px;
cursor: pointer;
border-bottom: 1px solid var(--border-soft);
font-size: 0.92rem;
}
.lookup-results li:last-child { border-bottom: 0; }
.lookup-results li:hover { background: var(--bg-subtle); }
.day-totals {
background: var(--surface);
border: 1px solid var(--border-soft);
border-radius: var(--radius);
padding: 18px;
margin-top: 16px;
box-shadow: var(--shadow-sm);
}
.day-totals h3 { margin: 0 0 12px; font-size: 15px; }
.day-total-rows { display: grid; gap: 10px; }
.day-total-row {
display: grid;
grid-template-columns: 110px 1fr;
align-items: center;
gap: 8px;
}
.day-total-label { font-size: 13px; color: var(--muted); }
.day-total-value { font-size: 13px; }
.day-total-row .bar { grid-column: 1 / -1; }
.day-total-row .hunger-warning { grid-column: 1 / -1; }
@media (max-width: 640px) {
.day-totals { padding: 14px; }
.day-total-row { grid-template-columns: 90px 1fr; gap: 6px; }
}
.bar {
background: var(--bg);
border: 1px solid var(--border);
border-radius: 999px;
height: 9px;
overflow: hidden;
}
.bar-fill {
background: linear-gradient(90deg, var(--accent), var(--accent-hover));
height: 100%;
border-radius: 999px;
transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
/* ===== Modal ===== */
.modal-backdrop {
position: fixed; inset: 0;
background: rgba(0,0,0,0.45);
display: grid; place-items: center;
padding: 16px;
z-index: 50;
}
.modal {
background: var(--surface-elev);
border-radius: var(--radius);
width: 100%;
max-width: 540px;
max-height: 90vh;
overflow-y: auto;
border: 1px solid var(--border-soft);
box-shadow: 0 10px 30px rgba(0,0,0,0.18), 0 4px 10px rgba(0,0,0,0.08);
}
/* Mobile: modals nemen het volledige scherm en zijn vertikaal flex
zodat modal-body groeit en alleen interne lijsten scrollen. */
@media (max-width: 640px) {
.modal-backdrop { padding: 0; }
.modal {
max-width: 100%;
/* dvh = dynamic viewport: on iOS Safari 100vh is TALLER than the visible
area (it spans behind the toolbar), which parks a bottom-pinned footer
off-screen. dvh tracks the actually-visible height. vh kept as fallback. */
max-height: 100vh;
max-height: 100dvh;
height: 100vh;
height: 100dvh;
border-radius: 0;
overflow: hidden;
display: flex;
flex-direction: column;
}
.modal-head { flex-shrink: 0; }
.modal-tabs { flex-shrink: 0; margin-bottom: 8px; }
.modal-body {
flex: 1 1 auto;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 10px 14px 16px;
}
/* result-list neemt resterende ruimte i.p.v. 320px cap */
.modal-body .result-list { max-height: none; }
/* modal-actions sticky bottom voor zichtbare confirm/cancel */
.modal-actions {
position: sticky;
bottom: 0;
background: var(--surface-elev);
padding-top: 10px;
margin-top: 8px;
border-top: 1px solid var(--border-soft);
}
}
.modal-head {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
border-bottom: 1px solid var(--border);
}
.modal-head h3 { margin: 0; font-size: 15px; }
.modal-head small { color: var(--muted); font-weight: normal; margin-left: 6px; }
.modal-tabs,
.profile-tabs {
display: flex;
flex-wrap: wrap;
border-bottom: 1px solid var(--border);
margin-bottom: 16px;
}
/* Mobile: tabs passen niet op één regel — horizontaal scrollen i.p.v.
afkappen (anders valt o.a. de Groep-tab buiten beeld). */
@media (max-width: 640px) {
.profile-tabs {
overflow-x: auto;
flex-wrap: nowrap;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
}
.profile-tabs button,
.profile-tabs .tab {
padding: 10px 14px;
white-space: nowrap;
}
}
.modal-tabs .tab,
.modal-tabs button,
.profile-tabs .tab,
.profile-tabs button {
flex: 0 0 auto;
padding: 10px 13px;
background: transparent;
border: 0;
border-bottom: 2px solid transparent;
cursor: pointer;
color: var(--muted);
font: inherit;
}
.modal-tabs .tab.active,
.modal-tabs button.active,
.profile-tabs .tab.active,
.profile-tabs button.active {
color: var(--text);
border-bottom-color: var(--accent);
}
.modal-body { padding: 14px 16px; }
.search-row {
display: flex;
gap: 8px;
margin-bottom: 10px;
align-items: stretch;
}
.search-row input { flex: 1; min-width: 0; }
.search-row button { flex: 0 0 auto; white-space: nowrap; }
.search-input {
width: 100%;
margin-bottom: 10px;
}
.off-action {
margin-top: 12px;
padding-top: 10px;
border-top: 1px solid var(--border);
}
button.ghost.wide {
width: 100%;
padding: 9px 14px;
}
/* ===== Profile ===== */
.profile-form { max-width: 720px; }
.profile-form .profile-section {
background: var(--surface);
border: 1px solid var(--border-soft);
border-radius: var(--radius);
padding: 16px 18px;
margin: 0 0 14px;
box-shadow: var(--shadow-sm);
}
.profile-form .section-title {
margin: 0 0 14px;
font-size: 15px;
font-weight: 600;
color: var(--text);
letter-spacing: -0.005em;
}
.profile-form .form-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 12px;
}
.profile-form .form-field label {
display: block;
margin-bottom: 4px;
font-size: 13px;
color: var(--muted);
}
.profile-form input[disabled] {
opacity: 0.6;
cursor: not-allowed;
}
.profile-form textarea {
width: 100%;
resize: vertical;
}
.form-actions {
display: flex;
justify-content: flex-end;
}
.success {
margin: 0 0 14px;
padding: 9px 11px;
background: #e6f4ea;
color: #137333;
border-radius: var(--radius);
font-size: 13px;
}
/* Sticky save-bar (Profile-tab). Save-knop + inline feedback altijd in beeld
onderaan de scrollende profile-form, ipv weggescrold boven de pagina. */
/* Save staat nu bovenaan in de Persoonlijk-kaart (raakte onderaan kwijt):
titel links, knop + opgeslagen-melding rechts. Op smal scherm wrapt de
section-head zodat de knop netjes onder de titel zakt. */
.profile-form .profile-section > .section-head.profile-save-head {
margin: 0 0 12px;
}
.profile-save-controls {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
justify-content: flex-end;
}
.form-actions.sticky-save .save-row {
display: flex;
justify-content: flex-end;
}
.save-feedback {
margin: 0;
padding: 6px 10px;
border-radius: var(--radius-sm);
font-size: 13px;
font-weight: 500;
}
.save-feedback-success {
background: rgba(19, 115, 51, 0.12);
color: #137333;
}
.save-feedback-error {
background: rgba(217, 38, 38, 0.12);
color: #b91c1c;
}
[data-theme="dark"] .save-feedback-success,
@media (prefers-color-scheme: dark) {
.save-feedback-success { background: rgba(52, 211, 153, 0.16); color: #6ee7b7; }
}
[data-theme="dark"] .save-feedback-error,
@media (prefers-color-scheme: dark) {
.save-feedback-error { background: rgba(248, 113, 113, 0.18); color: #fca5a5; }
}
/* Tightening van Profile-secties zodat het compacter aanvoelt. */
.profile-form .profile-section { padding: 12px 14px; margin-bottom: 10px; }
.profile-form .section-title { margin-bottom: 10px; }
.profile-form .form-grid { gap: 10px; }
/* Lengte ft+in dual-input. */
.height-ft-in {
display: flex;
align-items: center;
gap: 6px;
}
.height-ft-in input { flex: 1; min-width: 0; }
.height-ft-in-sep {
color: var(--muted);
font-size: 13px;
font-weight: 500;
}
@media (prefers-color-scheme: dark) {
.success { background: #1d3826; color: #7ad891; }
}
/* ===== Theme picker (Profile page) ===== */
.theme-picker { display: grid; gap: 14px; }
.theme-row {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.theme-row-label {
width: 80px;
font-size: 13px;
color: var(--muted);
}
.theme-modes { display: flex; gap: 6px; flex-wrap: wrap; }
.theme-btn {
padding: 7px 12px;
border: 1px solid var(--border);
background: var(--surface);
color: var(--text);
border-radius: var(--radius-sm);
font: inherit;
font-size: 13px;
cursor: pointer;
}
.theme-btn:hover { border-color: var(--accent); color: var(--accent); }
.theme-btn.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.theme-swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.theme-swatch {
width: 32px;
height: 32px;
border: 2px solid var(--border);
border-radius: 50%;
cursor: pointer;
padding: 0;
transition: transform 0.1s, border-color 0.12s;
}
.theme-swatch:hover { transform: scale(1.1); }
.theme-swatch.active {
border-color: var(--text);
box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent);
}
/* ===== Login page theme toggle (top-right) ===== */
.login-theme {
position: fixed;
top: 12px;
right: 12px;
z-index: 10;
display: flex;
gap: 8px;
}
.result-list {
list-style: none;
padding: 0;
margin: 0;
max-height: 320px;
overflow-y: auto;
}
.result-item {
padding: 8px 4px;
border-bottom: 1px solid var(--border);
cursor: pointer;
}
.result-item:hover { background: var(--bg); }
.result-name { font-weight: 500; font-size: 14px; }
.result-name small { color: var(--muted); margin-left: 6px; font-weight: normal; font-size: 12px; }
.result-macros { font-size: 12px; color: var(--muted); }
.selected-food-name { font-weight: 600; margin-bottom: 10px; }
.selected-food-name small { color: var(--muted); margin-left: 6px; font-weight: normal; }
.preview-macros {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
padding: 10px 0;
font-size: 13px;
color: var(--muted);
}
.preview-macros strong { color: var(--text); font-weight: 600; }
.modal-actions {
display: flex;
justify-content: flex-end;
gap: 8px;
margin-top: 12px;
}
/* "✓ Added" bevestiging na toevoegen (modal blijft open voor volgend item). */
.add-flash { margin-right: auto; align-self: center; color: #16a34a; font-size: 13px; font-weight: 600; }
.grid-4 {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
margin-bottom: 8px;
}
@media (max-width: 640px) {
.grid-4 { grid-template-columns: repeat(2, 1fr); }
}
.bodycomp-toggle {
margin: 8px 0 12px;
}
/* Read-only "berekend" velden in handmatige meting modal. */
input.calc-readonly {
background: var(--input-readonly-bg, rgba(0,0,0,0.04));
color: var(--muted, #6b7280);
font-style: italic;
}
.bodycomp-copy {
margin-bottom: 10px;
}
.unit-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2px;
}
.unit-toggles { display: flex; gap: 4px; }
.unit-toggle {
padding: 3px 10px;
border: 1px solid var(--border);
background: var(--bg);
color: var(--muted);
border-radius: 4px;
font: inherit;
font-size: 12px;
cursor: pointer;
}
.unit-toggle.active {
background: var(--accent);
border-color: var(--accent);
color: white;
}
/* ===== Dashboard ===== */
.muted { color: var(--muted); font-weight: normal; font-size: 14px; margin-left: 8px; }
.ring-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 14px;
margin: 20px 0 24px;
}
@media (max-width: 640px) {
.ring-grid {
grid-template-columns: repeat(2, 1fr); /* forceer 2x2 op mobile */
gap: 10px;
}
.ring-card { padding: 12px 8px 14px; }
.ring { width: 110px; height: 110px; }
}
.ring-card {
position: relative;
background: var(--surface);
border: 1px solid var(--border-soft);
border-radius: var(--radius);
padding: 16px 12px 18px;
text-align: center;
box-shadow: var(--shadow-sm);
transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.ring-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.ring {
width: 130px;
height: 130px;
display: block;
margin: 0 auto;
transform: rotate(-90deg);
}
.ring-bg {
fill: none;
stroke: var(--border);
stroke-width: 10;
}
.ring-fg {
fill: none;
stroke: var(--accent);
stroke-width: 10;
stroke-linecap: round;
transition: stroke-dasharray 0.4s ease;
}
.ring-center {
position: absolute;
top: 16px;
left: 0; right: 0;
width: 130px;
height: 130px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
}
.ring-pct { font-size: 22px; font-weight: 600; line-height: 1; }
.ring-label {
margin-top: 8px;
font-size: 13px;
color: var(--muted);
}
.ring-value {
margin-top: 2px;
font-size: 14px;
font-weight: 500;
}
.dash-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 14px;
}
.period-card {
background: var(--surface);
border: 1px solid var(--border-soft);
border-radius: var(--radius);
padding: 14px 18px;
margin-bottom: 14px;
box-shadow: var(--shadow-sm);
}
.period-head {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 10px;
}
.period-head h3 { margin: 0; font-size: 15px; }
.period-rows {
display: grid;
gap: 6px;
}
.period-row {
display: grid;
grid-template-columns: 110px 1fr auto;
align-items: baseline;
gap: 10px;
font-size: 14px;
}
@media (max-width: 640px) {
.period-card { padding: 12px 14px; }
.period-row {
grid-template-columns: 90px 1fr auto;
gap: 8px;
font-size: 13px;
}
.period-label { font-size: 12px; }
}
.period-label { color: var(--muted); font-size: 13px; }
.period-value strong { font-weight: 600; }
.period-value .muted { font-size: 12px; }
.period-pct,
.grade {
font-weight: 600;
font-variant-numeric: tabular-nums;
}
/* Macro grade colours (used on percentages, ring outlines, bar fills) */
:root {
--grade-great: #16a34a; /* goed */
--grade-good: #65a30d; /* voldoende */
--grade-ok: #d97706; /* matig */
--grade-warn: #ea580c; /* slecht */
--grade-bad: #dc2626; /* zeer slecht */
--grade-none: var(--muted);
--grade-great-bg: #16a34a22;
--grade-good-bg: #65a30d22;
--grade-ok-bg: #d9770622;
--grade-warn-bg: #ea580c22;
--grade-bad-bg: #dc262622;
}
@media (prefers-color-scheme: dark) {
:root {
--grade-great: #4ade80;
--grade-good: #a3e635;
--grade-ok: #fbbf24;
--grade-warn: #fb923c;
--grade-bad: #f87171;
}
}
.grade-great { color: var(--grade-great); }
.grade-good { color: var(--grade-good); }
.grade-ok { color: var(--grade-ok); }
.grade-warn { color: var(--grade-warn); }
.grade-bad { color: var(--grade-bad); }
.grade-none { color: var(--grade-none); }
.grade-incomplete { color: var(--muted); }
.grade-suffix {
margin-left: 4px;
font-weight: normal;
font-size: 11px;
text-transform: lowercase;
}
.ring-grade-label {
font-size: 12px;
font-weight: 500;
margin-top: 4px;
text-align: center;
text-transform: lowercase;
line-height: 1.2;
min-height: 1.2em; /* houd hoogte gelijk voor lege labels */
}
.ring-card.grade-great .ring-grade-label { color: var(--grade-great); }
.ring-card.grade-good .ring-grade-label { color: var(--grade-good); }
.ring-card.grade-ok .ring-grade-label { color: var(--grade-ok); }
.ring-card.grade-warn .ring-grade-label { color: var(--grade-warn); }
.ring-card.grade-bad .ring-grade-label { color: var(--grade-bad); }
.ring-card.grade-incomplete .ring-grade-label { color: var(--muted); }
/* Ring foreground stroke matches the grade. The base .ring-fg style stays;
these override the stroke colour per grade. */
.ring-card.grade-great .ring-fg { stroke: var(--grade-great); }
.ring-card.grade-good .ring-fg { stroke: var(--grade-good); }
.ring-card.grade-ok .ring-fg { stroke: var(--grade-ok); }
.ring-card.grade-warn .ring-fg { stroke: var(--grade-warn); }
.ring-card.grade-bad .ring-fg { stroke: var(--grade-bad); }
.ring-card.grade-great .ring-pct { color: var(--grade-great); }
.ring-card.grade-good .ring-pct { color: var(--grade-good); }
.ring-card.grade-ok .ring-pct { color: var(--grade-ok); }
.ring-card.grade-warn .ring-pct { color: var(--grade-warn); }
.ring-card.grade-bad .ring-pct { color: var(--grade-bad); }
/* Meal day-totals bar fill colour matches the grade. */
.bar-fill.grade-great { background: var(--grade-great); }
.bar-fill.grade-good { background: var(--grade-good); }
.bar-fill.grade-ok { background: var(--grade-ok); }
.bar-fill.grade-warn { background: var(--grade-warn); }
.bar-fill.grade-bad { background: var(--grade-bad); }
/* Live richtlijn-referentie onder de Vandaag-ringen. */
.guideline-note {
margin: 10px 2px 0;
font-size: 12px;
line-height: 1.4;
color: var(--muted);
}
/* Melding onder de weegschaal-keuze (Withings = sync, rest = handmatig). */
.scale-hint {
margin: 6px 2px 0;
font-size: 12px;
line-height: 1.4;
color: var(--muted);
}
/* Educatieve notitie onder de lichaamssamenstelling-grafiek. */
.chart-note {
margin: 8px 2px 0;
font-size: 12px;
line-height: 1.4;
color: var(--muted);
}
/* Plain-language %-noot toggle ('Why?') + uitklapbaar 'i'-detail. */
.chart-note-toggle {
margin-left: 6px; padding: 0; border: 0; background: none;
color: var(--accent); font: inherit; cursor: pointer; text-decoration: underline;
}
.chart-note-detail {
margin: 6px 2px 0; padding-left: 18px; list-style: disc;
font-size: 12px; line-height: 1.5; color: var(--muted);
}
.chart-note-detail li { margin: 4px 0; }
/* Aanrader om 2FA in te schakelen (in het 2FA-tab). */
.advice-note {
margin: 8px 0;
padding: 8px 12px;
font-size: 13px;
line-height: 1.4;
color: var(--text);
background: var(--grade-great-bg);
border-left: 3px solid var(--grade-great);
border-radius: 6px;
}
/* Subtiele 2FA-nudge bovenaan het Profiel-tab. */
.nudge-2fa {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 16px;
padding: 10px 14px;
font-size: 13px;
background: var(--grade-great-bg);
border: 1px solid var(--grade-great);
border-radius: var(--radius);
}
.nudge-2fa .linklike { white-space: nowrap; font-weight: 600; }
/* ===== Billing / Abonnement (mobile-first) ===== */
.billing-card {
border: 1px solid var(--border-soft);
border-radius: var(--radius);
background: var(--surface);
padding: 16px;
display: flex;
flex-direction: column;
gap: 14px;
max-width: 480px;
}
.billing-plan-row {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 12px;
}
.billing-plan-name { font-weight: 700; font-size: 16px; }
.billing-plan-crown { font-size: 15px; line-height: 1; }
.billing-status-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.billing-status-key { color: var(--muted); font-size: 14px; }
.billing-status-value {
font-weight: 700;
padding: 3px 10px;
border-radius: 999px;
background: var(--grade-great-bg);
color: var(--text);
font-size: 13px;
}
.billing-date { margin: 0; color: var(--muted); font-size: 13px; }
.billing-subscribe { display: flex; flex-direction: column; gap: 12px; }
/* Segmented monthly/yearly toggle — full-width on mobile */
.billing-interval {
display: flex;
gap: 6px;
background: var(--bg);
border: 1px solid var(--border-soft);
border-radius: 10px;
padding: 4px;
}
.billing-interval .seg {
flex: 1;
border: 0;
background: transparent;
color: var(--muted);
font: inherit;
font-weight: 600;
font-size: 14px;
padding: 9px 8px;
border-radius: 8px;
cursor: pointer;
min-height: 40px;
}
.billing-interval .seg.active {
background: var(--surface);
color: var(--text);
box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
.billing-cta, .billing-manage { width: 100%; min-height: 44px; }
.billing-note { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
/* Tier-keuze (Plus + Founder) in de Abo-tab */
.billing-tiers { display: flex; flex-direction: column; gap: 12px; }
.billing-tier {
display: flex;
flex-direction: column;
gap: 12px;
border: 1px solid var(--border-soft);
border-radius: 10px;
padding: 14px;
background: var(--bg);
}
.billing-tier-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.billing-tier-name { font-weight: 700; font-size: 15px; }
.billing-tier-badge {
font-size: 11px;
font-weight: 600;
color: var(--text);
background: var(--grade-great-bg);
padding: 2px 8px;
border-radius: 999px;
}
.billing-tier-founder { border-color: var(--accent); }
.billing-tier-price { margin: 0; font-weight: 700; font-size: 15px; }
.billing-tier-desc { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
/* Tier-split description on /billing.html (Part F): what Plus adds vs free Basic */
.billing-tier-title { margin: 0; font-size: 14px; font-weight: 700; }
.billing-tier-plus { border-color: var(--accent); }
.billing-tier-list { margin: 4px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.billing-tier-list li { font-size: 13px; color: var(--text); line-height: 1.4; }
.billing-tier-list-basic li { color: var(--muted); }
@media (min-width: 560px) {
.billing-card .billing-cta, .billing-card .billing-manage { width: auto; align-self: flex-start; }
}
/* Standalone billing/expired page (/billing.html) — content lives directly in
the login-card, so add the spacing the billing-card would otherwise give. */
.billing-page-card { text-align: left; }
.billing-page-card .subtitle { text-align: center; }
.billing-page-card .billing-status-row { margin-top: 14px; }
.billing-page-card .billing-subscribe { margin-top: 14px; }
.billing-page-card .billing-manage { margin-top: 14px; }
.billing-page-card .billing-note { margin-top: 14px; }
/* ===== Medication schedule fields ===== */
.med-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.med-chip {
display: inline-flex; align-items: center; gap: 6px;
font-size: 13px; cursor: pointer;
border: 1px solid var(--border-soft); border-radius: 8px;
padding: 7px 11px; min-height: 38px;
}
.field-hint { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); }
/* Self-service naam + e-mail wijzigen (Profiel) */
.name-edit-row { display: flex; gap: 8px; align-items: center; }
.name-edit-row input { flex: 1; min-width: 0; }
.email-change-toggle { margin-top: 6px; display: inline-block; font-size: 13px; }
.email-change-form { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.med-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.med-notes { font-style: italic; }
/* "Every day" chip stands a little apart from the individual day chips. */
.med-chip.med-everyday { font-weight: 600; border-color: var(--border); }
/* Active / Inactive medication groups. */
.med-group { margin-top: 14px; }
.med-group-title { font-size: 14px; font-weight: 600; margin: 0 0 6px; }
.med-group-title.med-group-inactive { color: var(--muted); }
.med-row-inactive { opacity: 0.7; }
/* Fixed layout + matching column widths so the Active and Inactive tables
(separate s) line up column-for-column. */
.med-group .measurements-table table { table-layout: fixed; width: 100%; }
.med-group .measurements-table th,
.med-group .measurements-table td { word-break: break-word; }
.med-group .measurements-table th:nth-child(1),
.med-group .measurements-table td:nth-child(1) { width: 34%; }
.med-group .measurements-table th:nth-child(2),
.med-group .measurements-table td:nth-child(2) { width: 14%; }
.med-group .measurements-table th:nth-child(3),
.med-group .measurements-table td:nth-child(3) { width: 30%; }
.med-group .measurements-table th:nth-child(4),
.med-group .measurements-table td:nth-child(4) { width: 12%; }
.med-group .measurements-table th:nth-child(5),
.med-group .measurements-table td:nth-child(5) { width: 10%; }
/* Admin statistics sub-view */
.admin-subtabs { margin-bottom: 16px; }
/* Compacte richtlijn-regel onder de macro-rij. */
.macro-note {
margin: 10px 2px 0;
font-size: 12px;
line-height: 1.4;
color: var(--muted);
}
/* 4 macro-velden op één rij (desktop), wrapt netjes op smal scherm. */
.profile-form .form-grid.form-grid-macros {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
margin-top: 10px;
}
/* Weegschaal-rij in Voorkeuren: select + comment naast elkaar (wrapt op mobiel). */
.scale-select { flex: 0 1 240px; max-width: 240px; }
.scale-comment {
flex: 1 1 260px;
margin: 0;
font-size: 12px;
line-height: 1.4;
color: var(--muted);
}
.dash-card {
background: var(--surface);
border: 1px solid var(--border-soft);
border-radius: var(--radius);
padding: 14px 16px;
box-shadow: var(--shadow-sm);
}
.dash-card-title {
font-size: 12px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 6px;
}
.dash-card-big {
font-size: 22px;
font-weight: 600;
}
.dash-card-meta {
font-size: 13px;
color: var(--muted);
margin-top: 2px;
}
/* ===== Weight page ===== */
.kpi-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
margin: 16px 0;
}
@media (min-width: 720px) {
.kpi-grid { grid-template-columns: repeat(3, 1fr); }
}
.kpi-card {
background: var(--surface);
border: 1px solid var(--border-soft);
border-radius: var(--radius);
padding: 12px 14px;
box-shadow: var(--shadow-sm);
}
.kpi-label {
font-size: 0.78rem;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: 4px;
}
.kpi-value {
font-size: 1.5rem;
font-weight: 600;
line-height: 1.15;
}
.kpi-value.kpi-good { color: #16a34a; }
.kpi-value.kpi-bad { color: #d97706; }
.kpi-sub {
font-size: 0.78rem;
color: var(--muted);
margin-top: 2px;
}
/* Injection add-form */
.injection-add-form {
background: var(--surface);
border: 1px solid var(--border-soft);
border-radius: var(--radius);
padding: 14px 16px;
margin-bottom: 16px;
box-shadow: var(--shadow-sm);
}
/* Admin: users management */
.admin-section {
margin-top: 32px;
padding-top: 16px;
border-top: 2px solid var(--border-soft);
}
.admin-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-bottom: 12px;
}
.admin-search {
flex: 1;
min-width: 180px;
padding: 6px 10px;
font: inherit;
background: var(--surface);
color: var(--text);
border: 1px solid var(--border-soft);
border-radius: var(--radius);
}
.admin-form {
background: var(--surface);
border: 1px solid var(--border-soft);
border-radius: var(--radius);
padding: 14px 16px;
margin-bottom: 16px;
box-shadow: var(--shadow-sm);
}
.admin-form h4 {
margin-top: 0;
margin-bottom: 12px;
}
.admin-users-table {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
max-width: 100%;
border: 1px solid var(--border-soft);
border-radius: var(--radius);
}
.admin-users-table::-webkit-scrollbar { height: 8px; }
.admin-users-table::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.admin-users-table table {
width: 100%;
min-width: 720px; /* dwing horizontale scroll op smal scherm */
border-collapse: collapse;
}
@media (max-width: 640px) {
.admin-users-table th,
.admin-users-table td {
padding: 6px 8px;
font-size: 0.86rem;
}
}
.admin-users-table th,
.admin-users-table td {
padding: 4px 10px;
text-align: left;
border-bottom: 1px solid var(--border-soft);
font-size: 0.92rem;
white-space: nowrap;
vertical-align: top;
}
.admin-users-table td.col-group,
.admin-users-table th.col-group {
white-space: normal;
word-break: break-word;
min-width: 120px;
max-width: 200px;
}
.group-chip {
display: flex;
align-items: center;
justify-content: space-between;
gap: 4px;
padding: 1px 4px 1px 8px;
margin: 0 0 2px 0;
background: var(--surface);
border: 1px solid var(--border-soft);
border-radius: 10px;
font-size: 0.78rem;
line-height: 1.15;
}
.group-chip:last-child { margin-bottom: 0; }
.role-filter-bar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
margin: 8px 0 12px;
}
.role-filter-label {
font-size: 0.85rem;
color: var(--muted);
margin-right: 4px;
}
.role-filter-chip {
padding: 4px 10px;
border: 1px solid var(--border-soft);
border-radius: 12px;
background: var(--surface);
font-size: 0.82rem;
cursor: pointer;
line-height: 1.2;
}
.role-filter-chip:hover {
background: rgba(0,0,0,0.04);
}
.role-filter-chip.active {
background: var(--primary, #4f46e5);
color: #fff;
border-color: var(--primary, #4f46e5);
}
.th-sort {
background: transparent;
border: 0;
padding: 0;
margin: 0;
font: inherit;
color: inherit;
cursor: pointer;
text-align: left;
text-transform: inherit;
letter-spacing: inherit;
}
.th-sort:hover { color: var(--text, #111); }
.th-sort span { color: var(--primary, #4f46e5); margin-left: 2px; }
.admin-users-table td.row-actions {
white-space: nowrap;
padding: 2px 6px;
}
/* Actie-kolom (✎ 🗑) altijd zichtbaar: vastgepind aan de rechterrand zodat de
rest van de brede tabel eronderdoor scrollt. */
.admin-users-table td.row-actions,
.admin-users-table th:last-child {
position: sticky;
right: 0;
background: var(--surface);
box-shadow: -6px 0 6px -6px rgba(0, 0, 0, 0.18);
}
.admin-users-table th:last-child { z-index: 1; }
.row-action-btn {
background: transparent;
border: 0;
padding: 2px 4px;
margin: 0 1px;
font-size: 0.9rem;
line-height: 1;
cursor: pointer;
color: var(--muted);
border-radius: 4px;
}
.row-action-btn:hover {
background: rgba(0,0,0,0.06);
color: var(--text, #111);
}
.row-action-btn.danger:hover {
color: var(--danger, #c33);
}
.sr-badge {
display: inline-block;
margin-left: 6px;
padding: 1px 5px;
font-size: 0.65rem;
font-weight: 600;
letter-spacing: 0.04em;
color: #fff;
background: var(--primary, #4f46e5);
border-radius: 4px;
vertical-align: middle;
}
/* Tier pill in the admin user table. */
.tier-pill {
display: inline-block; padding: 2px 8px; border-radius: 999px;
font-size: 0.72rem; font-weight: 600; white-space: nowrap;
}
.tier-pill.tier-basic { background: #e2e8f0; color: #334155; }
.tier-pill.tier-trial { background: #ede9fe; color: #6d28d9; }
.tier-pill.tier-plus { background: #e0e7ff; color: #4338ca; }
.tier-pill.tier-founder { background: #fef3c7; color: #b45309; }
/* Brand styling: GLP-accent op de Glippier woordmerk */
.brand-glp { color: var(--primary, #4f46e5); }
.brand-rest { color: inherit; }
/* Brand logo — glyph + "Glippier" wordmark, matched to the landing (landing-v2
.logo/.mark). Fraunces with Georgia/serif fallback, NO Google CDN (GDPR;
self-hosted Fraunces is a later step — until then both render the serif
fallback identically). --accent == the landing's --indigo. */
.logo {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: 'Fraunces', Georgia, serif;
font-weight: 700;
font-size: 1.35rem;
color: var(--text);
line-height: 1;
}
.logo .mark {
display: grid;
place-items: center;
width: 30px;
height: 30px;
border-radius: 8px;
background: var(--accent);
color: #fff;
font-size: 1rem;
font-weight: 700;
}
.logo.logo-sm { font-size: 1.1rem; gap: 7px; }
.logo.logo-sm .mark { width: 24px; height: 24px; font-size: 0.85rem; border-radius: 7px; }
.logo.logo-xs { font-size: 0.95rem; gap: 6px; }
.logo.logo-xs .mark { width: 19px; height: 19px; font-size: 0.72rem; border-radius: 6px; }
/* Compacte control buttons (locale + theme toggle) — zelfde stijl als landing */
.app-control-btn,
.login-control-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 36px;
height: 36px;
padding: 0 10px;
border: 1px solid var(--border, #e2e8f0);
background: var(--surface, #fff);
color: var(--text, #0f172a);
border-radius: 8px;
font-size: 0.9rem;
font-weight: 600;
line-height: 1;
cursor: pointer;
transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.app-control-btn:hover,
.login-control-btn:hover {
border-color: var(--primary, #4f46e5);
color: var(--primary, #4f46e5);
}
/* Auth-pagina taalkiezer: flag-trigger + popup, zelfde stijl als de topbar in
de app, maar gescoped op .login-theme (vaste rechtsboven-hoek). */
.login-theme .lang-select { position: relative; display: inline-flex; }
.login-theme .lang-trigger { font-size: 16px; padding: 0 9px; }
.login-theme .lang-menu {
position: absolute;
top: calc(100% + 6px);
right: 0;
z-index: 20;
margin: 0;
padding: 6px;
list-style: none;
width: max-content;
min-width: 96px;
background: var(--surface, #fff);
border: 1px solid var(--border, #e2e8f0);
border-radius: 12px;
box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.45);
}
.login-theme .lang-menu li { margin: 0; }
.login-theme .lang-item {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 12px;
border-radius: 8px;
color: var(--text, #0f172a);
text-decoration: none;
font-size: 14px;
white-space: nowrap;
}
.login-theme .lang-item:hover { background: var(--bg-subtle, #f1f5f9); text-decoration: none; }
.login-theme .lang-item .lang-flag { font-size: 17px; }
.login-theme .lang-item.is-current { font-weight: 700; }
.login-theme .lang-item.is-current .lang-name::after { content: " ✓"; color: var(--primary, #4f46e5); }
.login-theme .lang-item.is-soon { opacity: 0.4; pointer-events: none; }
.danger-zone {
margin-top: 32px;
padding: 20px;
border: 1px solid #f5c2c7;
background: #fff5f5;
border-radius: 12px;
}
.danger-zone .section-title.danger {
color: #c33;
margin-top: 0;
margin-bottom: 8px;
}
.danger-btn {
background: #c33;
color: #fff;
border: 0;
padding: 8px 14px;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
}
.danger-btn:hover { background: #a02828; }
.danger-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.danger-confirm {
margin-top: 12px;
}
.danger-confirm input {
width: 100%;
max-width: 220px;
margin: 8px 0;
padding: 8px 10px;
border: 1px solid #f5c2c7;
border-radius: 6px;
font-family: inherit;
}
/* Onboarding wizard modal */
.onboarding-modal {
max-width: 480px;
padding: 20px;
}
.onboarding-modal .modal-head {
padding: 0;
margin-bottom: 8px;
}
.onboarding-progress {
color: var(--muted);
font-size: 0.85rem;
margin: 4px 0 16px;
}
.onboarding-step {
padding: 4px 0;
}
.onboarding-step h4 {
margin: 0 0 12px;
}
.onboarding-summary {
list-style: none;
padding: 0;
margin: 12px 0;
}
.onboarding-summary li {
padding: 8px 4px;
border-bottom: 1px solid var(--border-soft);
font-size: 1rem;
}
.onboarding-summary li:last-child { border-bottom: 0; }
.onboarding-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: flex-end;
margin-top: 16px;
padding-top: 12px;
border-top: 1px solid var(--border-soft);
}
.onboarding-intro p { margin: 0 0 12px; }
.onboarding-intro .subtitle { font-weight: 600; color: var(--text); }
/* Lengte-waarschuwing: zachte amber, werkt in light én dark. */
.onboarding-warn {
margin: 6px 0 0;
font-size: 0.85rem;
color: #d97706;
}
.group-chip-remove {
border: 0;
background: transparent;
color: var(--muted);
cursor: pointer;
font-size: 0.95rem;
line-height: 1;
padding: 0 2px;
border-radius: 50%;
}
.group-chip-remove:hover {
color: var(--danger, #c33);
background: rgba(0,0,0,0.05);
}
/* Groep-lidmaatschap lookup (gebruiker bewerken) — schaalt naar veel groepen */
.group-lookup { position: relative; }
.group-lookup-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 6px;
}
.group-lookup-input { width: 100%; box-sizing: border-box; }
.group-lookup-results {
margin-top: 4px;
border: 1px solid var(--border-soft);
border-radius: var(--radius);
background: var(--surface);
max-height: 220px;
overflow-y: auto;
box-shadow: var(--shadow-sm);
}
.group-lookup-option {
display: block;
width: 100%;
text-align: left;
padding: 8px 10px;
border: 0;
background: transparent;
color: var(--text, inherit);
cursor: pointer;
font-size: 0.9rem;
border-bottom: 1px solid var(--border-soft);
}
.group-lookup-option:last-child { border-bottom: 0; }
.group-lookup-option:hover { background: rgba(0,0,0,0.05); }
.group-lookup-create {
display: block;
width: 100%;
text-align: left;
margin-top: 4px;
padding: 8px 10px;
border: 1px dashed var(--border-soft);
border-radius: var(--radius);
background: transparent;
color: var(--primary, #4f46e5);
cursor: pointer;
font-size: 0.9rem;
}
.group-lookup-create:hover { background: rgba(0,0,0,0.04); }
.admin-users-table th {
font-weight: 600;
color: var(--muted);
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.admin-stats {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin-bottom: 24px;
}
.admin-stats-group {
flex: 1 1 280px;
min-width: 0;
}
.admin-stats-group h4 { margin: 0 0 10px; }
.admin-stats-row {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.admin-stat {
/* Vaste breedte → alle telkaarten identiek groot, ongeacht hoeveel er per
groep staan (anders rekten de 4 'Existing users'-vakken breder uit dan de
6 'Roles'-vakken). */
flex: 0 0 104px;
background: var(--surface);
border: 1px solid var(--border-soft);
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
padding: 10px 8px;
text-align: center;
}
.admin-stat-num {
display: block;
font-size: 22px;
font-weight: 700;
color: var(--accent);
line-height: 1.1;
}
.admin-stat-lbl {
display: block;
font-size: 11px;
color: var(--muted);
margin-top: 3px;
}
.admin-groups {
margin-bottom: 16px;
padding: 10px 12px;
background: var(--surface);
border: 1px solid var(--border-soft);
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
}
.admin-groups h4 { margin-top: 0; margin-bottom: 6px; font-size: 0.95rem; }
.admin-groups-table table {
width: 100%;
border-collapse: collapse;
margin-bottom: 8px;
}
.admin-groups-table th, .admin-groups-table td {
padding: 3px 8px;
text-align: left;
border-bottom: 1px solid var(--border-soft);
font-size: 0.85rem;
white-space: nowrap;
}
.admin-groups-add {
display: flex;
gap: 8px;
align-items: center;
}
.admin-groups-add input {
flex: 1;
min-width: 0;
}
@media (max-width: 640px) {
.admin-groups {
padding: 10px 12px;
}
.admin-groups-table th,
.admin-groups-table td {
padding: 5px 6px;
font-size: 0.82rem;
}
}
.admin-group-row {
cursor: pointer;
}
.admin-group-row:hover {
background: var(--row-hover, rgba(127,127,127,0.06));
}
.admin-group-row.active {
background: var(--accent-soft, rgba(99,102,241,0.12));
}
/* TOTP setup wizard */
.totp-qr-wrap {
display: flex;
justify-content: center;
padding: 12px 0;
}
.totp-qr {
width: 220px;
height: 220px;
background: #fff;
padding: 8px;
border-radius: 6px;
}
.totp-secret {
display: block;
font-family: ui-monospace, SFMono-Regular, monospace;
font-size: 0.9rem;
padding: 8px 10px;
background: var(--surface);
border: 1px solid var(--border-soft);
border-radius: 6px;
word-break: break-all;
margin-bottom: 12px;
user-select: all;
}
.backup-codes {
list-style: none;
padding: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 6px 14px;
margin: 12px 0;
}
.backup-codes code {
font-family: ui-monospace, SFMono-Regular, monospace;
font-size: 0.95rem;
background: var(--surface);
padding: 4px 8px;
border-radius: 4px;
display: block;
text-align: center;
user-select: all;
}
.context-chip {
display: inline-flex;
align-items: center;
padding: 3px 10px;
margin-left: 8px;
background: var(--accent-soft, rgba(99,102,241,0.12));
border-radius: 12px;
font-size: 0.82rem;
color: var(--text);
white-space: nowrap;
}
.admin-filter-chip {
display: inline-flex;
align-items: center;
gap: 6px;
margin-left: 12px;
padding: 4px 10px;
background: var(--accent-soft, rgba(99,102,241,0.12));
border-radius: 12px;
font-size: 0.88rem;
}
.withings-card {
background: var(--surface);
border: 1px solid var(--border-soft);
border-radius: var(--radius);
padding: 14px 16px;
margin: 16px 0;
box-shadow: var(--shadow-sm);
}
.withings-actions {
display: flex;
gap: 8px;
margin-top: 10px;
flex-wrap: wrap;
}
.withings-resync {
display: flex;
gap: 8px;
align-items: center;
margin-top: 8px;
flex-wrap: wrap;
font-size: 0.92rem;
}
.withings-resync label { color: var(--muted); }
/* Lapsed Plus -> Basic: Withings connection kept, auto-sync paused. */
.withings-paused { margin-top: 8px; }
.withings-paused-title { margin: 0 0 4px; font-weight: 700; font-size: 14px; color: var(--accent); }
.weight-toolbar {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin: 16px 0 12px;
}
/* Insights #1 — "What your change is made of". Bewust neutraal: alleen richting
(+/-) en grootte, géén goed/slecht-kleurcodering (geen waardeoordeel). */
.losscomp-card {
background: var(--surface);
border: 1px solid var(--border-soft);
border-radius: 12px;
padding: 16px;
margin: 16px 0;
}
.losscomp-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 0; font-size: 15px; }
.losscomp-period { font-size: 12px; font-weight: 500; color: var(--muted); }
.losscomp-list { list-style: none; margin: 10px 0 0; padding: 0; }
.losscomp-row {
display: flex; justify-content: space-between; align-items: baseline;
padding: 7px 0; border-bottom: 1px solid var(--border-soft); font-size: 14px;
}
.losscomp-row:last-child { border-bottom: 0; }
.losscomp-label { color: var(--text); }
.losscomp-value { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
/* Water = context, GEEN som-component: visueel losgemaakt van de drie som-rijen
(divider + inspringen + gedempt + "waarvan"-prefix) zodat niemand het als vierde
optelpost leest. Water zit al in de vetvrije massa. */
.losscomp-context {
display: flex; justify-content: space-between; align-items: baseline;
margin: 8px 0 0; padding: 8px 0 0 18px;
border-top: 1px dashed var(--border-soft);
font-size: 12px; color: var(--muted);
}
.losscomp-context-value { font-variant-numeric: tabular-nums; }
.losscomp-caveat { margin: 10px 0 0; font-size: 12px; line-height: 1.45; color: var(--muted); }
.losscomp-empty { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.weight-toolbar .ghost.active {
border-color: var(--accent);
color: var(--accent);
}
.chart-wrapper {
background: var(--surface);
border: 1px solid var(--border-soft);
border-radius: var(--radius);
padding: 14px;
height: 340px;
margin-bottom: 16px;
box-shadow: var(--shadow-sm);
/* Containment: de hoogte is al vast (340px) + Chart.js maintainAspectRatio:false,
dus normaal correct. overflow:hidden vangt een transient over-sized canvas
(zichtbaar bij full-page captures op extreem lange viewports) zodat die nooit
over de kaart eronder heen valt. Symptoom-borg, geen herstructurering. */
overflow: hidden;
}
@media (max-width: 640px) {
.chart-wrapper { height: 260px; padding: 10px; }
}
/* Disclaimer onder de PK-grafiek: het is een schatting, geen meting. */
.pk-disclaimer {
margin: -8px 0 16px;
font-size: 0.8rem;
color: var(--muted);
}
/* Chart wrapper relative voor de fullscreen-knop absolute positioning */
.chart-wrapper { position: relative; }
.chart-fullscreen-btn {
position: absolute;
top: 8px;
right: 8px;
z-index: 5;
background: var(--surface);
border: 1px solid var(--border-soft);
border-radius: var(--radius-sm);
width: 32px;
height: 32px;
font-size: 16px;
line-height: 1;
cursor: pointer;
color: var(--text);
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-sm);
}
.chart-fullscreen-btn:hover { background: var(--bg-subtle); }
/* Fullscreen state: chart vult viewport. Body class lockt scroll. */
.chart-wrapper.chart-fullscreen-active {
position: fixed;
inset: 0;
z-index: 100;
height: 100vh;
width: 100vw;
max-width: 100vw;
margin: 0;
border-radius: 0;
padding: 50px 16px 16px;
background: var(--surface);
}
.chart-wrapper.chart-fullscreen-active .chart-fullscreen-btn {
top: 12px;
right: 12px;
}
body.chart-fullscreen-lock { overflow: hidden; }
.measurements-table {
background: var(--surface);
border: 1px solid var(--border-soft);
border-radius: var(--radius);
overflow-x: auto;
-webkit-overflow-scrolling: touch;
max-width: 100%;
box-shadow: var(--shadow-sm);
}
.measurements-table table {
width: 100%;
min-width: 720px;
border-collapse: collapse;
font-size: 13px;
}
/* Injections-history is veel smaller (5 kolommen) en hoeft niet
horizontaal te scrollen op mobile. */
.injections-history table { min-width: 0; }
@media (max-width: 640px) {
.injections-history th,
.injections-history td { padding: 6px 4px; font-size: 12px; }
}
.measurements-table th,
.measurements-table td {
padding: 8px 10px;
text-align: left;
border-bottom: 1px solid var(--border);
white-space: nowrap;
}
@media (max-width: 640px) {
.measurements-table th,
.measurements-table td { padding: 6px 7px; font-size: 12px; }
}
.measurements-table th {
background: var(--bg);
font-weight: 500;
color: var(--muted);
}
.measurements-table tr:last-child td {
border-bottom: 0;
}
/* ===== Foods database page ===== */
.foods-toolbar {
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
margin-bottom: 14px;
}
.foods-toolbar .search-input { flex: 1; min-width: 200px; margin-bottom: 0; }
.foods-source-filter { display: flex; gap: 4px; flex-wrap: wrap; }
.foods-source-filter .ghost.active {
border-color: var(--accent);
background: var(--accent-soft);
color: var(--accent);
font-weight: 600;
}
.foods-table {
background: var(--surface);
border: 1px solid var(--border-soft);
border-radius: var(--radius);
overflow-x: auto;
-webkit-overflow-scrolling: touch;
max-width: 100%;
box-shadow: var(--shadow-sm);
}
.foods-table table {
width: 100%;
min-width: 720px; /* dwing horizontale scroll op smal scherm */
border-collapse: collapse;
font-size: 13px;
}
.foods-table th,
.foods-table td {
padding: 8px 10px;
text-align: left;
border-bottom: 1px solid var(--border-soft);
white-space: nowrap;
}
.foods-table th {
background: var(--bg-subtle);
font-weight: 600;
color: var(--muted);
position: sticky;
top: 0;
}
.foods-table tr:last-child td { border-bottom: 0; }
.foods-table tr:hover td { background: var(--bg-subtle); }
.foods-table em { color: var(--muted); font-style: normal; font-size: 11px; }
.foods-actions { text-align: right; white-space: nowrap; }
.foods-actions .linklike { padding: 0 6px; }
/* ===== Persistent search-bar boven meals ===== */
.search-bar {
display: flex;
align-items: center;
gap: 14px;
background: var(--accent-soft);
border: 1px solid var(--accent);
border-radius: var(--radius);
padding: 8px 14px;
margin-bottom: 12px;
flex-wrap: wrap;
}
.search-bar-label { font-size: 13px; }
.search-bar-counter {
font-size: 12px;
color: var(--muted);
font-variant-numeric: tabular-nums;
}
.search-bar-actions {
display: flex;
gap: 4px;
margin-left: auto;
}
.search-bar-actions .ghost {
padding: 4px 10px;
font-size: 13px;
}
/* ===== Meal search modal ===== */
.modal.modal-tall { max-height: 90vh; }
.meal-search-input { margin-bottom: 12px; }
.meal-search-results {
list-style: none;
padding: 0;
margin: 0;
max-height: 60vh;
overflow-y: auto;
}
.meal-search-result {
padding: 9px 4px;
border-bottom: 1px solid var(--border-soft);
cursor: pointer;
border-radius: var(--radius-sm);
}
.meal-search-result:hover { background: var(--bg-subtle); }
.msr-line {
display: flex;
justify-content: space-between;
gap: 8px;
font-size: 13px;
line-height: 1.3;
}
.msr-line:first-child { font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.msr-line strong { color: var(--text); }
.msr-line .muted { color: var(--muted); }
/* Highlight het gevonden meal-item na jump-to */
@keyframes meal-item-flash {
0% { background: var(--accent-soft); }
100% { background: transparent; }
}
.meal-item.highlight {
animation: meal-item-flash 1.8s ease-out;
border-radius: var(--radius-sm);
}
.foods-pager {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
margin-top: 14px;
font-size: 13px;
color: var(--muted);
}
/* Basic-launch: visual lock affordance on Plus-only feature buttons. The root
.tier-basic class (set by appShell from the billing state) drives a descendant
selector so nested view components are covered with no per-view JS. The button
stays clickable -> the handler fires the upgrade prompt (shown locked, not
hidden). For Plus (.tier-plus) no lock is shown. */
.tier-basic .plus-lock::after {
content: " \1F512"; /* lock */
font-size: .85em;
opacity: .75;
}
/* Greyed Plus control (still clickable -> opens the upgrade prompt). Used where
a Plus feature is shown disabled-looking rather than just lock-badged. */
.is-locked { opacity: .55; filter: grayscale(0.35); }