/* The messenger's transparent track and soft, rounded thumb across the CRM. */
html:root { --crm-scroll-thumb:color-mix(in srgb,var(--theme-accent) 42%,transparent); scrollbar-gutter:stable; }
html:root,html:root * { scrollbar-width:thin; scrollbar-color:var(--crm-scroll-thumb) transparent; }
html:root *:hover { scrollbar-color:color-mix(in srgb,var(--theme-accent) 68%,transparent) transparent; }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track,::-webkit-scrollbar-corner { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--crm-scroll-thumb); border:2px solid transparent; background-clip:padding-box; border-radius:999px; }
::-webkit-scrollbar-thumb:hover { background-color:color-mix(in srgb,var(--theme-accent) 68%,transparent); }
/* The chat list retains its existing draggable scrollbar, without a second one. */
html:root .chat-list { scrollbar-width:none; }
html:root .chat-list::-webkit-scrollbar { display:none; }
.mobile-menu-heading,.mobile-module-navigation { display:none; }
@media(max-width:760px) {
  html:root #workspace { display:block; }
  html:root #workspace[hidden] { display:none; }
  html:root #workspace:not(.mobile-menu-open) > .sidebar { display:none; }
  html:root #workspace.mobile-menu-open > .workspace-content { display:none; }
  html:root #workspace.mobile-menu-open > .sidebar { min-height:calc(100dvh - 80px); padding:24px 16px; border:0; border-radius:var(--radius-card); }
  html:root .mobile-menu-heading { display:block; padding:0 12px 20px; }
  .mobile-menu-heading h1 { margin:0; font-size:1.55rem; color:var(--theme-nav); }
  .mobile-menu-heading :is(p,.eyebrow) { color:var(--theme-nav); opacity:.8; }
  .mobile-menu-heading p:last-child { margin:8px 0 0; font-size:.85rem; }
  html:root .sidebar .nav-list,html:root .sidebar .nav-primary { display:grid; grid-template-columns:minmax(0,1fr); gap:6px; }
  html:root .sidebar .nav-item { min-height:48px; padding:10px 12px; }
  html:root .mobile-module-navigation { display:flex; align-items:center; gap:12px; margin-bottom:16px; min-width:0; }
  html:root .mobile-module-navigation button { flex:none; min-height:44px; }
  .mobile-module-navigation > span { min-width:0; overflow-wrap:anywhere; font-size:.85rem; font-weight:600; padding:8px; border-radius:var(--radius-md); color:var(--text-primary); background:var(--surface); }
}
/* Shared controls also apply to native/dynamic windows in every module. */
html:root .crm-standard-window .window-controls .window-control {
  position:relative; display:inline-grid; place-items:center; flex:none;
  width:36px; min-width:36px; height:36px; min-height:36px; margin:0; padding:0;
  border:1px solid transparent; border-radius:10px; background:transparent; color:var(--text-secondary);
  box-shadow:none; transform:none; line-height:1;
}
html:root .crm-standard-window .window-control:is(:hover,:focus-visible,[aria-pressed="true"]) { background:var(--accent-soft); color:var(--accent); border-color:var(--border); }
html:root .crm-standard-window .window-control-close:is(:hover,:focus-visible) { background:var(--theme-danger-bg); color:var(--theme-danger); border-color:var(--theme-danger); }
html:root .crm-standard-window > .window-titlebar { display:flex; align-items:center; gap:12px; }
html:root .crm-standard-window { overscroll-behavior:contain; }
html:root .crm-standard-window > .window-titlebar h2 { min-width:0; max-width:none; overflow-wrap:anywhere; font-size:1.15rem; }
html:root dialog.crm-standard-window:not(.window-maximized) { position:fixed; inset:80px 0 auto; margin:0 auto; max-height:min(800px,calc(100dvh - 112px)); border-radius:var(--radius-modal); border-color:var(--border); box-shadow:var(--shadow-modal); }
html:root dialog.crm-standard-window > .window-titlebar { position:sticky; top:0; z-index:4; background:var(--surface); }
html:root dialog.crm-standard-window::backdrop { background:var(--theme-backdrop); opacity:1; transition:opacity var(--motion-window) ease; }
html:root dialog.crm-standard-window[hidden]::backdrop { opacity:0; }
html:root .crm-standard-window.window-maximized { position:fixed; inset:8px; translate:0 0; transform:none; width:calc(100vw - 16px); height:calc(100dvh - 16px); max-width:none; max-height:none; margin:0; overflow:auto; }
html:root #testing-focus > .crm-standard-window.window-maximized { width:calc(100vw - 16px); height:calc(100dvh - 16px); max-width:none; max-height:none; }
html:root #testing-focus > .crm-standard-window:not(.window-maximized) { align-self:start; margin-top:58px; max-height:calc(100dvh - 112px); }
html:root .image-viewer-backdrop.crm-popup { translate:0 0; }
html:root .rich-editor-expanded.crm-standard-window:not(.window-maximized) { inset:80px 0 auto; margin:0 auto; width:min(1000px,var(--window-width-limit)); height:min(800px,var(--window-height-limit)); }
html:root .rich-window-titlebar { flex:none; padding:12px 16px; border-bottom:1px solid var(--border); background:var(--surface); }
html:root .rich-window-titlebar h2 { margin:0; }
html:root[data-theme="macos"] .crm-standard-window .window-control { width:30px; min-width:30px; border:0; }
html:root[data-theme="macos"] .crm-standard-window .window-control:is(:hover,:focus-visible) { background:transparent; border:0; }
@starting-style { html:root dialog.crm-standard-window[open]::backdrop { opacity:0; } }
@media(max-width:760px) {
  html:root dialog.crm-standard-window:not(.window-maximized) { inset:16px 0 auto; max-height:calc(100dvh - 32px); max-width:calc(100vw - 24px); }
  html:root .crm-standard-window > .window-titlebar { gap:8px; }
  html:root .crm-standard-window .window-controls { padding-left:6px; gap:0; }
  html:root #testing-focus > .crm-standard-window:not(.window-maximized) { margin-top:6px; max-height:calc(100dvh - 32px); }
  html:root .rich-editor-expanded.crm-standard-window:not(.window-maximized) { inset:16px 0 auto; width:calc(100vw - 24px); height:calc(100dvh - 32px); }
}
@media(pointer:coarse),(max-width:700px) { html:root .crm-standard-window .window-control,html:root[data-theme="macos"] .crm-standard-window .window-control { width:44px; min-width:44px; height:44px; min-height:44px; } }
@media(prefers-reduced-motion:reduce) { html:root dialog.crm-standard-window::backdrop { transition:none; } }

/* One refresh control across dashboard, finance and production. */
html:root :is(#analytics-view,#finance-view,#finance-window,#production-view) button.crm-refresh-button {
  display:inline-grid; place-items:center; flex:0 0 var(--control-height); width:var(--control-height); min-width:var(--control-height);
  height:var(--control-height); min-height:var(--control-height); padding:0; border:1px solid var(--border); border-radius:12px;
  background:var(--surface); color:var(--text-primary); box-shadow:none; transform:none;
  transition:background-color .18s,border-color .18s,color .18s;
}
html:root :is(#analytics-view,#finance-view,#finance-window,#production-view) button.crm-refresh-button[hidden] { display:none; }
html:root :is(#analytics-view,#finance-view,#finance-window,#production-view) button.crm-refresh-button:hover:not(:disabled) { background:var(--accent-soft); border-color:var(--accent); color:var(--accent); box-shadow:none; transform:none; }
html:root :is(#analytics-view,#finance-view,#finance-window,#production-view) button.crm-refresh-button:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
html:root :is(#analytics-view,#finance-view,#finance-window,#production-view) button.crm-refresh-button svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
@media(prefers-reduced-motion:reduce) { html:root :is(#analytics-view,#finance-view,#finance-window,#production-view) button.crm-refresh-button { transition:none; } }

/* Sidebar cards share the same compact heading as the upcoming calendar. */
html:root :is(#home-calendar-card,#home-birthdays-card,#home-tasks-card) > .section-heading { align-items:center; gap:6px; min-height:32px; margin-bottom:0; }
html:root :is(#home-calendar-card,#home-birthdays-card,#home-tasks-card) .section-heading h2 { flex:1 1 auto; min-width:0; margin:0; font-size:.95rem; font-weight:600; line-height:1.35; }
html:root .home-block-title { position:relative; display:flex; align-items:center; min-height:32px; padding-left:12px; }
html:root .home-block-title::before { content:''; position:absolute; left:0; top:6px; bottom:6px; width:4px; border-radius:3px; background:var(--accent); opacity:.65; }
html:root :is(#home-calendar-card,#home-birthdays-card,#home-tasks-card) .home-card-tools { gap:2px; }
html:root :is(#home-calendar-card,#home-birthdays-card,#home-tasks-card) button.home-card-handle { width:22px; flex-basis:22px; min-height:32px; padding:2px; }
html:root #home-tasks-card .home-task-links,html:root #home-birthdays-card .birthdays-list { margin-top:14px; }

/* Directory filters and column headings no longer compete for the same row. */
html:root #staff-employees-panel { padding:0; overflow:hidden; }
html:root #staff-employees-panel .employee-directory-heading { padding:18px 20px 12px; margin:0; align-items:center; }
html:root #staff-employees-panel .employee-directory-heading h2 { margin:0; font-size:1.1rem; }
html:root #staff-employees-panel #employee-count { margin:5px 0 0; }
html:root .employee-directory-actions { display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px; }
html:root .employee-directory-filters { display:grid; grid-template-columns:minmax(180px,1.4fr) minmax(130px,1fr) minmax(130px,1fr) auto; gap:12px; align-items:end; padding:0 20px 18px; }
html:root .employee-directory-filters label { min-width:0; display:grid; gap:6px; margin:0; font-size:.75rem; color:var(--text-secondary); }
html:root .employee-directory-filters :is(input,select) { width:100%; min-width:0; margin:0; }
html:root .employee-directory-filters button { min-height:40px; margin:0; }
html:root #staff-employees-panel :is(.employee-columns,.employee-list .employee) { display:grid; grid-template-columns:minmax(0,1.8fr) minmax(0,1fr) minmax(0,1fr) 64px; align-items:center; gap:18px; padding:12px 20px; }
html:root #staff-employees-panel .employee-columns { background:var(--surface-active); color:var(--text-secondary); font-size:.75rem; font-weight:600; letter-spacing:normal; text-transform:none; border-bottom:1px solid var(--border); }
html:root #staff-employees-panel button.employee-sort { display:flex; align-items:center; gap:8px; min-height:32px; padding:0; border:0; border-radius:4px; background:transparent; color:inherit; box-shadow:none; font:inherit; text-align:left; }
html:root #staff-employees-panel button.employee-sort:is(:hover,:focus-visible) { color:var(--accent); }
html:root #staff-employees-panel .employee-action-heading { text-align:center; }
html:root #staff-employees-panel .employee-action { min-width:0; align-items:center; justify-content:center; }
html:root #staff-employees-panel .employee-list .employee { min-height:64px; border-bottom:1px solid var(--border); }
html:root #staff-employees-panel .employee-list .employee:hover { background:var(--surface-hover); }
html:root #staff-employees-panel .employee-name strong,html:root #staff-employees-panel :is(.employee-department,.employee-position) { font-size:.875rem !important; }
html:root #staff-employees-panel .employee-action .employee-edit-button { display:inline-flex; align-items:center; justify-content:center; width:36px; min-width:36px; height:36px; min-height:36px !important; margin:0; padding:8px !important; background:transparent; border-color:transparent; color:var(--text-secondary); box-shadow:none; }
html:root #staff-employees-panel .employee-action .employee-edit-button:is(:hover,:focus-visible) { color:var(--accent); background:var(--accent-soft); }
html:root #staff-employees-panel .employee-edit-button .ui-icon { width:18px; height:18px; }
html:root #staff-employees-panel .personal-list-pagination { padding:14px 20px; }
@media(max-width:1100px) {
  html:root #staff-employees-panel :is(.employee-columns,.employee-list .employee) { grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) 64px; gap:12px; }
  html:root .employee-directory-filters { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:700px) {
  html:root #staff-employees-panel .employee-directory-table .employee-columns { display:flex;flex-wrap:wrap;gap:8px 18px; }
  html:root #staff-employees-panel .employee-action-heading { display:none; }
  html:root #staff-employees-panel .employee-list .employee { grid-template-columns:minmax(0,1fr) 44px; gap:8px 12px; }
  html:root #staff-employees-panel .employee-identity { grid-column:1/-1; }
  html:root #staff-employees-panel :is(.employee-department,.employee-position) { grid-column:1; }
  html:root #staff-employees-panel .employee-action { grid-column:2; grid-row:2/4; }
}
@media(max-width:440px) {
  html:root .employee-directory-filters { grid-template-columns:minmax(0,1fr); padding-inline:16px; }
  html:root #staff-employees-panel .employee-directory-heading { padding-inline:16px; gap:10px; }
  html:root #staff-employees-panel .employee-list .employee { padding-inline:16px; }
}
@media(max-width:700px),(pointer:coarse) {
  html:root #staff-employees-panel .employee-action .employee-edit-button { width:44px; min-width:44px; height:44px; min-height:44px !important; }
}
@media(pointer:coarse) { html:root :is(#home-calendar-card,#home-birthdays-card,#home-tasks-card) button.home-card-handle { width:32px; flex-basis:32px; min-height:44px; } }