/* CRM only. 20% transparency = 80% background opacity; content stays opaque. */
html[data-crm-glass="true"] {
  --crm-glass-fill: rgba(12, 12, 18, 0.8);
  --crm-glass-edge: rgba(224, 193, 112, 0.23);
  --crm-glass-sheen: linear-gradient(145deg, rgba(255,255,255,0.11), rgba(255,255,255,0.025) 36%, transparent 62%);
  --crm-glass-shadow: inset 0 1px 0 rgba(255,255,255,0.15), inset 1px 0 0 rgba(255,255,255,0.04), inset 0 -1px 0 rgba(0,0,0,0.7), 0 3px 0 rgba(0,0,0,0.42), 0 16px 36px -18px rgba(0,0,0,0.85);
}

html[data-crm-glass="true"] #root > div > .min-h-screen,
html[data-crm-glass="true"] .min-h-screen.bg-aura-black {
  background-image: radial-gradient(ellipse at 80% 6%, rgba(212,175,55,0.08), transparent 48%), radial-gradient(ellipse at 30% 90%, rgba(99,133,159,0.06), transparent 52%);
}

/* Existing surface classes and bordered card containers cover every CRM page. */
html[data-crm-glass="true"] :is(
  .glass-card, .glass-panel, .surface-1, .surface-2, [data-slot="card"],
  [data-crm-card], div[class*="rounded"][class~="border"], div[class*="rounded"][class*="border-"],
  section[class*="rounded"][class~="border"], article[class*="rounded"]
) {
  background-color: var(--crm-glass-fill) !important;
  background-image: var(--crm-glass-sheen) !important;
  border-color: var(--crm-glass-edge);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  backdrop-filter: blur(18px) saturate(135%);
  box-shadow: var(--crm-glass-shadow);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

/* Native buttons, custom button roles, input buttons and navigation actions. */
html[data-crm-glass="true"] :where(
  button, [role="button"], input[type="button"], input[type="submit"],
  input[type="reset"], a.glass-button, a[class*="rounded"][class*="px-"]
) {
  background-color: var(--crm-glass-fill) !important;
  background-image: var(--crm-glass-sheen) !important;
  border: 1px solid var(--crm-glass-edge);
  border-radius: var(--radius, 0.65rem);
  -webkit-backdrop-filter: blur(12px) saturate(145%);
  backdrop-filter: blur(12px) saturate(145%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.6), 0 3px 0 rgba(0,0,0,0.55), 0 8px 16px -8px rgba(0,0,0,0.85);
  transition: translate 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

html[data-crm-glass="true"] :is(button, [role="button"], a)[class*="rounded-full"] {
  border-radius: 9999px;
}

/* Preserve gold primary, green call and red destructive action meanings. */
html[data-crm-glass="true"] :is(button, [role="button"], a)[class*="bg-aura-gold"],
html[data-crm-glass="true"] :is(button, [role="button"], a)[class*="bg-gold"] {
  background-color: rgba(112, 87, 26, 0.8) !important;
  color: #fff0bc !important;
  border-color: rgba(235,201,105,0.48);
}
html[data-crm-glass="true"] :is(button, [role="button"], a)[class*="bg-aura-emerald"],
html[data-crm-glass="true"] :is(button, [role="button"], a)[class*="bg-emerald"],
html[data-crm-glass="true"] button[title="Open dialer"] {
  background-color: rgba(8, 94, 70, 0.8) !important;
  color: #d9fff1 !important;
  border-color: rgba(68,230,172,0.38);
}
html[data-crm-glass="true"] button[title="Open dialer"] svg { color: #d9fff1; }
html[data-crm-glass="true"] :is(button, [role="button"], a)[class*="bg-aura-ruby"],
html[data-crm-glass="true"] :is(button, [role="button"], a)[class*="bg-red-"] {
  background-color: rgba(112, 26, 42, 0.8) !important;
  color: #ffe1e7 !important;
  border-color: rgba(251,113,133,0.38);
}

html[data-crm-glass="true"] :is(button, [role="button"], input[type="submit"], input[type="button"], a.glass-button):focus-visible {
  outline: 2px solid #e8c873;
  outline-offset: 3px;
}
html[data-crm-glass="true"] :is(button, [role="button"], input[type="submit"], input[type="button"]):is(:disabled, [aria-disabled="true"]) {
  cursor: not-allowed;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

@media (hover: hover) and (pointer: fine) {
  html[data-crm-glass="true"] :is(.glass-card, .glass-panel, [data-slot="card"], [data-crm-card]):hover {
    border-color: rgba(235,201,105,0.42);
    box-shadow: var(--crm-glass-shadow), 0 0 24px -12px rgba(212,175,55,0.3);
  }
  html[data-crm-glass="true"] :is(button, [role="button"], a.glass-button, a[class*="rounded"][class*="px-"]):not(:disabled):not([aria-disabled="true"]):hover {
    translate: 0 -2px;
    border-color: rgba(235,201,105,0.48);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), inset 0 -1px 0 rgba(0,0,0,0.6), 0 5px 0 rgba(0,0,0,0.45), 0 12px 24px -10px rgba(0,0,0,0.85);
  }
}
html[data-crm-glass="true"] :is(button, [role="button"], a.glass-button):not(:disabled):not([aria-disabled="true"]):active {
  translate: 0 1px;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.08);
}
@media (prefers-reduced-motion: reduce) {
  html[data-crm-glass="true"] :is(button, [role="button"], .glass-card, .glass-panel, [data-slot="card"]) {
    transition: none;
    translate: none !important;
  }
}
@supports not (backdrop-filter: blur(1px)) {
  html[data-crm-glass="true"] :is(.glass-card, .glass-panel, [data-slot="card"], button, [role="button"]) {
    background-color: rgba(12,12,18,0.8) !important;
  }
}