/* Vi-Lifestyle Clinic Manager — exact brand colors sampled from vi-lifestyle.com Primary blue #386EDB, white surfaces, Inter sans-serif throughout. */ :root { --canvas:#F4F6FA; --surface:#FFFFFF; --surface-2:#F8F9FB; --surface-3:#EEF1F6; --surface-sunk:#E5E9F0; --ink:#0F1419; --ink-2:#3F4651; --ink-3:#6B7280; --ink-muted:#9CA3AF; --ink-on-brand:#FFFFFF; --brand:#386EDB; --brand-hover:#2A5BC4; --brand-soft:#EBF1FE; --brand-softer:#F4F7FF; --brand-deep:#1E3A8A; --success:#0E8A5F; --success-soft:#DCF4E8; --warning:#B45309; --warning-soft:#FEF3C7; --danger:#B42318; --danger-soft:#FEE4E2; --border:#E5E7EB; --border-2:#D1D5DB; --seal:#475569; --seal-bg:#F1F5F9; --seal-border:#CBD5E1; --font-sans:'Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif; --font-mono:'SF Mono','JetBrains Mono',ui-monospace,Menlo,monospace; --r-sm:8px; --r-md:12px; --r-lg:16px; --shadow-pop:0 4px 14px rgba(15,20,25,.06),0 16px 40px rgba(15,20,25,.08); --logo:url("data:image/png;base64,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"); } *{box-sizing:border-box;margin:0;padding:0} html,body{height:100%} body{font-family:var(--font-sans);background:var(--canvas);color:var(--ink);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:'cv02','cv03','cv04','cv11'} .num{font-variant-numeric:tabular-nums} .app{display:grid;grid-template-columns:252px 1fr;grid-template-rows:60px 1fr;height:100vh;grid-template-areas:"sidebar topbar" "sidebar main"} /* SIDEBAR */ .sidebar{grid-area:sidebar;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden} .brand-mark{padding:18px 22px;border-bottom:1px solid var(--border);height:60px;display:flex;align-items:center;gap:10px} .brand-logo{height:26px;width:108px;background:var(--logo) no-repeat left center;background-size:contain} .brand-tag{font-size:11px;font-weight:600;padding:3px 9px;background:var(--brand-soft);color:var(--brand);border-radius:999px;margin-left:auto} .productline{margin:14px 12px 4px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);padding:10px 12px;cursor:pointer;transition:.16s} .productline:hover{border-color:var(--border-2);background:var(--surface-2)} .productline-label{font-size:10px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.1em;font-weight:600} .productline-name{font-size:14px;font-weight:600;margin-top:3px;display:flex;align-items:center;justify-content:space-between;color:var(--ink);letter-spacing:-.005em} .productline-dot{width:8px;height:8px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)} /* SIDEBAR LENS — replaces single-line context with a multi-line scope filter */ .lens{position:relative;margin:14px 12px 4px} .lens-trigger{border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);padding:9px 12px;cursor:pointer;transition:.16s;display:flex;align-items:center;gap:10px} .lens-trigger:hover{border-color:var(--border-2);background:var(--surface-2)} .lens.open .lens-trigger{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)} .lens-trigger-icon{width:26px;height:26px;border-radius:7px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;flex-shrink:0} .lens-text{flex:1;min-width:0} .lens-label{font-size:10px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.1em;font-weight:600} .lens-current{font-size:13.5px;font-weight:600;margin-top:2px;color:var(--ink);letter-spacing:-.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .lens-chevron{color:var(--ink-3);flex-shrink:0;transition:transform .16s} .lens.open .lens-chevron{transform:rotate(180deg)} .lens-popover{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:0 12px 32px rgba(15,20,25,.12);padding:5px;z-index:30;display:none} .lens.open .lens-popover{display:block} .lens-option{display:flex;align-items:flex-start;gap:10px;padding:9px 11px;border-radius:8px;cursor:pointer;transition:.12s} .lens-option:hover{background:var(--surface-2)} .lens-option.active{background:var(--brand-softer)} .lens-option-mark{width:8px;height:8px;border-radius:50%;background:var(--brand);margin-top:5px;flex-shrink:0} .lens-option-mark.menopause{background:#A4376E} .lens-option-mark.hair{background:#A66120} .lens-option-mark.all{background:linear-gradient(45deg,var(--brand) 0%, var(--brand) 33%, #A4376E 33%, #A4376E 66%, #A66120 66%)} .lens-option-text{flex:1;min-width:0} .lens-option-name{font-size:13px;font-weight:600;color:var(--ink);letter-spacing:-.005em} .lens-option.active .lens-option-name{color:var(--brand)} .lens-option-meta{font-size:11px;color:var(--ink-3);margin-top:2px} .lens-option-check{color:var(--brand);flex-shrink:0;align-self:center;display:none} .lens-option.active .lens-option-check{display:block} .nav{flex:1;padding:10px 8px;overflow-y:auto} .nav-section{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-3);padding:14px 12px 6px;font-weight:600} .nav-item{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:var(--r-sm);color:var(--ink-2);cursor:pointer;font-size:13px;font-weight:500;transition:.14s;user-select:none;text-decoration:none} .nav-item:hover{background:var(--surface-2);color:var(--ink)} .nav-item.active{background:var(--brand);color:#fff} .nav-item.active .nav-icon{color:#fff} .nav-icon{width:16px;height:16px;color:var(--ink-3);flex-shrink:0} .nav-badge{margin-left:auto;font-size:11px;background:var(--surface-3);color:var(--ink-2);padding:1px 8px;border-radius:999px;font-weight:500;font-variant-numeric:tabular-nums} .nav-item.active .nav-badge{background:rgba(255,255,255,.18);color:#fff} .sidebar-foot{padding:12px 14px;border-top:1px solid var(--border);display:flex;align-items:center;gap:10px;background:var(--surface-2)} .avatar{width:34px;height:34px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:600;flex-shrink:0;letter-spacing:.02em} .who-name{font-size:13px;font-weight:600;line-height:1.2;color:var(--ink)} .who-role{font-size:11px;color:var(--ink-3);margin-top:2px} /* TOPBAR */ .topbar{grid-area:topbar;background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 24px;gap:16px} .breadcrumb{font-size:13px;color:var(--ink-3);display:flex;align-items:center;gap:8px;font-weight:500} .breadcrumb-sep{color:var(--ink-muted)} .breadcrumb .crumb-current{color:var(--ink);font-weight:600} .topbar-search{flex:1;max-width:480px;margin-left:24px;position:relative} .topbar-search input{width:100%;padding:8px 14px 8px 38px;border:1px solid var(--border);background:var(--surface-2);border-radius:999px;font-size:13px;color:var(--ink);font-family:inherit;transition:.16s} .topbar-search input::placeholder{color:var(--ink-3)} .topbar-search input:focus{outline:none;border-color:var(--brand);background:var(--surface);box-shadow:0 0 0 3px var(--brand-soft)} .topbar-search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--ink-3)} .topbar-actions{margin-left:auto;display:flex;align-items:center;gap:8px} .lang-switch{display:flex;background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:3px;font-size:11px;font-weight:600} .lang-switch button{border:none;background:transparent;padding:5px 10px;border-radius:999px;cursor:pointer;color:var(--ink-3);font-family:inherit;font-weight:inherit;font-size:inherit;letter-spacing:.04em;transition:.14s} .lang-switch button.active{background:var(--brand);color:#fff} .icon-btn{width:36px;height:36px;border:1px solid var(--border);background:var(--surface);border-radius:999px;display:grid;place-items:center;cursor:pointer;color:var(--ink-2);position:relative;transition:.14s} .icon-btn:hover{border-color:var(--border-2);color:var(--ink);background:var(--surface-2)} .icon-btn .badge{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--brand);color:#fff;font-size:10.5px;font-weight:700;line-height:1;display:inline-flex;align-items:center;justify-content:center;letter-spacing:.01em;box-shadow:0 0 0 2px var(--surface)} .role-pill{display:flex;align-items:center;gap:9px;padding:3px 12px 3px 3px;border:1px solid var(--border);border-radius:999px;background:var(--surface);cursor:pointer;transition:.14s} .role-pill:hover{border-color:var(--border-2);background:var(--surface-2)} .role-pill .avatar{width:28px;height:28px;font-size:11px} .role-pill-text{font-size:12px;line-height:1.15} .role-pill-name{font-weight:600;color:var(--ink)} .role-pill-role{color:var(--ink-3);font-size:11px;margin-top:1px} /* MAIN */ /* Bottom padding clears the fixed VOIP widget so last table rows / buttons stay reachable. Defaults to expanded-VOIP height; collapses (via :has) when the user minimizes the widget. */ .main{grid-area:main;overflow-y:auto;padding:28px 32px 250px;background:var(--canvas)} body:has(.ic-widget.ic-collapsed) .main{padding-bottom:80px} .view{display:none} .view.active{display:block} .page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:24px} .page-eyebrow{font-size:11px;color:var(--brand);text-transform:uppercase;letter-spacing:.14em;font-weight:600;margin-bottom:8px} .page-title{font-size:30px;font-weight:600;letter-spacing:-.025em;color:var(--ink);line-height:1.15} .page-title .accent{color:var(--brand)} .page-sub{font-size:13.5px;color:var(--ink-3);margin-top:6px;max-width:56ch} /* BUTTONS — Vi-Lifestyle pill */ .btn{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;border-radius:999px;font-size:13px;font-weight:600;cursor:pointer;border:1px solid var(--border);background:var(--surface);color:var(--ink);font-family:inherit;transition:.14s;letter-spacing:-.005em} .btn:hover{border-color:var(--border-2);background:var(--surface-2)} .btn-primary{background:var(--brand);color:#fff;border-color:var(--brand)} .btn-primary:hover{background:var(--brand-hover);border-color:var(--brand-hover)} .btn-danger{background:var(--danger);color:#fff;border-color:var(--danger)} .btn-danger:hover{background:#9e1e14;border-color:#9e1e14} .btn-outline{background:var(--surface);color:var(--brand);border-color:var(--brand)} .btn-outline:hover{background:var(--brand-soft)} .btn-ghost{border-color:transparent;background:transparent;color:var(--ink-2)} .btn-ghost:hover{background:var(--surface-3);color:var(--ink)} .btn-sm{padding:6px 12px;font-size:12px} /* CARDS */ .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden} .card-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border)} .card-title{font-size:14px;font-weight:600;color:var(--ink);letter-spacing:-.01em} .card-body{padding:20px} /* KPI */ .kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px} .kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:18px 20px;transition:border-color .14s} .kpi:hover{border-color:var(--border-2)} .kpi-label{font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.1em;font-weight:600} .kpi-value{font-size:32px;font-weight:600;margin-top:8px;letter-spacing:-.03em;line-height:1.05;color:var(--ink)} .kpi-trend{margin-top:10px;font-size:12px;display:flex;align-items:center;gap:6px;font-weight:500} .kpi-trend.up{color:var(--success)} .kpi-trend.down{color:var(--danger)} .kpi-trend.flat{color:var(--ink-3)} /* DASH GRID */ .dash-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:16px} /* FUNNEL */ .funnel-row{display:flex;align-items:center;gap:14px;padding:11px 0} .funnel-row:not(:last-child){border-bottom:1px solid var(--border)} .funnel-stage{width:160px;font-size:13px;font-weight:500;color:var(--ink-2)} .funnel-bar{flex:1;height:6px;border-radius:3px;background:var(--surface-3);overflow:hidden} .funnel-fill{height:100%;background:var(--brand);border-radius:3px} .funnel-count{width:100px;text-align:right;font-variant-numeric:tabular-nums;font-size:13px;color:var(--ink-3)} .funnel-count strong{color:var(--ink);font-weight:600} /* ACTIVITY */ .activity{padding:0 20px 20px} .activity-item{display:flex;gap:12px;padding:13px 0;border-bottom:1px solid var(--border);font-size:13px} .activity-item:last-child{border-bottom:none} .activity-icon{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;flex-shrink:0;background:var(--brand-soft);color:var(--brand)} .activity-icon.danger{background:var(--danger-soft);color:var(--danger)} .activity-icon.success{background:var(--success-soft);color:var(--success)} .activity-icon.warning{background:var(--warning-soft);color:var(--warning)} .activity-text{flex:1} .activity-text strong{font-weight:600} .activity-meta{font-size:11px;color:var(--ink-3);margin-top:3px} /* TASKS */ .task-item{display:flex;align-items:center;gap:14px;padding:13px 20px;border-bottom:1px solid var(--border)} .task-item:last-child{border-bottom:none} .task-time{font-variant-numeric:tabular-nums;font-size:11px;color:var(--ink-3);width:64px;flex-shrink:0} .task-time strong{color:var(--ink);display:block;font-size:14px;font-weight:600;letter-spacing:-.01em} .task-text{flex:1;font-size:13px} .task-text strong{font-weight:600} .task-meta{font-size:11px;color:var(--ink-3);margin-top:3px} .task-item-careplus{background:#FFFBEB;border-left:3px solid #F59E0B} .task-substeps{margin:8px 0 4px;padding:8px 12px;background:var(--surface);border:1px solid var(--border);border-radius:8px;list-style:none;display:flex;flex-direction:column;gap:4px} .task-substep{font-size:11.5px;color:var(--ink-2);line-height:1.5} .task-substep-done{color:var(--ink-3)} .task-substep-pending{color:#92400E;font-weight:500} .task-substep-todo{color:var(--ink-3)} /* TABLE */ .filters{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap;align-items:center} .chip{padding:6px 14px;border:1px solid var(--border);background:var(--surface);border-radius:999px;font-size:12px;cursor:pointer;color:var(--ink-2);font-weight:500;transition:.14s;letter-spacing:-.005em} .chip:hover{border-color:var(--border-2);background:var(--surface-2)} .chip.active{background:var(--brand);color:#fff;border-color:var(--brand)} table{width:100%;border-collapse:collapse;background:var(--surface)} thead th{text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3);font-weight:600;padding:11px 18px;border-bottom:1px solid var(--border);background:var(--surface-2)} tbody td{padding:14px 18px;border-bottom:1px solid var(--border);font-size:13px;vertical-align:middle} tbody tr:last-child td{border-bottom:none} tbody tr{cursor:pointer;transition:background .1s} tbody tr:hover{background:var(--brand-softer)} .table-wrap{border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;background:var(--surface)} /* Small info icon with native browser tooltip — used in table headers to explain non-obvious columns (e.g. eligibility score). Inline-flex so it aligns next to header text. */ .info-icon{display:inline-flex;align-items:center;justify-content:center;width:13px;height:13px;border-radius:50%;background:var(--ink-3);color:#fff;font-size:9px;font-style:italic;font-weight:700;font-family:Georgia,serif;cursor:help;margin-left:4px;vertical-align:middle;user-select:none;transition:.12s} .info-icon:hover,.info-icon:focus{background:var(--brand);outline:none} /* Inline search input that lives in the .filters row, right-aligned via the spacer flex:1 */ .table-search{display:flex;align-items:center;gap:8px;padding:0 12px;height:32px;background:var(--surface);border:1px solid var(--border);border-radius:999px;min-width:240px} .table-search:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)} .table-search svg{color:var(--ink-3);flex-shrink:0} .table-search input{border:none;outline:none;background:transparent;font-family:inherit;font-size:12.5px;color:var(--ink);width:100%;padding:0} .table-search input::placeholder{color:var(--ink-3)} /* Pagination footer rendered below each paginated table */ .pagination{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0 4px;flex-wrap:wrap} .pag-meta{font-size:12px;color:var(--ink-3)} .pag-controls{display:flex;align-items:center;gap:4px} .pag-btn{min-width:32px;height:32px;padding:0 10px;border:1px solid var(--border);background:var(--surface);border-radius:8px;font-size:12.5px;font-weight:500;color:var(--ink-2);cursor:pointer;font-family:inherit;transition:.12s} .pag-btn:hover:not(:disabled){border-color:var(--border-2);background:var(--surface-2);color:var(--ink)} .pag-btn.active{background:var(--brand);color:#fff;border-color:var(--brand)} .pag-btn:disabled{opacity:.4;cursor:not-allowed} .pag-ellipsis{padding:0 4px;color:var(--ink-3);font-size:12px;user-select:none} /* BADGES */ .badge{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:500;line-height:1.5} .badge .dot{width:6px;height:6px;border-radius:50%} .badge-new{background:var(--brand-soft);color:var(--brand)} .badge-new .dot{background:var(--brand)} .badge-qualifying{background:var(--warning-soft);color:var(--warning)} .badge-qualifying .dot{background:var(--warning)} .badge-qualified{background:var(--success-soft);color:var(--success)} .badge-qualified .dot{background:var(--success)} .badge-disqualified{background:var(--danger-soft);color:var(--danger)} .badge-disqualified .dot{background:var(--danger)} .badge-active{background:var(--success-soft);color:var(--success)} .badge-active .dot{background:var(--success)} .badge-paused{background:var(--surface-3);color:var(--ink-2)} .badge-paused .dot{background:var(--ink-3)} .badge-archived{background:var(--surface-3);color:var(--ink-3)} .badge-medisch{background:var(--brand-soft);color:var(--brand)} .badge-medisch .dot{background:var(--brand)} .badge-program{background:#EEF1FB;color:#3D4DA8;font-weight:600;letter-spacing:.01em} .score{display:inline-flex;align-items:center;gap:8px;font-variant-numeric:tabular-nums;font-weight:600} .score-bar{width:56px;height:4px;background:var(--surface-3);border-radius:2px;overflow:hidden} .score-fill{height:100%;border-radius:2px} /* DRAWER */ .drawer-backdrop{position:fixed;inset:0;background:rgba(15,20,25,.4);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .22s;z-index:50} .drawer-backdrop.open{opacity:1;pointer-events:auto} .drawer{position:fixed;top:0;right:0;bottom:0;width:min(880px,100vw);background:var(--canvas);box-shadow:var(--shadow-pop);transform:translateX(100%);transition:transform .28s cubic-bezier(.32,.72,0,1);z-index:60;display:flex;flex-direction:column} .drawer.open{transform:translateX(0)} .drawer-head{padding:20px 26px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:16px;background:var(--surface)} .drawer-avatar{width:52px;height:52px;border-radius:14px;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:17px;font-weight:600} .drawer-name{font-size:22px;font-weight:600;letter-spacing:-.025em;color:var(--ink);line-height:1.15} .drawer-meta{font-size:12px;color:var(--ink-3);display:flex;gap:8px;align-items:center;margin-top:5px;flex-wrap:wrap} .drawer-meta .dot-sep{width:3px;height:3px;background:var(--ink-muted);border-radius:50%} .drawer-actions{margin-left:auto;display:flex;gap:8px;align-items:center} .drawer-close{width:34px;height:34px;border:1px solid var(--border);background:var(--surface);border-radius:999px;display:grid;place-items:center;cursor:pointer;color:var(--ink-2);transition:.14s} .drawer-close:hover{border-color:var(--border-2);color:var(--ink)} .drawer-tabs{display:flex;padding:0 26px;border-bottom:1px solid var(--border);background:var(--surface)} .drawer-tab{padding:12px 18px;font-size:13px;font-weight:500;color:var(--ink-3);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .14s} .drawer-tab:hover{color:var(--ink)} .drawer-tab.active{color:var(--brand);border-bottom-color:var(--brand);font-weight:600} .drawer-body{flex:1;overflow-y:auto;padding:24px 26px} .drawer-tab-content{display:none} .drawer-tab-content.active{display:block} /* DETAIL */ .detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px} /* DRAWER · cross-cutting customer KPI strip (multi-subscription model) */ .drawer-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:var(--surface);border-bottom:1px solid var(--border)} .drawer-kpi{padding:14px 22px;border-right:1px solid var(--border)} .drawer-kpi:last-child{border-right:none} .drawer-kpi-label{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3);font-weight:600} .drawer-kpi-value{font-size:18px;font-weight:700;letter-spacing:-.015em;color:var(--ink);margin-top:4px;line-height:1.2} .drawer-kpi-sub{font-size:11px;color:var(--ink-3);margin-top:2px} .drawer-kpi-value.success{color:var(--success)} /* DRAWER · subscription scope pills (only on certain tabs) */ .drawer-sub-scope{display:flex;align-items:center;gap:10px;margin-bottom:16px;padding:10px 14px;background:var(--surface-2);border:1px solid var(--border);border-radius:10px} .drawer-sub-scope-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3);font-weight:600;flex-shrink:0} .drawer-sub-scope-pills{display:flex;flex-wrap:wrap;gap:6px;flex:1} .drawer-sub-scope-pills .chip{padding:5px 12px;font-size:12px} /* SUBSCRIPTION mini-cards (Behandelingen tab) */ .sub-card{border:1px solid var(--border);border-radius:14px;background:var(--surface);padding:18px 20px;margin-bottom:12px;transition:.14s;cursor:pointer} .sub-card:hover{border-color:var(--border-2)} .sub-card-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:14px} .sub-card-icon{width:40px;height:40px;border-radius:11px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font-size:13px;font-weight:700;letter-spacing:.04em;flex-shrink:0} .sub-card-icon.menopause{background:#FBE5F1;color:#A4376E} .sub-card-icon.hair{background:#FFEFD9;color:#A66120} .sub-card-title{flex:1;min-width:0} .sub-card-line{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3);font-weight:600;margin-bottom:4px} .sub-card-name{font-size:15.5px;font-weight:700;letter-spacing:-.01em;color:var(--ink)} .sub-card-name-sub{font-size:12px;color:var(--ink-3);margin-top:3px} .sub-card-status{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:5px} .sub-card-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:14px;padding:12px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)} .sub-card-meta-label{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3);font-weight:600} .sub-card-meta-val{font-size:13.5px;font-weight:600;color:var(--ink);margin-top:3px;letter-spacing:-.005em} .sub-card-progress{height:5px;background:var(--surface-3);border-radius:3px;overflow:hidden;margin-bottom:6px} .sub-card-progress-fill{height:100%;background:var(--brand);border-radius:3px} .sub-card-progress-meta{font-size:11px;color:var(--ink-3);display:flex;justify-content:space-between;margin-bottom:14px} .sub-card-program-line strong{color:var(--ink-2);font-weight:600} .sub-card-program-history{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 10px;margin-bottom:12px;background:var(--surface-2);border:1px solid var(--border);border-radius:8px;font-size:11px;color:var(--ink-3)} .sub-card-program-history[hidden]{display:none} .sub-card-program-history .ph-label{text-transform:uppercase;letter-spacing:.08em;font-weight:600;font-size:10px;color:var(--ink-3)} .sub-card-program-history .ph-pill{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:999px;background:var(--surface);border:1px solid var(--border);color:var(--ink-2);font-weight:500} .sub-card-program-history .ph-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ink-3)} /* Prominente programma-balk (feedback Jaime/Cato — programma-nummer + weektelling duidelijk) */ .program-banner{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:11px 13px;margin-bottom:12px} .program-banner-row{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:9px} .program-banner-num{font-size:12px;font-weight:700;letter-spacing:.02em;color:#3D4DA8;background:#EEF1FB;padding:2px 9px;border-radius:6px;flex-shrink:0} .program-banner-week{font-size:14px;font-weight:700;color:var(--ink);letter-spacing:-.01em} .program-banner-end{font-size:11px;color:var(--ink-3);margin-left:auto;flex-shrink:0} .program-banner .sub-card-progress{margin-bottom:0} /* Duidelijke, niet-verstopte herstart-knop */ .btn-restart{color:#3D4DA8;border-color:#C7D0EE;background:#F5F7FE;font-weight:600} .btn-restart:hover{background:#EEF1FB;border-color:#3D4DA8} .btn-restart-program{color:#3D4DA8} /* Off-label klikjes — badge + notitie in het dossier */ .badge-offlabel{background:#FEF3C7;color:#92400E} .badge-offlabel .dot{background:#D97706} /* Care-lead toggle "Klikjes markeren" — actieve staat in off-label-amber */ .js-toggle-klikjes.active{background:#FEF3C7;border-color:#FDE68A;color:#92400E;font-weight:600} /* Klikjes-invoer modal — korte off-label-notitie onder het invoerveld */ .mk-note{display:flex;gap:8px;align-items:flex-start;margin-top:14px;padding:10px 12px;background:#FFFBEB;border:1px solid #FDE68A;border-left:3px solid #D97706;border-radius:8px;font-size:11.5px;line-height:1.5;color:#92400E} .mk-remove{color:var(--danger)} .offlabel-note{display:flex;gap:8px;align-items:flex-start;padding:9px 11px;margin-bottom:12px;background:#FFFBEB;border:1px solid #FDE68A;border-left:3px solid #D97706;border-radius:8px;font-size:11.5px;line-height:1.45;color:#92400E} .offlabel-note strong{font-weight:700} /* Sales-toestemming balk in het dossier */ .consent-bar{display:flex;align-items:center;gap:12px;justify-content:space-between;padding:11px 14px;margin-bottom:16px;border-radius:10px;border:1px solid var(--border);background:var(--surface-2)} .consent-bar[data-consent="on"]{border-color:#A7E0C3;background:#F0FBF5} .consent-bar-main{display:flex;align-items:center;gap:10px;min-width:0} .consent-bar-icon{flex-shrink:0;color:var(--ink-3)} .consent-bar[data-consent="on"] .consent-bar-icon{color:var(--success)} .consent-bar-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;font-weight:600;color:var(--ink-3)} .consent-bar-status{font-size:13px;font-weight:600;color:var(--ink-2);margin-top:1px} .consent-bar[data-consent="on"] .consent-bar-status{color:var(--success)} .consent-bar-toggle{flex-shrink:0} .sub-card-actions{display:flex;gap:8px;flex-wrap:wrap} .sub-add{border:1.5px dashed var(--border-2);background:transparent;border-radius:14px;padding:18px 20px;display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;color:var(--ink-3);font-size:13px;font-weight:600;transition:.14s;width:100%;font-family:inherit} .sub-add:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-softer)} /* Sales-toestemming pill in de klantenlijst (feedback Jaime/Cato — direct zien wie gebeld mag) */ .sales-pill{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:600;padding:2px 7px;border-radius:999px;letter-spacing:.01em;white-space:nowrap} .sales-pill-yes{background:#E7F7EE;color:#0E7A48} .sales-pill-no{background:var(--surface-3);color:var(--ink-3)} .chip-sales.active{background:#E7F7EE;color:#0E7A48;border-color:#A7E0C3} /* Programma-herstart bevestigingsmodal */ .mpr-flow{display:flex;align-items:stretch;gap:12px;margin-bottom:14px} .mpr-step{flex:1;padding:13px;border-radius:10px;border:1px solid var(--border);background:var(--surface-2)} .mpr-step-close{opacity:.85} .mpr-step-new{border-color:#A7E0C3;background:#F0FBF5} .mpr-step-label{font-size:10px;text-transform:uppercase;letter-spacing:.08em;font-weight:600;color:var(--ink-3);margin-bottom:6px} .mpr-step-prog{font-size:15px;font-weight:700;color:var(--ink);letter-spacing:-.01em} .mpr-step-new .mpr-step-prog{color:#0E7A48} .mpr-step-meta{font-size:12px;color:var(--ink-2);margin-top:3px} .mpr-arrow{display:flex;align-items:center;font-size:20px;color:var(--ink-3);flex-shrink:0} .mpr-note{display:flex;gap:8px;align-items:flex-start;padding:10px 12px;background:var(--surface-2);border:1px solid var(--border);border-radius:8px;font-size:11.5px;line-height:1.5;color:var(--ink-2)} .mpr-note svg{color:var(--ink-3)} /* Portaal: sales opt-in checkbox */ .portal-consent{display:flex;gap:11px;align-items:flex-start;padding:13px 15px;border:1px solid var(--border);border-radius:12px;background:var(--surface);cursor:pointer;text-align:left} .portal-consent input{margin-top:2px;flex-shrink:0;width:16px;height:16px} .portal-consent-label{display:block;font-size:13px;font-weight:600;color:var(--ink)} .portal-consent-note{display:block;font-size:11.5px;color:var(--ink-3);margin-top:3px} /* Source-tag chip (used on shared resources to show which subscription they belong to) */ .source-tag{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:5px;background:var(--brand-soft);color:var(--brand)} .source-tag.menopause{background:#FBE5F1;color:#A4376E} .source-tag.hair{background:#FFEFD9;color:#A66120} .source-tag.shared{background:var(--surface-3);color:var(--ink-2)} .source-tag i{width:5px;height:5px;border-radius:50%;background:currentColor;display:inline-block} .detail-block{border:1px solid var(--border);border-radius:var(--r-md);padding:16px;background:var(--surface)} .detail-block-label{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3);font-weight:600} .detail-block-value{font-size:22px;font-weight:600;margin-top:6px;letter-spacing:-.02em;color:var(--ink);line-height:1.15} .detail-block-sub{font-size:12px;color:var(--ink-3);margin-top:4px} /* SEALED */ .sealed{border:1px solid var(--seal-border);border-radius:var(--r-md);background:var(--seal-bg);padding:14px 16px;display:flex;align-items:center;gap:14px;margin-bottom:16px} .seal-icon{width:34px;height:34px;background:var(--seal);color:#fff;border-radius:10px;display:grid;place-items:center;flex-shrink:0} .seal-text{flex:1} .seal-text-title{font-size:13px;font-weight:600;color:var(--seal)} .seal-text-sub{font-size:12px;color:var(--ink-2);margin-top:2px} .seal-btn{padding:7px 14px;background:var(--seal);color:#fff;border:none;border-radius:999px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit} .seal-btn:hover{background:#334155} .health-fields{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;background:var(--surface)} .health-field{padding:13px 16px;border-right:1px solid var(--border);border-bottom:1px solid var(--border)} .health-field:nth-child(2n){border-right:none} .health-field:nth-last-child(-n+2){border-bottom:none} .health-field-label{font-size:10px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.1em;font-weight:600} .health-field-value{font-size:14px;font-weight:500;margin-top:5px;color:var(--ink)} .health-field-value .num{font-weight:600} .verified-stamp{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;background:var(--brand-soft);color:var(--brand);font-size:11px;font-weight:600;border:1px solid #C7DAFF} /* CHART */ .chart-wrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:18px;margin-bottom:16px} .chart-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:14px} .chart-title{font-size:14px;font-weight:600;letter-spacing:-.01em} .chart-stat{font-size:12px;color:var(--ink-3)} .chart-stat strong{color:var(--success);font-weight:600;font-variant-numeric:tabular-nums} /* RX */ .rx-item{display:flex;gap:14px;padding:16px;border:1px solid var(--border);border-radius:var(--r-md);margin-bottom:10px;background:var(--surface)} .rx-icon{width:40px;height:40px;border-radius:12px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;flex-shrink:0} .rx-content{flex:1} .rx-name{font-size:15px;font-weight:600;display:flex;align-items:center;gap:10px;letter-spacing:-.01em} .rx-meta{font-size:12px;color:var(--ink-3);margin-top:4px} .rx-side{text-align:right;font-size:12px;color:var(--ink-2)} .rx-pharmacy{display:flex;align-items:center;gap:10px;margin-top:10px;padding-top:10px;border-top:1px dashed var(--border);font-size:12px;flex-wrap:wrap} .rx-pharmacy-label{color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em;font-size:10.5px;font-weight:600} .rx-pharmacy-select{padding:4px 28px 4px 9px;border:1px solid var(--border);border-radius:6px;background:var(--surface);font-size:12px;font-weight:500;color:var(--ink);cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center} .rx-pharmacy-select:hover{border-color:var(--border-2)} .rx-pharmacy-select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)} .rx-pharmacy-history{color:var(--ink-3);font-size:11.5px} .rx-pharmacy-warning{margin-left:auto;color:var(--ink-3);font-size:11px;font-style:italic} .rx-pharmacy-manual{color:var(--ink-2);font-style:italic;font-size:12px} /* Recept-actiebalk — veilige acties en destructieve acties als nette groepen; demo-actie apart + gedempt */ .rx-actions{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;margin-top:12px;padding-top:10px;border-top:1px dashed var(--border)} .rx-action-group{display:flex;flex-wrap:wrap;gap:6px} .rx-actions .btn{font-size:11px;padding:5px 11px} .rx-action-rollback{color:#92400E} .rx-action-cancel{color:var(--danger)} .rx-actions-demo{margin-top:8px} .rx-actions-demo .btn{font-size:10.5px;padding:3px 8px;color:var(--ink-3);background:var(--surface-2)} /* TIMELINE */ .timeline{position:relative;padding-left:28px} .timeline::before{content:'';position:absolute;left:9px;top:4px;bottom:4px;width:1px;background:var(--border-2)} .timeline-item{position:relative;padding-bottom:22px} .timeline-item::before{content:'';position:absolute;left:-23px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--surface);border:2px solid var(--brand)} .timeline-item.success::before{border-color:var(--success)} .timeline-item.danger::before{border-color:var(--danger)} .timeline-when{font-size:10px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.1em;font-weight:600} .timeline-what{font-size:13px;margin-top:3px} .timeline-what strong{font-weight:600} .timeline-detail{font-size:12px;color:var(--ink-2);margin-top:6px;background:var(--surface);padding:10px 14px;border-radius:var(--r-sm);border-left:3px solid var(--border-2);line-height:1.6} /* QL */ .ql-list{display:grid;gap:10px} .ql-item{border:1px solid var(--border);background:var(--surface);border-radius:var(--r-md);padding:14px 16px;display:flex;align-items:center;gap:14px;cursor:grab;transition:.14s} .ql-item:hover{border-color:var(--border-2)} .ql-handle{color:var(--ink-muted);cursor:grab;font-size:13px} .ql-q{flex:1} .ql-q-num{font-size:10px;color:var(--ink-3);font-weight:600;letter-spacing:.1em} .ql-q-text{font-size:14px;font-weight:600;margin-top:3px;letter-spacing:-.01em;color:var(--ink)} .ql-q-meta{font-size:11px;color:var(--ink-3);margin-top:7px;display:flex;gap:6px;flex-wrap:wrap} .ql-tag{padding:2px 8px;border-radius:6px;background:var(--surface-3);color:var(--ink-2);font-size:11px;font-weight:500} .ql-tag.disqualifier{background:var(--danger-soft);color:var(--danger)} /* MASTER */ .price-period{display:inline-flex;align-items:center;gap:6px;background:var(--surface-2);padding:3px 10px;border-radius:999px;font-size:12px;border:1px solid var(--border);color:var(--ink-2)} .price-period .num{font-weight:600;color:var(--ink)} .market-pill{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;background:var(--surface-2);border:1px solid var(--border);border-radius:4px;font-size:11px;font-weight:600;letter-spacing:.02em;color:var(--ink-2);white-space:nowrap} .market-pill .flag{font-size:12px;line-height:1} /* CSS-getekende vlaggen — Windows/Chrome rendert regional-indicator emoji niet als vlag */ .flag-nl,.flag-de,.flag-fr,.flag-gb{display:inline-block;width:14px;height:10px;border-radius:2px;vertical-align:middle;box-shadow:0 0 0 .5px rgba(0,0,0,.15);background-size:cover;background-position:center} .flag-nl{background:linear-gradient(180deg,#AE1C28 0 33.34%,#fff 33.34% 66.67%,#21468B 66.67% 100%)} .flag-de{background:linear-gradient(180deg,#000 0 33.34%,#DD0000 33.34% 66.67%,#FFCE00 66.67% 100%)} .flag-fr{background:linear-gradient(90deg,#0055A4 0 33.34%,#fff 33.34% 66.67%,#EF4135 66.67% 100%)} .flag-gb{background-image:url("data:image/svg+xml,")} .lang-card-flag .flag-nl,.lang-card-flag .flag-de,.lang-card-flag .flag-fr,.lang-card-flag .flag-gb{width:26px;height:18px;border-radius:3px} .market-pill.market-pill-de{background:#FEF3C7;border-color:#FDE68A;color:#92400E} .market-pill.market-pill-nl{background:#E0F2FE;border-color:#BAE6FD;color:#0C4A6E} /* INTERCOM WIDGET — fixed bottom-right; round launcher when collapsed, expandable panel with recent conversations + deeplink CTA when open. Visual style mirrors the public Intercom Messenger widget. */ .ic-widget{position:fixed;bottom:22px;right:22px;z-index:40;font-family:inherit} .ic-launcher{display:none;width:60px;height:60px;border-radius:50%;border:none;background:linear-gradient(135deg,var(--brand) 0%,#2A5BC4 100%);color:#fff;cursor:pointer;box-shadow:0 4px 16px rgba(56,110,219,.35),0 12px 40px rgba(15,20,25,.18);position:relative;align-items:center;justify-content:center;transition:transform .18s ease, box-shadow .18s ease} .ic-launcher:hover{transform:scale(1.05);box-shadow:0 6px 20px rgba(56,110,219,.45),0 14px 44px rgba(15,20,25,.22)} .ic-launcher:active{transform:scale(.96)} .ic-launcher-badge{position:absolute;top:6px;right:6px;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:#FF4F4F;color:#fff;font-size:11px;font-weight:700;display:none;align-items:center;justify-content:center;border:2px solid var(--surface);box-sizing:content-box} .ic-launcher-badge:not(:empty){display:flex} .ic-collapsed .ic-launcher{display:flex} .ic-collapsed .ic-panel{display:none} .ic-panel{width:368px;max-height:min(640px,calc(100vh - 60px));background:var(--surface);border-radius:16px;box-shadow:0 6px 22px rgba(15,20,25,.10),0 20px 60px rgba(15,20,25,.16);display:flex;flex-direction:column;overflow:hidden;animation:ic-slide-up .22s cubic-bezier(.32,.72,0,1)} @keyframes ic-slide-up{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}} .ic-head{padding:18px 20px 14px;background:linear-gradient(135deg,var(--brand) 0%,#1E3A8A 100%);color:#fff;flex-shrink:0} .ic-head-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px} .ic-avatars{display:flex} .ic-avatars .ic-avatar{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.18);color:#fff;display:grid;place-items:center;font-size:10px;font-weight:600;letter-spacing:.02em;border:2px solid #1E3A8A;margin-left:-8px} .ic-avatars .ic-avatar:first-child{margin-left:0} .ic-close{width:28px;height:28px;border:none;background:rgba(255,255,255,.12);border-radius:50%;color:rgba(255,255,255,.85);cursor:pointer;display:grid;place-items:center;transition:.14s} .ic-close:hover{background:rgba(255,255,255,.22);color:#fff} .ic-greeting{font-size:18px;font-weight:700;letter-spacing:-.015em;margin-bottom:4px} .ic-tagline{font-size:12px;color:rgba(255,255,255,.78);display:flex;align-items:center;gap:6px} .ic-status-dot{width:6px;height:6px;border-radius:50%;background:#5fd09b;box-shadow:0 0 0 3px rgba(95,208,155,.25)} .ic-body{flex:1;overflow-y:auto;padding:14px 0 10px;background:var(--surface)} .ic-section-title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3);padding:0 20px 10px} .ic-convos{display:flex;flex-direction:column} .ic-convo{display:flex;align-items:center;gap:11px;padding:11px 20px;background:transparent;border:none;border-bottom:1px solid var(--surface-3);width:100%;text-align:left;cursor:pointer;font-family:inherit;transition:background .12s} .ic-convo:last-child{border-bottom:none} .ic-convo:hover{background:var(--brand-softer)} .ic-convo-avatar{width:36px;height:36px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:11.5px;font-weight:600;flex-shrink:0} .ic-convo-info{flex:1;min-width:0} .ic-convo-row1{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:2px} .ic-convo-name{font-size:13px;font-weight:600;color:var(--ink);letter-spacing:-.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ic-convo-time{font-size:11px;color:var(--ink-3);flex-shrink:0} .ic-convo-preview{font-size:12px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3} .ic-convo.unread .ic-convo-name{font-weight:700;color:var(--ink)} .ic-convo.unread .ic-convo-preview{color:var(--ink-2);font-weight:500} .ic-convo-unread{min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--brand);color:#fff;font-size:10.5px;font-weight:700;display:grid;place-items:center;flex-shrink:0} .ic-foot{padding:12px 16px;border-top:1px solid var(--border);background:var(--surface-2);flex-shrink:0} .ic-cta{width:100%;padding:10px 14px;border:1px solid var(--border-2);background:var(--surface);border-radius:10px;font-size:13px;font-weight:600;color:var(--brand);cursor:pointer;font-family:inherit;transition:.14s} .ic-cta:hover{border-color:var(--brand);background:var(--brand-soft)} /* Toast — fires when DCM sends an event to Intercom (event-tracking visualisation). Positioned bottom-left to never overlap the Intercom widget at bottom-right. */ .ic-event-toast{position:fixed;bottom:22px;left:22px;background:#0F1419;color:#fff;padding:10px 14px 11px;border-radius:10px;box-shadow:0 6px 24px rgba(15,20,25,.28);font-size:12.5px;display:flex;align-items:center;gap:10px;z-index:50;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .2s, transform .2s;max-width:360px} .ic-event-toast.show{opacity:1;transform:translateY(0)} .ic-event-toast .ic-event-arrow{color:#5fd09b;font-weight:700;flex-shrink:0} .ic-event-toast .ic-event-name{font-family:var(--font-mono);font-size:11.5px;color:#9CD0FF;font-weight:600} .ic-event-toast .ic-event-label{color:rgba(255,255,255,.85)} /* Open-in-Intercom button — replaces the old phone-call button in tables/tasks */ .btn-intercom{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;font-size:12px;font-weight:500;cursor:pointer;border:1px solid var(--border);background:var(--surface);color:var(--ink-2);font-family:inherit;transition:.14s;letter-spacing:-.005em} .btn-intercom:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-softer)} .btn-intercom svg{flex-shrink:0} .btn-intercom-sm{padding:4px 10px;font-size:11.5px;gap:5px} /* Recent Intercom conversations panel inside the drawer Interacties tab */ .ic-drawer-section{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:14px 16px;margin-bottom:18px} .ic-drawer-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;flex-wrap:wrap} .ic-drawer-title{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--ink);letter-spacing:-.005em} .ic-drawer-title svg{color:var(--brand)} .ic-drawer-convos{display:flex;flex-direction:column;gap:10px} .ic-drawer-convo{padding:11px 13px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md)} .ic-drawer-convo.unread{background:var(--brand-softer);border-color:var(--brand-soft)} .ic-drawer-convo-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:7px;font-size:11.5px} .ic-drawer-convo-when{color:var(--ink-3);font-weight:500} .ic-drawer-convo-state{display:flex;align-items:center;gap:6px;color:var(--ink-2);font-weight:500} .ic-drawer-convo-state .ic-status-dot{box-shadow:none} .ic-drawer-convo-state .ic-status-dot.done{background:var(--ink-muted)} .ic-drawer-convo-preview{font-size:13px;line-height:1.45;color:var(--ink);margin-bottom:10px} .ic-drawer-convo-preview strong{color:var(--ink)} .ic-drawer-convo-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap} .ic-drawer-convo-foot .text-meta{font-size:11px;color:var(--ink-3)} /* Settings → Integrations: Intercom integration status card */ .ic-status-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:18px 20px;margin-bottom:16px} .ic-status-head{display:flex;align-items:center;gap:12px;margin-bottom:14px} .ic-status-icon{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,var(--brand) 0%,#1E3A8A 100%);color:#fff;display:grid;place-items:center;flex-shrink:0} .ic-status-name{font-size:14px;font-weight:600;color:var(--ink);letter-spacing:-.01em} .ic-status-sub{font-size:12px;color:var(--ink-3);margin-top:2px;display:flex;align-items:center;gap:6px} .ic-status-pill{margin-left:auto;display:inline-flex;align-items:center;gap:6px;padding:5px 12px;background:var(--success-soft);color:var(--success);border-radius:999px;font-size:11.5px;font-weight:600} .ic-status-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding-top:14px;border-top:1px solid var(--border)} .ic-status-cell{font-size:11.5px} .ic-status-cell-label{color:var(--ink-3);text-transform:uppercase;letter-spacing:.08em;font-weight:600;margin-bottom:4px;font-size:10.5px} .ic-status-cell-val{color:var(--ink);font-weight:500;font-family:var(--font-mono)} .ic-status-events{margin-top:14px;padding-top:14px;border-top:1px solid var(--border)} .ic-status-events-title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);margin-bottom:8px} .ic-status-event{display:flex;align-items:center;gap:10px;padding:7px 10px;background:var(--surface-2);border-radius:6px;font-size:12px;margin-bottom:5px} .ic-status-event:last-child{margin-bottom:0} .ic-status-event-name{font-family:var(--font-mono);font-weight:600;color:var(--brand);font-size:11.5px} .ic-status-event-time{margin-left:auto;color:var(--ink-3);font-size:11px} /* TOGGLE */ .toggle{position:relative;width:36px;height:20px;background:var(--surface-sunk);border-radius:999px;cursor:pointer;transition:background .16s} .toggle::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;background:#fff;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:left .16s} .toggle.on{background:var(--brand)} .toggle.on::after{left:18px} /* ROLE MATRIX */ .role-matrix{width:100%;border-collapse:collapse} .role-matrix th,.role-matrix td{text-align:center;padding:11px 10px;font-size:12px;border-bottom:1px solid var(--border)} .role-matrix th{font-weight:600;color:var(--ink-2);font-size:12px} .role-matrix td:first-child,.role-matrix th:first-child{text-align:left;font-weight:500;width:40%} .role-matrix .check{color:var(--brand);font-size:16px} .role-matrix .dash{color:var(--ink-muted)} /* UTIL */ .row{display:flex;gap:8px;align-items:center} .grow{flex:1} .mt-12{margin-top:12px} .mt-18{margin-top:18px} .mb-12{margin-bottom:12px} .text-muted{color:var(--ink-3)} .text-sm{font-size:12px} .text-mono{font-family:var(--font-mono)} body.no-scroll{overflow:hidden} /* MASTERDATA SUBVIEWS */ .masterdata-subview{display:none} .masterdata-subview.active{display:block} .prices-subview{display:none} .prices-subview.active{display:block} /* SETTINGS SUBVIEWS */ .settings-subview{display:none} .settings-subview.active{display:block} .finance-subview{display:none} .finance-subview.active{display:block} /* PRODUCTLINE CARDS */ .productline-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:18px} .productline-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:22px 24px;display:flex;flex-direction:column;gap:16px;transition:border-color .14s} .productline-card:hover{border-color:var(--border-2)} .productline-card.concept{background:var(--surface-2)} .productline-card-head{display:flex;align-items:flex-start;gap:14px} .productline-card-icon{width:40px;height:40px;border-radius:12px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font-size:14px;font-weight:600;flex-shrink:0;letter-spacing:.02em} .productline-card.concept .productline-card-icon{background:var(--surface-3);color:var(--ink-3)} .productline-card-title{flex:1;min-width:0} .productline-card-name{font-size:18px;font-weight:600;letter-spacing:-.02em;color:var(--ink);line-height:1.2} .productline-card-slug{font-family:var(--font-mono);font-size:11px;color:var(--ink-3);margin-top:3px} .productline-card-desc{font-size:13px;color:var(--ink-2);line-height:1.55} .productline-stats{display:flex;border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:14px 0} .productline-stat{flex:1;padding:0 14px;border-right:1px solid var(--border)} .productline-stat:last-child{border-right:none} .productline-stat:first-child{padding-left:0} .productline-stat-value{font-size:20px;font-weight:600;letter-spacing:-.02em;color:var(--ink);line-height:1.1} .productline-stat-value.muted{color:var(--ink-3)} .productline-stat-label{font-size:11px;color:var(--ink-3);margin-top:4px;letter-spacing:0} .productline-meta{display:grid;grid-template-columns:78px 1fr;gap:6px 14px;font-size:12px} .productline-meta-label{color:var(--ink-3);font-weight:500} .productline-meta-value{color:var(--ink)} .quota-breakdown{border-top:1px solid var(--border);padding-top:14px;display:flex;flex-direction:column;gap:10px} .quota-breakdown-head{display:flex;justify-content:space-between;align-items:baseline;font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em;font-weight:500} .quota-breakdown-head .qbh-sub{text-transform:none;letter-spacing:0;font-weight:400} .quota-row{display:grid;grid-template-columns:1.3fr 1fr auto auto;gap:10px;align-items:center;font-size:12px} .quota-row-manual{grid-template-columns:1fr auto auto} .quota-product{color:var(--ink);line-height:1.3} .quota-product-note{display:block;font-size:10.5px;color:var(--brand);font-weight:500;margin-top:1px} .quota-bar-wrap{position:relative;height:8px;min-width:60px} .quota-bar{background:var(--surface-3);height:8px;border-radius:4px;overflow:hidden} .quota-fill{background:var(--brand);height:8px;border-radius:4px} .quota-tick{position:absolute;top:-2px;width:2px;height:12px;background:var(--ink);border-radius:1px;transform:translateX(-1px)} .quota-stat{font-size:11.5px;color:var(--ink-3);white-space:nowrap} .quota-stat .quota-actual{color:var(--ink);font-weight:600;margin-left:4px} .quota-orders{font-size:11.5px;color:var(--ink-3);min-width:32px;text-align:right} .quota-manual-tag{font-size:11px;color:var(--ink-3);font-style:italic} .productline-actions{display:flex;gap:8px;margin-top:auto;padding-top:4px;flex-wrap:wrap} .productline-add{background:transparent;border:1px dashed var(--border-2);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;cursor:pointer;min-height:300px;color:var(--ink-3);transition:all .14s} .productline-add:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-softer)} .productline-add-icon{width:44px;height:44px;border-radius:50%;background:var(--surface-3);display:grid;place-items:center;font-size:22px;font-weight:400;transition:.14s} .productline-add:hover .productline-add-icon{background:var(--brand-soft);color:var(--brand)} .productline-add-text{font-size:14px;font-weight:600} .productline-add-sub{font-size:11px;color:var(--ink-3);margin-top:-4px} /* EMPTY STATES */ .empty-state{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:56px 28px;text-align:center} .empty-state-icon{width:52px;height:52px;border-radius:14px;background:var(--surface-3);color:var(--ink-3);display:grid;place-items:center;margin:0 auto 14px} .empty-state-title{font-size:16px;font-weight:600;color:var(--ink);letter-spacing:-.01em} .empty-state-desc{font-size:13px;color:var(--ink-3);margin-top:6px;max-width:42ch;margin-left:auto;margin-right:auto;line-height:1.55} .empty-state-cta{margin-top:18px} /* =========================================================== CUSTOMER PORTAL PREVIEW — embedded customer-facing experience =========================================================== */ .portal-subnav{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap} .portal-frame{border:1px solid var(--border);border-radius:18px;background:var(--surface);overflow:hidden;box-shadow:0 1px 0 rgba(15,20,25,.02),0 14px 40px rgba(15,20,25,.06)} .portal-chrome{display:flex;align-items:center;gap:10px;padding:11px 16px;background:var(--surface-2);border-bottom:1px solid var(--border)} .portal-chrome-dots{display:flex;gap:5px} .portal-chrome-dots span{width:10px;height:10px;border-radius:50%;background:var(--surface-sunk)} .portal-chrome-url{flex:1;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:5px 12px;font-size:11.5px;font-family:var(--font-mono);color:var(--ink-3);display:flex;align-items:center;gap:8px} .portal-chrome-url svg{color:var(--success);flex-shrink:0} .portal-chrome-tag{font-size:10px;font-weight:600;color:var(--ink-3);text-transform:uppercase;letter-spacing:.1em} .portal-canvas{background:linear-gradient(180deg,#F8FAFD 0%, #FFFFFF 220px);min-height:580px} .portal-screen{display:none;padding:32px 36px} .portal-screen.active{display:block} .portal-topbar{display:flex;align-items:center;gap:14px;padding-bottom:22px;margin-bottom:24px;border-bottom:1px solid var(--border)} .portal-logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:15px;letter-spacing:-.01em;color:var(--ink)} .portal-logo-mark{width:30px;height:30px;border-radius:9px;background:var(--brand);color:#fff;display:grid;place-items:center} .portal-topbar-nav{display:flex;gap:6px;margin-left:24px} .portal-topbar-nav span{font-size:12.5px;color:var(--ink-3);padding:6px 12px;border-radius:999px;cursor:pointer;font-weight:500} .portal-topbar-nav span.active{background:var(--brand-soft);color:var(--brand);font-weight:600} .portal-topbar-end{margin-left:auto;display:flex;align-items:center;gap:12px;font-size:12px;color:var(--ink-3)} .portal-topbar-avatar{width:32px;height:32px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:11px;font-weight:600} .portal-login{max-width:440px;margin:46px auto;background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:38px 36px;box-shadow:0 1px 0 rgba(15,20,25,.02),0 18px 48px rgba(15,20,25,.06)} .portal-login-mark{width:40px;height:40px;border-radius:11px;background:var(--brand);color:#fff;display:grid;place-items:center;margin-bottom:22px} .portal-login h2{font-size:23px;font-weight:700;letter-spacing:-.025em;color:var(--ink);margin-bottom:6px} .portal-login p{font-size:13.5px;color:var(--ink-3);margin-bottom:24px;line-height:1.55} .portal-login label{display:block;font-size:12px;font-weight:600;color:var(--ink-2);margin-bottom:6px} .portal-input{width:100%;padding:11px 14px;border:1px solid var(--border);border-radius:10px;font-size:14px;font-family:inherit;background:var(--surface);color:var(--ink);transition:.14s;margin-bottom:14px} .portal-input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)} .portal-btn{width:100%;justify-content:center;padding:12px 18px;font-size:14px;font-weight:600;border-radius:10px;cursor:pointer;border:1px solid var(--brand);background:var(--brand);color:#fff;font-family:inherit;display:flex;align-items:center;gap:8px;transition:.14s} .portal-btn:hover{background:var(--brand-hover);border-color:var(--brand-hover)} .portal-btn-ghost{background:transparent;border:1px solid var(--border);color:var(--ink-2)} .portal-btn-ghost:hover{background:var(--surface-2);color:var(--ink)} .portal-magic-demo{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:12px 14px;margin:18px 0} .portal-magic-demo-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);margin-bottom:6px} .portal-magic-demo-link{font-size:11.5px;font-family:var(--font-mono);color:var(--brand);word-break:break-all;line-height:1.55} .portal-login-state{display:none} .portal-login-state.active{display:block} .portal-login-success-icon{width:54px;height:54px;border-radius:14px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;margin-bottom:18px} .portal-hello{font-size:26px;font-weight:700;letter-spacing:-.025em;color:var(--ink);margin-bottom:4px} .portal-hello-sub{font-size:13.5px;color:var(--ink-3);margin-bottom:24px} .portal-grid-2{display:grid;grid-template-columns:1.55fr 1fr;gap:18px;margin-bottom:18px} .portal-section-title{font-size:11px;text-transform:uppercase;letter-spacing:.12em;font-weight:600;color:var(--ink-3);margin:18px 0 10px} /* Portal: "Mijn behandelingen" — overview grid of all customer's subscriptions */ .portal-treatments-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:24px} .portal-treatment-card{background:var(--surface);border:1.5px solid var(--border);border-radius:14px;padding:18px 20px;cursor:pointer;transition:.16s;display:flex;flex-direction:column;gap:12px} .portal-treatment-card:hover{border-color:var(--border-2)} .portal-treatment-card.selected{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)} .portal-treatment-card.menopause.selected{border-color:#A4376E;box-shadow:0 0 0 3px rgba(164,55,110,.12)} .portal-treatment-head{display:flex;align-items:flex-start;gap:12px} .portal-treatment-icon{width:40px;height:40px;border-radius:11px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font-size:13px;font-weight:700;letter-spacing:.04em;flex-shrink:0} .portal-treatment-card.menopause .portal-treatment-icon{background:#FBE5F1;color:#A4376E} .portal-treatment-line{font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3);font-weight:600;margin-bottom:3px} .portal-treatment-name{font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--ink);line-height:1.25} .portal-treatment-meta-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:10px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);font-size:11.5px} .portal-treatment-meta-label{color:var(--ink-3);text-transform:uppercase;letter-spacing:.08em;font-weight:600;font-size:10px} .portal-treatment-meta-val{color:var(--ink);font-weight:600;margin-top:2px;font-size:13px} .portal-treatment-progress{height:5px;background:var(--surface-3);border-radius:3px;overflow:hidden} .portal-treatment-progress-fill{height:100%;border-radius:3px;background:var(--brand)} .portal-treatment-card.menopause .portal-treatment-progress-fill{background:#A4376E} .portal-treatment-progress-meta{font-size:11px;color:var(--ink-3);display:flex;justify-content:space-between} .portal-treatment-add{border:1.5px dashed var(--border-2);background:transparent;border-radius:14px;padding:18px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;cursor:pointer;color:var(--ink-3);font-size:13px;font-weight:600;transition:.14s;font-family:inherit;min-height:200px} .portal-treatment-add:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-softer)} .portal-treatment-add-icon{width:40px;height:40px;border-radius:50%;background:var(--surface-3);display:grid;place-items:center;font-size:18px;font-weight:300;transition:.14s} .portal-treatment-add:hover .portal-treatment-add-icon{background:var(--brand-soft);color:var(--brand)} .portal-treatment-add-sub{font-size:11px;color:var(--ink-3);font-weight:500;text-align:center;max-width:18ch} /* Portal: treatment selector (which treatment's detail to show) */ .portal-treatment-switch{display:flex;align-items:center;gap:10px;margin-bottom:18px;padding:10px 14px;background:var(--surface-2);border:1px solid var(--border);border-radius:12px} .portal-treatment-switch-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3);font-weight:600;flex-shrink:0} .portal-treatment-switch-pills{display:flex;gap:6px;flex-wrap:wrap;flex:1} .portal-treatment-switch-pills .chip{padding:5px 12px;font-size:12px} /* Portal: source-tag (mirrors the dossier's source-tag, used for billing rows + actions) */ .portal-source-tag{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:5px;background:var(--brand-soft);color:var(--brand);margin-left:6px;vertical-align:1px} .portal-source-tag.menopause{background:#FBE5F1;color:#A4376E} .portal-source-tag.shared{background:var(--surface-3);color:var(--ink-2)} .portal-source-tag i{width:5px;height:5px;border-radius:50%;background:currentColor;display:inline-block} .portal-actions-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden} .portal-action{display:flex;align-items:center;gap:14px;padding:16px 18px;border-bottom:1px solid var(--border)} .portal-action:last-child{border-bottom:none} .portal-action-icon{width:38px;height:38px;border-radius:11px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;flex-shrink:0} .portal-action-icon.warn{background:var(--warning-soft);color:var(--warning)} .portal-action-icon.success{background:var(--success-soft);color:var(--success)} .portal-action-text{flex:1;min-width:0} .portal-action-title{font-size:13.5px;font-weight:600;color:var(--ink);letter-spacing:-.005em} .portal-action-sub{font-size:12px;color:var(--ink-3);margin-top:3px} .portal-action-cta{padding:7px 14px;border:1px solid var(--brand);background:var(--brand);color:#fff;border-radius:999px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;flex-shrink:0} .portal-action-cta.ghost{background:var(--surface);color:var(--brand);border-color:var(--brand)} .portal-plan-card{background:linear-gradient(135deg,#386EDB 0%, #2A5BC4 100%);color:#fff;border-radius:14px;padding:20px 22px} .portal-plan-eyebrow{font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;font-weight:600;opacity:.78;margin-bottom:8px} .portal-plan-name{font-size:20px;font-weight:700;letter-spacing:-.02em;margin-bottom:14px} .portal-plan-meta{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px} .portal-plan-meta-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;font-weight:600;opacity:.7} .portal-plan-meta-val{font-size:14px;font-weight:600;margin-top:3px} .portal-plan-progress{height:6px;background:rgba(255,255,255,.18);border-radius:3px;overflow:hidden;margin-bottom:8px} .portal-plan-progress-fill{height:100%;background:#fff;border-radius:3px} .portal-plan-progress-meta{font-size:11.5px;opacity:.85;display:flex;justify-content:space-between} .portal-journey{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:22px 24px;margin-bottom:18px} .portal-journey-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px} .portal-journey-title{font-size:15px;font-weight:700;letter-spacing:-.01em} .portal-journey-meta{font-size:12px;color:var(--ink-3)} .portal-journey-track{position:relative;padding:14px 18px 8px;min-height:96px} .portal-journey-line{position:absolute;left:32px;right:32px;top:25px;height:2px;background:var(--surface-3);border-radius:1px} .portal-journey-line-fill{position:absolute;left:32px;top:25px;height:2px;background:var(--brand);border-radius:1px} .portal-journey-steps{display:flex;justify-content:space-between;position:relative;gap:6px} .portal-journey-step{flex:1;min-width:0;text-align:center;padding:0 4px} .portal-journey-dot{width:22px;height:22px;border-radius:50%;background:var(--surface);border:2px solid var(--border-2);margin:0 auto 9px;display:grid;place-items:center;font-size:10px;font-weight:700;color:var(--ink-3);position:relative;z-index:1} .portal-journey-step.done .portal-journey-dot{background:var(--brand);border-color:var(--brand);color:#fff} .portal-journey-step.now .portal-journey-dot{background:#fff;border-color:var(--brand);color:var(--brand);box-shadow:0 0 0 4px var(--brand-soft)} .portal-journey-step.upcoming .portal-journey-dot{background:var(--surface);border-color:var(--border-2);color:var(--ink-muted)} .portal-journey-label{font-size:10.5px;color:var(--ink-3);font-weight:500;line-height:1.35;word-break:normal;hyphens:auto} .portal-journey-step.now .portal-journey-label{color:var(--ink);font-weight:600} .portal-journey-weeks{margin-top:22px;padding:16px 18px 18px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2)} .portal-journey-weeks-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:12px;gap:14px} .portal-journey-weeks-title{font-size:12.5px;font-weight:600;color:var(--ink);letter-spacing:-.005em} .portal-journey-weeks-sub{font-size:11px;color:var(--ink-3);margin-top:2px;line-height:1.5} .portal-journey-weeks-meta{font-size:11px;color:var(--ink-3);font-weight:500;white-space:nowrap} .portal-journey-weeks-meta strong{color:var(--ink);font-weight:700} .portal-journey-weeks-row{display:grid;grid-template-columns:repeat(24,1fr);gap:5px;align-items:center;margin-top:6px} .portal-journey-week{position:relative;width:14px;height:14px;border-radius:50%;background:var(--surface);border:1.5px solid var(--border-2);justify-self:center;cursor:default;transition:.14s} .portal-journey-week.done{background:var(--brand);border-color:var(--brand)} .portal-journey-week.done::after{content:"";position:absolute;left:3px;top:4px;width:6px;height:3px;border-left:1.5px solid #fff;border-bottom:1.5px solid #fff;transform:rotate(-45deg)} .portal-journey-week.now{background:#fff;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft);transform:scale(1.15);z-index:1} .portal-journey-week:hover::before{content:attr(data-tip);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;font-size:10.5px;font-weight:500;padding:4px 8px;border-radius:6px;white-space:nowrap;z-index:2;pointer-events:none} .portal-journey-weeks-axis{display:grid;grid-template-columns:repeat(24,1fr);gap:5px;margin-top:8px;font-size:9.5px;color:var(--ink-muted);font-weight:500} .portal-journey-weeks-axis span{justify-self:center;font-variant-numeric:tabular-nums} .portal-journey-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:11.5px;color:var(--ink-3);margin-top:18px;padding-top:14px;border-top:1px solid var(--border)} .portal-journey-legend span{display:inline-flex;align-items:center;gap:6px} .portal-journey-legend i{width:9px;height:9px;border-radius:50%;background:var(--brand);display:inline-block} .portal-journey-legend i.upcoming{background:var(--border-2)} .portal-journey-legend i.care{background:var(--success)} /* Portal: state pills (active customer vs. no-plan customer) */ .portal-state-pills{display:inline-flex;gap:0;background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:3px;margin-bottom:18px;font-size:12px;font-weight:600} .portal-state-pills button{border:none;background:transparent;padding:6px 14px;border-radius:999px;cursor:pointer;color:var(--ink-3);font-family:inherit;font-weight:inherit;transition:.14s} .portal-state-pills button.active{background:var(--brand);color:#fff} .portal-state-view{display:none} .portal-state-view.active{display:block} /* Portal: empty state (no plan yet) */ .portal-empty{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:48px 36px;text-align:center;margin-bottom:18px} .portal-empty-mark{width:62px;height:62px;border-radius:18px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;margin:0 auto 18px} .portal-empty h3{font-size:21px;font-weight:700;letter-spacing:-.02em;color:var(--ink);margin-bottom:8px} .portal-empty p{font-size:13.5px;color:var(--ink-3);max-width:50ch;margin:0 auto 22px;line-height:1.6} .portal-empty-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap} .portal-empty-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:10px} .portal-empty-step{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px 20px;text-align:left} .portal-empty-step-num{width:26px;height:26px;border-radius:50%;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font-size:12px;font-weight:700;margin-bottom:12px} .portal-empty-step.done .portal-empty-step-num{background:var(--success-soft);color:var(--success)} .portal-empty-step.current .portal-empty-step-num{background:var(--brand);color:#fff} .portal-empty-step-title{font-size:13.5px;font-weight:600;color:var(--ink);letter-spacing:-.005em;margin-bottom:5px} .portal-empty-step-sub{font-size:12px;color:var(--ink-3);line-height:1.55} .portal-empty-pending{background:var(--warning-soft);border:1px solid #FCD34D;color:var(--warning);border-radius:12px;padding:14px 18px;display:flex;align-items:center;gap:14px;margin-bottom:18px;font-size:13px} .portal-empty-pending-icon{width:32px;height:32px;border-radius:9px;background:rgba(255,255,255,.55);display:grid;place-items:center;flex-shrink:0} .portal-empty-pending-text{flex:1} .portal-empty-pending-title{font-weight:700} .portal-empty-pending-sub{font-size:12px;margin-top:3px;opacity:.85} /* Portal: Care+ add-on (in plans flow) */ .portal-addon{background:linear-gradient(135deg, #F4F7FF 0%, #FFFFFF 100%);border:1.5px solid #C7DAFF;border-radius:14px;padding:20px 22px;margin-bottom:22px;transition:.16s} .portal-addon.active{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)} .portal-addon-head{display:flex;align-items:center;gap:14px;margin-bottom:10px} .portal-addon-icon{width:42px;height:42px;border-radius:11px;background:var(--brand);color:#fff;display:grid;place-items:center;flex-shrink:0} .portal-addon-title{flex:1;min-width:0} .portal-addon-name{font-size:15.5px;font-weight:700;letter-spacing:-.01em;color:var(--ink);display:flex;align-items:center;gap:8px;flex-wrap:wrap} .portal-addon-name-tag{font-size:10.5px;font-weight:700;color:var(--brand);background:var(--brand-soft);padding:2px 8px;border-radius:999px;letter-spacing:.05em} .portal-addon-price{font-size:13.5px;font-weight:700;color:var(--brand);margin-top:3px} .portal-addon-toggle{display:flex;align-items:center;gap:10px;font-size:12.5px;font-weight:600;color:var(--ink-2);flex-shrink:0} .portal-addon-desc{font-size:13px;color:var(--ink-2);line-height:1.55;margin-bottom:14px} .portal-addon-feats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px} .portal-addon-feat{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:10px 12px;font-size:11.5px;color:var(--ink-2);display:flex;align-items:flex-start;gap:7px;line-height:1.4} .portal-addon-feat svg{color:var(--success);flex-shrink:0;margin-top:1px} @media(max-width:1100px){.portal-addon-feats{grid-template-columns:repeat(2,1fr)}} /* Portal: Care+ program section */ .portal-care-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:22px 24px;margin-bottom:18px} .portal-care-card-activating{border-color:#FDE68A;background:linear-gradient(0deg,#FFFBEB 0%, var(--surface) 60%)} .portal-care-head{display:flex;align-items:center;gap:12px;margin-bottom:6px} .portal-care-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;background:var(--success-soft);color:var(--success);font-size:11px;font-weight:600} .portal-care-badge-pending{background:#FEF3C7;color:#92400E} .portal-care-steps{margin:14px 0 18px;padding:14px 16px;background:var(--surface-2);border:1px solid var(--border);border-radius:10px;display:flex;flex-direction:column;gap:10px} .portal-care-step{display:flex;align-items:flex-start;gap:11px;font-size:12.5px;color:var(--ink-2);line-height:1.5} .portal-care-step strong{color:var(--ink);font-weight:600} .portal-care-step-marker{width:18px;height:18px;border-radius:50%;background:var(--surface-3);display:grid;place-items:center;flex-shrink:0;margin-top:1px;color:transparent} .portal-care-step-done .portal-care-step-marker{background:var(--success);color:#fff} .portal-care-step-pending .portal-care-step-marker{background:#FEF3C7;border:1px solid #FDE68A} .portal-care-step-spinner{width:8px;height:8px;border-radius:50%;border:2px solid #92400E;border-top-color:transparent;animation:portal-care-spin 1s linear infinite} @keyframes portal-care-spin{to{transform:rotate(360deg)}} .portal-care-step-pending .portal-care-step-text{color:var(--ink-2)} .portal-care-step:not(.portal-care-step-done):not(.portal-care-step-pending) .portal-care-step-text{color:var(--ink-3)} .portal-care-title{font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--ink)} .portal-care-sub{font-size:12.5px;color:var(--ink-3);margin-bottom:18px;line-height:1.55} .portal-care-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} .portal-care-item{border:1px solid var(--border);border-radius:12px;padding:16px 16px;background:var(--surface-2)} .portal-care-item-icon{width:34px;height:34px;border-radius:10px;background:var(--success-soft);color:var(--success);display:grid;place-items:center;margin-bottom:11px} .portal-care-item-title{font-size:13px;font-weight:700;color:var(--ink);letter-spacing:-.005em;margin-bottom:4px} .portal-care-item-sub{font-size:11.5px;color:var(--ink-3);line-height:1.5;margin-bottom:10px} .portal-care-item-cta{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--brand);cursor:pointer} .portal-care-item-cta.muted{color:var(--ink-3)} @media(max-width:1100px){.portal-care-grid{grid-template-columns:1fr}} .portal-bill-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:20px} .portal-bill-kpi{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px 20px} .portal-bill-kpi-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;font-weight:600;color:var(--ink-3)} .portal-bill-kpi-value{font-size:26px;font-weight:700;margin-top:6px;letter-spacing:-.02em} .portal-bill-kpi-value.danger{color:var(--danger)} .portal-bill-kpi-value.success{color:var(--success)} .portal-bill-kpi-sub{font-size:11.5px;color:var(--ink-3);margin-top:4px} .portal-bill-list{background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-bottom:18px} .portal-bill-list-head{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between} .portal-bill-list-title{font-size:14px;font-weight:600;letter-spacing:-.01em} .portal-bill-row{display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid var(--border)} .portal-bill-row:last-child{border-bottom:none} .portal-bill-row-icon{width:38px;height:38px;border-radius:11px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;flex-shrink:0} .portal-bill-row-icon.danger{background:var(--danger-soft);color:var(--danger)} .portal-bill-row-icon.success{background:var(--success-soft);color:var(--success)} .portal-bill-row-meta{flex:1;min-width:0} .portal-bill-row-title{font-size:13.5px;font-weight:600;color:var(--ink);letter-spacing:-.005em} .portal-bill-row-sub{font-size:11.5px;color:var(--ink-3);margin-top:3px} .portal-bill-row-amount{font-variant-numeric:tabular-nums;font-weight:700;font-size:14.5px;color:var(--ink);text-align:right} .portal-bill-row-amount.danger{color:var(--danger)} .portal-bill-card-row{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px 20px;display:flex;align-items:center;gap:14px} .portal-bill-card-mark{width:46px;height:30px;background:linear-gradient(135deg,#1E3A8A,#386EDB);border-radius:6px;color:#fff;display:grid;place-items:center;font-size:10px;font-weight:700;letter-spacing:.05em;flex-shrink:0} .portal-bill-card-num{font-family:var(--font-mono);font-size:13px;color:var(--ink);letter-spacing:.04em} .portal-bill-card-meta{font-size:11.5px;color:var(--ink-3);margin-top:3px} /* Portal · Plans — productline selector at top of explore */ .portal-plans-tabs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:24px} .portal-plans-tab{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border:1.5px solid var(--border);background:var(--surface);border-radius:999px;cursor:pointer;font-size:13px;font-weight:600;color:var(--ink-2);font-family:inherit;transition:.14s} .portal-plans-tab:hover{border-color:var(--border-2)} .portal-plans-tab.active{border-color:var(--brand);color:var(--brand);background:var(--brand-softer)} .portal-plans-tab.menopause.active{border-color:#A4376E;color:#A4376E;background:#FBE5F1} .portal-plans-tab.hair.active{border-color:#A66120;color:#A66120;background:#FFEFD9} .portal-plans-tab i{width:8px;height:8px;border-radius:50%;background:var(--border-2)} .portal-plans-tab.weight i{background:var(--brand)} .portal-plans-tab.menopause i{background:#A4376E} .portal-plans-tab.hair i{background:#A66120} .portal-plans-tab-tag{font-size:10.5px;font-weight:600;padding:2px 7px;border-radius:5px;background:var(--success-soft);color:var(--success);text-transform:uppercase;letter-spacing:.05em} .portal-plans-tab-tag.concept{background:var(--surface-3);color:var(--ink-3)} .portal-plans-line{display:none} .portal-plans-line.active{display:block} /* Portal · "you are already on this treatment" banner */ .portal-already{background:var(--success-soft);border:1px solid #86EFAC;border-radius:14px;padding:14px 18px;display:flex;align-items:center;gap:14px;margin-bottom:22px;font-size:13px} .portal-already.menopause{background:#FDEEF6;border-color:#F2B7D5} .portal-already-icon{width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.6);color:var(--success);display:grid;place-items:center;flex-shrink:0} .portal-already.menopause .portal-already-icon{color:#A4376E} .portal-already-text{flex:1} .portal-already-title{font-weight:700;color:var(--ink);font-size:13.5px} .portal-already-sub{font-size:12px;color:var(--ink-2);margin-top:3px} .portal-already-actions{display:flex;gap:8px;flex-shrink:0} .portal-already-actions button{padding:7px 14px;font-size:12px;font-weight:600;border-radius:999px;cursor:pointer;font-family:inherit;border:1px solid var(--border-2);background:var(--surface);color:var(--ink-2);transition:.14s} .portal-already-actions button:hover{border-color:var(--ink-3);color:var(--ink)} .portal-already-actions button.primary{background:var(--success);color:#fff;border-color:var(--success)} .portal-already.menopause .portal-already-actions button.primary{background:#A4376E;border-color:#A4376E} .portal-plans-head{text-align:center;margin-bottom:24px} .portal-plans-head h2{font-size:24px;font-weight:700;letter-spacing:-.025em;color:var(--ink);margin-bottom:6px} .portal-plans-head p{font-size:13.5px;color:var(--ink-3);max-width:54ch;margin:0 auto;line-height:1.55} .portal-approval-banner{border-radius:14px;padding:14px 18px;display:flex;align-items:center;gap:14px;margin-bottom:22px;border:1px solid;font-size:13px} .portal-approval-banner.info{background:var(--brand-softer);border-color:#C7DAFF;color:var(--brand-deep)} .portal-approval-banner.warn{background:var(--warning-soft);border-color:#FCD34D;color:var(--warning)} .portal-approval-banner.success{background:var(--success-soft);border-color:#86EFAC;color:var(--success)} .portal-approval-banner-icon{width:32px;height:32px;border-radius:9px;background:rgba(255,255,255,.55);display:grid;place-items:center;flex-shrink:0} .portal-approval-banner-text{flex:1} .portal-approval-banner-title{font-weight:700;font-size:13px} .portal-approval-banner-sub{font-size:12px;margin-top:3px;opacity:.85} .portal-pick-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:22px} .portal-pick{border:1.5px solid var(--border);background:var(--surface);border-radius:14px;padding:18px 18px;cursor:pointer;transition:.16s;position:relative} .portal-pick:hover{border-color:var(--border-2)} .portal-pick.selected{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)} .portal-pick-badge{position:absolute;top:-9px;left:50%;transform:translateX(-50%);background:var(--brand);color:#fff;font-size:10px;font-weight:700;padding:3px 10px;border-radius:999px;letter-spacing:.05em} .portal-pick-name{font-size:14.5px;font-weight:700;letter-spacing:-.01em} .portal-pick-tag{font-size:11px;color:var(--ink-3);margin-top:3px} .portal-pick-price{font-size:22px;font-weight:700;margin-top:14px;letter-spacing:-.02em;color:var(--ink)} .portal-pick-per{font-size:12px;color:var(--ink-3);font-weight:500} .portal-pick-features{margin-top:12px;padding-top:12px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--ink-2)} .portal-pick-features span{display:inline-flex;align-items:center;gap:6px} .portal-pick-features span::before{content:"✓";color:var(--success);font-weight:700} .portal-summary{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:20px 22px;margin-bottom:18px} .portal-summary-row{display:flex;justify-content:space-between;font-size:13px;padding:7px 0;color:var(--ink-2)} .portal-summary-row.total{font-size:15.5px;font-weight:700;color:var(--ink);border-top:1px solid var(--border);margin-top:6px;padding-top:12px} .portal-trust-row{display:flex;flex-wrap:wrap;gap:18px;justify-content:center;font-size:11.5px;color:var(--ink-3);padding:16px 8px 4px} .portal-trust-row span{display:inline-flex;align-items:center;gap:5px} .portal-trust-row svg{color:var(--success)} /* Portal · Renewal / repeat-order section (treatment-journey end-of-cycle) */ .portal-renewal{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:22px 24px;margin-bottom:18px} .portal-renewal-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:6px} .portal-renewal-icon{width:42px;height:42px;border-radius:11px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;flex-shrink:0} .portal-renewal-title{font-size:16px;font-weight:700;letter-spacing:-.01em;color:var(--ink);line-height:1.25} .portal-renewal-sub{font-size:12.5px;color:var(--ink-3);margin-top:3px} .portal-renewal-doctor{background:var(--brand-softer);border:1px solid #C7DAFF;border-radius:11px;padding:11px 14px;margin:14px 0;display:flex;align-items:center;gap:12px;font-size:12.5px;color:var(--brand-deep)} .portal-renewal-doctor-icon{width:28px;height:28px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:11px;font-weight:700;flex-shrink:0} .portal-renewal-doctor strong{font-weight:700;display:block;font-size:12.5px} .portal-renewal-paths{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:14px} .portal-renewal-path{border:1.5px solid var(--border);background:var(--surface);border-radius:14px;padding:16px 18px;cursor:pointer;transition:.16s;display:flex;flex-direction:column;gap:8px} .portal-renewal-path:hover{border-color:var(--border-2)} .portal-renewal-path.recommended{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft);background:var(--brand-softer)} .portal-renewal-path-tag{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);display:flex;align-items:center;gap:6px} .portal-renewal-path.recommended .portal-renewal-path-tag{color:var(--brand)} .portal-renewal-path-tag svg{flex-shrink:0} .portal-renewal-path-name{font-size:14.5px;font-weight:700;letter-spacing:-.005em;color:var(--ink)} .portal-renewal-path-desc{font-size:12px;color:var(--ink-3);line-height:1.5} .portal-renewal-path-price{font-size:13px;font-weight:700;color:var(--ink);margin-top:auto;padding-top:8px;border-top:1px solid var(--border)} .portal-renewal-path.recommended .portal-renewal-path-price{border-top-color:#C7DAFF} .portal-renewal-cta{display:flex;gap:10px;align-items:center;flex-wrap:wrap} .portal-renewal-cta-meta{font-size:11.5px;color:var(--ink-3);flex:1;min-width:200px} /* Portal · About Vi Lifestyle */ .portal-about-hero{background:linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%);color:#fff;border-radius:18px;padding:34px 38px;margin-bottom:24px;text-align:center;position:relative;overflow:hidden} .portal-about-hero::before{content:"";position:absolute;top:-40px;right:-40px;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.06)} .portal-about-hero::after{content:"";position:absolute;bottom:-60px;left:-30px;width:160px;height:160px;border-radius:50%;background:rgba(255,255,255,.05)} .portal-about-hero h2{font-size:28px;font-weight:700;letter-spacing:-.02em;margin-bottom:8px;position:relative;z-index:1} .portal-about-hero p{font-size:14px;opacity:.9;line-height:1.55;max-width:54ch;margin:0 auto;position:relative;z-index:1} .portal-about-hero-mark{width:54px;height:54px;border-radius:14px;background:rgba(255,255,255,.18);display:grid;place-items:center;margin:0 auto 18px;position:relative;z-index:1} .portal-about-mission{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:24px 26px;margin-bottom:18px;text-align:center} .portal-about-mission-eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--brand);font-weight:700;margin-bottom:8px} .portal-about-mission h3{font-size:20px;font-weight:700;letter-spacing:-.015em;margin-bottom:10px;color:var(--ink)} .portal-about-mission p{font-size:13.5px;color:var(--ink-2);line-height:1.65;max-width:60ch;margin:0 auto} .portal-about-team{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:18px} .portal-about-doctor{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px 20px;display:flex;align-items:flex-start;gap:14px} .portal-about-doctor-avatar{width:54px;height:54px;border-radius:14px;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:15px;font-weight:700;flex-shrink:0} .portal-about-doctor-avatar.menopause{background:#A4376E} .portal-about-doctor-avatar.coach{background:var(--success)} .portal-about-doctor-name{font-size:14.5px;font-weight:700;letter-spacing:-.01em;color:var(--ink)} .portal-about-doctor-role{font-size:12px;color:var(--brand);font-weight:600;margin-top:2px} .portal-about-doctor-role.menopause{color:#A4376E} .portal-about-doctor-role.coach{color:var(--success)} .portal-about-doctor-bio{font-size:12px;color:var(--ink-3);margin-top:6px;line-height:1.55} .portal-about-doctor-cred{font-size:10.5px;color:var(--ink-3);margin-top:6px;font-family:var(--font-mono)} .portal-about-trust{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:22px 24px;margin-bottom:18px} .portal-about-trust-head{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:14px;text-align:center;letter-spacing:-.005em} .portal-about-trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .portal-about-trust-item{text-align:center;padding:14px 10px} .portal-about-trust-icon{width:38px;height:38px;border-radius:10px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;margin:0 auto 8px} .portal-about-trust-name{font-size:12.5px;font-weight:700;color:var(--ink)} .portal-about-trust-desc{font-size:11px;color:var(--ink-3);margin-top:3px;line-height:1.5} .portal-about-process{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:24px 26px;margin-bottom:18px} .portal-about-process-head{text-align:center;margin-bottom:20px} .portal-about-process-head h3{font-size:18px;font-weight:700;letter-spacing:-.015em;color:var(--ink);margin-bottom:6px} .portal-about-process-head p{font-size:13px;color:var(--ink-3);max-width:48ch;margin:0 auto;line-height:1.55} .portal-about-process-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .portal-about-process-step{padding:14px 16px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2)} .portal-about-process-num{width:28px;height:28px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:700;margin-bottom:10px} .portal-about-process-name{font-size:13px;font-weight:700;color:var(--ink);letter-spacing:-.005em;margin-bottom:4px} .portal-about-process-desc{font-size:11.5px;color:var(--ink-3);line-height:1.5} .portal-about-contact{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:22px 24px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px} .portal-about-contact-item{padding:8px 4px;border-right:1px solid var(--border);text-align:center} .portal-about-contact-item:last-child{border-right:none} .portal-about-contact-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3);font-weight:600;margin-bottom:5px} .portal-about-contact-value{font-size:13px;font-weight:600;color:var(--ink)} .portal-about-contact-sub{font-size:11.5px;color:var(--ink-3);margin-top:3px} @media(max-width:1100px){ .portal-renewal-paths{grid-template-columns:1fr} .portal-about-team{grid-template-columns:1fr} .portal-about-trust-grid{grid-template-columns:repeat(2,1fr)} .portal-about-process-steps{grid-template-columns:repeat(2,1fr)} .portal-about-contact{grid-template-columns:1fr} .portal-about-contact-item{border-right:none;border-bottom:1px solid var(--border);padding-bottom:14px} .portal-about-contact-item:last-child{border-bottom:none} } /* =========================================================== QUESTION BUILDER — enhanced with toolbox + preview =========================================================== */ /* Generic centered modal (used for question-builder live preview & edit) */ .modal-backdrop{position:fixed;inset:0;background:rgba(15,20,25,.45);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .22s;z-index:70;display:grid;place-items:center;padding:40px} .modal-backdrop.open{opacity:1;pointer-events:auto} .modal{background:var(--surface);border-radius:18px;width:min(540px,100%);max-height:calc(100vh - 80px);overflow:hidden;box-shadow:var(--shadow-pop);transform:translateY(8px) scale(.98);transition:transform .22s cubic-bezier(.32,.72,0,1);display:flex;flex-direction:column} .modal-lg{width:min(720px,100%)} .modal-backdrop.open .modal{transform:translateY(0) scale(1)} .modal-head{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:14px;flex-shrink:0} .modal-head-title{font-size:14px;font-weight:600;color:var(--ink);letter-spacing:-.005em} .modal-head-meta{font-size:11.5px;color:var(--ink-3);margin-left:auto;display:flex;align-items:center;gap:10px} .modal-close{width:30px;height:30px;border:1px solid var(--border);background:var(--surface);border-radius:999px;display:grid;place-items:center;cursor:pointer;color:var(--ink-2);transition:.14s} .modal-close:hover{border-color:var(--border-2);color:var(--ink)} .modal-body{padding:22px 26px;overflow-y:auto} .modal-foot{padding:14px 22px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:flex-end;gap:8px;background:var(--surface-2);flex-shrink:0} .modal-foot .text-meta{margin-right:auto;font-size:11.5px;color:var(--ink-3)} /* Question-edit form */ .qe-row{margin-bottom:18px} .qe-label{display:block;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3);margin-bottom:7px} .qe-input,.qe-select,.qe-textarea{width:100%;padding:10px 13px;border:1px solid var(--border);border-radius:9px;font-size:13.5px;font-family:inherit;background:var(--surface);color:var(--ink);transition:.14s} .qe-textarea{min-height:72px;resize:vertical;line-height:1.5} .qe-input:focus,.qe-select:focus,.qe-textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)} .qe-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px} .qe-toggle-row{display:flex;align-items:center;gap:14px;padding:10px 0;border-top:1px solid var(--border)} .qe-toggle-row:first-of-type{border-top:none} .qe-toggle-row-text{flex:1} .qe-toggle-row-title{font-size:13px;font-weight:600;color:var(--ink)} .qe-toggle-row-sub{font-size:11.5px;color:var(--ink-3);margin-top:2px} .qe-options{border:1px solid var(--border);border-radius:10px;background:var(--surface-2);padding:6px} .qe-option{display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--surface);border-radius:7px;margin-bottom:5px;font-size:12.5px;border:1px solid var(--border)} .qe-option:last-child{margin-bottom:0} .qe-option-handle{color:var(--ink-muted);cursor:grab;font-size:12px;flex-shrink:0} .qe-option-text{flex:1;border:none;background:transparent;font-family:inherit;color:var(--ink);font-size:12.5px;padding:0;outline:none} .qe-option-flag{font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:5px;background:var(--danger-soft);color:var(--danger);cursor:pointer;border:none;font-family:inherit} .qe-option-flag.off{background:var(--surface-3);color:var(--ink-3)} .qe-option-del{color:var(--ink-muted);cursor:pointer;font-size:14px;line-height:1;padding:0 4px;background:none;border:none} .qe-option-del:hover{color:var(--danger)} .qe-add-option{display:flex;align-items:center;gap:6px;padding:8px 10px;font-size:12.5px;color:var(--brand);font-weight:600;cursor:pointer;background:none;border:none;font-family:inherit;width:100%;justify-content:center} .qe-add-option:hover{background:var(--brand-softer);border-radius:7px} .qe-section-title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3);margin:22px 0 10px;padding-top:14px;border-top:1px solid var(--border)} .qe-toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;padding:10px 18px;border-radius:999px;font-size:13px;font-weight:500;z-index:80;opacity:0;pointer-events:none;transition:opacity .2s, transform .2s;display:flex;align-items:center;gap:8px} .qe-toast.show{opacity:1;transform:translateX(-50%) translateY(0)} .qe-toast svg{color:#5fd09b} /* Question Builder: child-level category row (questionnaires within a product line) */ .qb-cat-row{display:flex;align-items:center;gap:14px;margin:-6px 0 16px;padding:10px 14px;background:var(--surface-2);border:1px solid var(--border);border-radius:12px} .qb-cat-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3);flex-shrink:0} .qb-cat-chips{display:flex;flex-wrap:wrap;gap:6px;flex:1} .qb-cat-chips .chip{padding:5px 12px;font-size:12px} .qb-cat-chips .chip-empty{font-size:12.5px;color:var(--ink-3);font-style:italic;padding:4px 6px} .qb-grid{display:grid;grid-template-columns:220px 1fr;gap:14px;align-items:start} .qb-pane{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:14px} .qb-pane-title{font-size:11px;text-transform:uppercase;letter-spacing:.12em;font-weight:600;color:var(--ink-3);margin-bottom:10px;padding:0 4px} .qb-toolbox-item{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:8px;cursor:grab;font-size:12.5px;color:var(--ink-2);font-weight:500;transition:.14s;border:1px solid transparent} .qb-toolbox-item:hover{background:var(--brand-softer);color:var(--brand);border-color:#DCE6FB} .qb-toolbox-item svg{width:14px;height:14px;color:var(--brand);flex-shrink:0} .qb-toolbox-divider{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-muted);font-weight:600;padding:12px 4px 5px;margin-top:6px;border-top:1px solid var(--border)} .qb-preview-frame{border:1px solid var(--border);border-radius:12px;background:linear-gradient(180deg,#F8FAFD,#FFFFFF);padding:18px;min-height:380px} .qb-preview-progress{height:3px;background:var(--surface-3);border-radius:2px;overflow:hidden;margin-bottom:18px} .qb-preview-progress span{display:block;height:100%;background:var(--brand);width:42%} .qb-preview-step{font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--brand);font-weight:600;margin-bottom:8px} .qb-preview-q{font-size:18px;font-weight:700;letter-spacing:-.015em;color:var(--ink);margin-bottom:18px;line-height:1.3} .qb-preview-choice{display:flex;align-items:center;gap:11px;padding:11px 13px;border:1.5px solid var(--border);border-radius:10px;font-size:13px;color:var(--ink);cursor:pointer;transition:.14s;margin-bottom:8px;background:var(--surface)} .qb-preview-choice:hover{border-color:var(--brand);background:var(--brand-softer)} .qb-preview-choice.selected{border-color:var(--brand);background:var(--brand-softer)} .qb-preview-choice .checkbox{width:18px;height:18px;border:1.5px solid var(--border-2);border-radius:5px;display:grid;place-items:center;color:#fff;flex-shrink:0} .qb-preview-choice.selected .checkbox{background:var(--brand);border-color:var(--brand)} .qb-preview-back{font-size:12px;color:var(--ink-3);margin-top:14px;display:flex;align-items:center;gap:5px;cursor:pointer} .ql-item.qb-active{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)} .qb-rules{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px} .qb-rule{font-size:10.5px;font-weight:500;padding:3px 8px;border-radius:6px;background:var(--brand-softer);color:var(--brand);display:inline-flex;align-items:center;gap:5px} .qb-rule.danger{background:var(--danger-soft);color:var(--danger)} .qb-rule.success{background:var(--success-soft);color:var(--success)} .qb-stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px} .qb-stat{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:11px 13px} .qb-stat-label{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);font-weight:600} .qb-stat-val{font-size:18px;font-weight:700;letter-spacing:-.015em;margin-top:3px;color:var(--ink)} .qb-stat-val.success{color:var(--success)} .qb-stat-val.warning{color:var(--warning)} @media(max-width:1300px){.qb-grid{grid-template-columns:1fr}} @media(max-width:1100px){.kpi-grid{grid-template-columns:repeat(2,1fr)} .dash-grid{grid-template-columns:1fr} .portal-grid-2{grid-template-columns:1fr} .portal-bill-kpis{grid-template-columns:1fr}} /* ROLE SWITCHER — demo dropdown on topbar role-pill. Drives body[data-role] + per-role visibility */ .role-switcher{position:relative} .role-switcher::after{content:"";width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid var(--ink-3);margin-left:2px;margin-right:4px;transition:transform .14s} .role-switcher.open::after{transform:rotate(180deg)} .role-switcher-popover{position:absolute;top:calc(100% + 6px);right:0;width:300px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:0 12px 32px rgba(15,20,25,.12);padding:5px;z-index:40;display:none} .role-switcher.open .role-switcher-popover{display:block} .role-switcher-section{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3);font-weight:600;padding:8px 10px 6px} .role-switcher-option{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;cursor:pointer;transition:.12s} .role-switcher-option:hover{background:var(--surface-2)} .role-switcher-option.active{background:var(--brand-softer)} .role-switcher-option .avatar{width:28px;height:28px;font-size:11px;flex-shrink:0} .role-switcher-option-text{flex:1;min-width:0} .role-switcher-option-name{font-size:13px;font-weight:600;color:var(--ink);letter-spacing:-.005em} .role-switcher-option.active .role-switcher-option-name{color:var(--brand)} .role-switcher-option-role{font-size:11px;color:var(--ink-3);margin-top:1px} .role-switcher-option-tag{font-size:9px;text-transform:uppercase;letter-spacing:.1em;font-weight:700;padding:2px 7px;border-radius:999px;color:var(--ink-3);background:var(--surface-3)} .role-switcher-option-tag.extern{color:#7C2D3E;background:#FBE5F1} .role-switcher-divider{height:1px;background:var(--border);margin:5px 6px} /* NOTIFICATIONS — popover op het bell-icoontje in de topbar */ .notif-btn{position:relative} .notif-btn.open{border-color:var(--brand);color:var(--brand)} .notif-popover{position:absolute;top:calc(100% + 8px);right:0;width:340px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:0 12px 32px rgba(15,20,25,.14);z-index:40;display:none;text-align:left} .notif-btn.open .notif-popover{display:block} .notif-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--border)} .notif-title{font-size:13px;font-weight:700;color:var(--ink);letter-spacing:-.01em} .notif-mark-all{border:none;background:transparent;color:var(--brand);font-size:11px;font-weight:600;cursor:pointer;font-family:inherit;padding:2px 4px;border-radius:6px;transition:.12s} .notif-mark-all:hover{background:var(--brand-soft)} .notif-list{max-height:340px;overflow-y:auto} .notif-item{display:flex;gap:11px;padding:11px 14px;border-bottom:1px solid var(--border);cursor:pointer;transition:.12s;text-align:left} .notif-item:last-child{border-bottom:none} .notif-item:hover{background:var(--surface-2)} .notif-item.unread{background:var(--brand-softer)} .notif-item.unread:hover{background:var(--brand-soft)} .notif-item-icon{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;flex-shrink:0;font-size:14px;font-weight:700} .notif-item-icon.warning{background:var(--warning-soft);color:var(--warning)} .notif-item-icon.brand{background:var(--brand-soft);color:var(--brand)} .notif-item-icon.success{background:var(--success-soft);color:var(--success)} .notif-content{flex:1;min-width:0} .notif-text{font-size:12.5px;color:var(--ink-2);line-height:1.4} .notif-text strong{color:var(--ink);font-weight:600} .notif-time{font-size:10.5px;color:var(--ink-3);margin-top:3px} .notif-foot{padding:9px 14px;border-top:1px solid var(--border);text-align:center} .notif-foot a{color:var(--brand);font-size:12px;font-weight:600;cursor:pointer;text-decoration:none} .notif-foot a:hover{text-decoration:underline} /* Role banner — visible only for restricted roles */ .role-banner{display:none;align-items:center;gap:10px;padding:8px 24px;font-size:12px;color:#854D0E;background:#FEF3C7;border-bottom:1px solid #FDE68A} .role-banner-icon{width:18px;height:18px;border-radius:50%;background:#F59E0B;color:#fff;display:grid;place-items:center;font-size:11px;font-weight:700;flex-shrink:0} body[data-role="dietist"] .role-banner,body[data-role="coach"] .role-banner{display:flex} /* FINANCE-ROL — scheiding finance ↔ klinisch: toon banner, verberg klinische schrijf-acties */ body[data-role="finance"] .role-banner{display:flex} body[data-role="finance"] .drawer-tab[data-tab="health"], body[data-role="finance"] .seal-btn, body[data-role="finance"] .drawer-tab-content[data-tab="rx"] > button.btn, body[data-role="finance"] .sub-add, body[data-role="finance"] .sub-card-actions .btn-ghost{display:none} /* Role-based visibility — extern (dietist + coach) lose nav items + lens */ body[data-role="dietist"] .nav-item[data-view="dashboard"],body[data-role="coach"] .nav-item[data-view="dashboard"], body[data-role="dietist"] .nav-item[data-view="leads"],body[data-role="coach"] .nav-item[data-view="leads"], body[data-role="dietist"] .nav-item[data-view="questionnaires"],body[data-role="coach"] .nav-item[data-view="questionnaires"], body[data-role="dietist"] .nav-item[data-view="portal"],body[data-role="coach"] .nav-item[data-view="portal"], body[data-role="dietist"] .nav-section,body[data-role="coach"] .nav-section{display:none} /* Masterdata + Instellingen zijn admin-only — verborgen voor andere rollen */ .nav-item[data-view="masterdata"], .nav-item[data-view="settings"]{display:none} body[data-role="admin"] .nav-item[data-view="masterdata"], body[data-role="admin"] .nav-item[data-view="settings"]{display:flex} body[data-role="dietist"] .lens,body[data-role="coach"] .lens{display:none} body[data-role="dietist"] .breadcrumb-sep,body[data-role="coach"] .breadcrumb-sep, body[data-role="dietist"] #breadcrumb-lens,body[data-role="coach"] #breadcrumb-lens{display:none} /* Drawer: extern can't see Gezondheid (sealed medical data) */ body[data-role="dietist"] .drawer-tab[data-tab="health"],body[data-role="coach"] .drawer-tab[data-tab="health"]{display:none} body[data-role="dietist"] .seal-btn,body[data-role="coach"] .seal-btn{display:none} /* Junior + extern can't create prescriptions; "+ Nieuw recept" is the direct btn child of the rx tab content */ body[data-role="junior"] .drawer-tab-content[data-tab="rx"] > button.btn, body[data-role="dietist"] .drawer-tab-content[data-tab="rx"] > button.btn, body[data-role="coach"] .drawer-tab-content[data-tab="rx"] > button.btn{display:none} /* Subscription card: extern only sees "Open dossier" — hide ghost actions (Recepten/Voortgang/Pauzeren/Herstart) */ body[data-role="dietist"] .sub-card-actions .btn-ghost,body[data-role="coach"] .sub-card-actions .btn-ghost{display:none} body[data-role="dietist"] .sub-add,body[data-role="coach"] .sub-add{display:none} /* Hide "Bewerken" affordances in card-heads for extern (no editing personal/medical data) */ body[data-role="dietist"] .drawer .card-head .btn-ghost,body[data-role="coach"] .drawer .card-head .btn-ghost{display:none} /* Top page CTAs hidden for extern roles (they don't onboard new customers/leads) */ body[data-role="dietist"] .page-head .btn-primary,body[data-role="coach"] .page-head .btn-primary{display:none} /* Read-only badge (added via JS to relevant items in extern roles) */ .read-only-badge{display:inline-flex;align-items:center;gap:5px;background:var(--surface-3);color:var(--ink-3);font-size:9px;text-transform:uppercase;letter-spacing:.1em;font-weight:700;padding:2px 8px;border-radius:999px;margin-left:8px} /* AFAS debiteurnummer in drawer-meta (mono-font reference) */ .debtor-ref{font-family:var(--font-mono);font-size:11px;color:#0E8A5F;background:#DCFCE7;padding:2px 7px;border-radius:6px;font-weight:600;letter-spacing:.005em} /* ORDER CARDS — drawer Bestellingen tab. 2-staps Mollie→AFAS payment status visible */ .order-card{border:1px solid var(--border);border-radius:12px;padding:14px 16px;margin-bottom:12px;background:var(--surface);transition:.14s} .order-card:hover{border-color:var(--border-2)} .order-card.pending-afas{border-color:#FCD34D;background:linear-gradient(0deg,#FFFBEB 0%,var(--surface) 80%)} .order-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:8px} .order-card-title-wrap{flex:1;min-width:0} .order-card-title{font-size:13.5px;font-weight:700;color:var(--ink);letter-spacing:-.005em;line-height:1.3} .order-card-amount{font-size:12px;color:var(--ink-2);margin-top:3px;font-weight:500} .order-card-refs{font-size:11px;color:var(--ink-3);font-family:var(--font-mono);margin:8px 0;padding:6px 10px;background:var(--surface-2);border-radius:6px;letter-spacing:0;word-break:break-all} .order-card-refs strong{color:var(--ink-2);font-weight:700} .order-card-status{display:flex;gap:18px;font-size:11.5px;align-items:center;flex-wrap:wrap;margin-bottom:8px} .order-status-step{display:inline-flex;align-items:center;gap:6px;font-weight:500} .order-status-step::before{content:"";width:14px;height:14px;border-radius:50%;display:inline-grid;place-items:center;font-size:9px;font-weight:700;color:#fff;flex-shrink:0;line-height:1} .order-status-step.confirmed{color:var(--success)} .order-status-step.confirmed::before{background:var(--success);content:"✓"} .order-status-step.pending{color:#A16207} .order-status-step.pending::before{background:#F59E0B;content:"⧗"} .order-card-shipping{font-size:11.5px;padding:7px 11px;border-radius:8px;display:flex;align-items:center;gap:8px;margin-top:8px;font-weight:500} .order-card-shipping.locked{background:#FEE2E2;color:#7F1D1D;border:1px solid #FECACA} .order-card-shipping.shipped{background:var(--success-soft);color:var(--success);border:1px solid #86EFAC} .order-card-foot{display:flex;justify-content:flex-end;margin-top:10px} .btn-simulate-afas{font-size:11px;padding:5px 10px;color:#3D4DA8} /* Order status pill (matches Intercom-style status pill but bold-coloured for finance state) */ .order-status-pill{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:600;letter-spacing:.005em;flex-shrink:0;white-space:nowrap} .order-status-pill.pending{background:#FEF3C7;color:#854D0E} .order-status-pill.pending .ic-status-dot{background:#F59E0B} .order-status-pill.confirmed{background:var(--success-soft);color:var(--success)} .order-status-pill.confirmed .ic-status-dot{background:var(--success)} /* DND mode — feedback Jaime: bel-meldingen mogen actieve calls/meetings niet verstoren */ .ic-dnd-toggle{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.14);color:#fff;cursor:pointer;border:1px solid rgba(255,255,255,.22);font-size:11px;font-weight:600;font-family:inherit;transition:.14s;margin-right:auto;margin-left:10px} .ic-dnd-toggle:hover{background:rgba(255,255,255,.22)} .ic-dnd-toggle-dot{width:7px;height:7px;border-radius:50%;background:#5DD39E;flex-shrink:0;transition:.14s} .ic-widget.ic-dnd .ic-dnd-toggle{background:#FECACA;color:#7F1D1D;border-color:#EF4444} .ic-widget.ic-dnd .ic-dnd-toggle-dot{background:#DC2626;animation:ic-dnd-blink 1.2s ease-in-out infinite} @keyframes ic-dnd-blink{0%,100%{opacity:1}50%{opacity:.35}} .ic-dnd-banner{display:none;background:#FEE2E2;color:#7F1D1D;padding:8px 12px;font-size:11.5px;font-weight:500;border-radius:8px;margin:10px 0 0;border:1px solid #FECACA;align-items:center;gap:8px} .ic-dnd-banner-icon{width:18px;height:18px;border-radius:50%;background:#DC2626;color:#fff;display:grid;place-items:center;font-size:11px;font-weight:700;flex-shrink:0} .ic-widget.ic-dnd .ic-dnd-banner{display:flex} .ic-dnd-banner-timer{margin-left:auto;font-family:var(--font-mono);font-weight:700;letter-spacing:.02em} .ic-missed-banner{display:none;background:#FEF3C7;color:#854D0E;padding:8px 12px;font-size:11.5px;border-radius:8px;margin:10px 0 0;border:1px solid #FDE68A;cursor:pointer;align-items:center;gap:8px;transition:.14s} .ic-missed-banner:hover{background:#FDE68A} .ic-widget.ic-has-missed .ic-missed-banner{display:flex} /* Body-level DND: hide the linksonder event-toast — meldingen verstoren niet */ body[data-dnd="active"] .ic-event-toast{opacity:0 !important;transform:translateY(20px) !important;pointer-events:none} /* Launcher visual signal during DND */ .ic-widget.ic-dnd .ic-launcher{background:#DC2626} .ic-widget.ic-dnd .ic-launcher::after{content:"";position:absolute;inset:-3px;border:2px solid #DC2626;border-radius:50%;animation:ic-dnd-ring 1.6s ease-in-out infinite} @keyframes ic-dnd-ring{0%{transform:scale(.95);opacity:.7}100%{transform:scale(1.4);opacity:0}} .ic-widget.ic-has-missed .ic-launcher-badge{background:#F59E0B} /* Auto-saved call transcript inserted into drawer Interacties — fresh-flash + preview block */ .timeline-item.transcript-fresh{position:relative;animation:transcript-flash 2.2s ease-out} @keyframes transcript-flash{ 0%,30%{background:#FEF3C7;box-shadow:0 0 0 4px #FDE68A;border-radius:8px} 100%{background:transparent;box-shadow:none} } .transcript-preview{background:var(--surface-2);border-left:3px solid var(--brand);padding:9px 12px;border-radius:0 6px 6px 0;font-size:11.5px;color:var(--ink-2);line-height:1.55;margin-top:6px} .transcript-line{display:block;margin-bottom:3px} .transcript-line strong{color:var(--ink);font-weight:600} .transcript-meta{color:var(--ink-3);font-size:10.5px;font-style:italic;display:block;margin-top:5px} .transcript-actions{display:flex;gap:6px;margin-top:9px} /* SETTINGS · Talen — unified per-language cards */ .lang-card{border:1px solid var(--border);border-radius:12px;padding:16px 20px;margin-bottom:12px;background:var(--surface);transition:.14s} .lang-card:hover{border-color:var(--border-2)} .lang-card.concept{background:var(--surface-2)} .lang-card-head{display:flex;align-items:center;gap:14px;margin-bottom:10px} .lang-card-flag{font-size:24px;flex-shrink:0;line-height:1;width:38px;height:38px;display:grid;place-items:center;border-radius:10px;background:var(--surface-2)} .lang-card-name{font-size:14px;font-weight:700;color:var(--ink);letter-spacing:-.005em;display:flex;align-items:center;gap:0;flex-wrap:wrap} .lang-card-name-code{color:var(--ink-3);font-weight:500;font-size:12px;margin-left:8px;font-family:var(--font-mono);letter-spacing:.02em} .lang-default-tag{font-size:9px;text-transform:uppercase;letter-spacing:.1em;font-weight:700;background:var(--brand-soft);color:var(--brand);padding:2px 7px;border-radius:999px} .lang-card-status{font-size:11.5px;color:var(--ink-2);margin-top:3px;line-height:1.4} .lang-card-actions{margin-left:auto;display:flex;gap:8px;align-items:center;flex-shrink:0} .lang-card-progress{height:5px;background:var(--surface-3);border-radius:3px;overflow:hidden;margin:6px 0 8px} .lang-card-progress-fill{height:100%;background:var(--success);border-radius:3px;transition:width .3s ease} .lang-card-progress-fill.partial{background:#F59E0B} .lang-card-progress-fill.empty{background:var(--surface-3)} .lang-card-foot{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--ink-3);gap:14px} .lang-card-foot strong{color:var(--ink-2);font-weight:700} /* Translation editor modal — wider, with inline table */ .trans-modal{width:min(960px,100%) !important} .trans-modal-toolbar{display:flex;gap:14px;padding:12px 22px;border-bottom:1px solid var(--border);background:var(--surface-2);align-items:center;flex-shrink:0} .trans-search-input{flex:1;border:1px solid var(--border);background:var(--surface);border-radius:8px;padding:7px 11px;font-size:12px;color:var(--ink);font-family:inherit;letter-spacing:.005em} .trans-search-input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-softer)} .trans-modal-body{padding:0 !important;max-height:60vh} .trans-table{width:100%;border-collapse:collapse;font-size:12px} .trans-table th{text-align:left;padding:11px 16px;background:var(--surface-2);border-bottom:1px solid var(--border);font-weight:600;color:var(--ink-3);font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;position:sticky;top:0;z-index:1} .trans-table td{padding:9px 16px;border-bottom:1px solid var(--border);vertical-align:middle} .trans-table tr.filled{background:#F0FDF4} .trans-table tr.missing td:last-child{background:#FFFBEB} .trans-table-key{font-family:var(--font-mono);color:var(--ink-3);font-size:11px;white-space:nowrap;letter-spacing:.005em} .trans-table-source{color:var(--ink-2);line-height:1.4} .trans-input{width:100%;border:1px solid var(--border);background:var(--surface);border-radius:6px;padding:6px 9px;font-size:12px;color:var(--ink);font-family:inherit;line-height:1.4} .trans-input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-softer)} .trans-input.filled{border-color:#86EFAC;background:#F0FDF4} .trans-empty{padding:48px 24px;text-align:center;color:var(--ink-3);font-size:13px} .trans-empty strong{color:var(--success);font-size:18px;display:block;margin-bottom:6px} /* =========================================================== DARK MODE — feedback Daniel: lichte witte werd teveel. Toggle in topbar; persisted in localStorage. Most theming uses CSS vars already, so dark mode is mostly a var-overrides job; below are the color variables for dark + targeted fixes for elements with literal hex. =========================================================== */ body[data-theme="dark"]{ --canvas:#0B0F14; --surface:#161B23; --surface-2:#1E242E; --surface-3:#2A323D; --surface-sunk:#0A0E12; --ink:#E5E7EB; --ink-2:#B8BFCA; --ink-3:#8B95A3; --ink-muted:#5A6478; --ink-on-brand:#FFFFFF; --brand:#5A8DEE; --brand-hover:#7AA1F2; --brand-soft:#1B2840; --brand-softer:#131A2B; --brand-deep:#3D6BC9; --success:#5DD39E; --success-soft:#0F2A1E; --warning:#FBBF24; --warning-soft:#3D2E0E; --danger:#F87171; --danger-soft:#3D1717; --border:#2A323D; --border-2:#3A434F; --seal:#94A3B8; --seal-bg:#1E293B; --seal-border:#334155; --shadow-pop:0 4px 14px rgba(0,0,0,.45),0 16px 40px rgba(0,0,0,.55); color-scheme:dark; } /* Logo (base64 PNG of dark wordmark) — invert so it reads on dark surface */ /* Logo blijft Vi-Lifestyle-blauw in dark mode: invert flipt licht/donker, hue-rotate(180) draait de hue terug zodat blauw blauw blijft i.p.v. goud. */ body[data-theme="dark"] .brand-logo{filter:invert(1) hue-rotate(180deg) brightness(1.15)} /* Banners with hardcoded yellow/red that would clash on dark surfaces */ body[data-theme="dark"] .role-banner{background:#3D2E0E;color:#FBBF24;border-bottom-color:#5C4515} body[data-theme="dark"] .role-banner-icon{background:#F59E0B;color:#1F1606} body[data-theme="dark"] .ic-dnd-banner{background:#3D1717;color:#FECACA;border-color:#5C2424} body[data-theme="dark"] .ic-missed-banner{background:#3D2E0E;color:#FBBF24;border-color:#5C4515} body[data-theme="dark"] .ic-missed-banner:hover{background:#4D3812} /* Order cards (Bestellingen tab) */ body[data-theme="dark"] .order-card.pending-afas{background:linear-gradient(0deg,#2A220C 0%,var(--surface) 80%);border-color:#806008} body[data-theme="dark"] .order-card-shipping.locked{background:#3D1717;color:#FECACA;border-color:#5C2424} body[data-theme="dark"] .order-card-shipping.shipped{background:#0F2A1E;color:#5DD39E;border-color:#1C4D38} body[data-theme="dark"] .order-status-pill.pending{background:#3D2E0E;color:#FBBF24} body[data-theme="dark"] .order-status-step.confirmed{color:#5DD39E} body[data-theme="dark"] .order-status-step.pending{color:#FBBF24} /* Drawer-meta debiteur ref + AFAS card accent */ body[data-theme="dark"] .debtor-ref{background:#0F2A1E;color:#5DD39E} /* Translation editor row highlights */ body[data-theme="dark"] .trans-table tr.filled{background:#0F2A1E} body[data-theme="dark"] .trans-input.filled{background:#0F2A1E;border-color:#1C4D38} body[data-theme="dark"] .trans-table tr.missing td:last-child{background:#2A220C} body[data-theme="dark"] .trans-empty strong{color:#5DD39E} /* Programma-herstart history pill + badge */ body[data-theme="dark"] .badge-program{background:#1B2840;color:#9DB7F4} body[data-theme="dark"] .program-banner-num{background:#1B2840;color:#9DB7F4} body[data-theme="dark"] .badge-offlabel{background:#3A2A12;color:#F0C268} body[data-theme="dark"] .badge-offlabel .dot{background:#F0C268} body[data-theme="dark"] .sales-pill-yes{background:#10331F;color:#5FCB8E} body[data-theme="dark"] .consent-bar[data-consent="on"]{background:#10241A;border-color:#1F5638} /* Transcript fresh-flash needs a dark variant — yellow on dark */ body[data-theme="dark"] .timeline-item.transcript-fresh{animation:transcript-flash-dark 2.2s ease-out} @keyframes transcript-flash-dark{0%,30%{background:#3D2E0E;box-shadow:0 0 0 4px #5C4515;border-radius:8px}100%{background:transparent;box-shadow:none}} /* Sealed health card — adjust the soft success backdrop on dark */ body[data-theme="dark"] .sealed{background:var(--seal-bg);border-color:var(--seal-border);color:var(--ink-2)} /* Theme-toggle button — sits next to the language switcher */ .theme-toggle{display:inline-grid;place-items:center;width:34px;height:34px;border:1px solid var(--border);background:var(--surface);border-radius:999px;cursor:pointer;color:var(--ink-2);transition:.14s;flex-shrink:0} .theme-toggle:hover{border-color:var(--border-2);color:var(--ink);background:var(--surface-2)} .theme-toggle .theme-icon-sun{display:none} .theme-toggle .theme-icon-moon{display:block} body[data-theme="dark"] .theme-toggle .theme-icon-sun{display:block} body[data-theme="dark"] .theme-toggle .theme-icon-moon{display:none} /* Verified-stamp border was a light blue — needs a dark variant */ body[data-theme="dark"] .verified-stamp{border-color:#2C4880} /* Role-switcher 'Extern' tag was light pink — adjust for dark */ body[data-theme="dark"] .role-switcher-option-tag.extern{color:#F2B7D5;background:#3D1A2A} /* Notification badge on .ic-launcher uses #FF4F4F + 2px border of var(--surface) — fine on dark */ /* =========================================================== RESPONSIVE — eerste tablet-portrait pass. Targets: 768–1024px werkt zonder layout-breuk; ≤640px is een defensieve nood-pass (echte phone-redesign is een aparte slag). =========================================================== */ /* Tablet portrait/landscape (≤1024px): smallere sidebar, krimpende topbar, KPI's stacken naar 2 kolommen, dash-grid wordt 1 kolom. */ @media (max-width: 1024px){ .app{grid-template-columns:200px 1fr} /* Sidebar compacter */ .brand-mark{padding:14px 16px} .brand-tag{display:none} .lens,.productline{margin:12px 10px 4px} .lens-trigger{padding:8px 10px;gap:8px} .lens-trigger-icon{width:24px;height:24px} .lens-label{font-size:9px} .lens-current{font-size:12.5px} .nav{padding:8px 6px} .nav-section{padding:12px 10px 5px} .nav-item{padding:8px 10px;font-size:12.5px;gap:9px} .nav-badge{font-size:10px;padding:1px 6px} .sidebar-foot{padding:10px 12px;gap:8px} .sidebar-foot .avatar{width:30px;height:30px} .who-name{font-size:12px} .who-role{font-size:10px} /* Topbar: search krimpt, knoppen worden iets compacter */ .topbar{padding:0 16px;gap:10px} .breadcrumb{font-size:12px;gap:6px} .topbar-search{max-width:240px;margin-left:8px} .topbar-search input{padding:7px 12px 7px 34px;font-size:12.5px} .topbar-search svg{left:12px} .topbar-actions{gap:6px} .lang-switch{padding:2px} .lang-switch button{padding:4px 8px;font-size:10.5px} .icon-btn{width:32px;height:32px} .role-pill{padding:3px 10px 3px 3px;gap:7px} .role-pill .avatar{width:26px;height:26px} .role-pill-text{font-size:11.5px} .role-pill-role{font-size:10px} /* Main: kleinere padding zodat content meer breedte krijgt */ .main{padding:20px 18px 240px} .page-head{margin-bottom:18px;gap:12px} .page-title{font-size:24px} .page-sub{font-size:13px} /* KPI grid: 4 → 2 kolommen */ .kpi-grid{grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:18px} .kpi{padding:14px 16px} .kpi-value{font-size:26px} /* Dashboard kolommen stacken */ .dash-grid{grid-template-columns:1fr} /* Drawer: smaller right-side panel */ .drawer{width:min(640px,100vw)} .drawer-head{padding:16px 20px;gap:12px} .drawer-avatar{width:46px;height:46px;font-size:15px} .drawer-name{font-size:19px} .drawer-body{padding:18px 20px} .drawer-tabs{padding:0 20px} .drawer-tab{padding:11px 14px;font-size:12.5px} /* Tabellen krijgen horizontal scroll i.p.v. clipping */ .table-wrap{overflow-x:auto} /* Role-switcher popover blijft binnen viewport */ .role-switcher-popover{width:280px;right:-6px} } /* Defensief op ~smartphone-breedtes — niet de full redesign, wel voorkomen dat de topbar/sidebar door elkaar gaan schuiven. */ @media (max-width: 640px){ .breadcrumb{display:none} .topbar-search{display:none} .lang-switch button{padding:4px 6px;font-size:10px} .role-pill-text{display:none} .role-pill{padding:3px;gap:0} .page-title{font-size:21px} .kpi-grid{grid-template-columns:1fr} .main{padding:16px 14px 200px} .app{grid-template-columns:180px 1fr} .ic-widget{bottom:14px;right:14px} }