/* ===========================================================================
   FALLBACKS — not optional
   =========================================================================== */

/* Browsers without backdrop-filter get an opaque surface rather than
   unreadable transparency. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  html[data-theme] .dropdown-menu,
  html[data-theme] .popover,
  html[data-theme] .tooltip-inner,
  html[data-theme] .modal-content {
    background: var(--crm-surface);
  }
}

/* Viewers who ask for less transparency get none. */
@media (prefers-reduced-transparency: reduce) {
  html[data-theme] .sidebar,
  html[data-theme] #header,
  html[data-theme] .panel_s,
  html[data-theme] .panel,
  html[data-theme] .dropdown-menu,
  html[data-theme] .popover,
  html[data-theme] .modal-content,
  html[data-theme] .btn-bottom-toolbar {
    background: var(--crm-surface);
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
  }

  html[data-theme] body.admin { background: var(--crm-canvas); }
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme] * {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

/* Print. The CRM ships no @media print rules at all, so translucent surfaces
   would print as grey mush. Everything goes opaque and loses its shadows. */
@media print {
  html[data-theme] body.admin,
  html[data-theme] body.admin #wrapper,
  html[data-theme] body.admin .content {
    background: #fff !important;
  }

  html[data-theme] .panel_s,
  html[data-theme] .panel,
  html[data-theme] .modal-content,
  html[data-theme] .dropdown-menu {
    background: #fff !important;
    -webkit-backdrop-filter: none !important;
            backdrop-filter: none !important;
    box-shadow: none !important;
  }

  html[data-theme] .sidebar,
  html[data-theme] #header,
  html[data-theme] .btn-bottom-toolbar {
    display: none !important;
  }
}