/* =====================================================
   DATASOURCE — COMMON STYLES
   Shared by datasource-list.css and datasource-form.css
   ===================================================== */

/* =====================================================
   HIDE MD-TOOLTIP — scoped to the datasource dialogs only.
   Was a bare, unscoped `md-tooltip { display: none }` — harmless
   back when this file only loaded while one of these dialogs was
   open, but this stylesheet is now preloaded on every page (see
   index.html), so the unscoped version was hiding EVERY tooltip
   app-wide (e.g. the Biz Interceptor environment status dots).
   ===================================================== */

.datasource-form-dialog md-tooltip,
.datasource-form-dialog .md-tooltip,
.datasource-form-dialog ._md-tooltip,
.ds-refs-dialog md-tooltip,
.ds-refs-dialog .md-tooltip,
.ds-refs-dialog ._md-tooltip,
.datasources-dialog md-tooltip,
.datasources-dialog .md-tooltip,
.datasources-dialog ._md-tooltip {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* =====================================================
   DROPDOWN MENU — deliberately left GLOBAL/unscoped.
   md-select-menu-container renders outside any dialog's DOM (as a
   sibling of body). A md-container-class="datasource-select-menu"
   scoping attempt was tried here and reverted: the backdrop z-index
   below is unscoped by necessity (any select opened from within a
   dialog needs its backdrop above that dialog, not just datasource
   ones) and stays at a fixed 4999, but the menu's OWN z-index below
   it depended on md-container-class actually landing on the live
   .md-select-menu-container element — when it didn't (or landed
   somewhere these selectors didn't reach), the menu rendered BELOW
   its own backdrop instead of above it, so the backdrop silently ate
   every hover/click meant for the options — no highlight, no way to
   select anything. Kept global instead, same as before this file was
   preloaded app-wide: a real but purely cosmetic risk (these option
   colors could show through in some other dropdown elsewhere), which
   is a much safer failure mode than dropdowns becoming unusable.
   ===================================================== */

md-backdrop.md-select-backdrop {
  z-index: 4999 !important;   /* above dialog (~80), below menu (5000) */
}

/* Angular Material's default select backdrop is opaque black @ 0.48 —
   fine for a full-screen dialog, but a jarring black flash for a small
   dropdown, especially visible for the ~400ms it takes to fade out
   (md-backdrop.md-opaque.ng-leave) right as an option is picked. Same
   navy as the rest of the design system's dark tones, much lower
   opacity, so it reads as a soft dim instead of a flash. Applies to
   every <md-select> app-wide (this backdrop is unscoped/global — see
   comment above), not just the datasource ones. */
md-backdrop.md-select-backdrop.md-opaque {
  background-color: rgba(17, 24, 39, 0.18) !important;
}

md-select-menu,
.md-select-menu-container {
  z-index: 5000 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
  border-radius: 8px !important;
}

md-select-menu md-content,
.md-select-menu-container md-content {
  background: white !important;
  max-height: 300px !important;
}

md-select-menu md-option,
.md-select-menu-container md-option {
  color: #333 !important;
  background: white !important;
  min-height: 44px !important;
  padding: 0 16px !important;
  font-size: 14px !important;
  display: flex !important;
  align-items: center !important;
}

md-select-menu md-option:hover,
.md-select-menu-container md-option:hover {
  background-color: #f5f5f5 !important;
}

md-select-menu md-option[selected],
.md-select-menu-container md-option[selected] {
  background-color: #e3f2fd !important;
  color: #1976d2 !important;
  font-weight: 600 !important;
}

md-select-menu md-option *,
.md-select-menu-container md-option *,
md-select-menu md-option .md-text,
.md-select-menu-container md-option .md-text {
  color: #333 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* =====================================================
   ANIMATIONS
   ===================================================== */

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideInUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pulse-icon {
  0%, 100% { transform: scale(1);    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); }
  50%       { transform: scale(1.05); box-shadow: 0 8px 30px rgba(25, 118, 210, 0.15); }
}

@keyframes pulse-delete {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.15); }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.fade-in { animation: fadeIn 0.5s ease-in; }