/* Shared menu vocabulary, matching the SIL management workspace. */
html[data-experience=enabled] .sidebar {
  background:var(--bg,#f6f8fa); border-right:1px solid var(--border); color:var(--ink);
}
html[data-experience=enabled] .sidebar-brand { border-color:var(--border); padding-bottom:20px; }
html[data-experience=enabled] .sidebar-brand h2 { color:var(--navy); }
html[data-experience=enabled] .sidebar-brand .role { color:var(--muted); }
.workspace-brand-actions { display:grid; grid-template-columns:44px 76px 44px; align-items:center; justify-content:center; gap:10px; margin-bottom:14px; padding-bottom:16px; }
.workspace-brand-caption { position:absolute; top:calc(100% + 3px); left:50%; transform:translateX(-50%); white-space:nowrap; font-size:10.5px; font-weight:500; line-height:14px; color:var(--ink); }
.workspace-brand-actions .experience-sidebar-logo { grid-column:2; grid-row:1; margin:0; }
html[data-experience=enabled] .workspace-brand-actions #whatsNewBtn { position:relative; inset:auto; grid-column:1; grid-row:1; display:inline-flex!important; width:44px; height:44px; }
html[data-experience=enabled] .workspace-brand-actions #notificationsBell { position:relative; inset:auto; grid-column:3; grid-row:1; }
html[data-experience=enabled] .workspace-brand-actions #notificationsBell:not([style*="display: none"]) { display:block!important; }
.workspace-brand-actions .notif-bell { width:44px; height:44px; color:var(--ink); }
.workspace-brand-actions .notif-dropdown { position:fixed; left:var(--brand-feed-left); top:var(--brand-feed-top); right:auto; max-height:calc(100dvh - var(--brand-feed-top) - 16px); }
.workspace-brand-actions .notif-dropdown-list { max-height:min(400px,calc(100dvh - var(--brand-feed-top) - 80px)); }
html:is([data-portal-theme=dark],[data-portal-theme=navy]) .workspace-brand-actions .notif-bell-count { background:#9d3448; color:#fff; }
@media(max-width:768px) {
 html[data-experience=enabled] .mobile-topbar:has(.workspace-brand-actions) { grid-template-columns:44px minmax(0,1fr) 44px; grid-template-rows:68px 22px 22px; row-gap:0; min-height:calc(136px + env(safe-area-inset-top,0px)); }
 html[data-experience=enabled] .mobile-topbar .workspace-brand-caption { color:#fff; }
 html[data-experience=enabled] .mobile-topbar .workspace-brand-actions { grid-column:1/-1; grid-row:1; grid-template-columns:44px 52px 44px; margin:0; }
 html[data-experience=enabled] .mobile-topbar .workspace-brand-actions .experience-mobile-logo { display:block; grid-column:2; grid-row:1; width:52px; height:52px; margin:0; }
 html[data-experience=enabled] .mobile-topbar:has(.workspace-brand-actions) .mobile-topbar-title { grid-column:2; grid-row:2; text-align:center; }
 html[data-experience=enabled] .mobile-topbar:has(.workspace-brand-actions) .experience-workspace { grid-column:2; grid-row:3; text-align:center; }
 html[data-experience=enabled] .mobile-topbar:has(.workspace-brand-actions) .experience-back { grid-column:1; grid-row:2/4; }
 html[data-experience=enabled] .mobile-topbar:has(.workspace-brand-actions) .mobile-topbar-search { grid-column:3; grid-row:2/4; }
 html[data-experience=enabled] .mobile-topbar:has(.workspace-brand-actions) .experience-inbox-button { display:none; }
 html[data-experience=enabled] .app:has(.mobile-topbar .workspace-brand-actions) .main { padding-top:calc(152px + env(safe-area-inset-top,0px)); }
 html[data-experience=enabled] #globalSearchBar { top:calc(136px + env(safe-area-inset-top,0px)); }
}
html[data-experience=enabled] .sidebar .nav-item {
  min-height:44px; margin:3px 12px; padding:10px 12px; border:0; border-radius:8px;
  color:var(--ink); font-size:13px; line-height:1.45; gap:10px;
}
html[data-experience=enabled] .sidebar .nav-item > span:not(.icon):not(.inbox-badge) { min-width:0; overflow-wrap:anywhere; }
html[data-experience=enabled] .sidebar .nav-item:hover { background:var(--card); color:var(--navy); }
html[data-experience=enabled] .sidebar .nav-item.active { background:var(--navy); color:#fff; font-weight:600; }
html[data-experience=enabled] .sidebar .nav-section {
  color:var(--muted); font-size:11px; letter-spacing:.025em; text-transform:none;
  padding:15px 24px 9px; min-height:44px;
}
html[data-experience=enabled] .sidebar .nav-group-header:hover { color:var(--navy); }
html[data-experience=enabled] .sidebar-search {
  background:var(--card); border:1px solid var(--border); border-radius:8px; min-height:44px;
}
html[data-experience=enabled] .sidebar-search-input { color:var(--ink); font-size:13px; }
html[data-experience=enabled] .sidebar-search-input::placeholder,
html[data-experience=enabled] .sidebar-search-icon { color:var(--muted); }
html[data-experience=enabled] .experience-nav-button { color:var(--ink); border-color:var(--border); }
.workspace-menu-launcher {
  display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 16px 12px;
  min-height:44px; padding:10px 12px; border:1px solid var(--border); border-radius:8px;
  background:var(--card); color:var(--navy); font:inherit; font-size:13px; font-weight:600; cursor:pointer;
}

/* Existing controls remain the source of truth for selected states and counts. */
html[data-experience=enabled] :is(.tab-bar,.rc-tabs,.mt-tabs,.documents-library-tabs,.experience-tabs,.userdetail-tabs) {
  gap:6px; padding:6px; border:1px solid var(--border); border-radius:10px;
  background:var(--bg,#f6f8fa); margin-bottom:20px; max-width:100%;
}
html[data-experience=enabled] :is(.tab-btn,.rc-tab,.mt-tab,.documents-library-tabs button,.experience-tabs button,.userdetail-tab) {
  min-height:44px; border:1px solid transparent; border-radius:7px; padding:10px 14px;
  background:transparent; color:var(--muted); font:inherit; font-size:13px; font-weight:600;
  line-height:1.4; white-space:normal; text-align:left; cursor:pointer;
}
html[data-experience=enabled] :is(.tab-btn,.rc-tab,.mt-tab,.documents-library-tabs button,.experience-tabs button,.userdetail-tab):is(.active,.on,[aria-selected=true]) {
  color:#fff; background:var(--navy); border-color:var(--navy); box-shadow:none;
}
html[data-experience=enabled] :is(.tab-btn,.rc-tab,.mt-tab,.documents-library-tabs button,.experience-tabs button,.userdetail-tab):hover:not(.active):not(.on):not([aria-selected=true]) {
  background:var(--card); color:var(--theme-heading,var(--navy)); border-color:var(--border);
}
html[data-experience=enabled] :is(.tab-bar,.rc-tabs,.mt-tabs,.documents-library-tabs,.experience-tabs) { display:flex; flex-wrap:wrap; }
html[data-experience=enabled] :is(.filter-pill,.mgmt-jump-chip) {
  min-height:40px; padding:9px 12px; border-radius:7px; font-size:12px;
  line-height:1.45; letter-spacing:0; border:1px solid var(--border); box-shadow:none;
}
html[data-experience=enabled] :is(.filter-pill,.mgmt-jump-chip).active { background:var(--navy); color:#fff; border-color:var(--navy); }
html[data-experience=enabled] :is(.doc-actions-menu,.tr-actions-menu,.userdetail-tab-perf-menu,.profile-quicknav-perf-menu) {
  padding:6px; border:1px solid var(--border); border-radius:10px; background:var(--card);
}
html[data-experience=enabled] :is(.doc-actions-menu,.tr-actions-menu,.userdetail-tab-perf-menu,.profile-quicknav-perf-menu) :is(button,a,[role=menuitem]) {
  min-height:44px; border-radius:6px; line-height:1.45; white-space:normal;
}
.workspace-section-picker { display:none; }
.tr-actions-menu.workspace-action-positioned {
  top:var(--workspace-menu-top)!important; bottom:auto!important;
  max-height:var(--workspace-menu-height)!important; overflow-y:auto!important;
}

/* The same searchable directory works on desktop and in the phone's More menu. */
#experienceMore { border:1px solid var(--border); border-radius:18px; padding:24px; }
#experienceMore header { padding-bottom:16px; border-bottom:1px solid var(--border); margin-bottom:16px; }
#experienceMore header p { margin:6px 0 0; line-height:1.5; }
#experienceMore [data-menu=close] { display:grid; place-items:center; padding:0; background:var(--surface-2,#e7edf1); color:var(--ink); border:1px solid var(--border); }
#experienceMore [data-menu=close] .icon { width:24px; height:24px; stroke-width:2; }
#experienceMore [data-menu=close]:hover { background:var(--card); }
#experienceMore h2 { color:var(--theme-heading,var(--navy)); font-size:26px; letter-spacing:-.5px; }
#experienceMore .experience-menu-search { border-radius:8px; background:var(--card); }
#experienceMore .experience-menu-body h3 { letter-spacing:.03em; text-transform:none; font-size:13px; color:var(--theme-heading,var(--navy)); }
#experienceMore .experience-menu-grid button { border-radius:8px; background:var(--card); min-height:52px; font-size:13px; }
#experienceMore .experience-menu-grid button:hover { border-color:var(--teal); background:var(--bg); }
#experienceMore .experience-menu-grid button[aria-current=page] { border-color:var(--navy); background:var(--navy); color:#fff; }
#experienceMore .experience-menu-grid button[aria-current=page] .experience-menu-icon { background:#ffffff20; color:#fff; }
#experienceMore .experience-menu-icon { width:32px; height:32px; border-radius:7px; }
#experienceMore footer { margin-top:8px; padding-top:16px; }
#experienceMore footer button { border:1px solid var(--border); border-radius:8px; background:var(--card); }
html[data-experience=enabled] :is(.sidebar .nav-item,.sidebar .nav-group-header,.workspace-menu-launcher,.workspace-section-picker select,.tab-btn,.rc-tab,.mt-tab,.userdetail-tab,#experienceMore button,#experienceMore input):focus-visible {
  outline:3px solid var(--teal); outline-offset:2px;
}
@media(min-width:769px) {
  #experienceMore { inset:0; margin:auto; width:min(940px,calc(100vw - 64px)); max-width:940px; height:min(800px,calc(100dvh - 64px)); max-height:calc(100dvh - 64px); }
  #experienceMore .experience-sheet-handle { display:none; }
  #experienceMore .experience-menu-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #experienceMore footer { grid-template-columns:repeat(4,minmax(0,1fr)); }
  html[data-experience=enabled] .userdetail-tabs { flex-wrap:wrap; overflow:visible; }
}
@media(max-width:768px) {
  .workspace-menu-launcher { display:none; }
  #experienceMore { padding:16px 16px calc(16px + env(safe-area-inset-bottom)); border-radius:18px 18px 0 0; }
  #experienceMore header { padding-bottom:12px; margin-bottom:12px; }
  #experienceMore h2 { font-size:23px; }
  html[data-experience=enabled] .workspace-section-source { display:none!important; }
  html[data-experience=enabled] .workspace-section-picker {
    display:flex; flex-direction:column; gap:7px; margin:12px 0 18px; padding:12px;
    border:1px solid var(--border); border-radius:10px; background:var(--card);
    color:var(--muted); font-size:12px; flex-shrink:0;
  }
  .workspace-section-picker select { min-width:0; width:100%; min-height:44px; border:1px solid var(--border); border-radius:7px; padding:8px 10px; font:inherit; font-size:16px; background:var(--card); color:var(--ink); }
  html[data-experience=enabled] :is(.tab-btn,.rc-tab,.mt-tab,.documents-library-tabs button,.experience-tabs button) { flex:1 1 auto; text-align:center; padding:10px; }
}
html[data-experience=enabled] .workspace-section-picker[hidden],
html[data-experience=enabled] :is(.documents-library-tabs,.rc-tabs)[hidden] { display:none!important; }
html[data-experience=enabled]:is([data-experience-reading=large],[data-experience-reading=extra]) :is(.sidebar .nav-item,.tab-btn,.rc-tab,.mt-tab,.userdetail-tab,#experienceMore .experience-menu-grid button) { font-size:var(--portal-reading-body); }

html[data-experience=enabled] #maintenance .mt-tab { min-height:44px; border-radius:7px; padding:10px 14px; }
/* Staff categories stay on one row. Individual performance tabs avoid a
   dropdown being clipped by the horizontal scroll container. */
html[data-experience=enabled] #userDetailModal .userdetail-tabs {
  flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; margin-left:0; margin-right:0;
  scrollbar-width:thin; scroll-padding-inline:6px;
}
html[data-experience=enabled] #userDetailModal .userdetail-tabs > .userdetail-tab {
  flex:0 0 auto; white-space:nowrap; margin-bottom:0;
}
html[data-experience=enabled] #userDetailModal .userdetail-tab-perf { display:block; }
html[data-experience=enabled] #userDetailModal .userdetail-tab-perf-wrap { display:none; }
/* These profile inputs sit outside .form-group; give them the same complete
   control treatment instead of the browser's inset border in dark mode. */
html[data-experience=enabled] #userDetailModal :is(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]),select,textarea) {
  min-height:44px; border:1px solid var(--border); border-radius:var(--portal-control-radius);
  background:var(--card); color:var(--ink); font:inherit; padding:10px 12px;
}
html[data-experience=enabled] :is(.rv-actions-menu-items,.cd-menu-pop,.aidrop-menu-panel) { border:1px solid var(--border); border-radius:10px; padding:6px; background:var(--card); }
html[data-experience=enabled] :is(.rv-actions-menu-items,.cd-menu-pop,.aidrop-menu-panel) button { min-height:44px; border-radius:6px; line-height:1.45; white-space:normal; }

html[data-experience=enabled] #registersBody [data-reg-pick] { border-radius:7px!important; min-height:44px; }
html[data-experience=enabled] #registersBody [data-reg-pick]:not(.btn-ghost) { background:var(--navy); color:#fff; }
.portal-save-status { padding:10px 12px; border:1px solid var(--border); border-radius:8px; background:var(--surface-2,var(--bg)); color:var(--ink); font-size:12px; line-height:1.5; }
.portal-save-status[data-state=error] { border-left:3px solid var(--danger); }
.portal-save-status[data-state=saved] { border-left:3px solid var(--success); }
.search-partial { padding:12px; border:1px solid var(--border); border-radius:8px; color:var(--ink); }
.search-hit:focus-visible { outline:3px solid var(--teal); outline-offset:2px; }
.toast-dismiss { border:0; background:transparent; color:inherit; width:32px; min-width:32px; height:32px; padding:0; font-size:22px; cursor:pointer; }
.toast-dismiss:focus-visible { outline:2px solid currentColor; outline-offset:1px; }
#toastContainer { max-height:calc(100dvh - 180px); overflow-y:auto; overscroll-behavior:contain; }
.hm-link { display:inline-flex; align-items:center; gap:8px; min-height:40px; margin-top:8px; padding:8px 12px; border:1px solid var(--border); border-radius:8px; background:var(--surface-2,var(--bg)); color:var(--ink); font:inherit; font-size:12px; cursor:pointer; }
.hm-link:hover { border-color:var(--teal); }
.hm-link:focus-visible { outline:2px solid var(--teal); outline-offset:2px; }