/* Hubble Klantsysteem — systeembrede extra's */

/* ---------- zijbalk: snelinvoer, meldingen, hulp ---------- */
.side-tools { display: flex; gap: 6px; }
.side-tool { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; height: 40px; min-width: 40px; padding: 0 10px; border-radius: 12px; background: #232220; color: #CFCABF; font-weight: 700; }
.side-tool:hover { background: #2C2A27; color: #fff; }
.side-tool .ic { width: 17px; }
.side-tool .badge { position: absolute; top: -5px; right: -5px; font-size: 10px; padding: 3px 5px; }
.side-qa { flex: 1; justify-content: flex-start; background: var(--orange); color: var(--ink); }
.side-qa:hover { background: #FF7A42; color: var(--ink); }
.side-qa span { flex: 1; text-align: left; font-size: 13px; }
.side-qa kbd { background: rgba(25, 25, 25, .15); color: var(--ink); }
.fab { display: none; }
body.is-login .fab { display: none !important; }

/* ---------- meldingen (lade rechts) ---------- */
.backdrop:has(.modal-drawer) { place-items: stretch end; padding: 0; }
.modal-drawer { width: min(440px, 100%); max-height: none; height: 100vh; border-radius: 22px 0 0 22px; animation: slidein .22s ease; }
@keyframes slidein { from { transform: translateX(40px); opacity: 0; } }
.alerts .f-label:first-child { margin-top: 0; }
.alert-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--paper); margin-bottom: 8px; position: relative; }
.alert-row:hover { background: var(--sand); }
.alert-row > .ic:first-child { width: 20px; height: 20px; flex: none; }
.alert-row > .ic:last-child { color: var(--muted-2); width: 16px; }
.alert-row span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.alert-row b { font-size: 13.5px; }
.alert-row small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alert-row.lv-urgent > .ic:first-child { color: #B7410E; }
.alert-row.lv-let > .ic:first-child { color: #946B00; }
.alert-row.lv-info > .ic:first-child { color: #2B5588; }
.alert-row.is-new::after { content: ''; position: absolute; top: 12px; right: 12px; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); }

/* ---------- slimme snelinvoer ---------- */
.modal-qa { width: min(680px, 100%); align-self: start; margin-top: 12vh; }
.qa-input { display: flex; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.qa-input .ic { width: 22px; height: 22px; color: var(--orange); }
.qa-input input { flex: 1; border: 0; outline: 0; background: none; font-size: 18px; }
.qa-live { padding: 14px 22px; min-height: 58px; }
.qa-prev { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.qa-title { font: 700 16px var(--heading); margin-right: 4px; }
.qa-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 99px; background: var(--sand); font-size: 12.5px; font-weight: 600; }
.qa-chip .ic { width: 13px; }
.qa-kind { background: var(--ink); color: #fff; }
.qa-kind .ic { color: var(--orange); }
.qa-chip.prio-urgent { background: var(--orange); }
.qa-chip.prio-hoog { background: var(--orange-50); color: var(--orange-d); }
.qa-warn { background: #FFF4DA; color: #946B00; }
.qa-help { display: flex; flex-wrap: wrap; gap: 8px 14px; padding: 0 22px 14px; font-size: 12px; color: var(--muted); }

/* ---------- weekplanning ---------- */
.planner { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(180px, 1fr); gap: 10px; overflow-x: auto; padding-bottom: 8px; align-items: start; }
.pl-col { background: var(--sand); border-radius: 16px; padding: 10px; min-height: 280px; transition: background .15s, box-shadow .15s; }
.pl-col.is-over { background: var(--orange-50); box-shadow: inset 0 0 0 2px var(--orange); }
.pl-col h3 { display: flex; align-items: baseline; gap: 6px; font-size: 14px; margin: 2px 4px 8px; }
.pl-col h3 small { color: var(--muted); font: 500 12px var(--body); flex: 1; text-transform: none; }
.pl-col h3 b { background: #fff; border-radius: 99px; padding: 1px 8px; font-size: 12px; }
.pl-today { background: var(--orange-50); box-shadow: inset 0 0 0 2px var(--orange-100); }
.pl-today h3 span::after { content: ' · vandaag'; color: var(--orange-d); font-size: 12px; }
.pl-weekend { opacity: .75; }
.pl-late { background: #FBE7E0; }
.pl-late h3 { color: #B7410E; }
.pl-none { background: #fff; border: 2px dashed var(--sand-2); }
.pl-load { display: flex; gap: 6px; margin: 0 4px 8px; flex-wrap: wrap; }
.pl-who { display: inline-flex; align-items: center; gap: 5px; background: #fff; border-radius: 99px; padding: 2px 8px 2px 2px; box-shadow: 0 1px 2px rgba(25, 25, 25, .06); }
.pl-who .avatar { width: 20px; height: 20px; font-size: 8.5px; box-shadow: none; }
.pl-who b { font: 700 11.5px/1 var(--heading); color: var(--ink); }
.pl-body { display: flex; flex-direction: column; gap: 6px; }
.pl-card { display: flex; align-items: flex-start; gap: 8px; background: #fff; border-radius: 10px; padding: 8px; box-shadow: 0 1px 2px rgba(25, 25, 25, .06); cursor: grab; border-left: 3px solid #D8D1C3; }
.pl-card.is-drag { opacity: .4; }
.pl-card .check { width: 20px; height: 20px; border-radius: 6px; }
.pl-card .check .ic { width: 12px; }
.pl-card .avatar { flex: none; }
.pl-main { flex: 1; min-width: 0; text-align: left; display: flex; flex-direction: column; }
.pl-main b { font-size: 12.5px; line-height: 1.3; font-weight: 600; }
.pl-main small { color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prio-b-urgent { border-left-color: var(--orange); }
.prio-b-hoog { border-left-color: var(--ink); }
.prio-b-laag { border-left-color: transparent; }
.seg button .ic { width: 14px; margin-right: 4px; vertical-align: -2px; }

/* ---------- klantgezondheid ---------- */
.health { display: inline-flex; align-items: center; gap: 5px; font: 700 12px var(--heading); padding: 3px 9px 3px 7px; border-radius: 99px; white-space: nowrap; }
.health i { width: 9px; height: 9px; border-radius: 50%; }
.h-top.health, .h-goed.health { background: var(--green-50); color: var(--green); }
.h-top.health i, .h-goed.health i { background: var(--green); }
.h-let.health { background: #FFF4DA; color: #946B00; }
.h-let.health i { background: #C9962B; }
.h-risico.health { background: #FBE7E0; color: #B7410E; }
.h-risico.health i { background: #B7410E; }
.health-big { display: flex; align-items: center; gap: 6px; font-family: var(--heading); }
.health-big b { font-size: 20px; }
.health-big small { font: 600 12px var(--body); color: var(--muted); }
.health-card.h-risico { border-color: #F2C9B8; }
.health-card.h-risico .ring-fg { stroke: #B7410E; }
.health-card.h-let .ring-fg { stroke: #C9962B; }
.health-card.h-top .ring-fg, .health-card.h-goed .ring-fg { stroke: var(--green); }
.health-list { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.health-list li { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.health-list li span { flex: 1; }
.health-list li small { color: var(--muted-2); font-size: 11px; }
.health-list .ic { width: 15px; flex: none; }
.health-list .ok .ic { color: var(--green); }
.health-list .bad .ic { color: #B7410E; }
.health-list .neutral .ic { color: var(--muted-2); }
.risk-link { background: #FFF4DA; color: #946B00; }

/* ---------- tijdlijn ---------- */
.tl-chips { margin: 4px 0 8px; }
.tl-month { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--orange-d); margin: 14px 0 4px; }
.tl-full .tl-month:first-child { margin-top: 4px; }
.tl-taak .tl-ic { background: var(--green-50); color: var(--green); }
.tl-factuur .tl-ic { background: #E7EEF7; color: #2B5588; }
.tl-bestand .tl-ic { background: var(--sand); color: var(--muted); }
.tl-traject .tl-ic { background: var(--ink); color: var(--orange); }

/* ---------- weekrapport ---------- */
.rp-nav { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 4px 24px 10px; }
.report-doc { background: #fff; max-width: 820px; margin: 0 auto; padding: 44px 48px; border-radius: 6px; box-shadow: var(--shadow); font-size: 13.5px; }
.rp-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 24px; }
.rp-head img { width: 140px; }
.rp-head h1 { font-size: 40px; text-align: right; }
.rp-head h1 span { color: var(--orange); }
.rp-head p { margin: 4px 0 0; color: var(--muted); text-align: right; }
.rp-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 22px; }
.rp-kpis div { background: var(--paper); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; }
.rp-kpis b { font: 700 24px var(--heading); }
.rp-kpis small { color: var(--muted); font-size: 11.5px; }
.report-doc h2 { font-size: 16px; margin: 20px 0 10px; }
.rp-table { width: 100%; border-collapse: collapse; }
.rp-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); border-bottom: 2px solid var(--ink); padding: 6px; }
.rp-table td { padding: 8px 6px; border-bottom: 1px solid #EDE8DE; }
.rp-table td:first-child { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.rp-goals { display: flex; flex-direction: column; gap: 6px; }
.rp-goals div { display: grid; grid-template-columns: 1.4fr 1fr 44px 90px; gap: 10px; align-items: center; }
.rp-goals small { color: var(--muted); font-size: 11.5px; }
.rp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.rp-cols ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; }
.rp-cols small { color: var(--muted); }
.rp-foot { margin-top: 30px; padding-top: 12px; border-top: 1px solid #EDE8DE; font: 700 13px var(--heading); text-align: right; }
.rp-foot i { color: var(--orange); font-style: normal; }
@media print {
  .report-doc, .report-doc * { visibility: visible !important; }
  .report-doc { position: absolute; left: 0; top: 0; width: 100%; max-width: none; box-shadow: none; padding: 0 8mm; }
}

/* ---------- tijdmachine & hulp ---------- */
.tm-list { display: flex; flex-direction: column; margin: 12px 0; max-height: 50vh; overflow: auto; }
.tm-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid #F1ECE2; }
.tm-ic { width: 34px; height: 34px; border-radius: 10px; background: var(--sand); display: grid; place-items: center; color: var(--muted); flex: none; }
.tm-ic .ic { width: 16px; }
.tm-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tm-main small { color: var(--muted); font-size: 12px; }
.help-keys li { gap: 4px; }

@media (max-width: 860px) {
  .fab { display: grid; place-items: center; position: fixed; right: 16px; bottom: 84px; width: 56px; height: 56px; border-radius: 18px; background: var(--orange); color: var(--ink); font: 700 30px/1 var(--heading); box-shadow: var(--shadow-lg); z-index: 45; }
  .modal-drawer { border-radius: 22px 22px 0 0; height: auto; max-height: 85vh; }
  .backdrop:has(.modal-drawer) { place-items: end stretch; }
  .rp-kpis { grid-template-columns: 1fr 1fr; }
  .rp-cols { grid-template-columns: 1fr; }
  .report-doc { padding: 22px; }
  .planner { grid-auto-columns: 76vw; }
}

/* kolommen mogen nooit breder worden dan het scherm */
.dash-main, .dash-side, .col { min-width: 0; }
@media (max-width: 1100px) { .dash-grid, .client-grid-2 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 860px) {
  .nav-item { min-width: 0; }
  .hero-actions { flex-wrap: wrap; }
  .hero-actions .btn { flex: 1 1 140px; }
}
/* verborgen invoervelden binnen hun eigen label houden (anders rekken ze de pagina op) */
.toggle, .seg-form label, .swatches label, .icon-pick label, .p-outcomes label { position: relative; }
.side-qa span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Periode-navigatie: pijlen en label blijven bij elkaar */
.period-nav { display: flex; align-items: center; gap: 6px; min-width: 0; }
.period-nav .period-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Bestanden: mappen per maand */
.card-head .fm-filter { margin-left: auto; height: 30px; border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 0 8px; font-size: 12.5px; }
.card-head .fm-filter + .muted { margin-left: 0; }
.fm-pickers { display: flex; gap: 8px; flex-wrap: wrap; }
.fm-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.fm { border: 1px solid var(--line); border-radius: 14px; background: #fff; transition: border-color .15s, background .15s, box-shadow .15s; }
.fm.is-cur { border-color: var(--orange-100); box-shadow: inset 3px 0 0 var(--orange); }
.fm.is-over { border-color: var(--orange); background: var(--orange-50); box-shadow: 0 0 0 2px var(--orange-100); }
.fm-head { display: flex; align-items: center; gap: 4px; padding: 4px 6px 4px 4px; }
.fm-toggle { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 10px; text-align: left; }
.fm-toggle:hover { background: var(--paper); }
.fm-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--sand); color: var(--muted); flex: none; }
.fm.is-cur .fm-ic { background: var(--orange-50); color: var(--orange-d); }
.fm.is-future .fm-ic { background: #E6EEF3; color: #2F6F8F; }
.fm-ic .ic { width: 18px; height: 18px; }
.fm-title { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; }
.fm-title b { font: 700 14.5px var(--heading); }
.fm-title em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--orange-d); background: var(--orange-50); border-radius: 99px; padding: 1px 7px; }
.fm.is-future .fm-title em { color: #2F6F8F; background: #E6EEF3; }
.fm-title small { flex-basis: 100%; color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fm-n { min-width: 24px; height: 22px; border-radius: 99px; background: var(--sand); display: grid; place-items: center; font: 700 12px var(--heading); padding: 0 7px; }
.fm-chev { width: 18px; height: 18px; color: var(--muted); transition: transform .2s; flex: none; }
.fm.is-open .fm-chev { transform: rotate(180deg); }
.fm-body { padding: 0 10px 8px 12px; border-top: 1px solid #F1ECE2; }
.fm-body .file-list { margin-top: 2px; }
.fm-empty { margin: 10px 2px 4px; color: var(--muted); font-size: 12.5px; }
.file-row[draggable="true"] { cursor: grab; }
.file-row.is-drag { opacity: .4; }
.fm-tip { margin: 10px 2px 0; color: var(--muted); font-size: 12px; }

/* ---------- Online versie ---------- */
.sync-state { display: flex; align-items: center; gap: 8px; font-size: 12px; color: rgba(255, 255, 255, .62); padding: 0 4px; min-height: 22px; }
.sync-state > i { width: 8px; height: 8px; border-radius: 50%; background: #5FBF8B; flex: none; box-shadow: 0 0 0 3px rgba(95, 191, 139, .18); }
.sync-state.is-saving > i { background: var(--orange); box-shadow: 0 0 0 3px rgba(255, 104, 44, .2); animation: syncPulse 1s ease-in-out infinite; }
.sync-state.is-offline > i { background: #E0561C; box-shadow: none; }
.sync-state.is-offline { color: #FFB08F; }
.sync-state > span:first-of-type { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sync-online { display: flex; }
.sync-online .avatar { width: 20px; height: 20px; font-size: 8.5px; box-shadow: 0 0 0 2px var(--ink); }
.sync-online .avatar + .avatar { margin-left: -5px; }
@keyframes syncPulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .sync-state.is-saving > i { animation: none; } }
html.is-offline body::before { content: 'Geen verbinding — je wijzigingen worden opgeslagen zodra je weer online bent'; position: fixed; top: 0; left: 0; right: 0; z-index: 90; background: #E0561C; color: #fff; font: 600 12.5px/1.3 var(--body); text-align: center; padding: 6px 12px; }

.login-note { background: var(--orange-50); color: var(--orange-d); border-radius: 10px; padding: 10px 12px; font-size: 13.5px; font-weight: 600; margin: 0 0 4px; }
.login-foot { margin: 2px 0 0; text-align: center; }
.pw-meter { display: flex; align-items: center; gap: 10px; margin-top: -6px; }
.pw-meter i { flex: 1; height: 6px; border-radius: 99px; background: var(--sand-2); position: relative; overflow: hidden; }
.pw-meter i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; transition: width .25s, background .25s; }
.pw-meter[data-s="1"] i::after { width: 25%; background: #E0561C; }
.pw-meter[data-s="2"] i::after { width: 50%; background: #E5A13B; }
.pw-meter[data-s="3"] i::after { width: 75%; background: #5FA36F; }
.pw-meter[data-s="4"] i::after { width: 100%; background: var(--green); }
.pw-meter span { font-size: 12px; font-weight: 600; color: var(--muted); min-width: 64px; text-align: right; }

.copy-box { display: flex; gap: 8px; }
.copy-box input { flex: 1; min-width: 0; height: 42px; border: 1px solid var(--line); border-radius: 10px; padding: 0 12px; font: 500 13px var(--body); background: var(--paper); }
@media (max-width: 560px) { .copy-box { flex-direction: column; } }

.sec-list { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.sec-list li { display: flex; gap: 12px; align-items: flex-start; }
.sec-list li > .ic { width: 34px; height: 34px; padding: 8px; border-radius: 10px; background: var(--green-50); color: var(--green); flex: none; }
.sec-list span { display: flex; flex-direction: column; font-size: 13.5px; }
.sec-list small { color: var(--muted); font-size: 12.5px; margin-top: 2px; }

.audit-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.audit-table th { text-align: left; font-size: 11.5px; color: var(--muted); font-weight: 700; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.audit-table td { padding: 8px; border-bottom: 1px solid #F1ECE2; white-space: nowrap; }
.audit-table td:nth-child(3) { white-space: normal; }
.audit-table tr.is-warn td:nth-child(3) { color: #B7410E; font-weight: 600; }