/* ══════════════════════════════════════════ PETCURA DASHBOARD — CENTRAL DESIGN SYSTEM All pages import this file. No local overrides. ══════════════════════════════════════════ */ :root { /* Brand palette */ --forest: #17433c; --forest-l: rgba(23,67,60,.08); --forest-m: rgba(23,67,60,.55); --lime: #c6fa53; --lime-soft: rgba(198,250,83,.18); --cream: #faeddc; --mint: #f0fdf0; /* Surfaces */ --bg: #f7f8fa; --surface: #ffffff; --surface2: #f0f2f5; --border: #e8eaed; /* Alias van --surface. Een aantal pagina's kwam met var(--card) binnen terwijl die nooit gedefinieerd was — dat resolvet naar transparant, dus die kaarten stonden op de paginakleur in plaats van op wit. */ --card: #ffffff; /* Text */ --text: #111827; --text-m: #6b7280; --text-s: #9ca3af; /* Semantic colors */ --green: #00a381; --green-l: rgba(0,163,129,.12); --yellow: #ca8a04; --yellow-l: rgba(202,138,4,.12); --blue: #2563eb; --blue-l: rgba(37,99,235,.1); --red: #dc2626; --red-l: rgba(220,38,38,.1); --orange: #ea580c; /* Shape */ --radius: 12px; --radius-sm: 8px; --radius-xs: 5px; /* Shadows */ --shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04); --shadow-md: 0 4px 16px rgba(0,0,0,.08); --shadow-lg: 0 8px 24px rgba(0,0,0,.12); } /* ── RESET ── */ /* Het hidden-attribuut verliest van elke display-regel, waardoor een verborgen element alsnog als lege strook blijft staan. Dit zet dat recht voor de hele app, zodat het niet per pagina opnieuw fout gaat. */ [hidden] { display: none !important; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); overflow: hidden; } /* ── SCROLLBAR ── */ ::-webkit-scrollbar { width: 4px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; } /* ══════════════════════════════════════════ SHARED LAYOUT ══════════════════════════════════════════ */ .app { display: flex; height: 100vh; } /* ── ICON SIDEBAR (hub + crm share this) ── */ .sidebar-icon-rail { width: 64px; background: var(--forest); display: flex; flex-direction: column; align-items: center; padding: 16px 0; flex-shrink: 0; height: 100vh; position: sticky; top: 0; gap: 4px; z-index: 10; } .sidebar-logo { width: 40px; height: 40px; background: var(--lime); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 20px; cursor: pointer; flex-shrink: 0; } .sidebar-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; cursor: pointer; transition: background .15s, color .15s; color: rgba(255,255,255,.5); text-decoration: none; position: relative; } .sidebar-icon:hover { background: rgba(255,255,255,.1); color: white; } .sidebar-icon.active { background: var(--lime); color: var(--forest); } .sidebar-icon .notif-dot { position: absolute; top: 4px; right: 4px; width: 14px; height: 14px; background: var(--red); color: white; font-size: 8px; font-weight: 700; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .sidebar-bottom { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 6px; padding-bottom: 12px; position: relative; } .sidebar-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--lime); color: var(--forest); font-size: 14px; font-weight: 800; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: opacity .15s; } .sidebar-avatar:hover { opacity: .85; } /* ── AVATAR DROPDOWN ── */ .avatar-menu { display: none; position: absolute; bottom: 58px; left: 8px; background: #1e2d3d; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; padding: 6px; min-width: 180px; box-shadow: 0 8px 24px rgba(0,0,0,.4); z-index: 999; } .avatar-menu.open { display: block; } .avatar-menu-name { padding: 8px 10px 6px; font-size: 11px; font-weight: 700; color: rgba(255,255,255,.4); text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: 4px; } .avatar-menu-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 6px; color: rgba(255,255,255,.8); font-size: 13px; cursor: pointer; text-decoration: none; transition: background .1s; } .avatar-menu-item:hover { background: rgba(255,255,255,.08); } .avatar-menu-item.danger { color: #f87171; } .avatar-menu-item.danger:hover { background: rgba(239,68,68,.08); } .avatar-menu-divider { border-top: 1px solid rgba(255,255,255,.08); margin: 4px 0; } /* ── SECONDARY SIDEBAR (crm page panel) ── */ .panel-sidebar { width: 220px; min-width: 220px; background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 0; overflow-y: auto; transition: width .2s, min-width .2s; } /* .collapsed (breedte 0) is vervangen door de rail hieronder — volledig verdwijnen is een doodlopende weg: je kunt 'm dan niet meer terughalen. */ .panel-sidebar-logo { display: flex; align-items: center; gap: 10px; padding: 16px 16px 14px; border-bottom: 1px solid var(--border); } .panel-sidebar-logo-mark { width: 32px; height: 32px; border-radius: 8px; background: var(--lime); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; } .panel-sidebar-brand { font-size: 14px; font-weight: 700; color: var(--text); } .panel-sidebar-sub { font-size: 10px; color: var(--text-s); text-transform: uppercase; letter-spacing: .5px; } .panel-sidebar-section { padding: 12px 12px 8px; } .panel-section-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text-s); padding: 0 6px 6px; } .panel-nav { display: flex; flex-direction: column; gap: 2px; } .panel-nav-btn { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: none; background: transparent; color: var(--text-m); border-radius: var(--radius-sm); cursor: pointer; font-size: 13px; text-align: left; transition: all .15s; } .panel-nav-btn:hover { background: var(--surface2); color: var(--text); } .panel-nav-btn.active { background: rgba(23,67,60,.08); color: var(--forest); font-weight: 600; } .panel-nav-btn .nav-icon { font-size: 14px; } /* ── MAIN AREA ── */ .main { flex: 1; display: flex; flex-direction: column; height: 100vh; overflow: hidden; } /* ── TOP BAR ── */ .topbar { display: flex; align-items: center; gap: 12px; padding: 0 18px; height: 42px; background: var(--surface); border-bottom: 1px solid var(--border); flex-shrink: 0; } .topbar-brand { font-size: 13px; font-weight: 800; color: var(--forest); letter-spacing: -.2px; } .topbar-sep { color: var(--border); font-size: 14px; } .topbar-page { font-size: 13px; font-weight: 600; color: var(--text); } .topbar-tabs { display: flex; gap: 2px; margin-left: 20px; } .topbar-tab { padding: 6px 14px; border-radius: 6px; font-size: 13px; font-weight: 500; color: var(--text-m); cursor: pointer; border: none; background: none; text-decoration: none; transition: all .15s; } .topbar-tab:hover { background: var(--bg); color: var(--text); } .topbar-tab.active { background: var(--forest-l); color: var(--forest); font-weight: 700; } .topbar-right { margin-left: auto; display: flex; align-items: center; gap: 12px; } .topbar-greeting { font-size: 13px; color: var(--text-m); } .topbar-date { font-size: 12px; color: var(--text-s); } /* Stat pills in topbar (CRM page) */ .stats-row { display: flex; gap: 6px; } .stat-pill { display: flex; align-items: center; gap: 5px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 4px 12px; font-size: 13px; font-weight: 700; } .stat-pill .stat-lbl { font-size: 11px; color: var(--text-s); font-weight: 400; } .stat-pill .stat-val--green { color: var(--green); } .stat-pill .stat-val--yellow { color: var(--yellow); } .stat-pill .stat-val--red { color: var(--red); } /* ── CONTENT SCROLL AREA ── */ .content { flex: 1; overflow-y: auto; padding: 28px 28px 40px; } /* ── SHELL ── nav.js bouwt deze om elke pagina heen (zie mountShell) ── */ body[data-page] { display: flex; } /* Tot nav.js de shell heeft gebouwd is de pagina onzichtbaar: anders zie je de inhoud één frame zonder sidebar staan en dan verspringen. */ body[data-page]:not(.hq-shell-ready) { visibility: hidden; } /* Volle-breedte werkvlak zonder marge (CRM, studio's): de pagina regelt zelf zijn kolommen en scroll. */ .content--bleed { padding: 0; display: flex; flex-direction: column; min-height: 0; overflow: hidden; } .topbar-tabs .badge { margin-left: 6px; } /* ── PAGINAKOP ── één kop voor elke pagina: titel links, uitleg eronder, optioneel knoppen rechts. Stond eerder per pagina apart (.ac-head, .st-head…). */ .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; } .page-head h1 { font-size: 21px; font-weight: 800; color: var(--text); letter-spacing: -.3px; margin: 0; } .page-head p { font-size: 13px; color: var(--text-m); margin: 5px 0 0; max-width: 72ch; line-height: 1.6; } /* ── TOOLBAR (under topbar, CRM/Ads) ── */ .toolbar { display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; background: var(--surface); } .search-wrap { position: relative; flex: 1; max-width: 320px; } .search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 14px; } .search-input { width: 100%; padding: 8px 12px 8px 34px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-size: 13px; outline: none; transition: border-color .15s; } .search-input:focus { border-color: var(--forest); } .sort-select { padding: 8px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-size: 13px; cursor: pointer; outline: none; } .sort-select:focus { border-color: var(--forest); } /* ══════════════════════════════════════════ SHARED COMPONENTS ══════════════════════════════════════════ */ /* ── BADGE / PILL ── */ .badge { margin-left: auto; background: var(--surface2); color: var(--text-s); font-size: 11px; padding: 2px 7px; border-radius: 20px; min-width: 22px; text-align: center; } .badge--green { background: rgba(0,163,129,.1); color: var(--green); } .badge--yellow { background: rgba(202,138,4,.12); color: var(--yellow); } .badge--blue { background: rgba(37,99,235,.1); color: var(--blue); } .badge--red { background: var(--red-l); color: var(--red); } /* ── TAG CHIPS ── */ .tag { font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 3px; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; } .tag.red { background: rgba(220,38,38,.1); color: var(--red); } .tag.orange { background: rgba(234,88,12,.1); color: var(--orange); } .tag.yellow { background: var(--yellow-l); color: var(--yellow); } .tag.gray { background: rgba(100,116,139,.1); color: var(--text-s); } /* ── CARD ── */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); } .card-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); } .card-title { font-size: 13px; font-weight: 700; color: var(--text); } .card-sub { font-size: 11px; color: var(--text-s); margin-top: 2px; } .card-body { padding: 16px 18px; } /* ── BUTTONS ── */ .btn-primary { padding: 10px 18px; background: var(--forest); border: none; border-radius: var(--radius-sm); color: white; font-size: 13px; font-weight: 700; cursor: pointer; transition: opacity .15s; } .btn-primary:hover { opacity: .85; } .btn-primary:disabled { opacity: .45; cursor: not-allowed; } .btn-lime { padding: 10px 18px; background: var(--lime); border: none; border-radius: var(--radius-sm); color: var(--forest); font-size: 13px; font-weight: 700; cursor: pointer; transition: opacity .15s; } .btn-lime:hover { opacity: .85; } .btn-ghost { padding: 8px 14px; background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-m); font-size: 13px; cursor: pointer; transition: all .15s; } .btn-ghost:hover { background: var(--surface2); color: var(--text); } .btn-danger { padding: 10px 18px; background: var(--red-l); border: 1px solid rgba(220,38,38,.3); border-radius: var(--radius-sm); color: var(--red); font-size: 13px; font-weight: 700; cursor: pointer; transition: all .15s; } .btn-danger:hover { background: var(--red); color: white; } .btn-success { padding: 10px 18px; background: var(--green-l); border: 1px solid rgba(0,163,129,.35); border-radius: var(--radius-sm); color: var(--green); font-size: 13px; font-weight: 700; cursor: pointer; transition: all .15s; } .btn-success:hover { background: var(--green); color: white; } /* ── MODAL ── */ .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.35); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 20px; } .modal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); width: 100%; max-width: 540px; max-height: 88vh; overflow-y: auto; box-shadow: var(--shadow-lg); } .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); } .modal-header h2 { font-size: 15px; font-weight: 700; } .modal-close { background: none; border: none; color: var(--text-s); cursor: pointer; font-size: 16px; padding: 2px 6px; border-radius: 4px; } .modal-close:hover { background: var(--surface2); color: var(--text); } .modal-body { padding: 20px; display: flex; flex-direction: column; gap: 14px; } .modal-desc { font-size: 13px; color: var(--text-m); } /* ── TOAST ── */ .toast { position: fixed; bottom: 24px; right: 24px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 18px; font-size: 13px; color: var(--text); z-index: 200; box-shadow: var(--shadow-lg); animation: slideIn .2s ease; } .toast--success { border: 1px solid rgba(0,163,129,.35); background: rgba(0,163,129,.06); } .toast--error { border: 1px solid rgba(220,38,38,.3); background: rgba(220,38,38,.05); } @keyframes slideIn { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .toast { animation: none; } .module-card, .panel-nav-btn, .btn-primary, .btn-lime, .btn-ghost, .btn-danger, .btn-success, .cs-list-item { transition: none; } } /* ── UTIL ── */ .hidden { display: none !important; } .text-muted { color: var(--text-m); } .text-small { font-size: 12px; } /* ══════════════════════════════════════════ HUB PAGE COMPONENTS ══════════════════════════════════════════ */ /* KPI row */ .kpi-row { display: grid; grid-template-columns: repeat(5,1fr); gap: 12px; margin-bottom: 28px; } .kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow); } .kpi.accent { background: var(--forest); border-color: var(--forest); } .kpi.lime { background: var(--lime); border-color: var(--lime); } .kpi-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .6px; color: var(--text-s); margin-bottom: 8px; } .kpi.accent .kpi-label { color: rgba(255,255,255,.55); } .kpi.lime .kpi-label { color: rgba(23,67,60,.6); } .kpi-val { font-size: 26px; font-weight: 800; line-height: 1; color: var(--text); letter-spacing: -.5px; } .kpi.accent .kpi-val { color: white; } .kpi.lime .kpi-val { color: var(--forest); } .kpi-sub { font-size: 12px; color: var(--text-s); margin-top: 5px; } .kpi.accent .kpi-sub { color: rgba(255,255,255,.4); } .kpi.lime .kpi-sub { color: rgba(23,67,60,.5); } /* Section header */ .section { margin-bottom: 32px; } .section-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .section-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-m); } .section-count { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 20px; background: var(--forest-l); color: var(--forest); } .section-link { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--forest); text-decoration: none; opacity: .7; } .section-link:hover { opacity: 1; } /* Module grid */ .module-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; } .module-card { background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 20px; cursor: pointer; transition: all .15s; text-decoration: none; color: inherit; display: flex; gap: 14px; align-items: flex-start; box-shadow: var(--shadow); position: relative; overflow: hidden; } .module-card::before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: var(--forest); transform: scaleX(0); transform-origin: left; transition: transform .2s; } .module-card:hover { box-shadow: var(--shadow-lg); border-color: rgba(23,67,60,.3); transform: translateY(-1px); } .module-card:hover::before { transform: scaleX(1); } .module-card.live { border-color: rgba(23,67,60,.2); } .module-card.live::before { transform: scaleX(1); background: var(--lime); } .module-card.soon { opacity: .55; cursor: default; } .module-card.soon:hover { transform: none; box-shadow: var(--shadow); border-color: var(--border); } .module-icon-wrap { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; } .module-icon-wrap.green { background: var(--mint); } .module-icon-wrap.lime { background: var(--lime-soft); } .module-icon-wrap.cream { background: var(--cream); } .module-icon-wrap.blue { background: var(--blue-l); } .module-icon-wrap.purple { background: rgba(139,92,246,.08); } .module-info { flex: 1; min-width: 0; } .module-name { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 3px; } .module-desc { font-size: 12px; color: var(--text-m); line-height: 1.5; } .module-stat { font-size: 11px; font-weight: 600; color: var(--forest); margin-top: 8px; } .module-stat.muted { color: var(--text-s); font-weight: 400; } .module-pill { position: absolute; top: 14px; right: 14px; font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 20px; } .module-pill.live { background: var(--lime); color: var(--forest); } .module-pill.soon { background: var(--bg); color: var(--text-s); border: 1px solid var(--border); } /* Urgent tickets */ .two-col { display: grid; grid-template-columns: 1fr 300px; gap: 16px; margin-bottom: 32px; } .tickets-grid { display: flex; flex-direction: column; } .ticket-row { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background .12s; } .ticket-row:last-child { border-bottom: none; } .ticket-row:hover { background: var(--bg); } .ticket-strip { width: 3px; height: 36px; border-radius: 2px; flex-shrink: 0; } .ticket-strip.urgent { background: var(--red); } .ticket-strip.high { background: var(--orange); } .ticket-strip.medium { background: var(--blue); } .ticket-strip.low { background: var(--border); } .ticket-sender { font-size: 13px; font-weight: 600; color: var(--text); } .ticket-subject { font-size: 11px; color: var(--text-m); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px; } .ticket-time { margin-left: auto; font-size: 10px; color: var(--text-s); flex-shrink: 0; } /* Stat list (side card) */ .stat-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border); } .stat-item:last-child { border-bottom: none; } .stat-item-label { font-size: 12px; color: var(--text-m); } .stat-item-val { font-size: 14px; font-weight: 700; color: var(--forest); } /* Quick access */ .qa-btn { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: var(--radius-sm); background: var(--bg); border: 1px solid var(--border); font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer; text-decoration: none; transition: all .15s; margin-bottom: 8px; } .qa-btn:last-child { margin-bottom: 0; } .qa-btn:hover { background: var(--forest); color: white; border-color: var(--forest); } /* Agent grid */ .agent-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 10px; } .agent-card { background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 16px 14px 14px; cursor: pointer; transition: all .15s; text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 8px; position: relative; box-shadow: var(--shadow); } .agent-card:hover { box-shadow: var(--shadow-lg); border-color: var(--forest); transform: translateY(-2px); } .agent-card.active-card { border-color: var(--forest); box-shadow: 0 0 0 3px var(--forest-l); } .agent-card.soon { opacity: .5; cursor: default; } .agent-card.soon:hover { transform: none; box-shadow: var(--shadow); border-color: var(--border); } .agent-emoji { font-size: 28px; line-height: 1; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--bg); flex-shrink: 0; } .agent-name { font-size: 12px; font-weight: 700; color: var(--text); line-height: 1.3; } .agent-role { font-size: 10px; color: var(--text-s); line-height: 1.4; } .agent-status { display: inline-flex; align-items: center; gap: 4px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; margin-top: auto; } .agent-status::before { content: ''; width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; } .agent-status.live { color: #16a34a; } .agent-status.live::before { background: #22c55e; box-shadow: 0 0 4px #22c55e; } .agent-status.standby { color: var(--text-s); } .agent-status.standby::before { background: #d1d5db; } .agent-status.soon { color: var(--text-s); } .agent-status.soon::before { background: #e5e7eb; border: 1px solid #d1d5db; } .agent-badge { position: absolute; top: 10px; right: 10px; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 20px; } .agent-badge.live { background: var(--lime); color: var(--forest); } .agent-badge.new { background: #fef3c7; color: #92400e; } .agent-badge.soon { background: var(--bg); color: var(--text-s); border: 1px solid var(--border); } /* ══════════════════════════════════════════ CRM / AD LIBRARY PAGE COMPONENTS ══════════════════════════════════════════ */ /* ── AD GRID ── */ .ads-grid { flex: 1; overflow-y: auto; padding: 20px 24px; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; align-content: start; } .ad-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: border-color .15s, transform .15s, box-shadow .15s; display: flex; flex-direction: column; box-shadow: var(--shadow); } .ad-card:hover { border-color: var(--forest); transform: translateY(-2px); box-shadow: var(--shadow-md); } .ad-thumb { width: 100%; height: 160px; background: var(--surface2); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } .ad-thumb img, .ad-thumb video { width: 100%; height: 100%; object-fit: cover; } .ad-thumb-placeholder { font-size: 36px; opacity: .4; } .ad-type-badge { position: absolute; top: 8px; left: 8px; padding: 2px 8px; border-radius: 20px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; background: rgba(0,0,0,.6); color: white; } .ad-body { padding: 12px; flex: 1; display: flex; flex-direction: column; gap: 6px; } .ad-header { display: flex; align-items: center; justify-content: space-between; } .ad-brand { font-size: 13px; font-weight: 700; } .ad-status-badge { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 20px; text-transform: uppercase; } .status--saved { background: var(--blue-l); color: var(--blue); } .status--transcribed { background: var(--yellow-l); color: var(--yellow); } .status--scripted { background: var(--green-l); color: var(--green); } .ad-source { font-size: 10px; color: var(--text-s); } .ad-text { font-size: 12px; color: var(--text-m); line-height: 1.5; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .ad-product { font-size: 11px; color: var(--forest); font-weight: 600; } .ad-date { font-size: 10px; color: var(--text-s); margin-top: auto; } .ad-actions { display: flex; gap: 6px; padding: 10px 12px 12px; border-top: 1px solid var(--border); } .btn-action { flex: 1; padding: 7px 6px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: transparent; color: var(--text-m); font-size: 11px; cursor: pointer; transition: all .15s; white-space: nowrap; } .btn-action:hover { background: var(--surface2); color: var(--text); } .btn-transcribe { border-color: rgba(23,67,60,.3); color: var(--forest); } .btn-transcribe:hover { background: var(--forest-l); } .btn-view { border-color: var(--blue-l); color: var(--blue); } .btn-view:hover { background: var(--blue-l); } .btn-details { border-color: var(--green-l); color: var(--green); } .btn-details:hover { background: var(--green-l); } .btn-delete { border-color: var(--red-l); color: var(--red); } .btn-delete:hover { background: var(--red-l); } /* ── COMPETITOR FILTERS ── */ .competitor-list { display: flex; flex-direction: column; gap: 2px; max-height: 200px; overflow-y: auto; } .competitor-item { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: var(--radius-sm); cursor: pointer; font-size: 12px; color: var(--text-m); transition: all .15s; } .competitor-item:hover { background: var(--surface2); color: var(--text); } .competitor-item.active { color: var(--forest); } .tier-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; } .tier-3 { background: var(--yellow); } .tier-2 { background: var(--blue); } .tier-1 { background: var(--text-s); } .loading-text { font-size: 12px; color: var(--text-s); padding: 4px 8px; } /* Connection status in panel footer */ .panel-sidebar-footer { margin-top: auto; padding: 12px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; } .scraper-btn { width: 100%; padding: 9px 12px; background: var(--lime); border: none; color: var(--forest); border-radius: var(--radius-sm); cursor: pointer; font-size: 13px; font-weight: 700; transition: opacity .15s; } .scraper-btn:hover { opacity: .85; } .scraper-btn:disabled { opacity: .4; cursor: not-allowed; } .connection-status { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-s); padding: 0 2px; } .dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .dot--green { background: var(--green); box-shadow: 0 0 6px var(--green); } .dot--red { background: var(--red); } /* ── EMPTY STATE ── */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; padding: 60px; text-align: center; gap: 12px; } .empty-icon { font-size: 52px; opacity: .4; } .empty-state h2 { font-size: 18px; color: var(--text-m); } .empty-state p { font-size: 13px; color: var(--text-m); line-height: 1.7; max-width: 380px; } /* ── CRM LAYOUT ── */ #ads-view, #crm-view, #support-view { display: flex; flex-direction: column; height: 100%; overflow: hidden; } .cs-layout { flex: 1; display: flex; overflow: hidden; min-height: 0; } /* Ticket list column: header vast, lijst scrollt */ .cs-list-column { width: 300px; min-width: 260px; border-right: 1px solid var(--border); display: flex; flex-direction: column; flex-shrink: 0; overflow: hidden; } .cs-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; } .cs-list-item { padding: 10px 12px 10px 15px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background .12s; position: relative; border-left: 3px solid transparent; } .cs-list-item:hover { background: var(--surface2); } .cs-list-item.active { background: var(--surface2); border-left-color: var(--forest); } .cs-list-item.active .cs-li-name { color: var(--forest); } .cs-list-item.priority--urgent { border-left-color: var(--red); } .cs-list-item.priority--high { border-left-color: var(--orange); } .cs-list-item.priority--medium { border-left-color: var(--blue); } .cs-list-item.priority--low { border-left-color: transparent; } .cs-li--resolved { opacity: .52; } /* Card row: avatar + body + draft-dot */ .cs-li-row { display: flex; align-items: flex-start; gap: 10px; } .cs-li-avatar { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: #fff; flex-shrink: 0; margin-top: 1px; letter-spacing: .03em; } .cs-li-body { flex: 1; min-width: 0; } .cs-li-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2px; } .cs-li-name { font-size: 12px; font-weight: 700; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 4px; } .cs-li-time { font-size: 10px; color: var(--text-s); flex-shrink: 0; margin-left: 6px; } .cs-li-subject { font-size: 12px; font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 2px; } .cs-li-preview { font-size: 11px; color: var(--text-s); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cs-li-tags { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 5px; } /* Draft-ready indicator dot */ .cs-li-draft-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green, #22c55e); flex-shrink: 0; margin-top: 6px; margin-left: 4px; box-shadow: 0 0 5px rgba(34,197,94,.5); } .cs-tag { font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 3px; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; } .cs-tag--red { background: rgba(220,38,38,.12); color: var(--red); } .cs-tag--orange { background: rgba(234,88,12,.12); color: var(--orange); } .cs-tag--yellow { background: var(--yellow-l); color: var(--yellow); } .cs-tag--gray { background: rgba(100,116,139,.12); color: var(--text-s); } .cs-tag--green { background: rgba(34,197,94,.12); color: var(--green); } /* Kanaal-badge: WhatsApp-tickets in dezelfde inbox als e-mail */ .cs-chan { display: inline-flex; align-items: center; flex-shrink: 0; font-size: 10px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: 1px 5px; border-radius: 4px; margin-right: 4px; white-space: nowrap; } .cs-chan--wa { background: rgba(37,211,102,.16); color: #128c7e; } .cs-chan--closed { background: rgba(100,116,139,.12); color: var(--text-s); } /* Topbar search */ .crm-topbar-search { display: flex; align-items: center; gap: 8px; background: var(--surface2, #f3f3f1); border: 1px solid var(--border); border-radius: 8px; padding: 6px 12px; width: 260px; flex-shrink: 0; margin: 0 8px; } .crm-topbar-search input { border: none; background: transparent; outline: none; font-size: 13px; color: var(--text); width: 100%; } .crm-topbar-search input::placeholder { color: var(--text-s); } /* Priority dots */ .priority-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .priority-dot--low { background: var(--text-s); } .priority-dot--medium { background: var(--blue); } .priority-dot--high { background: var(--orange); } .priority-dot--urgent { background: var(--red); } /* Priority badge buttons */ .priority-btn { padding: 6px 12px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 700; cursor: pointer; transition: all .15s; border: 1px solid; white-space: nowrap; } .priority--low { background: rgba(107,114,128,.1); border-color: rgba(107,114,128,.3); color: var(--text-s); } .priority--medium { background: var(--blue-l); border-color: rgba(37,99,235,.3); color: var(--blue); } .priority--high { background: rgba(234,88,12,.1); border-color: rgba(234,88,12,.3); color: var(--orange); } .priority--urgent { background: var(--red-l); border-color: rgba(220,38,38,.35); color: var(--red); } /* Center thread */ .cs-detail { flex: 1; overflow: hidden; display: flex; flex-direction: column; background: var(--bg); min-width: 0; } .cs-detail-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text-s); gap: 12px; } .cs-detail-empty-icon { font-size: 40px; } .cs-detail-header { padding: 18px 22px 14px; border-bottom: 1px solid var(--border); background: var(--surface); } .cs-detail-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 10px; } .cs-detail-name { font-size: 17px; font-weight: 700; } .cs-detail-email-addr { font-size: 12px; color: var(--text-m); margin-top: 2px; } .cs-detail-badges { display: flex; gap: 8px; align-items: center; flex-shrink: 0; } .cs-detail-body { flex: 1; display: flex; flex-direction: column; } .cs-panel { border-bottom: 1px solid var(--border); padding: 16px 22px; } .cs-panel:last-child { border-bottom: none; } .cs-panel-label { font-size: 10px; font-weight: 700; color: var(--text-s); text-transform: uppercase; letter-spacing: .8px; margin-bottom: 10px; } .cs-panel-label.collapsible { margin-bottom: 0; cursor: pointer; user-select: none; display: flex; align-items: center; gap: 6px; } .cs-panel-label.collapsible:hover { color: var(--text); } .cs-panel-body { margin-top: 10px; } .cs-panel-body.collapsed { display: none; } .panel-chevron { font-size: 10px; flex-shrink: 0; transition: transform .15s; } .cs-email-text { font-size: 14px; line-height: 1.7; color: var(--text); white-space: pre-wrap; word-break: break-word; } .cs-draft-text { font-size: 13px; line-height: 1.7; color: var(--text); white-space: pre-wrap; word-break: break-word; background: var(--forest-l); border: 1px solid rgba(23,67,60,.18); border-radius: var(--radius-sm); padding: 14px; } .crm-draft-textarea { width: 100%; min-height: 160px; padding: 14px; background: var(--forest-l); border: 1px solid rgba(23,67,60,.18); border-radius: var(--radius-sm); color: var(--text); font-size: 13px; line-height: 1.7; resize: vertical; outline: none; font-family: inherit; } .crm-draft-textarea:focus { border-color: var(--forest); } /* Draft type / status badges */ .draft-type-badge { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 20px; text-transform: uppercase; letter-spacing: .5px; } .draft-type--red { background: var(--red-l); color: var(--red); } .draft-type--blue { background: var(--blue-l); color: var(--blue); } .draft-type--yellow { background: var(--yellow-l); color: var(--yellow); } .draft-type--accent { background: var(--forest-l); color: var(--forest); } .draft-status-badge { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 20px; } .draft-status--pending { background: var(--yellow-l); color: var(--yellow); } .draft-status--sent { background: var(--green-l); color: var(--green); } .draft-status--denied { background: var(--red-l); color: var(--red); } /* Thread view */ .crm-thread { flex: 1; overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 16px; background: var(--bg); min-height: 0; } .crm-thread-loading, .crm-thread-empty { font-size: 12px; color: var(--text-s); text-align: center; padding: 40px 0; } .crm-msg { display: flex; gap: 10px; align-items: flex-start; } .crm-msg--out { flex-direction: row-reverse; } .crm-msg-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--surface2); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--text-s); flex-shrink: 0; } .crm-msg-avatar--out { background: var(--forest-l); color: var(--forest); border-color: rgba(23,67,60,.25); } .crm-msg-bubble { max-width: 80%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px; box-shadow: var(--shadow); } .crm-msg-bubble--html { max-width: 100%; width: 100%; padding: 10px; } .crm-msg--out .crm-msg-bubble { background: var(--forest-l); border-color: rgba(23,67,60,.18); } .crm-msg-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; } .crm-msg-sender { font-size: 12px; font-weight: 700; color: var(--text); } .crm-msg--out .crm-msg-sender { color: var(--forest); } .crm-msg-time { font-size: 10px; color: var(--text-s); white-space: nowrap; } .crm-msg-body { font-size: 13px; line-height: 1.65; color: var(--text); white-space: pre-wrap; word-break: break-word; } .crm-feedback-banner { padding: 8px 16px; background: rgba(202,138,4,.07); border-bottom: 1px solid rgba(202,138,4,.2); font-size: 12px; color: var(--yellow); line-height: 1.5; } /* Compose area */ .crm-compose { border-top: 2px solid var(--border); background: var(--surface); flex-shrink: 0; max-height: 55vh; overflow-y: auto; } .crm-tab-content { padding: 0 16px 12px; } .crm-tab-content.hidden { display: none; } .crm-resize-handle { padding: 5px 16px 3px; cursor: ns-resize; display: flex; align-items: center; justify-content: center; user-select: none; } .crm-resize-handle-bar { width: 40px; height: 4px; border-radius: 2px; background: var(--border); transition: background .15s; } .crm-resize-handle:hover .crm-resize-handle-bar { background: var(--forest); } .crm-compose-bar { display: flex; align-items: center; gap: 6px; margin-top: 10px; } .crm-compose-bar-left { display: flex; align-items: center; gap: 6px; flex: 1; } .crm-action-ghost { display: inline-flex; align-items: center; gap: 5px; background: none; border: 1px solid var(--border); color: var(--text-s); font-size: 11px; font-weight: 600; padding: 5px 11px; border-radius: 20px; cursor: pointer; transition: all .15s; text-decoration: none; } .crm-action-ghost:hover { border-color: var(--forest); color: var(--forest); } .crm-action-ghost:disabled { opacity: .5; cursor: not-allowed; } .crm-action-feedback { display: inline-flex; align-items: center; gap: 5px; background: rgba(202,138,4,.08); border: 1px solid rgba(202,138,4,.25); color: var(--yellow); font-size: 11px; font-weight: 600; padding: 5px 11px; border-radius: 20px; cursor: pointer; transition: all .15s; } .crm-action-feedback:hover { background: rgba(202,138,4,.15); } .crm-action-send { flex: 1; } .crm-regen-btn { background: none; border: 1px solid var(--border); color: var(--text-s); font-size: 11px; padding: 3px 10px; border-radius: 20px; cursor: pointer; transition: all .15s; } .crm-regen-btn:hover { border-color: var(--forest); color: var(--forest); } .crm-regen-btn:disabled { opacity: .5; cursor: not-allowed; } .crm-note { font-size: 12px; color: var(--text); padding: 8px 12px; background: var(--surface2); border-radius: var(--radius-sm); margin-bottom: 6px; line-height: 1.5; } /* Action bar */ .cs-action-bar { padding: 14px 22px; border-top: 1px solid var(--border); background: var(--surface); display: flex; gap: 10px; flex-shrink: 0; } .resolve-btn { padding: 7px 16px; background: var(--green-l); border: 1px solid rgba(0,163,129,.35); border-radius: var(--radius-sm); color: var(--green); font-size: 12px; font-weight: 700; cursor: pointer; transition: all .15s; white-space: nowrap; } .resolve-btn:hover { background: var(--green); color: white; } .reopen-btn { padding: 7px 16px; background: rgba(107,114,128,.1); border: 1px solid rgba(107,114,128,.3); border-radius: var(--radius-sm); color: var(--text-s); font-size: 12px; font-weight: 700; cursor: pointer; transition: all .15s; white-space: nowrap; } .reopen-btn:hover { background: var(--surface2); color: var(--text); } .voor-mij-btn { padding: 7px 14px; background: rgba(124,58,237,.08); border: 1px solid rgba(124,58,237,.3); border-radius: var(--radius-sm); color: #7c3aed; font-size: 12px; font-weight: 700; cursor: pointer; transition: all .15s; white-space: nowrap; } .voor-mij-btn:hover { background: #7c3aed; color: white; } .voor-mij-btn.active { background: #7c3aed; color: white; border-color: #7c3aed; } .accept-btn { flex: 1; padding: 12px; background: var(--green-l); border: 1px solid rgba(0,163,129,.4); border-radius: var(--radius-sm); color: var(--green); font-size: 14px; font-weight: 700; cursor: pointer; transition: all .15s; } .accept-btn:hover { background: var(--green); color: white; } .accept-btn:disabled { opacity: .5; cursor: not-allowed; } .deny-btn { flex: 1; padding: 12px; background: var(--red-l); border: 1px solid rgba(220,38,38,.3); border-radius: var(--radius-sm); color: var(--red); font-size: 14px; font-weight: 700; cursor: pointer; transition: all .15s; } .deny-btn:hover { background: var(--red); color: white; } .deny-btn:disabled { opacity: .5; cursor: not-allowed; } /* Right info panel */ .cs-info-panel { width: 270px; min-width: 240px; max-width: 270px; border-left: 1px solid var(--border); background: var(--surface); overflow-y: auto; display: flex; flex-direction: column; flex-shrink: 0; } .cs-info-panel.hidden { display: none; } .cs-info-section { border-bottom: 1px solid var(--border); padding: 14px 16px; } .cs-info-section:last-child { border-bottom: none; } .cs-info-label { font-size: 10px; font-weight: 700; color: var(--text-s); text-transform: uppercase; letter-spacing: .7px; margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; } .cs-info-row { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; } .cs-info-row:last-child { margin-bottom: 0; } .cs-info-key { font-size: 10px; color: var(--text-s); } .cs-info-val { font-size: 13px; font-weight: 600; color: var(--text); word-break: break-word; } .cs-info-val.ok { color: var(--green); } .cs-info-val.warn { color: var(--yellow); } .cs-info-val.none { color: var(--text-s); font-weight: 400; font-style: italic; } /* Order cards in right panel */ .cs-order-card { border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 8px; overflow: hidden; } .cs-order-card-header { display: flex; align-items: center; gap: 6px; padding: 8px 10px; background: var(--surface2); cursor: pointer; user-select: none; flex-wrap: wrap; } .cs-order-card-header:hover { background: var(--border); } .cs-order-link { font-size: 13px; font-weight: 700; color: var(--forest); text-decoration: none; flex-shrink: 0; } .cs-order-link:hover { text-decoration: underline; } .cs-order-card-badges { display: flex; gap: 4px; flex-shrink: 0; } .cs-status-badge { font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 20px; background: var(--surface); color: var(--text-s); border: 1px solid var(--border); } .cs-status-badge.ok { background: var(--green-l); color: var(--green); border-color: rgba(0,163,129,.3); } .cs-status-badge.warn { background: var(--yellow-l); color: var(--yellow); border-color: rgba(202,138,4,.3); } .cs-order-date { font-size: 10px; color: var(--text-s); margin-left: auto; } .cs-order-total { font-size: 12px; font-weight: 700; color: var(--text); flex-shrink: 0; } .cs-order-chevron { font-size: 10px; color: var(--text-s); transition: transform .15s; flex-shrink: 0; } .cs-order-card-body { display: none; padding: 10px; border-top: 1px solid var(--border); } .cs-order-card--open .cs-order-card-body { display: block; } .cs-order-card--open .cs-order-chevron { transform: rotate(180deg); } .cs-order-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; } .cs-order-field { background: var(--surface2); border-radius: var(--radius-sm); padding: 10px 12px; } .cs-order-field-label { font-size: 10px; color: var(--text-s); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; } .cs-order-field-value { font-size: 13px; font-weight: 600; color: var(--text); } .cs-order-field-value.ok { color: var(--green); } .cs-order-field-value.warn { color: var(--yellow); } .cs-order-field-value.none { color: var(--text-s); font-weight: 400; font-style: italic; } .cs-order-items { margin-top: 10px; } .cs-order-item { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: var(--surface2); border-radius: var(--radius-sm); margin-bottom: 6px; font-size: 12px; } .cs-order-item-name { color: var(--text); } .cs-order-item-qty { color: var(--text-s); } .cs-tracking-link { color: var(--forest); text-decoration: none; font-size: 12px; font-weight: 600; word-break: break-all; } .cs-tracking-link:hover { text-decoration: underline; } /* Conversation items in right panel */ .cs-conv-item { padding: 8px 10px; border-radius: var(--radius-sm); cursor: pointer; border: 1px solid var(--border); margin-bottom: 6px; transition: background .12s; } .cs-conv-item:hover { background: var(--surface2); } .cs-conv-subject { font-size: 12px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cs-conv-date { font-size: 10px; color: var(--text-s); margin-top: 2px; } /* Sent message in conversation tab */ .crm-sent-message { background: var(--green-l); border: 1px solid rgba(0,163,129,.25); border-radius: var(--radius-sm); padding: 12px 14px; } .crm-sent-label { font-size: 10px; font-weight: 700; color: var(--green); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; } .crm-sent-body { font-size: 13px; line-height: 1.7; color: var(--text); white-space: pre-wrap; word-break: break-word; } /* Feedback */ .cs-feedback-text { font-size: 13px; color: var(--yellow); font-style: italic; line-height: 1.6; padding: 10px 14px; background: var(--yellow-l); border: 1px solid rgba(202,138,4,.2); border-radius: var(--radius-sm); } .feedback-textarea { width: 100%; min-height: 100px; padding: 12px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-size: 13px; line-height: 1.6; resize: vertical; outline: none; font-family: inherit; } .feedback-textarea:focus { border-color: var(--red); } .feedback-textarea::placeholder { color: var(--text-s); } /* Attach button */ .attach-label { display: inline-flex; align-items: center; gap: 4px; padding: 8px 12px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 12px; font-weight: 600; color: var(--text-s); cursor: pointer; transition: all .15s; white-space: nowrap; } .attach-label:hover { border-color: var(--forest); color: var(--forest); } .attach-count { font-size: 11px; color: var(--forest); font-weight: 600; } /* Generate drafts button */ .generate-drafts-btn { padding: 8px 18px; background: var(--forest); border: none; border-radius: var(--radius-sm); color: white; font-size: 13px; font-weight: 600; cursor: pointer; transition: opacity .15s; white-space: nowrap; } .generate-drafts-btn:hover { opacity: .85; } .generate-drafts-btn:disabled { opacity: .5; cursor: not-allowed; } /* Session bar */ .session-bar { display: flex; align-items: center; gap: 14px; padding: 0 20px; height: 38px; background: var(--surface); border-top: 1px solid var(--border); flex-shrink: 0; font-size: 12px; color: var(--text-s); } .session-bar.active { background: rgba(0,163,129,.04); border-top-color: rgba(0,163,129,.2); } .session-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-s); flex-shrink: 0; } .session-bar.active .session-dot { background: var(--green); box-shadow: 0 0 6px var(--green); } .session-timer { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text); min-width: 56px; } .session-bar.active .session-timer { color: var(--green); } .session-resolved { font-size: 12px; color: var(--text-s); } .session-resolved strong { color: var(--text); font-weight: 600; } .session-end-btn { margin-left: auto; padding: 4px 14px; background: var(--red); color: white; border: none; border-radius: var(--radius-sm); font-size: 11px; font-weight: 600; cursor: pointer; transition: opacity .15s; } .session-end-btn:hover { opacity: .85; } .session-start-btn { margin-left: auto; padding: 4px 14px; background: var(--green-l); color: var(--green); border: 1px solid rgba(0,163,129,.35); border-radius: var(--radius-sm); font-size: 11px; font-weight: 600; cursor: pointer; transition: all .15s; } .session-start-btn:hover { background: var(--green); color: white; } /* Modal product grid */ .product-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .product-btn { padding: 10px 12px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-size: 13px; cursor: pointer; transition: all .15s; text-align: left; } .product-btn:hover { border-color: var(--forest); background: var(--forest-l); } .product-btn.selected { border-color: var(--forest); background: var(--forest-l); color: var(--forest); } .custom-input { width: 100%; padding: 10px 12px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-size: 13px; outline: none; } .custom-input:focus { border-color: var(--forest); } .custom-input::placeholder { color: var(--text-s); } /* Result boxes in modals */ .result-section { display: flex; flex-direction: column; gap: 8px; } .result-label { font-size: 12px; font-weight: 600; color: var(--text-s); text-transform: uppercase; letter-spacing: .5px; } .result-box { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px; font-size: 13px; line-height: 1.7; white-space: pre-wrap; max-height: 200px; overflow-y: auto; color: var(--text); } .result-actions { display: flex; gap: 8px; } .primary-btn { width: 100%; padding: 12px; background: var(--forest); border: none; border-radius: var(--radius-sm); color: white; font-size: 14px; font-weight: 600; cursor: pointer; transition: opacity .15s; } .primary-btn:hover { opacity: .85; } .primary-btn:disabled { opacity: .5; cursor: not-allowed; } .secondary-btn { flex: 1; padding: 10px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-size: 13px; cursor: pointer; } .secondary-btn:hover { background: var(--border); } .modal-result { padding: 20px; display: flex; flex-direction: column; gap: 16px; } /* ══════════════════════════════════════════════════════════════════════════ HQ NAVIGATIE — gedeelde sidebar (nav.js) + afdelingstabs Bouwt voort op .panel-sidebar / .panel-nav-btn hierboven. Zie DESIGN.md §102. ═══════════════════════════════════════════════════════════════════════ */ #hq-nav { width: 232px; min-width: 232px; } #hq-nav .panel-sidebar-logo-mark svg { width: 17px; height: 17px; color: var(--forest); } /* nav-knop: icoon links, tekst, optionele badge rechts */ .panel-nav-btn { text-decoration: none; } .panel-nav-btn .nav-icon { display: flex; align-items: center; flex-shrink: 0; } .panel-nav-btn .nav-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .panel-nav-badge { flex-shrink: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--red, #dc2626); color: #fff; font-size: 10px; font-weight: 700; line-height: 18px; text-align: center; } /* items die nog niet bestaan — zichtbaar maar niet klikbaar, geen valse belofte */ .panel-nav-btn.is-soon { color: var(--text-s); cursor: default; opacity: .55; } .panel-nav-btn.is-soon:hover { background: transparent; color: var(--text-s); } /* gebruikersblok onderin de sidebar */ .panel-user { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--radius-sm); cursor: pointer; transition: background .15s; } .panel-user:hover { background: var(--surface2); } .panel-user-avatar { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; background: var(--forest); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; } .panel-user-name { font-size: 12px; font-weight: 600; color: var(--text-m); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .panel-user-menu { display: none; flex-direction: column; gap: 2px; padding: 6px 0 0; margin-top: 4px; border-top: 1px solid var(--border); } .panel-user-menu.open { display: flex; } .panel-user-item { padding: 7px 10px; border: none; background: none; text-align: left; border-radius: var(--radius-sm); font-size: 12px; color: var(--text-m); text-decoration: none; cursor: pointer; transition: background .15s; } .panel-user-item:hover { background: var(--surface2); color: var(--text); } .panel-user-item.danger { color: var(--red, #dc2626); } /* ── AFDELINGSTABS ── gepromoveerd uit crm.html (.hq-tab), nu herbruikbaar ── */ .dept-tabs { display: flex; gap: 0; align-items: center; border-bottom: 1px solid var(--border); padding: 0 24px; background: var(--surface); flex-shrink: 0; overflow-x: auto; } .dept-tab { padding: 11px 16px; border: none; border-bottom: 2px solid transparent; background: transparent; font-size: 13px; font-weight: 600; color: var(--text-m); cursor: pointer; white-space: nowrap; text-decoration: none; transition: color .12s, border-color .12s; } .dept-tab:hover { color: var(--forest); } .dept-tab.active { color: var(--forest); border-bottom-color: var(--forest); font-weight: 700; } .dept-tab.is-soon { color: var(--text-s); opacity: .5; cursor: default; } .dept-tab.is-soon:hover { color: var(--text-s); } /* ── AFDELINGSKAARTEN op de HQ-homepage ── */ .dept-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; } .dept-card { display: flex; flex-direction: column; gap: 10px; padding: 18px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; } .dept-card:hover { border-color: var(--forest); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(23,67,60,.09); } .dept-card-top { display: flex; align-items: center; gap: 10px; } .dept-card-icon { width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0; background: var(--forest); color: var(--lime); display: flex; align-items: center; justify-content: center; } .dept-card-icon svg { width: 18px; height: 18px; } .dept-card-name { font-size: 15px; font-weight: 700; color: var(--text); } .dept-card-blurb { font-size: 12.5px; color: var(--text-m); line-height: 1.55; margin: 0; } .dept-card-meta { margin-top: auto; padding-top: 4px; font-size: 11px; color: var(--text-s); display: flex; gap: 6px; flex-wrap: wrap; } .dept-card-chip { padding: 2px 8px; border-radius: 20px; background: var(--surface2); color: var(--text-m); font-weight: 600; } /* ── degradeert naar beneden (desktop-first, max-width) ── */ @media (max-width: 1100px) { #hq-nav { width: 200px; min-width: 200px; } } @media (max-width: 860px) { #hq-nav { width: 60px; min-width: 60px; } #hq-nav .panel-nav-btn .nav-text, #hq-nav .panel-section-label, #hq-nav .panel-sidebar-brand, #hq-nav .panel-sidebar-sub, #hq-nav .panel-user-name { display: none; } #hq-nav .panel-nav-btn { justify-content: center; } #hq-nav .panel-sidebar-logo { justify-content: center; padding: 14px 8px; } } @media (prefers-reduced-motion: reduce) { .dept-card, .panel-nav-btn, .panel-user { transition: none; } .dept-card:hover { transform: none; } } /* ============================================================================ TOPBAR-ACTIES — cijfers verbergen · meldingen · profiel Rechtsboven op elke HQ-pagina, gerenderd door nav.js. Het profiel stond eerder onderin de sidebar; het staat nu hier, en maar op één plek. ========================================================================= */ .hq-actions { display: flex; align-items: center; gap: 6px; margin-left: 12px; } .hq-action-wrap { position: relative; } .hq-action { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 9px; background: var(--card); color: var(--text-m); cursor: pointer; position: relative; transition: background .15s, color .15s, border-color .15s; } .hq-action:hover { background: var(--bg); color: var(--text); } .hq-action svg { width: 17px; height: 17px; } /* Aan = duidelijk aan. Je moet in één oogopslag zien dat je cijfers verborgen zijn. */ .hq-action.is-on { background: var(--forest); border-color: var(--forest); color: #fff; } .hq-action.is-on:hover { background: var(--forest); color: #fff; } .hq-dot { position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--danger, #dc2626); border: 2px solid var(--card); } .hq-avatar { width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer; background: var(--forest); color: #fff; font-size: 13px; font-weight: 700; display: grid; place-items: center; transition: opacity .15s; } .hq-avatar:hover { opacity: .85; } /* ── Uitklappers ── */ .hq-pop { position: absolute; top: calc(100% + 8px); right: 0; min-width: 260px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.13); padding: 6px; z-index: 200; display: none; } .hq-pop.open { display: block; } .hq-pop--sm { min-width: 200px; } .hq-pop-head { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-s); padding: 8px 10px 6px; } .hq-pop-empty { padding: 12px 10px; font-size: 13px; color: var(--text-s); } .hq-pop-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 10px; border: none; background: none; border-radius: 8px; font: inherit; font-size: 13px; color: var(--text); text-align: left; text-decoration: none; cursor: pointer; } .hq-pop-item:hover { background: var(--bg); } .hq-pop-item.danger { color: var(--danger, #dc2626); } .hq-pop-user { padding: 9px 10px 10px; border-bottom: 1px solid var(--border); margin-bottom: 4px; } .hq-pop-user-name { font-size: 13.5px; font-weight: 700; color: var(--text); } .hq-pop-user-role { font-size: 11.5px; color: var(--text-s); text-transform: capitalize; } .hq-notif-n { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 6px; background: var(--forest-l); color: var(--forest); font-size: 12px; font-weight: 700; display: grid; place-items: center; flex: none; } /* ============================================================================ CIJFERS VERBERGEN — één knop, voor schermdelen en screenshots Alles met .hq-num of [data-num] gaat op slot, plus de waarde-klassen die er al waren. Nieuwe cijfers? Geef ze .hq-num, dan vallen ze hier vanzelf onder. ========================================================================= */ body.hq-private .hq-num, body.hq-private [data-num], body.hq-private .stat-pill, body.hq-private .kstat, body.hq-private .cred-value, body.hq-private .nav-badge, body.hq-private .badge, body.hq-private .cbadge, body.hq-private .stat-val, body.hq-private .cred-value-wrap { filter: blur(7px); user-select: none; pointer-events: none; } /* De knop zelf en zijn eigen teller nooit vervagen — anders zie je niet meer hoe je het weer uitzet. */ body.hq-private .hq-actions .hq-num { filter: none; user-select: auto; pointer-events: auto; } @media print { body.hq-private .hq-num, body.hq-private [data-num] { filter: blur(9px); } } /* ============================================================================ SUBNAV — Instellingen met onderliggende items ========================================================================= */ .panel-nav-group .panel-nav-btn { position: relative; } .nav-caret { margin-left: auto; width: 22px; height: 22px; flex: none; display: grid; place-items: center; border: none; background: none; color: var(--text-s); cursor: pointer; border-radius: 5px; transition: transform .18s, background .15s; } .nav-caret:hover { background: var(--border); } .nav-caret svg { width: 13px; height: 13px; } .panel-nav-group.open .nav-caret { transform: rotate(180deg); } .panel-subnav { display: none; margin: 2px 0 4px 0; padding-left: 13px; border-left: 1px solid var(--border); margin-left: 15px; } .panel-nav-group.open .panel-subnav { display: block; } .panel-subnav .panel-nav-btn { padding: 6px 8px; font-size: 12.5px; } .panel-subnav .nav-icon svg { width: 14px; height: 14px; } /* ============================================================================ SIDEBAR IN- EN UITKLAPPEN Het uitgangspunt: het icoon mag niet bewegen. Daarvoor is de icoon-kolom in beide standen even breed (--rail-icon), zodat het icoon-midden precies op het midden van de ingeklapte balk valt. Klapt de balk dicht, dan schuift er niets opzij — er valt alleen tekst weg. Dat is wat het rustig maakt. De tekst verdwijnt niet met display:none (dat knipt hard weg terwijl de breedte nog animeert) maar vervaagt en schuift een paar pixels mee, iets sneller dan de balk zelf. Zo is de tekst al weg voordat de rand hem raakt. body.hq-rail is de schakelaar, zodat ook sidebars die nav.js niet zelf tekent (de CRM) meebewegen. ========================================================================= */ :root { /* Deze drie horen bij elkaar. Het icoon-midden ligt op 12 (sectie) + 6 (nav) + 28/2 = 32px en de rail is 64px, dus precies 2x32. Daardoor staat het icoon ingeklapt exact waar het uitgeklapt ook stond. Verander je er één, herbereken dan de andere — anders gaan de iconen weer schuiven bij het inklappen. */ --rail-w: 64px; /* breedte ingeklapt = 2x het icoon-midden */ --rail-icon: 28px; /* icoon-kolom, gelijk in beide standen */ --rail-pad: 6px; /* zijmarge van de nav; telt mee in de centrering */ --rail-ease: cubic-bezier(.4, 0, .2, 1); --rail-dur: 200ms; } .panel-sidebar { overflow-x: hidden; transition: width var(--rail-dur) var(--rail-ease), min-width var(--rail-dur) var(--rail-ease); } /* ── De vaste icoon-kolom ── */ .panel-nav { padding-left: var(--rail-pad); padding-right: var(--rail-pad); } .panel-nav-btn { padding-left: 0; padding-right: 8px; gap: 0; } .panel-nav-btn .nav-icon { width: var(--rail-icon); flex: none; display: grid; place-items: center; } .panel-nav-btn .nav-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity 120ms var(--rail-ease), transform 160ms var(--rail-ease); } /* ── Ingeklapt ── */ /* #hq-nav zet zelf een breedte met een ID-selector (regel ~998), dus die moet hier ook genoemd worden — anders wint die van de rail en gebeurt er niets. */ body.hq-rail .panel-sidebar, body.hq-rail #hq-nav { width: var(--rail-w); min-width: var(--rail-w); } /* Tekst vervaagt en schuift mee, in plaats van hard weg te knippen. */ body.hq-rail .panel-nav-btn .nav-text, body.hq-rail .nav-caret, body.hq-rail .nav-rm { opacity: 0; transform: translateX(-6px); pointer-events: none; } /* Labels en koppen nemen geen ruimte meer in, maar krimpen wel netjes weg. */ /* Kopteksten en sectielabels gaan helemaal weg. height:0 was niet genoeg: die elementen houden hun breedte, en dan knijpen ze het logo en de iconen ernaast plat. Alleen de nav-tekst vervaagt nog — dat is het enige waar de overgang zichtbaar is. */ body.hq-rail .panel-section-label, body.hq-rail .panel-sidebar-brand, body.hq-rail .panel-sidebar-sub { display: none !important; } /* Het merkblok blijft, gecentreerd op de rail. */ body.hq-rail .panel-sidebar-logo-mark { margin: 0 auto; } body.hq-rail .panel-subnav { display: none; } body.hq-rail .panel-sidebar-logo { justify-content: center; padding-left: 0; padding-right: 0; } /* Badges worden een stip: het getal past niet, maar "er is iets" wel. */ body.hq-rail .panel-nav-btn { position: relative; } body.hq-rail .nav-badge:not([hidden]) { position: absolute; top: 6px; left: 34px; min-width: 7px; width: 7px; height: 7px; padding: 0; font-size: 0; border-radius: 50%; transition: none; } /* Hier moet de tekst écht weg, niet alleen onzichtbaar. Deze knoppen centreren hun inhoud, en een onzichtbare span telt gewoon mee — dan duwt hij het icoon naar links. In de hoofdbalk mag hij wel vervagen, want daar staat het icoon in een vaste kolom en beweegt er niets. */ /* ── De knop ── */ .hq-rail-toggle { position: sticky; top: 0; z-index: 5; width: 30px; height: 30px; margin: 8px 8px 0 auto; display: grid; place-items: center; flex: none; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text-s); cursor: pointer; transition: background .15s, color .15s, margin var(--rail-dur) var(--rail-ease); } .hq-rail-toggle:hover { background: var(--bg); color: var(--text); } .hq-rail-toggle:focus-visible { outline: 2px solid var(--forest); outline-offset: 2px; } .hq-rail-toggle svg { width: 15px; height: 15px; transition: transform var(--rail-dur) var(--rail-ease); } body.hq-rail .hq-rail-toggle { margin: 8px auto 4px; } body.hq-rail .hq-rail-toggle svg { transform: rotate(180deg); } body.hq-rail .panel-sidebar > .hq-rail-toggle, body.hq-rail .panel-sidebar > .hq-nav-tools > .hq-rail-toggle { color: var(--forest); border-color: var(--forest-l); background: var(--forest-l); } /* ── Tooltips, alleen ingeklapt ────────────────────────────────────────────── Zonder label is een icoon een raadspelletje. Het `title`-attribuut wacht een seconde en ziet er overal anders uit, dus doen we het zelf: direct zichtbaar, buiten de balk getekend zodat overflow hem niet afknipt. */ body.hq-rail .panel-nav-btn::after { content: attr(title); position: fixed; left: calc(var(--rail-w) + 8px); transform: translateY(-7px); background: var(--forest); color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; padding: 5px 9px; border-radius: 7px; box-shadow: 0 6px 18px rgba(0,0,0,.18); opacity: 0; pointer-events: none; z-index: 400; transition: opacity 110ms var(--rail-ease); } body.hq-rail .panel-nav-btn:hover::after, body.hq-rail .panel-nav-btn:focus-visible::after { opacity: 1; } body.hq-rail .panel-sidebar { overflow: visible; } body.hq-rail .panel-sidebar { overflow-y: auto; } /* ── Voorkeur voor minder beweging respecteren ── */ @media (prefers-reduced-motion: reduce) { .panel-sidebar, .panel-nav-btn .nav-text, .hq-rail-toggle, .hq-rail-toggle svg, body.hq-rail .panel-nav-btn::after { transition: none !important; } } /* Smal scherm wordt NIET hier geregeld. Een media-query die alleen de breedte krimpt laat de labels staan en kapt ze af; en de rail-stijl nog eens overdoen voor een tweede conditie is dezelfde regels twee keer onderhouden. nav.js zet daarom de klasse hq-rail bij een smal venster — zelfde stijl, één bron. */ /* ============================================================================ ROADMAP-KOPPELING IN DE NAV Een "nog te bouwen"-item toont het roadmap-id waar het aan hangt. Staat er geen id, dan is het een wens en hoort het niet in de nav. ========================================================================= */ .nav-rm { font-size: 9.5px; font-weight: 700; letter-spacing: .03em; padding: 1px 4px; border-radius: 4px; margin-left: 4px; background: var(--border); color: var(--text-s); vertical-align: middle; } body.hq-rail .nav-rm { display: none; } /* ── Afdelingskaart: eigenaar + nog niet gebouwd ── */ .dept-card-head { margin-left: auto; font-size: 10px; font-weight: 700; letter-spacing: .04em; padding: 2px 6px; border-radius: 5px; background: var(--forest-l); color: var(--forest); } .dept-card.is-soon { opacity: .55; cursor: default; pointer-events: none; } .dept-card.is-soon .dept-card-head { background: var(--border); color: var(--text-s); } /* Profielfoto in de topbar-avatar. Zonder foto blijft het de initiaal. */ .hq-avatar { overflow: hidden; padding: 0; } .hq-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ============================================================================ SKELETONS — wat je ziet terwijl de data onderweg is Een spinner zegt "wacht" en niets meer; een leeg scherm laat je twijfelen of er iets kapot is. Een skeleton laat de vorm van het antwoord alvast zien, dus je ogen staan al op de goede plek als de cijfers landen. Daarom hebben de blokken hieronder dezelfde maten als de echte kaarten en rijen. De glans loopt van links naar rechts in 1,4 s — traag genoeg om rustig te blijven, snel genoeg om te laten zien dat er iets gebeurt. Staat de gebruiker op "minder beweging", dan wordt het een egaal vlak. ========================================================================= */ @keyframes hq-sheen { to { background-position-x: -200%; } } .sk { background: linear-gradient(90deg, var(--border) 0%, var(--bg) 40%, var(--border) 80%); background-size: 200% 100%; animation: hq-sheen 1.4s linear infinite; border-radius: 6px; display: block; } .sk--text { height: 11px; } .sk--title { height: 15px; border-radius: 5px; } .sk--big { height: 26px; border-radius: 7px; } .sk--pill { height: 20px; border-radius: 10px; } .sk--circle { border-radius: 50%; } /* Niet alle regels even lang — een blok met identieke balken leest als een laadbalk, ongelijke lengtes lezen als tekst. */ .sk-lines > .sk + .sk { margin-top: 7px; } .sk-lines > .sk:nth-child(2) { width: 82%; } .sk-lines > .sk:nth-child(3) { width: 64%; } .sk-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; } .sk-row { display: flex; align-items: center; gap: 13px; padding: 13px 17px; border-bottom: 1px solid var(--border); } .sk-row:last-child { border-bottom: none; } /* Binnenkomen zonder schok: de echte inhoud vervangt het skelet met een korte fade, zodat het niet aanvoelt als een sprong. */ .hq-in { animation: hq-fade 220ms cubic-bezier(.4,0,.2,1) both; } @keyframes hq-fade { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .sk { animation: none; background: var(--border); } .hq-in { animation: none; } } /* ============================================================================ SIDEBAR HELEMAAL INKLAPPEN (ClickUp-stijl) Naast de icoon-rail hierboven is er een tweede, hardere stand: de balk gaat naar breedte 0 en de inhoud ernaast krijgt de hele breedte. Dat is waar je naar grijpt als je even alleen met de tabel of de brief bezig bent. Twee regels waar het op staat of valt: 1. De sidebar is een flex-kind naast .main. Alleen width:0 is niet genoeg — een flex-kind houdt zijn min-content-breedte. Vandaar ook min-width:0 en padding op nul, zodat er echt niets overblijft. 2. De knop om hem terug te halen zit NIET in de sidebar maar in de topbar. Een knop die met de balk mee verdwijnt laat je vastzitten. ========================================================================= */ body.hq-nav-collapsed .panel-sidebar, body.hq-nav-collapsed #hq-nav, body.hq-nav-collapsed .hq-collapsible { width: 0; min-width: 0; max-width: 0; padding-left: 0; padding-right: 0; border-right-width: 0; overflow: hidden; /* Onbereikbaar voor tab en screenreader zolang hij weg is. `visibility` erft door naar alle kinderen en haalt ze in één keer uit de tab-volgorde, zonder dat de breedte-animatie eronder lijdt. */ visibility: hidden; } /* De breedte animeert; visibility springt pas aan het eind om, zodat de inhoud niet halverwege de beweging verdwijnt. */ .panel-sidebar, #hq-nav, .hq-collapsible { transition: width var(--rail-dur) var(--rail-ease), min-width var(--rail-dur) var(--rail-ease), max-width var(--rail-dur) var(--rail-ease), visibility 0s linear 0s; } body.hq-nav-collapsed .panel-sidebar, body.hq-nav-collapsed #hq-nav, body.hq-nav-collapsed .hq-collapsible { transition: width var(--rail-dur) var(--rail-ease), min-width var(--rail-dur) var(--rail-ease), max-width var(--rail-dur) var(--rail-ease), visibility 0s linear var(--rail-dur); } /* ── De kop van de balk: beide knoppen op één rij ── Links helemaal inklappen, rechts naar de smalle rail. Als los sticky element dreven ze uit elkaar en viel de bovenste buiten de sidebar; in een rij staan ze vast aan de balk, in beide standen. */ .hq-nav-tools { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 6px; padding: 8px 8px 0; flex: none; background: var(--surface); } .hq-nav-tools .hq-rail-toggle { position: static; margin: 0 0 0 auto; } body.hq-rail .hq-nav-tools { justify-content: center; padding-left: 0; padding-right: 0; } /* In de rail is er geen plek voor twee knoppen naast elkaar. Daar blijft alleen de rail-knop staan: uitklappen kan daarmee, en helemaal weg is dan een stap die je vanuit de volle balk zet. */ body.hq-rail .hq-nav-tools .hq-rail-toggle { margin: 0 auto; } body.hq-rail .hq-nav-collapse { display: none; } .hq-nav-collapse { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text-s); cursor: pointer; transition: background .15s, color .15s, border-color .15s; } .hq-nav-collapse:hover { background: var(--bg); color: var(--forest); border-color: var(--forest); } .hq-nav-collapse:focus-visible { outline: 2px solid var(--forest); outline-offset: 2px; } .hq-nav-collapse svg { width: 15px; height: 15px; } /* ── De terughaal-knop ── Altijd zichtbaar zodra de balk weg is. In de topbar staat hij op de lijn van de rest van de chrome; heeft een pagina geen topbar, dan plakt hij linksboven tegen de rand. Nooit allebei tegelijk: nav.js zet `hidden`. */ .hq-nav-reopen { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text-s); cursor: pointer; transition: background .15s, color .15s, border-color .15s; } .hq-nav-reopen:hover { background: var(--bg); color: var(--forest); border-color: var(--forest); } .hq-nav-reopen:focus-visible { outline: 2px solid var(--forest); outline-offset: 2px; } .hq-nav-reopen svg { width: 15px; height: 15px; } .hq-nav-reopen[hidden] { display: none; } /* In de topbar: als eerste element, links van de merknaam. */ .hq-nav-reopen.is-inbar { margin-right: 4px; } /* Zonder topbar: los linksboven, boven de inhoud. */ .hq-nav-reopen:not(.is-inbar) { position: fixed; top: 12px; left: 12px; z-index: 60; box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.06)); } @media (prefers-reduced-motion: reduce) { .panel-sidebar, #hq-nav, .hq-collapsible, .hq-nav-collapse, .hq-nav-reopen, .hq-rail-toggle, .hq-rail-toggle svg, .panel-nav-btn .nav-text { transition: none !important; } body.hq-nav-collapsed .panel-sidebar, body.hq-nav-collapsed #hq-nav, body.hq-nav-collapsed .hq-collapsible { transition: none !important; } } /* ── Toasts + in-page bevestiging (HQNav.toast / HQNav.vraag) ───────────── Native alert()/confirm() zijn verboden; dit is de huisstijl-vervanger. */ #hq-toasts { position: fixed; top: 56px; right: 20px; z-index: 720; display: flex; flex-direction: column; gap: 8px; pointer-events: none; } .hq-toast { pointer-events: auto; cursor: pointer; max-width: 380px; padding: 11px 16px; border-radius: 10px; font-size: 13px; line-height: 1.5; font-weight: 500; white-space: pre-line; color: #fff; background: var(--forest, #17433c); box-shadow: 0 8px 24px rgba(17, 24, 39, .18); opacity: 0; transform: translateY(-6px); transition: opacity .2s ease-out, transform .2s ease-out; } .hq-toast.in { opacity: 1; transform: none; } .hq-toast.err { background: #7f1d1d; } .hq-toast.warn { background: #92400e; } @media (prefers-reduced-motion: reduce) { .hq-toast { transition: opacity .15s linear; transform: none; } } .hq-vraag-scrim { position: fixed; inset: 0; z-index: 700; background: rgba(17, 24, 39, .35); display: flex; align-items: center; justify-content: center; } .hq-vraag { background: var(--surface, #fff); border-radius: 12px; padding: 20px 22px; width: min(400px, calc(100vw - 48px)); box-shadow: 0 16px 48px rgba(17, 24, 39, .22); } .hq-vraag p { margin: 0 0 16px; font-size: 13.5px; line-height: 1.55; color: var(--text, #111827); white-space: pre-line; } .hq-vraag-k { display: flex; justify-content: flex-end; gap: 8px; } .hq-vraag-k button { border: 0; border-radius: 8px; padding: 8px 15px; font-size: 13px; font-weight: 600; cursor: pointer; } .hq-vraag-nee { background: var(--surface2, #f0f2f5); color: var(--text, #111827); } .hq-vraag-ja { background: var(--forest, #17433c); color: #fff; } .hq-vraag-ja.gevaar { background: #b91c1c; } /* ============================================================================ PAGINA-SECTIES Vanaf hier staat per pagina de stijl die alleen die pagina gebruikt. Regel: een pagina heeft geen eigen