/*
  Cor product family — gradient surface utilities (CorAuth canonical).
  Canonical: C:\ITStaff\_Projects\_branding\ca-gradients.css
  Spec: COR_BRAND_GUIDELINES.md §4.0

  Direction: panel upper-left → accent lower-right.
  Apply to cards, metric tiles, search bars, table headers, Settings sections.
*/

/* Page backdrop radial wash (optional on body) */
body.ca-body-wash,
.ca-body-wash {
  background:
    radial-gradient(1200px 600px at 10% -10%, var(--ca-accent-soft, rgba(14, 165, 233, 0.12)), transparent 50%),
    radial-gradient(900px 500px at 100% 0%, rgba(99, 102, 241, 0.08), transparent 45%),
    var(--ca-bg, #eef2f7);
}

html.dark body.ca-body-wash,
html.dark .ca-body-wash {
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(56, 189, 248, 0.12), transparent 50%),
    radial-gradient(900px 500px at 100% 0%, rgba(99, 102, 241, 0.12), transparent 45%),
    var(--ca-bg, #0b1220);
}

.ca-grad-blue {
  background-image: linear-gradient(
    to bottom right,
    var(--ca-panel, #ffffff),
    color-mix(in srgb, var(--ca-accent, #0ea5e9) 10%, transparent)
  ) !important;
  background-color: var(--ca-panel, #ffffff);
}

.ca-grad-blue-soft {
  background-image: linear-gradient(
    to bottom right,
    var(--ca-panel, #ffffff),
    color-mix(in srgb, var(--ca-accent, #0ea5e9) 8%, transparent)
  ) !important;
  background-color: var(--ca-panel, #ffffff);
}

.ca-grad-ok {
  background-image: linear-gradient(
    to bottom right,
    var(--ca-panel, #ffffff),
    color-mix(in srgb, #10b981 15%, transparent)
  ) !important;
  border-color: color-mix(in srgb, #10b981 40%, var(--ca-border, #d0d7e2)) !important;
  background-color: var(--ca-panel, #ffffff);
}

.ca-grad-warn {
  background-image: linear-gradient(
    to bottom right,
    var(--ca-panel, #ffffff),
    color-mix(in srgb, #f59e0b 12%, transparent)
  ) !important;
  border-color: color-mix(in srgb, #f59e0b 35%, var(--ca-border, #d0d7e2)) !important;
  background-color: var(--ca-panel, #ffffff);
}

.ca-grad-bad {
  background-image: linear-gradient(
    to bottom right,
    var(--ca-panel, #ffffff),
    color-mix(in srgb, #ef4444 15%, transparent)
  ) !important;
  border-color: color-mix(in srgb, #ef4444 40%, var(--ca-border, #d0d7e2)) !important;
  background-color: var(--ca-panel, #ffffff);
}

/* Apply family gradients to common card classes when present */
.card.ca-grad-blue,
.ca-card.ca-grad-blue,
.hero.ca-grad-blue {
  /* class stack already sets background-image */
}

/* Table header wash */
thead.ca-grad-blue th,
.ca-grad-blue thead th {
  background: transparent;
}