/* =========================================================================
   ESAGAMES branding overlay for Chatwoot 4.17.1 (self-hosted, community)
   -------------------------------------------------------------------------
   Served from  /var/www/esagames-brand/esagames-chatwoot.css
   Injected by  nginx sub_filter into </head> of every Chatwoot HTML document
                (dashboard, login/v3, widget iframe, portal, CSAT survey).

   It lives OUTSIDE /home/chatwoot/chatwoot, so `cwctl -u` cannot touch it.
   Nothing here patches Chatwoot source.

   HOW IT WORKS
   Chatwoot 4.x paints its "next" design system from CSS custom properties
   declared in app/javascript/dashboard/assets/scss/_next-colors.scss (and a
   second copy inside app/javascript/widget/assets/scss/woot.scss). Every
   `n-blue-*` / `n-slate-*` Tailwind utility compiles to
   `rgb(var(--blue-9) / <alpha>)`, so redefining the variables re-tints the
   product without touching a single component.

   Measured usage in the v4.17.1 tree:
     n-blue-*   2682 (dashboard) +   1 (widget) +  5 (v3 login)
     n-slate-*  2350 (dashboard) +  78 (widget) + 39 (v3 login)
     n-brand     125 (dashboard) +  17 (widget) + 16 (v3 login)  <- NOT a var
     woot-*       11 real utility usages left in the whole tree

   `n-brand` is the hard-coded literal '#2781F6' in theme/colors.js, so it can
   only be reached by overriding the generated utility classes. That is done
   in section B below and is the one part of this file that is brittle across
   major redesigns.

   COLOUR POLICY (all ratios measured, see contrast-report.md)
   The vivid brand orange #ff7a1a carries white text at only 2.61:1. It fails
   WCAG AA for text (4.5:1) and fails even the 3:1 non-text bar against white.
   So #ff7a1a is used here ONLY as decoration that no text sits on (gradient
   stops, rules, glow-free accents). Everything functional - buttons, links,
   focus rings, badges - uses the deep brand orange #b4480a / #8f3806, which
   pass AA.
   ========================================================================= */

/* -------------------------------------------------------------------------
   ESAGAMES brand tokens (verbatim from the esagamesv4 theme)
   ---------------------------------------------------------------------- */
:root {
  --esa-brand: #ff7a1a;
  --esa-brand-2: #e86a0c;
  --esa-brand-deep: #b4480a;
  --esa-brand-display: #dd5e08;
  --esa-brand-rgb: 255, 122, 26;
  --esa-surface: #e9ebef;
  --esa-surface-2: #dde1e8;
  --esa-ink: #14181f;
  --esa-ink-dim: #5f6675;

  /* the two safe text-on-light oranges, derived and measured */
  --esa-brand-text: #8f3806;   /* 7.67:1 on white  - body-size link text     */
  --esa-brand-solid: #b4480a;  /* white on it 5.42:1 - solid button surface  */
  --esa-brand-solid-hover: #9d3e08;
}

/* =========================================================================
   SECTION A - the accent ramp
   Chatwoot's accent is the Radix "blue" 1-12 scale. Replaced with an
   ESAGAMES orange scale of the same shape: 1-2 backgrounds, 3-5 component
   fills, 6-8 borders, 9 solid, 10 solid-hover, 11 accessible text,
   12 high-contrast text.
   ========================================================================= */
:root {
  --blue-1: 255 252 250;   /* #fffcfa */
  --blue-2: 255 244 236;   /* #fff4ec */
  --blue-3: 255 232 214;   /* #ffe8d6 */
  --blue-4: 255 217 189;   /* #ffd9bd */
  --blue-5: 253 201 164;   /* #fdc9a4 */
  --blue-6: 247 181 135;   /* #f7b587 */
  --blue-7: 238 156 102;   /* #ee9c66 */
  --blue-8: 221 119  54;   /* #dd7736 - 3.10:1 on white, clears the 3:1 UI bar */
  --blue-9: 180  72  10;   /* #b4480a - solid, white text 5.42:1             */
  --blue-10: 157  62   8;  /* #9d3e08 - solid hover, white text 6.72:1       */
  --blue-11: 143  56   6;  /* #8f3806 - link text, 7.67:1 on white           */
  --blue-12:  69  28   4;  /* #451c04 - 14.78:1 on white                     */

  /* semantic aliases Chatwoot derives from the same hue */
  --text-blue: 143 56 6;
  --border-blue: 180, 72, 10, 0.5;
  --border-blue-strong: 143 56 6;
  --solid-blue: 255 232 214;
  --solid-blue-2: 255 252 250;
}

/* Dark theme. The customer asked for white-with-orange, but an agent can
   still flip their own profile to dark; without this block that agent keeps
   a blue dashboard. Solid step is darkened so white text still passes AA. */
.dark {
  --blue-1:  26  15   7;   /* #1a0f07 */
  --blue-2:  36  19   9;   /* #241309 */
  --blue-3:  58  27   8;   /* #3a1b08 */
  --blue-4:  77  33   7;   /* #4d2107 */
  --blue-5:  94  42   9;   /* #5e2a09 */
  --blue-6: 113  54  15;   /* #71360f */
  --blue-7: 139  69  26;   /* #8b451a */
  --blue-8: 176  90  32;   /* #b05a20 - 3.89:1 on the dark page */
  --blue-9: 189  87  12;   /* #bd570c - white text 4.63:1        */
  --blue-10: 169  76   8;  /* #a94c08                            */
  --blue-11: 255 157  85;  /* #ff9d55 - 9.17:1 on dark slate-1   */
  --blue-12: 255 224 201;  /* #ffe0c9                            */

  --text-blue: 255 157 85;
  --border-blue: 255, 122, 26, 0.5;
  --border-blue-strong: 255 157 85;
  --solid-blue: 58 27 8;
  --solid-blue-2: 26 15 7;
}

/* =========================================================================
   SECTION B - `n-brand`
   theme/colors.js line 229:  brand: '#2781F6'
   A literal, not a variable, so it has to be caught at the utility level.
   These are every generated variant present in the v4.17.1 tree.
   ========================================================================= */
.bg-n-brand      { background-color: var(--esa-brand-solid) !important; }
.bg-n-brand\/90  { background-color: rgb(180 72 10 / 0.9) !important; }
.bg-n-brand\/80  { background-color: rgb(180 72 10 / 0.8) !important; }
.bg-n-brand\/20  { background-color: rgb(180 72 10 / 0.2) !important; }
.bg-n-brand\/10  { background-color: rgb(180 72 10 / 0.1) !important; }
.bg-n-brand\/5   { background-color: rgb(180 72 10 / 0.05) !important; }
.text-n-brand    { color: var(--esa-brand-text) !important; }
.border-n-brand  { border-color: var(--esa-brand-solid) !important; }
.border-n-brand\/50 { border-color: rgb(180 72 10 / 0.5) !important; }
.outline-n-brand { outline-color: var(--esa-brand-solid) !important; }
.ring-n-brand    { --tw-ring-color: var(--esa-brand-solid) !important; }
.from-n-brand\/15 { --tw-gradient-from: rgb(180 72 10 / 0.15) var(--tw-gradient-from-position) !important; }

.dark .bg-n-brand     { background-color: #bd570c !important; }
.dark .text-n-brand   { color: #ff9d55 !important; }
.dark .border-n-brand { border-color: #bd570c !important; }
.dark .outline-n-brand{ outline-color: #bd570c !important; }
.dark .ring-n-brand   { --tw-ring-color: #bd570c !important; }

/* =========================================================================
   SECTION C - legacy `woot-*` palette
   Nearly dead in 4.17.1: 11 utility usages total. Listed exhaustively so
   nothing is left blue.
   ========================================================================= */
.bg-woot-100    { background-color: #ffe8d6 !important; }
.bg-woot-400,
.bg-woot-500    { background-color: var(--esa-brand-solid) !important; }
.text-woot-500  { color: var(--esa-brand-text) !important; }
.border-woot-500{ border-color: var(--esa-brand-solid) !important; }
.ring-woot-500  { --tw-ring-color: var(--esa-brand-solid) !important; }

/* =========================================================================
   SECTION D - the widget iframe (livechat.esagames.ro/widget?...)
   The widget bundle carries its OWN copy of the token block, so the ramp
   above already lands. What is left is the per-inbox widget colour, which
   Chatwoot writes to --widget-color from the database, and the "Powered by"
   footer.
   ========================================================================= */

/* Keep the vivid brand visible where nothing reads on top of it: a thin
   brand rule under the widget header. Decoration only - it carries no
   information, so its 2.61:1 against white is not a WCAG failure. */
.woot-widget-wrap header,
#app > div > header {
  border-bottom: 3px solid var(--esa-brand);
}

/* Focus visibility inside the widget. The stock focus shadow falls back to
   #2781f6 when --widget-color is unset (ChatInputWrap.vue line 139). */
:root { --widget-color: #b4480a; }

/* "Powered by" footer. Section 5 of the plan removes it properly through
   BRAND_NAME; this is the belt-and-braces fallback that needs no restart and
   no source patch. Enable by uncommenting. */
/*
.branding--link { display: none !important; }
*/

/* =========================================================================
   SECTION E - login / v3 pages
   The auth pages use the same n-blue ramp plus their own hero surface.
   ========================================================================= */
.v3 body,
body.text-slate-600 {
  color: var(--esa-ink);
}

/* =========================================================================
   SECTION F - OPTIONAL: force the light theme for everyone
   Chatwoot has no installation-level "default theme" setting; the theme is a
   per-user profile preference (Profile Settings -> Appearance). If the
   customer wants white-with-orange guaranteed for every agent regardless of
   what they pick, uncomment this block: it re-points the dark-mode variables
   at the light values, so the `.dark` class stops having an effect.
   Leave it commented if agents should keep the choice.
   ========================================================================= */
/*
.dark {
  --slate-1: 252 252 253;  --slate-2: 249 249 251;  --slate-3: 240 240 243;
  --slate-4: 232 232 236;  --slate-5: 224 225 230;  --slate-6: 217 217 224;
  --slate-7: 205 206 214;  --slate-8: 185 187 198;  --slate-9: 139 141 152;
  --slate-10: 128 131 141; --slate-11:  96 100 108; --slate-12:  28  32  36;
  --background-color: 255 255 255;
  --surface-1: 254 254 254; --surface-2: 255 255 255; --surface-active: 255 255 255;
  --card-color: 255 255 255; --button-color: 255 255 255;
  --border-container: 236 236 236; --border-strong: 235 235 235; --border-weak: 234 234 234;
  --solid-1: 255 255 255; --solid-2: 255 255 255; --solid-3: 255 255 255; --solid-active: 255 255 255;
  --blue-1: 255 252 250;  --blue-2: 255 244 236;  --blue-3: 255 232 214;
  --blue-4: 255 217 189;  --blue-5: 253 201 164;  --blue-6: 247 181 135;
  --blue-7: 238 156 102;  --blue-8: 221 119  54;  --blue-9: 180  72  10;
  --blue-10: 157 62 8;    --blue-11: 143  56   6; --blue-12:  69  28   4;
}
*/

/* =========================================================================
   SECTION G - flat, per the house rule: no glow, no heavy hover.
   Chatwoot ships a couple of coloured drop shadows on the accent; neutralise
   them rather than recolouring them orange.
   ========================================================================= */
.shadow-\[0_0_12px_0_rgba\(27\,40\,59\,0\.08\)\] {
  box-shadow: 0 1px 2px 0 rgb(20 24 31 / 0.06) !important;
}