/* Design System v2 — materials (Clinical OS v2 Phase 2, audit section N).
 * Translucent "material" is for CHROME ONLY: sidebar, top bar, mobile tab bar, floating tool palettes,
 * the command palette, sheet headers and popovers. Cards, forms, tables and clinical values stay on
 * opaque surfaces. Opaque fallback without backdrop-filter support, under
 * prefers-reduced-transparency: reduce and under prefers-contrast: more (tokens.css swaps
 * --material-bg / --material-filter for those two). Loaded after theme.css and clinical.css. */

.material-bar,
.material-float,
.material-sheet-head,
.material-popover,
html body.aesthetic-crm .medical-sidebar,
html body.aesthetic-crm .medical-topbar,
html body.aesthetic-crm .aesthetic-bottom-nav,
html body.aesthetic-crm .notification-pop,
html body.aesthetic-crm .profile-pop,
html body.aesthetic-crm .cmdk,
html body.aesthetic-crm :is(.av2-toolbar, .cm-overlay-tools),
html body.aesthetic-crm #drdialModal .modal-panel > .panel-head {
  background: var(--material-bg);
  -webkit-backdrop-filter: var(--material-filter);
  backdrop-filter: var(--material-filter);
}
.material-bar, html body.aesthetic-crm .medical-sidebar, html body.aesthetic-crm .medical-topbar, html body.aesthetic-crm .aesthetic-bottom-nav { border-color: var(--line); }
.material-float, .material-popover, html body.aesthetic-crm .notification-pop, html body.aesthetic-crm .profile-pop, html body.aesthetic-crm .cmdk, html body.aesthetic-crm :is(.av2-toolbar, .cm-overlay-tools) { box-shadow: var(--elev-pop); border: var(--hairline) solid var(--line); }
.material-float { border-radius: var(--r-lg); }
.material-popover { border-radius: var(--r-md); }
/* Sheet headers stay readable over scrolling form content beneath them. */
.material-sheet-head, html body.aesthetic-crm #drdialModal .modal-panel > .panel-head { position: sticky; top: 0; z-index: 2; }

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .material-bar, .material-float, .material-sheet-head, .material-popover,
  html body.aesthetic-crm .medical-sidebar, html body.aesthetic-crm .medical-topbar, html body.aesthetic-crm .aesthetic-bottom-nav,
  html body.aesthetic-crm .notification-pop, html body.aesthetic-crm .profile-pop, html body.aesthetic-crm .cmdk, html body.aesthetic-crm :is(.av2-toolbar, .cm-overlay-tools),
  html body.aesthetic-crm #drdialModal .modal-panel > .panel-head { background: var(--material-fallback); }
}