/* MyMEX tenant analytics visual system: scoped to analytics-only markup. */
body.tenant-admin {
  --analytics-blue: #37a6ff;
  --analytics-pink: #ff4fb8;
  --analytics-orange: #f4a43a;
  --analytics-green: #39f0ad;
}

.tenant-analytics-heading {
  position: relative;
  isolation: isolate;
  min-height: 230px;
  margin-bottom: 18px;
  padding: clamp(24px, 3vw, 38px);
  overflow: hidden;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--tenant-secondary) 24%, var(--tenant-line));
  border-radius: 28px;
  background:
    radial-gradient(circle at 87% 22%, color-mix(in srgb, var(--analytics-blue) 18%, transparent), transparent 29%),
    radial-gradient(circle at 72% 115%, color-mix(in srgb, var(--analytics-green) 15%, transparent), transparent 34%),
    linear-gradient(138deg, color-mix(in srgb, var(--tenant-primary) 8%, #fff), #fff 58%, color-mix(in srgb, var(--analytics-blue) 7%, #fff));
  box-shadow: 0 26px 70px rgba(5, 42, 83, .12);
}
.tenant-analytics-heading::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -92px;
  right: clamp(120px, 19vw, 310px);
  width: 238px;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--analytics-blue) 24%, transparent);
  border-radius: 50%;
  box-shadow:
    0 0 0 28px color-mix(in srgb, var(--analytics-pink) 4%, transparent),
    0 0 0 58px color-mix(in srgb, var(--analytics-orange) 3%, transparent);
}
.tenant-analytics-heading::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 30px;
  right: 30px;
  bottom: 0;
  height: 4px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--analytics-pink), var(--analytics-orange), var(--analytics-green), var(--analytics-blue));
  box-shadow: 0 0 24px rgba(55, 166, 255, .22);
}
.tenant-analytics-heading > * { position: relative; z-index: 1; }
.tenant-analytics-heading > div:first-child { max-width: 780px; }
.tenant-analytics-heading h1 {
  max-width: 720px;
  margin: 8px 0 13px;
  font-size: clamp(38px, 4.4vw, 62px);
  line-height: .98;
  letter-spacing: -.055em;
}
.tenant-analytics-heading > div:first-child > p { max-width: 690px; }
.tenant-analytics-heading-badge {
  min-width: min(310px, 100%);
  padding: 18px 20px;
  border-color: color-mix(in srgb, var(--analytics-green) 32%, var(--tenant-line));
  border-radius: 20px;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 18px 46px rgba(5, 42, 83, .13), inset 0 1px rgba(255, 255, 255, .7);
}

.tenant-analytics-card-switcher,
.tenant-analytics-date-filter {
  border-color: color-mix(in srgb, var(--analytics-blue) 16%, var(--tenant-line));
  background: linear-gradient(145deg, rgba(255, 255, 255, .98), color-mix(in srgb, var(--analytics-blue) 3%, #fff));
  box-shadow: 0 14px 38px rgba(5, 42, 83, .07);
}
.tenant-analytics-card-option { min-height: 74px; }
.tenant-analytics-card-option.is-active {
  border-color: color-mix(in srgb, var(--analytics-blue) 58%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--analytics-blue) 11%, #fff), color-mix(in srgb, var(--analytics-green) 8%, #fff));
  box-shadow: 0 14px 32px color-mix(in srgb, var(--analytics-blue) 16%, transparent);
}

.tenant-analytics-metrics { gap: clamp(16px, 1.55vw, 22px); }
.tenant-analytics-metric {
  --metric-color: var(--analytics-blue);
  --metric-glow: color-mix(in srgb, var(--metric-color) 18%, transparent);
  min-height: 192px;
  padding: 22px;
  border-color: color-mix(in srgb, var(--metric-color) 28%, var(--tenant-line));
  border-radius: 24px;
  background:
    radial-gradient(circle at 103% -5%, color-mix(in srgb, var(--metric-color) 15%, transparent), transparent 43%),
    linear-gradient(145deg, #fff, color-mix(in srgb, var(--metric-color) 4%, #f8fbff));
  box-shadow: 0 20px 48px rgba(5, 42, 83, .09), inset 0 1px rgba(255, 255, 255, .85);
}
.tenant-analytics-metric.is-violet,
.tenant-analytics-metric.is-pink { --metric-color: var(--analytics-pink); }
.tenant-analytics-metric.is-green { --metric-color: var(--analytics-green); }
.tenant-analytics-metric.is-orange { --metric-color: var(--analytics-orange); }
.tenant-analytics-metric.is-blue { --metric-color: var(--analytics-blue); }
.tenant-analytics-metric::before {
  right: -62px;
  top: auto;
  bottom: -86px;
  width: 190px;
  height: 190px;
  background: radial-gradient(circle, color-mix(in srgb, var(--metric-color) 20%, transparent), transparent 68%);
}
.tenant-analytics-metric::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 14px;
  width: 52px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(var(--metric-color) 0 72%, color-mix(in srgb, var(--metric-color) 12%, transparent) 72% 100%);
  -webkit-mask: radial-gradient(circle, transparent 54%, #000 56%);
  mask: radial-gradient(circle, transparent 54%, #000 56%);
  opacity: .75;
  transform: rotate(-90deg);
  transition: transform .9s cubic-bezier(.2, .8, .2, 1);
}
.tenant-analytics-metric.is-visible::after { transform: rotate(270deg); }
.tenant-analytics-metric-top,
.tenant-analytics-metric > strong,
.tenant-analytics-metric > span,
.tenant-analytics-metric > em { position: relative; z-index: 1; }
.tenant-analytics-metric-icon {
  width: 38px;
  height: 38px;
  margin: 7px 7px 0 0;
  border-color: color-mix(in srgb, var(--metric-color) 35%, transparent);
  background: color-mix(in srgb, var(--metric-color) 12%, #fff);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--metric-color) 14%, transparent);
}
.tenant-analytics-metric > strong { margin-top: 16px; font-size: clamp(42px, 4vw, 58px); }
.tenant-analytics-metric > span { min-height: 20px; line-height: 1.45; }

.tenant-analytics-visual-card {
  border-color: color-mix(in srgb, var(--analytics-blue) 17%, var(--tenant-line));
  border-radius: 26px;
  background:
    radial-gradient(circle at 100% 0, rgba(55, 166, 255, .06), transparent 31%),
    var(--tenant-panel, #fff);
  box-shadow: 0 24px 60px rgba(5, 42, 83, .1);
}
.tenant-analytics-trend {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(22px, 2.4vw, 30px);
}
.tenant-analytics-trend::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -110px;
  top: -150px;
  width: 360px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(from 30deg, var(--analytics-pink), var(--analytics-orange), var(--analytics-green), var(--analytics-blue), var(--analytics-pink));
  filter: blur(70px);
  opacity: .1;
}
.tenant-chart-heading h2 { font-size: clamp(24px, 2.2vw, 34px); letter-spacing: -.035em; }
.tenant-chart-key { gap: 9px; }
.tenant-chart-key span {
  min-height: 42px;
  padding: 9px 12px;
  border-color: color-mix(in srgb, var(--key) 30%, var(--tenant-line));
  border-radius: 14px;
  background: color-mix(in srgb, var(--key) 7%, #fff);
}
.tenant-chart-key i { box-shadow: 0 0 0 5px color-mix(in srgb, var(--key) 13%, transparent), 0 0 14px color-mix(in srgb, var(--key) 42%, transparent); }
.tenant-line-chart {
  margin-top: 24px;
  padding: 16px 14px 10px;
  border: 1px solid color-mix(in srgb, var(--analytics-blue) 16%, var(--tenant-line));
  border-radius: 22px;
  background:
    repeating-linear-gradient(to right, transparent 0 calc(12.5% - 1px), color-mix(in srgb, var(--analytics-blue) 5%, transparent) calc(12.5% - 1px) 12.5%),
    linear-gradient(180deg, color-mix(in srgb, var(--analytics-blue) 3%, #fff), rgba(255, 255, 255, .72));
}
.tenant-line-chart svg { height: 244px; }
.tenant-line-chart line { stroke: color-mix(in srgb, var(--analytics-blue) 14%, var(--tenant-line)); }
.tenant-chart-line-total { stroke: var(--analytics-blue); filter: drop-shadow(0 5px 8px rgba(55, 166, 255, .32)); }
.tenant-chart-line-views { stroke: var(--analytics-green); filter: drop-shadow(0 5px 8px rgba(57, 240, 173, .28)); }
.tenant-chart-point { stroke: var(--analytics-blue); }
.tenant-chart-axis { padding-top: 7px; font-size: 11px; }

.tenant-analytics-donuts { gap: clamp(16px, 1.6vw, 22px); }
.tenant-donut-card {
  --analytics-card-accent: var(--analytics-pink);
  position: relative;
  min-height: 350px;
  padding: clamp(22px, 2.2vw, 28px);
  overflow: hidden;
  border-color: color-mix(in srgb, var(--analytics-card-accent) 23%, var(--tenant-line));
}
.tenant-donut-card:nth-child(2) { --analytics-card-accent: var(--analytics-green); }
.tenant-donut-card::before {
  content: "";
  position: absolute;
  right: -88px;
  bottom: -110px;
  width: 250px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--analytics-card-accent) 14%, transparent), transparent 68%);
  pointer-events: none;
}
.tenant-donut-layout { grid-template-columns: 194px minmax(0, 1fr); gap: clamp(22px, 2.2vw, 34px); }
.tenant-donut {
  width: 194px;
  padding: 23px;
  filter: drop-shadow(0 16px 28px color-mix(in srgb, var(--analytics-card-accent) 24%, transparent));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--analytics-card-accent) 22%, transparent), 0 20px 46px rgba(5, 42, 83, .16);
}
.tenant-donut::before {
  width: 120px;
  background: #fff;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--analytics-card-accent) 18%, var(--tenant-line)), inset 0 0 28px color-mix(in srgb, var(--analytics-card-accent) 6%, transparent);
}
.tenant-donut::after { background: linear-gradient(120deg, rgba(255, 255, 255, .48), transparent 38%); }
.tenant-donut strong { font-size: 34px; }
.tenant-chart-legend { gap: 14px; }
.tenant-chart-legend > div { gap: 11px; padding: 4px 0 11px; }
.tenant-chart-legend i { width: 10px; height: 10px; box-shadow: 0 0 0 5px color-mix(in srgb, var(--legend) 13%, transparent), 0 0 12px color-mix(in srgb, var(--legend) 25%, transparent); }
.tenant-chart-legend span { font-size: 12px; font-weight: 650; }
.tenant-chart-legend span small { padding: 3px 6px; border-radius: 999px; background: color-mix(in srgb, var(--legend) 10%, transparent); font-size: 9px; }
.tenant-chart-legend strong { font-size: 15px; }
.tenant-chart-legend > div > em { left: 21px; height: 4px; }

.tenant-analytics-page-performance { padding: clamp(22px, 2.3vw, 30px); }
.tenant-analytics-page-grid { gap: 14px; }
.tenant-analytics-page-grid > article {
  min-height: 92px;
  padding: 16px 18px 21px;
  border-color: color-mix(in srgb, var(--page-accent) 22%, var(--tenant-line));
  background: linear-gradient(135deg, color-mix(in srgb, var(--page-accent) 7%, #fff), #fff 62%);
}
.tenant-analytics-ctr { width: 62px; height: 62px; filter: drop-shadow(0 8px 14px color-mix(in srgb, var(--page-accent) 18%, transparent)); }
.tenant-analytics-page-bar { height: 4px; }
.tenant-card-performance > a { min-height: 70px; }
.tenant-event-bars i { height: 10px; }
.tenant-event-bars em { background: linear-gradient(90deg, var(--analytics-pink), var(--analytics-orange), var(--analytics-green), var(--analytics-blue)); }

[data-mymex-theme="dark"] .tenant-analytics-heading {
  border-color: rgba(92, 190, 237, .25);
  background:
    radial-gradient(circle at 88% 20%, rgba(55, 166, 255, .19), transparent 31%),
    radial-gradient(circle at 70% 112%, rgba(57, 240, 173, .11), transparent 35%),
    linear-gradient(138deg, #071b35, #082845 58%, #073652);
  box-shadow: 0 28px 76px rgba(0, 6, 20, .38);
}
[data-mymex-theme="dark"] .tenant-analytics-heading-badge {
  color: #eaf6ff;
  border-color: rgba(57, 240, 173, .28);
  background: rgba(5, 25, 48, .78);
  box-shadow: 0 18px 46px rgba(0, 5, 18, .3), inset 0 1px rgba(255, 255, 255, .05);
}
[data-mymex-theme="dark"] .tenant-analytics-card-switcher,
[data-mymex-theme="dark"] .tenant-analytics-date-filter {
  border-color: rgba(91, 180, 226, .21);
  background: linear-gradient(145deg, #08233f, #071c34);
  box-shadow: 0 16px 42px rgba(0, 6, 20, .26);
}
[data-mymex-theme="dark"] .tenant-analytics-date-filter select,
[data-mymex-theme="dark"] .tenant-analytics-date-filter input {
  color: #eaf6ff;
  border-color: rgba(111, 185, 222, .24);
  background: #0b2b48;
  color-scheme: dark;
}
[data-mymex-theme="dark"] .tenant-analytics-card-option { border-color: rgba(102, 174, 214, .19); background: #0a2945; }
[data-mymex-theme="dark"] .tenant-analytics-card-option.is-active { border-color: rgba(55, 166, 255, .5); background: linear-gradient(135deg, #0d3658, #0c3d50); }
[data-mymex-theme="dark"] .tenant-analytics-card-option strong { color: #f3f9ff; }
[data-mymex-theme="dark"] .tenant-analytics-card-option small { color: #afc7d8; }
[data-mymex-theme="dark"] .tenant-analytics-metric {
  color: #eaf5ff;
  border-color: color-mix(in srgb, var(--metric-color) 30%, #244661);
  background:
    radial-gradient(circle at 102% 0, color-mix(in srgb, var(--metric-color) 18%, transparent), transparent 43%),
    linear-gradient(145deg, #0a2946, #071d36);
  box-shadow: 0 22px 52px rgba(0, 5, 18, .3), inset 0 1px rgba(255, 255, 255, .04);
}
[data-mymex-theme="dark"] .tenant-analytics-metric-icon { color: var(--metric-color); border-color: color-mix(in srgb, var(--metric-color) 40%, transparent); background: color-mix(in srgb, var(--metric-color) 12%, #09243e); }
[data-mymex-theme="dark"] .tenant-analytics-metric > strong { color: #f8fbff; }
[data-mymex-theme="dark"] .tenant-analytics-metric > span { color: #b7cedf; }
[data-mymex-theme="dark"] .tenant-analytics-visual-card {
  color: #eaf5ff;
  border-color: rgba(91, 180, 226, .22);
  background:
    radial-gradient(circle at 100% 0, rgba(55, 166, 255, .08), transparent 32%),
    linear-gradient(145deg, #082541, #061b33);
  box-shadow: 0 25px 64px rgba(0, 5, 18, .34);
}
[data-mymex-theme="dark"] .tenant-chart-key span { color: #bcd2e3; border-color: color-mix(in srgb, var(--key) 32%, #284a65); background: color-mix(in srgb, var(--key) 8%, #0a2946); }
[data-mymex-theme="dark"] .tenant-line-chart {
  border-color: rgba(83, 174, 220, .2);
  background:
    repeating-linear-gradient(to right, transparent 0 calc(12.5% - 1px), rgba(74, 161, 207, .055) calc(12.5% - 1px) 12.5%),
    linear-gradient(180deg, rgba(11, 43, 72, .7), rgba(5, 22, 42, .78));
}
[data-mymex-theme="dark"] .tenant-line-chart line { stroke: rgba(91, 155, 190, .2); }
[data-mymex-theme="dark"] .tenant-donut::before {
  background: #071d36;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--analytics-card-accent) 28%, #244660), inset 0 0 30px rgba(0, 0, 0, .24);
}
[data-mymex-theme="dark"] .tenant-donut strong { color: #fff; text-shadow: 0 0 20px color-mix(in srgb, var(--analytics-card-accent) 24%, transparent); }
[data-mymex-theme="dark"] .tenant-donut small { color: #b9cee0; }
[data-mymex-theme="dark"] .tenant-chart-legend span { color: #c3d7e6; }
[data-mymex-theme="dark"] .tenant-chart-legend strong { color: #fff; }
[data-mymex-theme="dark"] .tenant-analytics-page-grid > article { border-color: color-mix(in srgb, var(--page-accent) 26%, #294a64); background: linear-gradient(135deg, color-mix(in srgb, var(--page-accent) 10%, #0a2946), #071d36 64%); }
[data-mymex-theme="dark"] .tenant-card-performance > a:hover,
[data-mymex-theme="dark"] .tenant-card-performance > a:focus-visible { background: #0d3150; }
[data-mymex-theme="dark"] .tenant-event-bars i { background: #163953; }

@media (max-width: 1180px) and (min-width: 681px) {
  .tenant-donut-layout { grid-template-columns: 164px minmax(0, 1fr); gap: 20px; }
  .tenant-donut { width: 164px; padding: 20px; }
  .tenant-donut::before { width: 100px; }
}
@media (max-width: 760px) {
  .tenant-analytics-heading { min-height: 0; padding: 24px 18px 28px; border-radius: 23px; }
  .tenant-analytics-heading::before { right: -100px; }
  .tenant-analytics-heading::after { left: 18px; right: 18px; }
  .tenant-analytics-heading h1 { font-size: clamp(36px, 11vw, 48px); }
  .tenant-analytics-heading-badge { min-width: 0; }
  .tenant-analytics-metric { min-height: 170px; padding: 18px; }
  .tenant-analytics-trend,
  .tenant-donut-card,
  .tenant-analytics-page-performance { padding: 18px; border-radius: 22px; }
  .tenant-chart-heading h2 { font-size: 25px; }
  .tenant-chart-key { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .tenant-chart-key span { min-width: 0; }
  .tenant-line-chart { margin-top: 18px; padding: 10px 8px 8px; }
  .tenant-line-chart svg { height: 210px; }
  .tenant-donut-layout { grid-template-columns: 1fr; gap: 22px; justify-items: center; }
  .tenant-chart-legend { width: 100%; }
  .tenant-analytics-page-grid > article { min-height: 0; }
}
@media (max-width: 480px) {
  .tenant-analytics-metrics { grid-template-columns: 1fr; }
  .tenant-analytics-metric { min-height: 156px; }
  .tenant-chart-key { grid-template-columns: 1fr; }
  .tenant-chart-key span { width: 100%; }
  .tenant-donut { width: 176px; }
  .tenant-donut::before { width: 108px; }
}
@media (prefers-reduced-motion: reduce) {
  .tenant-analytics-metric::after { transition: none; transform: rotate(270deg); }
}