/* BaseDesk UI-stijlen - deel 2 (na de typografielagen)
   In v14.61 ongewijzigd uit index.html geextraheerd. Volgorde en inhoud zijn identiek;
   elk oorspronkelijk <style>-blok staat hieronder onder zijn eigen id. */
/* ===== v1432-mobile-navigation-tap-highlight ===== */
/* V14.32 — voorkom de korte donkere iOS/WebKit-tapmarkering rond knoppen in de mobiele onderbalk. */
@media(max-width:760px){
  #mobilebar button{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
  #mobilebar button:focus:not(:focus-visible){outline:none!important;box-shadow:none!important}
  #mobilebar button:focus-visible{outline:2px solid color-mix(in srgb,var(--accent) 55%,transparent);outline-offset:-3px}
}

/* ===== v14.79-passende-bestandskeuze ===== */
.document-upload-picker{
  width:100%;min-height:58px;display:grid;grid-template-columns:36px minmax(0,1fr);gap:11px;align-items:center;
  padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--text);
  cursor:pointer;transition:border-color .16s ease,background .16s ease,box-shadow .16s ease;
}
.document-upload-picker:hover{border-color:color-mix(in srgb,var(--accent) 35%,var(--line));background:color-mix(in srgb,var(--accent) 3%,var(--panel))}
.document-upload-picker:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent)}
.document-upload-picker>input[type="file"]{position:absolute;width:1px!important;height:1px;padding:0!important;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.document-upload-picker-icon{width:36px;height:36px;display:grid;place-items:center;border-radius:10px;background:color-mix(in srgb,var(--accent) 10%,var(--panel));color:var(--accent);font-size:18px;font-weight:750;line-height:1}
.document-upload-picker-copy{min-width:0;display:grid;gap:2px}
.document-upload-picker-copy b{font-size:13px;line-height:1.25;font-weight:750}
.document-upload-picker-copy small{display:block;min-width:0;overflow:hidden;color:var(--muted);font-size:11px;line-height:1.3;font-weight:500;white-space:nowrap;text-overflow:ellipsis}
html[data-appearance="dark"] .document-upload-picker{background:var(--panel);border-color:var(--line)}
@media(max-width:520px){
  .document-upload-picker{min-height:54px;grid-template-columns:34px minmax(0,1fr);gap:9px;padding:9px 10px}
  .document-upload-picker-icon{width:34px;height:34px;border-radius:9px}
}
/* ===== v1433-mobile-navigation-transparency ===== */
/* V14.33 — de mobiele onderbalk is 30% transparant; navigatie-inhoud blijft volledig dekkend. */
@media(max-width:760px){
  #mobilebar{background:color-mix(in srgb,var(--panel) 70%,transparent)!important;-webkit-backdrop-filter:blur(10px) saturate(112%);backdrop-filter:blur(10px) saturate(112%)}
  #mobilebar button{background:transparent!important;opacity:1}
  #mobilebar .mobile-nav-icon,
  #mobilebar button>span:last-child,
  #mobilebar .mobile-nav-count{opacity:1}
}
/* ===== v1436-mobile-notification-counts ===== */
/* V14.36 — mobiele meldingscijfers volgen de rustige cijferstijl van de linkernavigatie. */
@media(max-width:760px){
  #mobilebar .mobile-nav-icon>.mobile-nav-count{display:block;right:-5px!important;top:-3px!important;min-width:0!important;width:auto!important;height:auto!important;padding:0!important;margin:0;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:color-mix(in srgb,var(--text) 62%,transparent)!important;font-size:9px!important;line-height:1!important;font-weight:700!important;letter-spacing:.01em!important;font-variant-numeric:tabular-nums;place-items:initial;text-shadow:0 1px 0 var(--panel)}
  #mobilebar button.active .mobile-nav-count{color:color-mix(in srgb,var(--accent) 78%,var(--text))!important}
}
/* ===== v1467-mobile-pinned-scroll-navigation ===== */
/* V14.67 — Dashboard blijft vast; alle overige hoofdonderdelen staan in een horizontaal veegbare rij. */
@media(max-width:760px){
  #mobilebar{
    display:flex;
    grid-template-columns:none;
    align-items:stretch;
    justify-content:flex-start;
    gap:0;
    padding:6px 8px calc(6px + env(safe-area-inset-bottom));
    overflow:hidden;
  }
  #mobilebar .mobilebar-pinned{
    flex:0 0 20%;
    width:20%;
    min-width:0;
    display:flex;
    padding:0;
    border:0;
    background:transparent;
    box-shadow:none;
    position:relative;
    z-index:2;
  }
  #mobilebar .mobilebar-pinned:after{
    content:"";
    position:absolute;
    top:9px;
    right:0;
    bottom:9px;
    width:1px;
    background:color-mix(in srgb,var(--line) 62%,transparent);
    pointer-events:none;
  }
  #mobilebar .mobilebar-scroll{
    flex:1 1 auto;
    min-width:0;
    display:flex;
    align-items:stretch;
    overflow-x:auto;
    overflow-y:hidden;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    scroll-snap-type:x proximity;
    scroll-padding-inline:4px;
    touch-action:pan-x;
  }
  #mobilebar .mobilebar-scroll::-webkit-scrollbar{display:none}
  #mobilebar .mobilebar-pinned button,
  #mobilebar .mobilebar-scroll button{
    scroll-snap-align:start;
  }
  #mobilebar .mobilebar-pinned button{
    flex:1 1 auto;
    width:100%;
    min-width:0;
    max-width:none;
  }
  #mobilebar .mobilebar-scroll button{
    flex:0 0 25%;
    width:25%;
    min-width:25%;
    max-width:25%;
  }
}
/* ===== v1437-mobile-drawer-collapse ===== */
/* V14.37 — duidelijke, bereikbare inklapknop in de kop van het mobiele linkermenu. */
@media(max-width:760px){
  .mobile-drawer .drawer-card{position:relative!important}
  .mobile-drawer-collapse{position:absolute!important;top:calc(17px + env(safe-area-inset-top))!important;right:14px!important;z-index:3;width:40px!important;height:40px!important;padding:0!important;border:1px solid rgba(255,255,255,.13)!important;border-radius:12px!important;background:rgba(255,255,255,.06)!important;color:rgba(238,244,252,.86)!important;display:grid;place-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
  .mobile-drawer-collapse svg{width:19px!important;height:19px!important;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .mobile-drawer-collapse:active{background:rgba(255,255,255,.13)!important}
  .mobile-drawer-collapse:focus-visible{outline:2px solid #6ca0ff!important;outline-offset:2px!important}
  .mobile-drawer .mobile-brand-clean{padding-right:54px!important}
}
@media(min-width:761px){
  .mobile-drawer-collapse{display:none}
}
/* ===== v1438-dashboard-urgent-outline-only ===== */
/* V14.38 — urgentie kleurt alleen de tegelrand; het oranje meldingsbolletje blijft behouden. */
#dashboard .dashboard-kpi-urgent{background:var(--panel);border-color:color-mix(in srgb,#d97706 38%,var(--line))}
html[data-appearance="dark"] #dashboard .dashboard-kpi-urgent{background:var(--panel);border-color:color-mix(in srgb,#d97706 46%,var(--line))}
/* ===== v1465-dashboard-urgent-hover ===== */
/* V14.65 — urgente tegels houden hun warme betekenis ook tijdens hover. */
#dashboard .dashboard-link.dashboard-kpi-urgent:hover{
  background:color-mix(in srgb,#d97706 4%,var(--panel));
  border-color:color-mix(in srgb,#d97706 48%,var(--line));
}
html[data-appearance="dark"] #dashboard .dashboard-link.dashboard-kpi-urgent:hover{
  background:color-mix(in srgb,#d97706 7%,var(--panel));
  border-color:color-mix(in srgb,#d97706 56%,var(--line));
}
/* ===== v1442-case-handler-in-heading ===== */
/* V14.42 — dossierbehandelaar blijft in de vaste dossierkop op alle tabbladen zichtbaar. */
.case-heading-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.case-heading-handler{display:inline-flex;align-items:center;gap:4px;color:var(--muted)}
.case-heading-handler svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.case-heading-handler b{color:var(--text);font-weight:750}
@media(max-width:760px){
  .case-heading-meta{column-gap:5px;row-gap:4px}
  .case-heading-meta>.case-heading-separator:nth-child(4){display:none}
  .case-heading-handler{flex-basis:100%;margin-top:1px}
}
/* ===== v1443-case-important-note ===== */
/* V14.43 — belangrijke dossierinformatie blijft direct onder de vaste kop zichtbaar. */
.case-important-note{display:grid;grid-template-columns:24px minmax(0,1fr) 30px;align-items:center;gap:9px;margin:12px 0 2px;padding:8px 10px;border:1px solid color-mix(in srgb,#d97706 22%,var(--line));border-radius:9px;background:var(--panel);color:var(--text);box-sizing:border-box}
.case-important-note[hidden]{display:none!important}
.case-important-note-icon{display:grid;place-items:center;width:20px;height:20px;border:1px solid color-mix(in srgb,#d97706 46%,var(--line));border-radius:50%;background:transparent;color:#b86108;font-size:11px;font-weight:850}
.case-important-note>div{min-width:0;display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.case-important-note b{font-size:11px;white-space:nowrap}
.case-important-note>div>span{font-size:10px;line-height:1.4;color:var(--text)}
.case-important-note>button{width:30px;height:30px;padding:0;border:0;border-radius:8px;background:transparent;color:var(--muted);font:inherit;font-size:18px;cursor:pointer}
.case-important-note>button:hover{background:color-mix(in srgb,#d97706 10%,transparent);color:var(--text)}
.case-important-note-field-help{display:block;margin-top:5px;color:var(--muted);font-size:9px;line-height:1.35}
.form textarea.case-important-note-input{min-height:42px!important;height:42px;padding-top:10px!important;padding-bottom:10px!important;resize:vertical}
html[data-appearance="dark"] .case-important-note{background:var(--panel)}
@media(max-width:760px){
  .case-important-note{grid-template-columns:22px minmax(0,1fr) 28px;margin-top:12px;padding:9px 8px;align-items:start}
  .case-important-note>div{display:grid;gap:3px}
  .case-important-note b{white-space:normal}
}
/* ===== v1446-dossier-note-indicator ===== */
/* V14.46 — belangrijke dossieropmerking is ook in beide dossieroverzichten herkenbaar. */
.dossier-overview-name{display:flex;align-items:center;gap:5px;min-width:0}
.dossier-overview-name h3{margin-bottom:0!important}
.dossier-important-note-indicator{position:relative;display:inline-grid;place-items:center;flex:0 0 20px;width:20px;height:20px;padding:0;border:0;border-radius:6px;background:transparent;box-shadow:none;color:color-mix(in srgb,#b86108 58%,var(--muted));font:inherit;line-height:1;opacity:.82;cursor:pointer;z-index:3;appearance:none;-webkit-appearance:none}
.dossier-important-note-indicator::before{content:none!important;display:none!important}
.dossier-important-note-indicator>svg{display:block;width:6px;height:10px;overflow:visible;fill:currentColor;stroke:currentColor;stroke-width:1.25;stroke-linecap:round}
.dossier-important-note-indicator:hover,.dossier-important-note-indicator:focus-visible,.dossier-important-note-indicator.open{opacity:1;color:#a85b0b;background:var(--bg)}
.dossier-overview-row td:first-child .dossier-overview-name{width:100%}
.dossier-important-note-indicator::after{content:attr(data-note);position:absolute;left:-4px;top:calc(100% + 7px);bottom:auto;width:max-content;max-width:min(310px,72vw);padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--text);box-shadow:0 7px 18px rgba(15,23,42,.12);font-size:10px;font-weight:500;line-height:1.4;text-align:left;white-space:normal;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-2px);transition:opacity .12s ease,transform .12s ease,visibility 0s linear .12s}
.dossier-important-note-indicator:hover::after,.dossier-important-note-indicator:focus-visible::after,.dossier-important-note-indicator.open::after{opacity:1;visibility:visible;transform:translateY(0);transition-delay:0s}
@media(max-width:760px){
  .dossier-important-note-indicator::after{left:-4px;max-width:68vw}
}
/* ===== v1544-dossier-attention-counts ===== */
/* Alleen dossiers met actuele aandachtspunten krijgen een rustige, vaste iconengroep. */
.dossier-attention-group{display:inline-flex;align-items:center;gap:3px;margin-left:auto;flex:0 0 auto}
.dossier-attention-badge{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 20px;width:20px;height:20px;padding:0;border:0;border-radius:6px;box-sizing:border-box;line-height:1;cursor:help;outline:0}
.dossier-attention-badge svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.dossier-attention-badge.task{background:transparent;border-color:transparent;color:#b42318}
.dossier-attention-badge.agenda{background:transparent;border-color:transparent;color:var(--accent)}
.dossier-attention-badge:hover,.dossier-attention-badge:focus-visible{background:var(--bg)}
.dossier-attention-badge::after{content:attr(data-tooltip);position:absolute;left:50%;top:calc(100% + 7px);z-index:30;width:max-content;max-width:min(250px,72vw);padding:7px 9px;border:1px solid var(--line);border-radius:7px;background:var(--panel);color:var(--text);box-shadow:0 7px 18px rgba(15,23,42,.14);font-size:9px;font-weight:600;line-height:1.35;text-align:left;white-space:normal;opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,-2px);transition:opacity .12s ease,transform .12s ease,visibility 0s linear .12s}
.dossier-attention-badge:hover::after,.dossier-attention-badge:focus-visible::after{opacity:1;visibility:visible;transform:translate(-50%,0);transition-delay:0s}
.dossier-attention-badge:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 30%,transparent)}
.dossier-overview-row td:first-child .dossier-attention-badge::after{left:auto;right:0;transform:translateY(-2px)}
.dossier-overview-row td:first-child .dossier-attention-badge:hover::after,.dossier-overview-row td:first-child .dossier-attention-badge:focus-visible::after{transform:translateY(0)}
.dossier-overview-row td:first-child .dossier-attention-group>*::after,.dossier-overview-card .dossier-attention-group>*::after{left:auto;right:0;transform:translateY(-2px)}
.dossier-overview-row td:first-child .dossier-attention-group>.dossier-important-note-indicator::after{left:0;right:auto}
.dossier-overview-row td:first-child .dossier-attention-group>:hover::after,.dossier-overview-row td:first-child .dossier-attention-group>:focus-visible::after,.dossier-overview-row td:first-child .dossier-attention-group>.open::after,.dossier-overview-card .dossier-attention-group>:hover::after,.dossier-overview-card .dossier-attention-group>:focus-visible::after,.dossier-overview-card .dossier-attention-group>.open::after{transform:translateY(0)}
.dossier-overview-card .dossier-card-head>div:first-child{min-width:0;flex:1 1 auto}
.dossier-overview-card .dossier-overview-name{width:100%;max-width:100%}
html[data-appearance="dark"] .dossier-attention-badge.task{color:#fda29b;background:transparent;border-color:transparent}
@media(max-width:760px){
  .dossier-attention-badge{flex-basis:20px;width:20px;height:20px;padding:0}
  .dossier-attention-badge::after{left:auto;right:0;transform:translateY(-2px)}
  .dossier-attention-badge:hover::after,.dossier-attention-badge:focus-visible::after{transform:translateY(0)}
}
/* ===== v1451-case-overview-inline-typography ===== */
/* V14.51 — inline bewerken behoudt exact de typografische hiërarchie van de weergavestand. */
.case-overview-editable.editing>.case-overview-inline-input,
.case-overview-inline-input{background:transparent!important;color:inherit!important;border:0!important;border-radius:4px!important;box-shadow:none!important;outline:1px solid color-mix(in srgb,var(--accent) 68%,var(--line))!important;outline-offset:0!important;font-family:inherit!important;font-size:inherit!important;font-weight:inherit!important;letter-spacing:inherit!important;line-height:inherit!important}
.case-overview-stat>.v.editing>.case-overview-inline-input{padding:0 2px!important;font-size:18px!important;font-weight:760!important;line-height:1.25!important}
.case-overview-dynamic-grid .case-overview-stat>.v.editing>input.case-overview-inline-input{font-family:inherit!important;font-size:18px!important;font-weight:760!important;line-height:1.25!important}
.case-overview-insurer-edit.editing{height:46px!important;min-height:46px!important}
.case-overview-insurer-editor{display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:30px 16px!important;gap:0!important;align-items:center!important}
.case-overview-insurer-editor .case-overview-insurer-name-input{width:100%!important;height:30px!important;min-height:30px!important;padding:0 2px!important;font-size:18px!important;font-weight:760!important;line-height:1.25!important;outline:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important}
.case-overview-insurer-editor .case-overview-insurer-ref-input{width:100%!important;height:16px!important;min-height:16px!important;padding:0 2px!important;font-size:9px!important;font-weight:500!important;line-height:16px!important;color:var(--muted)!important;outline:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important}
.case-overview-insurer-editor .case-overview-inline-input:focus{outline:0!important;box-shadow:inset 0 -1px 0 color-mix(in srgb,var(--accent) 58%,transparent)!important}
.case-overview-insurer-editor .case-overview-inline-input::placeholder{color:var(--muted)!important;opacity:1!important}
html body #v4body#v4body .case-overview-insurer-editor .case-overview-insurer-name-input.case-overview-inline-input{font-size:18px!important;font-weight:760!important;line-height:1.25!important}
html body #v4body#v4body .case-overview-insurer-editor .case-overview-insurer-ref-input.case-overview-inline-input{font-size:12px!important;font-weight:500!important;line-height:16px!important}
.case-overview-summary-body.editing>textarea.case-overview-inline-input{padding:0!important;font-family:inherit!important;font-size:inherit!important;font-weight:inherit!important;line-height:inherit!important;color:inherit!important}
@media(max-width:760px){
  .case-overview-insurer-editor .case-overview-insurer-name-input{font-size:18px!important}
}
/* ===== v1434-global-search-source-picker ===== */
/* V14.34 — compacte, afgebakende dossierbronkeuze zonder overerving van het zoekicoon. */
#globalSearchWrap .search-results span{position:static;left:auto;top:auto}
.search-source-picker-heading{display:block;padding:10px 12px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--accent) 3%,var(--panel))}
.search-source-picker-heading>div:last-child{min-width:0}
.search-source-picker-heading b{display:block;color:var(--text);font-size:11px;line-height:1.25;font-weight:800}
.search-source-picker-heading small{display:block;margin-top:2px;color:var(--muted);font-size:9px;line-height:1.3;font-weight:500}
.search-result.search-source-option{width:100%;min-height:56px;display:grid;grid-template-columns:minmax(0,1fr) max-content;gap:10px;align-items:center;padding:9px 12px;border:0;border-bottom:1px solid color-mix(in srgb,var(--line) 76%,transparent);background:var(--panel);color:var(--text);text-align:left}
.search-result.search-source-option:last-child{border-bottom:0}
.search-result.search-source-option:hover,.search-result.search-source-option:focus-visible,.search-result.search-source-option.keyboard-active{background:color-mix(in srgb,var(--accent) 6%,var(--panel));outline:none}
.search-source-option-copy{min-width:0;display:grid;gap:3px}
.search-source-option-name{min-width:0;overflow:hidden;color:var(--text);font-size:12px;line-height:1.3;font-weight:800;white-space:nowrap;text-overflow:ellipsis}
.search-source-option-meta{min-width:0;display:flex;gap:5px;align-items:center;overflow:hidden;color:var(--muted);font-size:10px;line-height:1.3;white-space:nowrap}
.search-source-option-meta span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis}
.search-source-option-status{justify-self:end;max-width:125px;overflow:hidden;font-size:10px;white-space:nowrap;text-overflow:ellipsis}
html[data-appearance="dark"] .search-source-picker-heading{background:color-mix(in srgb,var(--accent) 8%,var(--panel))}
@media(max-width:520px){
  .search-source-picker-heading small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .search-result.search-source-option{grid-template-columns:minmax(0,1fr);gap:6px}
  .search-source-option-status{grid-column:1;justify-self:start;max-width:100%;font-size:9px}
}/* ===== v14-69-sidebar-color-contrast ===== */
/* Een lichte eigen zijbalkkleur krijgt automatisch dezelfde leesbaarheid als de standaardkleur. */
.sidebar{
  background:var(--nav);
  color:var(--nav-ink,#fff);
}
.sidebar .brand h1,.sidebar .brand-home-link{color:var(--nav-ink,#fff)}
.sidebar .sidebar-profile-copy b{color:var(--nav-ink,#fff)}
.sidebar .brand small,.sidebar .sidebar-profile-copy small,.sidebar .sidebar-profile-chevron{color:var(--nav-muted,#b9c6d8)}
.sidebar .profile{border-color:var(--nav-line,rgba(255,255,255,.15))}
.sidebar .nav button{color:var(--nav-control,#e8eef6)}
.sidebar .nav button.active,.sidebar .nav button:hover{color:var(--nav-ink,#fff)}
.sidebar .nav-recent-case{color:var(--nav-muted,#b9c6d8)}
.sidebar .nav-recent-case:hover,.sidebar .nav-recent-case.active{background:var(--nav-hover,rgba(255,255,255,.08));color:var(--nav-ink,#fff)}
.sidebar .nav button.active .nav-count:not(.overdue){background:color-mix(in srgb,var(--nav-ink,#fff) 18%,transparent);color:var(--nav-ink,#fff)}
.sidebar .sidebar-time-goal{border-color:var(--nav-line,rgba(255,255,255,.10));background:color-mix(in srgb,#000 30%,var(--nav))}
.sidebar .sidebar-time-goal-track{background:color-mix(in srgb,var(--nav-ink,#fff) 14%,transparent)}
.sidebar .sidebar-collapse-lock{border-color:var(--nav-line,rgba(255,255,255,.14));background:var(--nav-hover,rgba(255,255,255,.055));color:var(--nav-muted,#cbd7e7)}
.sidebar .sidebar-collapse-lock:hover{background:color-mix(in srgb,var(--nav-ink,#fff) 11%,transparent);color:var(--nav-ink,#fff);border-color:color-mix(in srgb,var(--nav-ink,#fff) 25%,transparent)}
@media(min-width:761px){
  #nav>button .nav-hover-actions{background:transparent}
  #nav>button .nav-hover-action{color:color-mix(in srgb,var(--nav-ink,#fff) 78%,transparent)}
  #nav>button .nav-hover-action:hover,#nav>button .nav-hover-action:focus-visible{color:var(--nav-ink,#fff);background:color-mix(in srgb,var(--nav-ink,#fff) 10%,transparent);border-color:color-mix(in srgb,var(--nav-ink,#fff) 12%,transparent)}
}
@media(max-width:760px){
  .mobile-drawer .drawer-card{
    background:var(--nav);
    color:var(--nav-ink,#fff);
  }
  html.sidebar-auto-collapse .mobile-drawer .sidebar-profile-copy,html.sidebar-auto-collapse .mobile-drawer .sidebar-profile-chevron,.mobile-drawer .sidebar-profile-copy,.mobile-drawer .sidebar-profile-chevron{opacity:1;visibility:visible}
  .mobile-drawer .mobile-brand-clean h1,.mobile-drawer .brand h1{color:var(--nav-ink,#fff)}
  .mobile-drawer .mobile-brand-clean .brand-accent-line{background:var(--accent)}
  .mobile-drawer .sidebar-profile-copy b{color:var(--nav-ink,#fff)}
  .mobile-drawer .brand small,.mobile-drawer .sidebar-profile-copy small,.mobile-drawer .sidebar-profile-chevron{color:var(--nav-muted,#b9c6d8)}
  .mobile-drawer .mobile-sidebar-profile{border-color:var(--nav-line,rgba(255,255,255,.10))}
  .mobile-drawer .sidebar-time-goal{border-color:var(--nav-line,rgba(255,255,255,.10))}
  .mobile-drawer .sidebar-time-goal-track{background:color-mix(in srgb,var(--nav-ink,#fff) 14%,transparent)}
  .mobile-drawer .nav button{color:var(--nav-control,#e8eef6)}
  .mobile-drawer .nav button.active,.mobile-drawer .nav button:hover,.mobile-drawer .nav button:active{color:var(--nav-ink,#fff)}
}

/* ===== v1484-full-width-topbar-trial ===== */
/* V14.84 — proefopzet: de desktopbovenbalk loopt over de volledige schermbreedte;
   de klassieke zijbalk begint daar werkelijk onder. Mobiel blijft ongewijzigd. */
@media(min-width:761px){
  :root{--basedesk-desktop-topbar-height:69px}
  .topbar{
    position:fixed!important;
    inset:0 0 auto 0!important;
    width:100%!important;
    height:var(--basedesk-desktop-topbar-height)!important;
    z-index:100;
  }
  .topbar-brand-home{
    display:flex;
    flex:0 1 clamp(128px,16vw,210px);
    min-width:112px;
    height:48px;
    align-items:center;
    justify-content:flex-start;
    padding:0 8px 0 0;
    border:0;
    background:transparent;
    color:var(--text);
    cursor:pointer;
  }
  .topbar-brand-home:focus-visible{
    outline:2px solid color-mix(in srgb,var(--accent) 55%,transparent);
    outline-offset:3px;
    border-radius:8px;
  }
  .topbar .search{min-width:150px}

  html.desktop-navigation-classic .main,
  html.desktop-navigation-modern .main{padding-top:var(--basedesk-desktop-topbar-height)}
  html.desktop-navigation-classic .main{grid-column:2}
  html.desktop-navigation-classic .sidebar{
    position:fixed!important;
    top:var(--basedesk-desktop-topbar-height)!important;
    bottom:0!important;
    left:0!important;
    width:250px;
    height:calc(100vh - var(--basedesk-desktop-topbar-height))!important;
    padding-top:18px!important;
    z-index:40!important;
  }
  html.desktop-navigation-classic .sidebar>.brand{display:none!important}
  html.desktop-navigation-classic.sidebar-auto-collapse:not(.sidebar-navigation-settings-open,.sidebar-context-menu-open) .sidebar:not(:hover):not(:focus-within),
  html.desktop-navigation-classic.sidebar-locked-collapsed .sidebar{width:68px!important}
  html.desktop-navigation-classic.sidebar-auto-collapse:not(.sidebar-locked-collapsed) .sidebar:hover,
  html.desktop-navigation-classic.sidebar-auto-collapse:not(.sidebar-locked-collapsed) .sidebar:focus-within{
    width:250px!important;
    background:color-mix(in srgb,var(--nav) 92%,transparent);
    -webkit-backdrop-filter:blur(10px) saturate(112%);
    backdrop-filter:blur(10px) saturate(112%);
  }
  html.desktop-navigation-classic.sidebar-auto-collapse:is(.sidebar-navigation-settings-open,.sidebar-context-menu-open):not(.sidebar-locked-collapsed) .sidebar{
    width:250px!important;
    background:color-mix(in srgb,var(--nav) 92%,transparent);
    -webkit-backdrop-filter:blur(10px) saturate(112%);
    backdrop-filter:blur(10px) saturate(112%);
  }
}
@media(max-width:760px){
  .topbar-brand-home{display:none!important}
}

/* ===== v1485-animated-shortcut-stack ===== */
/* V14.85 — snelkoppelingen waaieren in volgorde uit; de stapel verandert tijdens
   de geopende toestand in een rustige terugwijzende inklapchevron. */
#topbarShortcuts .shortcut-stack-cards,
#topbarShortcuts .shortcut-stack-collapse-glyph{
  transform-box:fill-box;
  transform-origin:center;
  transition:opacity .14s ease,transform .24s cubic-bezier(.2,.72,.2,1);
}
#topbarShortcuts .shortcut-stack-cards{opacity:1;transform:translateX(0) scale(1) rotate(0)}
#topbarShortcuts .shortcut-stack-collapse-glyph{opacity:0;transform:translateX(-3px) scale(.72);fill:none}
#topbarShortcuts.has-stack.is-hovered .shortcut-stack-cards,
#topbarShortcuts.has-stack.is-open .shortcut-stack-cards,
#topbarShortcuts.has-stack:focus-within .shortcut-stack-cards{opacity:0;transform:translateX(3px) scale(.72) rotate(7deg)}
#topbarShortcuts.has-stack.is-hovered .shortcut-stack-collapse-glyph,
#topbarShortcuts.has-stack.is-open .shortcut-stack-collapse-glyph,
#topbarShortcuts.has-stack:focus-within .shortcut-stack-collapse-glyph{opacity:1;transform:translateX(0) scale(1)}
#topbarShortcuts.has-stack.is-hovered .topbar-shortcut-stack-trigger,
#topbarShortcuts.has-stack.is-open .topbar-shortcut-stack-trigger,
#topbarShortcuts.has-stack:focus-within .topbar-shortcut-stack-trigger{
  background:color-mix(in srgb,var(--accent) 7%,var(--panel))!important;
  border-color:color-mix(in srgb,var(--accent) 24%,var(--line))!important;
  color:var(--accent)!important;
}
#topbarShortcuts.has-stack .topbar-shortcut-action,
#topbarShortcuts.has-stack .topbar-scratchpad-btn.topbar-shortcut-action{
  transition:
    transform .24s cubic-bezier(.2,.72,.2,1) var(--shortcut-close-delay,0ms),
    opacity .14s ease var(--shortcut-close-delay,0ms),
    background-color .15s ease,
    border-color .15s ease,
    color .15s ease;
}
#topbarShortcuts.has-stack.is-hovered .topbar-shortcut-action,
#topbarShortcuts.has-stack.is-open .topbar-shortcut-action,
#topbarShortcuts.has-stack:focus-within .topbar-shortcut-action,
#topbarShortcuts.has-stack.is-hovered .topbar-scratchpad-btn.topbar-shortcut-action,
#topbarShortcuts.has-stack.is-open .topbar-scratchpad-btn.topbar-shortcut-action,
#topbarShortcuts.has-stack:focus-within .topbar-scratchpad-btn.topbar-shortcut-action{
  transition:
    transform .24s cubic-bezier(.2,.72,.2,1) var(--shortcut-open-delay,0ms),
    opacity .14s ease var(--shortcut-open-delay,0ms),
    background-color .15s ease,
    border-color .15s ease,
    color .15s ease;
}
@media(prefers-reduced-motion:reduce){
  #topbarShortcuts .shortcut-stack-cards,
  #topbarShortcuts .shortcut-stack-collapse-glyph,
  #topbarShortcuts.has-stack .topbar-shortcut-action,
  #topbarShortcuts.has-stack .topbar-scratchpad-btn.topbar-shortcut-action{transition:none!important}
}

/* ===== v15.52 — dossier extra status uit cliënt-/CCBR-/bijstandsgegevens ===== */
.case-status-stack{display:grid;gap:9px;justify-items:end;min-width:190px}
.case-status-block{display:grid;gap:4px;justify-items:end}
.case-status-label{font-size:11px;line-height:1.2;font-weight:700;color:var(--muted);letter-spacing:.01em}
.case-extra-status-list{display:grid;gap:4px;justify-items:end}
.case-extra-status-chip{display:flex;align-items:center;gap:7px;max-width:290px;min-height:25px;padding:3px 7px;border:1px solid var(--line);border-radius:7px;background:transparent;color:var(--text)}
.case-extra-status-chip b{font-size:11px;line-height:1.2;white-space:nowrap}
.case-extra-status-chip small{font-size:10px;line-height:1.2;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:205px}
.case-extra-status-empty{font-size:11px;color:var(--muted)}
.relation-extra-status-grid{grid-template-columns:minmax(150px,.65fr) minmax(260px,1.35fr)}
.relation-extra-status-grid .relation-assistance-source-field{min-width:0}
.relation-extra-status-grid input:disabled{opacity:.58;cursor:not-allowed}
.relation-ccbr-grid{grid-template-columns:repeat(3,minmax(160px,1fr))}
@media(max-width:760px){
  .case-status-stack{width:100%;grid-template-columns:auto minmax(0,1fr);align-items:start;justify-items:start;border-top:1px solid var(--line);padding-top:10px}
  .case-status-block{justify-items:start}.case-extra-status-list{justify-items:start}.case-extra-status-chip{max-width:100%;flex-wrap:wrap}.case-extra-status-chip small{max-width:100%}
  .relation-extra-status-grid,.relation-ccbr-grid{grid-template-columns:1fr}
}

/* v15.53 — dossierstatus compact: geen aparte kopjes of bronregels */
.case-status-stack{display:flex!important;flex-direction:row!important;align-items:center!important;gap:6px!important;flex-wrap:wrap!important}.case-extra-status-list{display:flex!important;align-items:center!important;gap:6px!important;flex-wrap:wrap!important}.case-extra-status-chip{display:inline-flex!important;align-items:center!important;min-height:24px!important}.case-extra-status-chip small,.case-status-label,.case-extra-status-empty{display:none!important}

/* v15.54 — extra status compact, maar onder de dossierstatus */
.case-status-stack{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-end!important;
  gap:5px!important;
  flex-wrap:nowrap!important;
}
.case-status-stack>.case-extra-status-list{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:6px!important;
  flex-wrap:wrap!important;
}

/* v15.56 — terugknop is geen geselecteerde toestand */
html body .case-back-icon.btn.ghost{
  background:transparent!important;
  border-color:transparent!important;
  box-shadow:none!important;
  color:var(--muted)!important;
  border-radius:8px!important;
}
html body .case-back-icon.btn.ghost:hover,
html body .case-back-icon.btn.ghost:focus-visible{
  background:var(--bg)!important;
  border-color:transparent!important;
  box-shadow:none!important;
  color:var(--text)!important;
}
html body .case-back-icon.btn.ghost:active{
  background:color-mix(in srgb,var(--text) 8%,transparent)!important;
}

/* v15.57 — geselecteerde documentmap: subtielere accentstreep */
#v4body .docs-folder-btn.active{
  box-shadow:inset 1px 0 0 color-mix(in srgb,var(--accent) 55%,transparent)!important;
}

/* v15.58 — selectie-indicator documentmap: uitsluitend rechte verticale lijn */
#v4body .docs-folder-btn.active{
  box-shadow:none!important;
  position:relative;
}
#v4body .docs-folder-btn.active::before{
  content:"";
  position:absolute;
  left:0;
  top:7px;
  bottom:7px;
  width:1px;
  border-radius:0;
  background:color-mix(in srgb,var(--accent) 55%,transparent);
  pointer-events:none;
}

/* ===== v1548-contextual-create ===== */
#topbarCreateButton.case-context{
  position:relative;
}
#topbarCreateButton .topbar-create-context-icon{
  display:none;
}
#topbarCreateButton.case-context .topbar-create-default-icon{
  display:block;
}
#topbarCreateButton.case-context .topbar-create-context-icon{
  display:block;
  position:absolute;
  top:3px;
  right:3px;
  width:11px;
  height:11px;
}
#topbarCreateButton.case-context .topbar-create-context-icon .ctx-folder{
  fill:none;
  stroke:currentColor;
  stroke-linecap:round;
  stroke-linejoin:round;
}
#topbarCreateButton.case-context .topbar-create-context-icon .ctx-folder{stroke-width:1.7}
.topbar-create-menu .topbar-create-context-head{
  padding:9px 12px 7px;
  border-bottom:1px solid var(--line);
  margin-bottom:4px;
}
.topbar-create-menu .topbar-create-context-head b{display:block;font-size:12px;line-height:1.35}
.topbar-create-menu .topbar-create-context-head small{display:block;margin-top:2px;font-size:11px;color:var(--muted);line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px}