/*
 * Utilities missing from the verbatim Metronic Tailwind build
 * (static/metronic/css/styles.css must stay untouched, see AGENTS.md).
 * Values are the canonical Tailwind default-palette constants.
 * Add utilities here only when styles.css does not ship them.
 */
.text-emerald-600 { color: #059669; }
.bg-emerald-50 { background-color: #ecfdf5; }
.border-emerald-200 { border-color: #a7f3d0; }

/* Activity log category colors (lucide icons in activity-cells.js). */
.text-teal-600 { color: #0d9488; }
.text-indigo-600 { color: #4f46e5; }
.text-sky-500 { color: #0ea5e9; }
.text-rose-500 { color: #f43f5e; }

/* Tailwind 4 emits exactly this rule for bg-muted/80. */
.bg-muted\/80 { background-color: color-mix(in oklab, var(--muted) 80%, transparent); }

/* Tailwind 4 emits exactly this rule for h-[460px] (absent from the verbatim
   Metronic build). */
.h-\[460px\] { height: 460px; }

/* News tiles on the affiliate dashboard (pinned tint + hover border). */
.border-primary\/30 { border-color: color-mix(in oklab, var(--primary) 30%, transparent); }
.hover\:border-primary\/40:hover { border-color: color-mix(in oklab, var(--primary) 40%, transparent); }

/* Halo that visually lifts the dashboard card value off the chart line
   crossing behind it. var(--background) keeps it correct in both themes. */
.dash-value-halo {
  text-shadow:
    0 0 4px var(--background),
    0 0 10px var(--background),
    0 0 14px var(--background);
}

/* Per-metric chart colors (Tailwind palette, one shade for both themes).
   Payout keeps the header-balance emerald; secondary metrics (revenue, CR,
   profit, EPC) share a light muted gray so they don't compete for attention.
   The previous-period series derives a pale tint of the same hue in JS. */
:root {
  --chart-clicks: var(--primary);
  --chart-conversions: #65a30d; /* lime-600 */
  --chart-cr: #a1a1aa;          /* zinc-400, light muted */
  --chart-revenue: #a1a1aa;     /* zinc-400, light muted */
  --chart-payout: #059669;      /* emerald-600, header balance green */
  --chart-profit: #a1a1aa;      /* zinc-400, light muted */
  --chart-epc: #a1a1aa;         /* zinc-400, light muted */
  --chart-flow: #65a30d;        /* lime-600, conversions family */
  /* Categorical palette for stacked action charts (health tab): distinct
     hues per category, never shades of one color. Every known audit domain
     is hard-pinned to a slot in dashboard-charts.js (16 slots, one hue per
     domain) so an operator reads a category by color across periods and
     refreshes; unknown future domains fall back to a deterministic hash.
     Tailwind 600-level. */
  --chart-cat-1: #7c3aed;       /* violet-600, offer */
  --chart-cat-2: #059669;       /* emerald-600, affiliate */
  --chart-cat-3: #d97706;       /* amber-600, billing */
  --chart-cat-4: #e11d48;       /* rose-600, backup */
  --chart-cat-5: #2563eb;       /* blue-600, mail */
  --chart-cat-6: #0891b2;       /* cyan-600, settings */
  --chart-cat-7: #c026d3;       /* fuchsia-600, passkey */
  --chart-cat-8: #ea580c;       /* orange-600, teammate */
  --chart-cat-9: #4f46e5;       /* indigo-600, domain */
  --chart-cat-10: #65a30d;      /* lime-600, dictionary */
  --chart-cat-11: #0284c7;      /* sky-600, news */
  --chart-cat-12: #dc2626;      /* red-600, session */
  --chart-cat-13: #0d9488;      /* teal-600, account */
  --chart-cat-14: #9333ea;      /* purple-600, advertiser */
  --chart-cat-15: #16a34a;      /* green-600, currency */
  --chart-cat-16: #db2777;      /* pink-600, period */
  --chart-other: #a1a1aa;       /* zinc-400, muted residual bucket */
}

/* Date picker popup, desktop: keep the months side by side. The popup is
   absolutely positioned with width:auto, so its layout width shrinks to
   (viewport - left). When the anchored input sits near the right edge
   (dashboard header), the remainder is too narrow for two months and the
   calendar grid's flex-wrap stacks them vertically into a tall dropdown.
   max-content removes that cap; the widget's own positioning then clamps
   the popup into view. Phones are handled in the block below. */
@media (min-width: 768px) {
  [data-vc=calendar][data-vc-input] { width: max-content; }
}

/* Date picker popup + toolbar, phones: the widget positions the popup via
   inline left/top (absolute in body) and has no mobile mode, so fit it to
   the screen ourselves — anchor the left edge with a margin (beats the
   inline left, which the widget would clamp off-screen for a wide popup),
   cap the height and scroll the content inside so Apply/Reset stay
   reachable. The px-fitted field widths from date-range.js are skipped on
   phones; instead let the joined date input + preset select shrink to the
   toolbar width (the select display truncates its label with an
   ellipsis). Safari auto-zooms on focusing fields smaller than 16px —
   with the popup positioned in layout coords that zoom leaves it
   off-screen (looks like the picker "did not open") — so the date fields
   go 16px, and touch-action:manipulation stops double-tap zoom from
   swallowing rapid taps. */
@media (max-width: 767px) {
  [data-vc=calendar][data-vc-input] {
    width: auto;
    left: 0.75rem !important;
    right: auto !important;
    max-width: calc(100vw - 1.5rem);
    max-height: calc(100vh - 1.5rem);
    max-height: calc(100dvh - 1.5rem);
    overflow-y: auto;
    touch-action: manipulation;
  }

  .kt-input-group .kt-input {
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
  }

  .kt-input-group [data-quick-range-host] {
    flex: 0 1 auto;
    min-width: 0;
  }

  .kt-input:has(input[data-kt-date-picker]) {
    font-size: 1rem;
    touch-action: manipulation;
  }

  .kt-input-group {
    touch-action: manipulation;
  }
}