/* ============================================================
   VivaHelpDesk — systematic brand theme (frappe-ui tokens)
   Brand: magenta #9337dc  (from vivacollabo.com --magenta)
   Approach: remap SEMANTIC tokens, not individual elements.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=Manrope:wght@400;500;600;700&display=swap');

/* Higher-specificity than Frappe's :root, and LITERAL hex values (no var()
   resolution-order dependency) so these reliably override the base tokens. */
html:root, :root, html, body {
  /* ---- Brand ramp ---- */
  --vh-50:#f9f3fd; --vh-100:#f2e7fb; --vh-200:#e4cdf6; --vh-300:#cea5ef;
  --vh-400:#b373e7; --vh-500:#9337dc; --vh-600:#802fbf; --vh-700:#6f28a6;
  --vh-800:#5e218c; --vh-900:#4c1972;

  /* ---- Remap the ACCENT scale (Frappe uses --blue-* for links/accents) ---- */
  --blue-50:#f9f3fd;  --blue-100:#f2e7fb; --blue-200:#e4cdf6;
  --blue-300:#cea5ef; --blue-400:#b373e7; --blue-500:#9337dc;
  --blue-600:#802fbf; --blue-700:#6f28a6; --blue-800:#5e218c; --blue-900:#4c1972;
  --blue:#9337dc;
  --indigo:#802fbf;
  --focus-blue:0px 0px 0px 2px #b373e7;
  --blue-avatar-bg:#f2e7fb;
  --blue-avatar-color:#9337dc;

  /* ---- Violet scale -> brand ---- */
  --violet-50:#f9f3fd;  --violet-100:#f2e7fb; --violet-200:#e4cdf6;
  --violet-300:#cea5ef; --violet-400:#b373e7; --violet-500:#9337dc;
  --violet-600:#802fbf; --violet-700:#6f28a6; --violet-800:#5e218c; --violet-900:#4c1972;
  --surface-violet-1:#f2e7fb; --surface-violet-2:#e4cdf6; --surface-violet-3:#9337dc;
  --ink-violet-1:#9337dc; --ink-violet-2:#802fbf;
}

/* ---- Fonts to match vivacollabo.com ---- */
body, button, input, textarea, select { font-family:"Manrope",ui-sans-serif,system-ui,sans-serif !important; }
h1,h2,h3,h4,.font-bold,.font-semibold { font-family:"Sora",ui-sans-serif,system-ui,sans-serif !important; }

/* ---- Primary/solid CTA buttons -> brand magenta (literal hex, no var()).
        Covers frappe-ui SPA "solid" buttons AND framework Bootstrap .btn-primary.
        Neutral/secondary/outline buttons are left untouched. ---- */
button.bg-gray-900, button[class*="bg-gray-900"], button.bg-surface-gray-7,
button[class*="bg-surface-gray-7"], .button-solid,
.btn-primary, button.btn-primary, .btn.btn-primary {
  background-color:#9337dc !important;
  border-color:#9337dc !important;
  color:#ffffff !important;
}
button.bg-gray-900:hover, button[class*="bg-gray-900"]:hover,
button.bg-surface-gray-7:hover, .button-solid:hover,
.btn-primary:hover, button.btn-primary:hover {
  background-color:#802fbf !important;
  border-color:#802fbf !important;
}

/* ---- Text/links/icon accents that used blue ---- */
.text-blue-500,[class*="text-blue-5"],[class*="text-blue-6"] { color:var(--vh-500) !important; }
[class*="text-ink-blue"] { color:var(--vh-500) !important; }
a:where(:not(.button)):hover { color:var(--vh-600) !important; }

/* ---- Selected / active states (sidebar item, tabs) ---- */
[aria-selected="true"],[data-state="active"],[data-active="true"],.router-link-active {
  color:var(--vh-500) !important;
}
[aria-selected="true"] svg,[data-state="active"] svg,.router-link-active svg { color:var(--vh-500) !important; }
.bg-blue-50,[class*="bg-blue-50"],.bg-blue-100,[class*="bg-blue-1"] { background-color:var(--vh-100) !important; }
.bg-blue-500,[class*="bg-blue-5"] { background-color:var(--vh-500) !important; }

/* ---- Focus rings ---- */
*:focus-visible{ outline-color:var(--vh-500) !important; }
input:focus,textarea:focus,select:focus{ border-color:var(--vh-500) !important; box-shadow:0 0 0 2px #9337dc33 !important; }

/* ---- Toggles / checkboxes / switches accent ---- */
input[type="checkbox"]:checked, input[type="radio"]:checked { accent-color:var(--vh-500) !important; }
[role="switch"][aria-checked="true"], [data-state="checked"] { background-color:var(--vh-500) !important; }

/* ---- Onboarding "Getting started" wizard: KEPT (useful setup checklist).
        Its Frappe icon is re-skinned to brand below. (Do not hide it.) ---- */

/* ============================================================
   Charts — BRANDED CATEGORICAL palette (à la Academia --chart-1..5).
   Distinct hues per series/slice so multi-segment charts stay readable.
   We remap ONLY frappe's default blue chart hues -> our palette; semantic
   colors (green=SLA/closed, red=overdue, amber) are left intact.
     chart-1 magenta   #9337dc  (brand primary)
     chart-2 teal      #14b8a6
     chart-3 amber     #f59e0b
     chart-4 violet    #7c5cff
     chart-5 sky       #38bdf8
   ============================================================ */
:root{
  --vh-chart-1:#9337dc; --vh-chart-2:#14b8a6; --vh-chart-3:#f59e0b;
  --vh-chart-4:#7c5cff; --vh-chart-5:#38bdf8;
}
/* frappe-charts primary blue series -> brand magenta (chart-1) */
svg [fill="#2D95F0"],svg [fill="#2d95f0"],svg [fill="#2490EF"],svg [fill="#2490ef"],svg [fill="#318AD8"]{ fill:var(--vh-chart-1) !important; }
svg [stroke="#2D95F0"],svg [stroke="#2d95f0"],svg [stroke="#2490EF"]{ stroke:var(--vh-chart-1) !important; }
/* frappe secondary chart hues -> distinct categorical colors (keep segments legible) */
svg [fill="#5E64FF"],svg [fill="#743EE2"],svg [fill="#6610f2"]{ fill:var(--vh-chart-4) !important; }  /* indigo -> violet */
svg [fill="#B7E3FF"],svg [fill="#8CC5FF"],svg [fill="#5EAAFF"],svg [fill="#70b6f0"]{ fill:var(--vh-chart-5) !important; } /* light blue -> sky */
svg [fill="#00BCD4"],svg [fill="#26A69A"]{ fill:var(--vh-chart-2) !important; } /* cyan/teal -> teal */
/* greens (#28A745 SLA/closed), reds (#E24C4C overdue), ambers (#FFA00A) are semantic -> untouched */

/* ============================================================
   DARK MODE — brand tokens for [data-theme="dark"] (frappe-ui hook).
   Frappe UI already ships base dark styles; we only tune the BRAND accent
   so magenta stays legible on dark surfaces. Toggle adds/removes the attr
   on <html>; persisted per user (see toggle script).
   ============================================================ */
[data-theme="dark"]{
  /* lighten the brand accent a touch for contrast on dark bg */
  --vh-500:#b373e7; --vh-600:#9337dc; --vh-400:#cea5ef;
  --blue-500:var(--vh-500); --blue-600:var(--vh-600); --blue:var(--vh-500);
  --violet-500:var(--vh-500); --surface-violet-3:var(--vh-500);
  --ink-violet-1:var(--vh-500);
  /* chart palette: brighter variants for dark */
  --vh-chart-1:#c084fc; --vh-chart-2:#2dd4bf; --vh-chart-3:#fbbf24;
  --vh-chart-4:#a78bfa; --vh-chart-5:#7dd3fc;
}
[data-theme="dark"] a:where(:not(.button)):hover { color:var(--vh-400) !important; }

/* ============================================================
   Onboarding "Getting started" widget — recolor the Frappe purple
   ticket SVG to brand, since hiding it reliably is not possible via CSS.
   The icon uses fills #7D42FB (ticket body) + #EDF7FF (highlight).
   ============================================================ */
svg path[fill="#7D42FB"],svg path[fill="#7d42fb"]{ fill:#9337dc !important; }
svg path[fill="#EDF7FF"],svg path[fill="#edf7ff"]{ fill:#f2e7fb !important; }

/* Wizard icon container: the Frappe icon sits in a rounded square. Brand any
   purple/violet backgrounds used there (#7C3AED / violet-600 etc.) to magenta. */
[class*="onboarding"] [class*="bg-"], [class*="GettingStarted"] [class*="bg-"] {
  /* leave layout bg alone; only recolor obviously-purple icon chips */
}
[style*="background-color: rgb(124, 58, 237)"],
[style*="background: rgb(124, 58, 237)"],
[style*="#7C3AED"],[style*="#7c3aed"],[style*="#8B5CF6"],[style*="#8b5cf6"] {
  background-color:#9337dc !important;
}
/* any svg rect/path using the frappe purple family -> brand */
svg [fill="#8B5CF6"],svg [fill="#8b5cf6"],svg [fill="#7C3AED"],svg [fill="#7c3aed"],
svg [fill="#5E48E8"],svg [fill="#4F46E5"]{ fill:#9337dc !important; }