html,
body {
  font-family: var(--n360-font-family-sans);
  overflow-x: hidden;
}

/* Override Syncfusion bootstrap5 theme font to use design token */
.e-control,
.e-css.e-control,
.e-input-group,
.e-input-group .e-input,
.e-input-group .e-control,
.e-dropdown-base,
.e-ddl.e-control {
  font-family: var(--n360-font-family-sans) !important;
}

a,
.btn-link {
  color: var(--n360-color-primary-700, #006bb7);
}

/* ── N360Form auto-Submit suppression ─────────────────────────────────────
   When a page renders its own explicit submit button (any <button type="submit">
   that is NOT the framework's own .n360-form__submit), hide the auto-rendered
   Submit so users don't see two submits stacked. This is a non-destructive
   default — pages that don't render their own submit continue to see the
   framework's auto-Submit unchanged. Requires :has() (Chrome 105+, Safari
   15.4+, Firefox 121+). */
.n360-form-wrapper
  form:has(button[type="submit"]:not(.n360-form__submit))
  .n360-form__submit,
form:has(button[type="submit"]:not(.n360-form__submit))
  > .n360-form__actions
  > .n360-form__submit {
  display: none !important;
}

/* If the auto-Submit was the only child of its actions wrapper, hide the now-
   empty wrapper too so we don't leave a stray gap below the user's buttons. */
form:has(button[type="submit"]:not(.n360-form__submit))
  > .n360-form__actions:has(> .n360-form__submit:only-child) {
  display: none !important;
}

/* Scoped sidebar tree rows must override the global anchor rule above —
   NavLink-rendered <a> tags don't pick up Blazor scope attributes, so
   .tree-item rules in SidebarTreeItem.razor.css don't actually match.
   These global rules pin a legible foreground on every link state. */
/* Default to the LIGHT flyout palette — `data-theme` is never set app-wide, so
   the old VS-Code dark defaults (#ccc resting, #fff hover/active) rendered
   near-invisible on the white panel (measured 1.6:1 contrast). These match the
   intended design in SidebarTreeItem.razor.css (which doesn't apply because
   NavLink <a> tags drop the Blazor scope attr). Dark palette restored under
   [data-theme="dark"] below. */
.tree-item,
.tree-item:link,
.tree-item:visited {
  color: #64748b !important;
  text-decoration: none !important;
}

.tree-item:hover,
.tree-item:focus,
.tree-item:focus-visible {
  color: #374151 !important;
  text-decoration: none !important;
}

.tree-item-active,
.tree-item-active:link,
.tree-item-active:visited,
.tree-item-active:hover,
.tree-item-active:focus {
  color: var(--n360-color-primary-600) !important;
  text-decoration: none !important;
}

/* Dark theme only: restore the original VS-Code dark-panel palette. */
[data-theme="dark"] .tree-item,
[data-theme="dark"] .tree-item:link,
[data-theme="dark"] .tree-item:visited {
  color: var(--vscode-sideBarTitle-foreground, #cccccc) !important;
}

[data-theme="dark"] .tree-item:hover,
[data-theme="dark"] .tree-item:focus,
[data-theme="dark"] .tree-item:focus-visible {
  color: var(--vscode-list-hoverForeground, #ffffff) !important;
}

[data-theme="dark"] .tree-item-active,
[data-theme="dark"] .tree-item-active:link,
[data-theme="dark"] .tree-item-active:visited,
[data-theme="dark"] .tree-item-active:hover,
[data-theme="dark"] .tree-item-active:focus {
  color: var(--vscode-list-activeSelectionForeground, #ffffff) !important;
}

/* Light-theme overrides — global anchor rule was painting #006bb7 in light
   mode too, so we re-pin a darker neutral here. */
[data-theme="light"] .tree-item,
[data-theme="light"] .tree-item:link,
[data-theme="light"] .tree-item:visited {
  color: var(--n360-color-neutral-700, #374151) !important;
}

[data-theme="light"] .tree-item:hover,
[data-theme="light"] .tree-item:focus,
[data-theme="light"] .tree-item:focus-visible {
  color: var(--n360-color-neutral-900, #111827) !important;
}

/* The two light rules above out-specify the base .tree-item-active rule, so under an explicit
   light theme the current page's row lost its orange and read as an ordinary link. */
[data-theme="light"] .tree-item-active,
[data-theme="light"] .tree-item-active:link,
[data-theme="light"] .tree-item-active:visited,
[data-theme="light"] .tree-item-active:hover,
[data-theme="light"] .tree-item-active:focus {
  color: var(--n360-color-primary-600) !important;
}

/* Dark theme: the header strip is painted from neutral-800, which is a LIGHT grey once the
   scale inverts — under a title that stays white. Use the shell token instead. */
[data-theme="dark"] .sidebar-header {
  background: var(--n360-sidebar-header-bg, #161e35) !important;
}

/* ── Sidebar flyout: complete the LIGHT theme reliably ──
   The light tree-item TEXT overrides above (this global sheet) apply, but the
   matching panel-background override lives in ActivityBar.razor.css as a scoped
   :global([data-theme="light"]) rule that does NOT reliably win over the base
   dark rule (.sidebar-panel { background:#252526 }). Result: dark menu text on a
   dark panel = invisible. Pin the full light palette here so panel + header +
   group headers all match the (already-dark) item text. Verified live: theme is
   "light" but panel measured #252526. */
/* Same token the sticky group headings are painted with (.tree-group-header). With neutral-50
   here the panel was off-white and every heading sat on it as a white band. */
[data-theme="light"] .sidebar-panel {
  background: var(--n360-sidebar-bg, #ffffff) !important;
  border-right-color: var(--n360-color-neutral-300, #d1d5db) !important;
}
[data-theme="light"] .sidebar-header {
  background: var(--n360-color-neutral-100, #f3f4f6) !important;
  border-bottom-color: var(--n360-color-neutral-300, #d1d5db) !important;
}
[data-theme="light"] .sidebar-header h3,
[data-theme="light"] .sidebar-action-btn {
  color: var(--n360-color-neutral-800, #1f2937) !important;
}
/* Group section headers (e.g. PATIENTS, CONSENT) default to white for the dark
   panel — force dark on the light panel or they vanish. */
[data-theme="light"] .tree-group-header,
[data-theme="light"] .tree-group-header * {
  color: var(--n360-color-neutral-700, #374151) !important;
}

.btn-primary {
  color: #fff;
  background-color: var(--n360-color-primary-700, #4338ca);
  border-color: var(--n360-color-primary-800, #1861ac);
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
  box-shadow:
    0 0 0 0.1rem white,
    0 0 0 0.25rem var(--n360-color-primary-400, #6366f1);
}

/* article.content padding is controlled by MainLayout.razor.css (scoped CSS).
   This fallback applies when content is used outside the main layout shell. */
.content {
  padding-top: 16px;
  padding-bottom: 16px;
}

h1:focus {
  outline: none;
}

.valid.modified:not([type="checkbox"]) {
  outline: 1px solid var(--n360-color-success-500, #26b050);
}

.invalid {
  outline: 1px solid var(--n360-color-error-500, #e50000);
}

.validation-message {
  color: var(--n360-color-error-500, #e50000);
}

.blazor-error-boundary {
  background:
    url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=)
      no-repeat 1rem/1.8rem,
    #b32121;
  padding: 1rem 1rem 1rem 3.7rem;
  color: white;
}

.blazor-error-boundary::after {
  content: "An error has occurred.";
}

.darker-border-checkbox.form-check-input {
  border-color: var(--n360-color-neutral-400, #929292);
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* ═══════════════════════════════════════════════════════════════
   Dark Theme — Global Overrides
   ═══════════════════════════════════════════════════════════════ */
[data-theme="dark"] body {
  background-color: var(--n360-color-neutral-0);
  color: var(--n360-color-neutral-900);
}

[data-theme="dark"] a,
[data-theme="dark"] .btn-link {
  color: var(--n360-color-primary-400);
}

[data-theme="dark"] .btn:focus,
[data-theme="dark"] .btn:active:focus,
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-check-input:focus {
  box-shadow:
    0 0 0 0.1rem var(--n360-color-neutral-0),
    0 0 0 0.25rem var(--n360-color-primary-400);
}

[data-theme="dark"] .blazor-error-boundary {
  background-color: var(--n360-color-error-900);
  color: var(--n360-color-neutral-900);
}

/* ── N360 Utility Classes ─────────────────────────────────────── */

/* Progress bar height variants */
.progress-xs {
  height: 8px;
}
.progress-sm {
  height: 20px;
}
.progress-md {
  height: 25px;
}

/* Doctor avatar/photo sizing */
.doctor-avatar-sm {
  width: 60px;
  height: 60px;
  object-fit: cover;
}

.doctor-avatar-md {
  width: 100px;
  height: 100px;
  object-fit: cover;
}

.doctor-avatar-lg {
  width: 150px;
  height: 150px;
  object-fit: cover;
}

/* Text utilities */
.text-prewrap {
  white-space: pre-wrap;
}
.text-prewrap-mono {
  white-space: pre-wrap;
  font-family: monospace;
}
.cursor-pointer {
  cursor: pointer;
}

/* Calendar cell layout */
.calendar-cell {
  min-height: 100px;
  vertical-align: top;
}

/* Rating bar label/count widths */
.rating-label {
  width: 60px;
}
.rating-count {
  width: 50px;
}

/* Signature pad canvas */
.signature-canvas {
  border: 1px solid var(--n360-color-neutral-300, #ccc);
  cursor: crosshair;
}

/* Scrollable card body */
.scroll-body {
  max-height: 500px;
  overflow-y: auto;
}

/* TopBar hamburger hidden on desktop — ActivityBar icon rail is the primary toggle.
   On mobile (≤768px) the TopBar.razor.css @media rule shows it again. Without this
   guard the global !important would prevent the hamburger showing on ANY viewport. */
@media (min-width: 769px) {
  .hamburger-btn {
    display: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   Print — hide navigation chrome; show full-width content.
   In clinical environments charts and records are frequently
   printed; the ActivityBar, TopBar and StatusBar add no value
   on paper and consume ~80px of the page width / height.
   ══════════════════════════════════════════════════════════════ */
@media print {
  .activity-bar,
  .status-bar,
  .top-row,
  .top-row-left,
  .top-row-center,
  .top-row-right,
  #blazor-error-ui,
  .reconnect-modal,
  .hamburger-btn {
    display: none !important;
  }

  main {
    margin-left: 0 !important;
    padding-bottom: 0 !important;
  }

  article {
    padding: 0 !important;
  }

  .vscode-shell > .page {
    flex-direction: column !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   VS Code–style Activity Bar  (global overrides — static file,
   always served fresh, bypasses scoped-CSS bundle cache)
   ═══════════════════════════════════════════════════════════════ */

/* ── Activity Bar rail ──────────────────────────────────────── */
.activity-bar {
  width: 48px !important;
  background: var(--n360-activitybar-bg) !important;
  border-right: 1px solid rgba(13, 27, 42, 0.08) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  height: calc(100vh - 22px) !important;
  z-index: 100 !important;
  overflow: visible !important;
}

.activity-bar-items {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
  padding-top: 0 !important;
  gap: 0 !important;
}

.activity-bar-bottom {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
  padding: 0 !important;
  border-top: none !important;
  gap: 0 !important;
}

/* ── Activity Bar items (icons) ─────────────────────────────── */
.activity-item {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #475569 !important;
  background: transparent !important;
  border: none !important;
  position: relative !important;
  transition:
    color 0.15s ease,
    background 0.15s ease !important;
  user-select: none !important;
  text-decoration: none !important;
}

/* Dark rail: slate-600 icons are 2.4:1 on the dark rail. :where() keeps this at the base rule's
   specificity, so hover, active, emergency and the modules pill below still win. */
:where([data-theme="dark"]) .activity-item {
  color: #9aa5bd !important;
}

.activity-item:hover {
  color: var(--n360-color-primary-600) !important;
  background: rgba(255, 106, 0, 0.08) !important;
}

/* Active item — brand orange accent */
.activity-item.active {
  color: var(--n360-color-primary-600) !important;
  background: rgba(255, 106, 0, 0.1) !important;
}

/* 3 px left accent bar — brand orange */
.activity-item.active::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 3px !important;
  height: 22px !important;
  background: var(--n360-color-primary-500) !important;
  border-radius: 0 2px 2px 0 !important;
}

/* CSS tooltip — label floats right on hover */
.activity-item::after {
  content: attr(title) !important;
  position: absolute !important;
  left: calc(100% + 12px) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: #1f1f1f !important;
  color: #cccccc !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  padding: 4px 10px !important;
  border-radius: 3px !important;
  border: 1px solid #454545 !important;
  pointer-events: none !important;
  opacity: 0 !important;
  transition: opacity 0.1s ease 0.6s !important;
  z-index: 9999 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

.activity-item:hover::after {
  opacity: 1 !important;
}

/* Hide text labels — tooltips only */
.activity-label {
  display: none !important;
}

/* Emergency icon in red */
.activity-emergency,
.activity-emergency.activity-item {
  color: #dc2626 !important;
}
.activity-emergency:hover,
.activity-emergency.activity-item:hover {
  color: #b91c1c !important;
  background: rgba(220, 38, 38, 0.08) !important;
}

/* Divider between top icons and rest */
.activity-bar-divider {
  width: 28px !important;
  height: 1px !important;
  background: rgba(13, 27, 42, 0.1) !important;
  margin: 4px auto !important;
  flex-shrink: 0 !important;
}

/* ── Modules / Hamburger button — navy gradient pill, orange when engaged ── */
.activity-item.activity-modules {
  color: #ffffff !important;
  background: linear-gradient(135deg, #0d1b2a 0%, #1b2b40 100%) !important;
  border-bottom: none !important;
  border-radius: 10px !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  box-shadow: 0 3px 10px -2px rgba(13, 27, 42, 0.4) !important;
  position: relative !important;
}

.activity-item.activity-modules:hover {
  color: #ffffff !important;
  background: linear-gradient(135deg, #0d1b2a 0%, #cc4a00 100%) !important;
  transform: scale(1.05) !important;
  box-shadow: 0 5px 16px -3px rgba(255, 106, 0, 0.45) !important;
}

/* Active (sidebar open) */
.activity-item.activity-modules.active {
  color: #ffffff !important;
  background: linear-gradient(135deg, #0d1b2a 0%, #cc4a00 100%) !important;
  box-shadow:
    0 0 0 2px rgba(255, 106, 0, 0.35),
    0 3px 10px -2px rgba(255, 106, 0, 0.4) !important;
}

/* Modules button: suppress the left accent bar */
.activity-item.activity-modules.active::before {
  display: none !important;
}

/* ── Main content offset — push right when sidebar panel is open ─── */
/* vscode-shell gets .panel-open from MainLayout when SidebarState.ActiveSection != null */
@media (min-width: 769px) {
  /* Default: only the 48px rail */
  .vscode-shell main {
    margin-left: 48px !important;
    transition: margin-left 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  }
  /* Panel open: rail (48px) + panel (280px) */
  .vscode-shell.panel-open main {
    margin-left: 328px !important;
  }
}

/* Hamburger menu icon (Modules) */
.hamburger {
  width: 18px;
  height: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transition: all 0.2s ease;
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .hamburger span {
    transition: none !important;
  }
}

.hamburger.is-open span:nth-child(1) {
  transform: translateY(5px) rotate(45deg);
}
.hamburger.is-open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.hamburger.is-open span:nth-child(3) {
  transform: translateY(-5px) rotate(-45deg);
}

/* ── Explorer Sidebar Panel — overlay/drawer, no layout shift ─── */
.sidebar-panel {
  /* Core overlay positioning — never shifts main content.
       Starts below the TopBar so the title-bar row is never covered. */
  position: fixed !important;
  top: var(--n360-topbar-height, 35px) !important;
  z-index: 99 !important;
  display: flex !important;
  flex-direction: column !important;
  /* Desktop: slides from the activity bar edge */
  left: var(--n360-activity-bar-width, 48px) !important;
  width: 280px !important;
  height: calc(
    100vh - var(--n360-statusbar-height, 22px) - var(--n360-topbar-height, 35px)
  ) !important;
  background: var(--n360-sidebar-bg, #252526) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 4px 0 16px rgba(0, 0, 0, 0.35) !important;
}

/* Mobile: full-width panel from top.
   Panel starts at top: 35px (TopBar) and must clear the 56px bottom ActivityBar.
   StatusBar is HIDDEN on mobile — do not subtract its height here. */
@media (max-width: 768px) {
  .sidebar-panel {
    left: 0 !important;
    width: 100% !important;
    height: calc(100vh - var(--n360-topbar-height, 35px) - 56px) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important;
  }
}

/* iOS safe-area: sidebar-panel must also clear the home indicator */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  @media (max-width: 768px) {
    .sidebar-panel {
      height: calc(
        100vh - var(--n360-topbar-height, 35px) - 56px -
          env(safe-area-inset-bottom)
      ) !important;
    }
  }
}

@keyframes vscode-slide-in {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Sidebar header — let scoped ActivityBar.razor.css control this; just reset border */
.sidebar-header {
  padding: 8px 12px 6px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: var(--n360-color-neutral-800, #2d2d30) !important;
}

.sidebar-header-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

.sidebar-header h3 {
  margin: 0 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  color: rgba(255, 255, 255, 0.6) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  flex: 1 !important;
}

.sidebar-header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
  opacity: 0 !important;
  transition: opacity 0.12s ease !important;
}

.sidebar-header:hover .sidebar-header-actions {
  opacity: 1 !important;
}

.sidebar-action-btn {
  width: 22px !important;
  height: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  border-radius: 3px !important;
  color: rgba(255, 255, 255, 0.5) !important;
  cursor: pointer !important;
  padding: 0 !important;
}

.sidebar-action-btn:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

/* Filter input */
.sidebar-filter {
  display: flex !important;
  align-items: center !important;
  background: rgba(0, 0, 0, 0.2) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 3px !important;
  padding: 0 6px !important;
  height: 26px !important;
  gap: 4px !important;
}

.sidebar-filter:focus-within {
  border-color: #007fd4 !important;
  box-shadow: 0 0 0 1px #007fd4 !important;
}

.sidebar-filter-input {
  flex: 1 !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 12px !important;
  padding: 0 !important;
  min-width: 0 !important;
}

.sidebar-filter-input::placeholder {
  color: rgba(255, 255, 255, 0.3) !important;
}

.sidebar-filter-clear {
  background: transparent !important;
  border: none !important;
  color: rgba(255, 255, 255, 0.4) !important;
  cursor: pointer !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
}

.sidebar-filter-clear:hover {
  color: #ffffff !important;
}

/* Scrollable content area */
.sidebar-content {
  flex: 1 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 4px 0 16px !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(255, 255, 255, 0.15) transparent !important;
}

.sidebar-content::-webkit-scrollbar {
  width: 8px;
}
.sidebar-content::-webkit-scrollbar-track {
  background: transparent;
}
.sidebar-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.sidebar-content::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
  background-clip: padding-box;
}

/* ── Explorer Tree Group (section headers) ──────────────────── */
.tree-group {
  display: flex !important;
  flex-direction: column !important;
}

.tree-group-header {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  width: 100% !important;
  height: 26px !important;
  padding: 0 10px !important;
  background: var(--n360-sidebar-bg, #252526) !important;
  border: none !important;
  /* Default to the LIGHT-panel appearance. `data-theme` is never set app-wide, so
     the old white default (a dark-sidebar leftover) rendered white-on-white and hid
     every section header in the ALL MODULES flyout. White is restored explicitly
     under [data-theme="dark"] below. */
  color: var(--n360-color-neutral-700, #374151) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  cursor: pointer !important;
  text-align: left !important;
  user-select: none !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1 !important;
  margin-top: 6px !important;
  transition:
    color 0.1s ease,
    background 0.1s ease !important;
}

.tree-group-header:hover {
  color: var(--n360-color-primary-600) !important;
  background: rgba(255, 106, 0, 0.06) !important;
}

/* Dark theme: restore the original dark-sidebar treatment (white text on dark bg).
   Only applies when a theme is explicitly selected, so the light default above
   remains correct for the unset/default theme. */
[data-theme="dark"] .tree-group-header,
[data-theme="dark"] .tree-group-header * {
  color: rgba(255, 255, 255, 0.85) !important;
}

[data-theme="dark"] .tree-group-header:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

.tree-group-children {
  display: flex;
  flex-direction: column;
}

/* ── Explorer Tree Items (nav links) ────────────────────────── */
.tree-item {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  width: 100% !important;
  height: 22px !important;
  line-height: 22px !important;
  padding: 0 12px 0 calc(18px + var(--tree-depth, 0) * 12px) !important;
  margin: 0 !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  cursor: pointer !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  text-align: start !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  position: relative !important;
  transition: background-color 0.05s ease !important;
  text-decoration: none !important;
}

/* Hover was white at 8% — a dark-panel leftover that changes nothing on the white panel — and
   the active row was indigo under orange text. Both now use the brand list tokens
   (enterprise-polish.css), which carry their own dark-theme values. */
.tree-item:hover,
.tree-item:focus {
  background: var(--n360-list-hover, rgba(255, 106, 0, 0.08)) !important;
  outline: none !important;
}

/* Active/selected item */
.tree-item-active,
.tree-item-active:hover,
.tree-item-active:focus {
  background: var(--n360-list-active-bg, rgba(255, 106, 0, 0.14)) !important;
  color: var(--n360-color-primary-600) !important;
}

.tree-item-active::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 2px !important;
  background: var(--n360-color-primary-500) !important;
}

/* Sidebar section wrapper */
.sidebar-section {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.sidebar-tree {
  display: flex;
  flex-direction: column;
}

/* ── Patient Chart: suppress redundant chrome on embedded section pages ──────────
   The chart (/patients/{id}, Chart.razor) hosts full standalone section pages inline
   via <DynamicComponent> inside .chart-content (Medical History, Allergies, Vitals,
   Medications, …). Each of those pages brings its OWN breadcrumb, page-header
   (back-arrow + title) and patient banner — all redundant because the chart already
   renders the N360PatientBanner + left-nav. Suppress that chrome in one place (covers
   every current and future section) while KEEPING each section's action buttons
   (.page-header-right). The chart's own banner sits OUTSIDE .chart-content, so it is
   unaffected. */
.chart-content .n360-breadcrumb,
.chart-content .n360-patient-banner,
.chart-content .n360-page-header .page-header-left {
  display: none !important;
}
.chart-content .n360-page-header {
  padding: 0 !important;
  margin: 0 0 0.5rem !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  min-height: 0 !important;
}
.chart-content .n360-page-header .page-header-right {
  justify-content: flex-end !important;
}

/* ── Syncfusion popups trapped behind an open N360Dialog/N360Modal ─────────
   SfDropDownList/SfDatePicker/SfMultiSelect popups are teleported to
   document.body as siblings of the SfDialog, not descendants of it. Syncfusion
   assigns the dialog's own overlay+surface a high dynamic z-index (~1000+) but
   does not always re-elevate an *already-open* popup above a dialog opened
   afterward, so a dropdown opened from inside a modal (e.g. Pharmacy > Suppliers
   > Add Supplier > Category) can render its option list visually on top while
   the dialog's overlay still intercepts the pointer events, making the option
   list look clickable but not respond. Force every Syncfusion popup above the
   highest dialog surface so clicks always reach the actual option elements. */
.e-popup-open,
.e-popup.e-popup-open,
.e-ddl.e-popup,
.e-daterangepicker.e-popup,
.e-datepicker.e-popup,
.e-timepicker.e-popup,
.e-multi-select-list-wrapper {
  z-index: 100000 !important;
}