/* ==========================================================================
   a11y-fix.css — generated by .workbuddy-ai/fix-ui.js
   --------------------------------------------------------------------------
   1. Theme-aware colour for the inline accent styles. The markup sets
      `style="color: rgb(R,G,B)"` on tiles / eyebrows / status pills that sit on
      an 8-10% tint of the very same colour, which measures 1.6-4.1:1. An inline
      style cannot carry a dark: variant, so the element is tagged with
      data-gw-c and the colour is supplied here instead. The inline value is
      left in place as the no-CSS fallback.
   2. The carousel step dots are 6px tall buttons - far under the 24px minimum
      touch target. A transparent overlay lifts the hit area to 24px without
      changing how the dot looks.
   ========================================================================== */

  html:not(.dark) [data-gw-c="245-158-11"] { color: rgb(153, 98, 6) !important; }   /* 4.70:1 on rgb(252, 245, 231) */
  html:not(.dark) [data-gw-c="167-139-250"] { color: rgb(119, 75, 247) !important; }   /* 4.66:1 on rgb(247, 244, 255) */
  html:not(.dark) [data-gw-c="16-185-129"] { color: rgb(10, 119, 83) !important; }   /* 4.86:1 on rgb(227, 244, 238) */
  html:not(.dark) [data-gw-c="113-113-122"] { color: rgb(108, 108, 117) !important; }   /* 4.64:1 on rgb(242, 242, 242) */
  html.dark [data-gw-c="113-113-122"] { color: rgb(136, 136, 145) !important; }   /* 4.62:1 on rgb(32, 32, 36) */
  html:not(.dark) [data-gw-c="236-72-153"] { color: rgb(200, 21, 110) !important; }   /* 4.77:1 on rgb(253, 233, 243) */
  html.dark [data-gw-c="236-72-153"] { color: rgb(237, 81, 158) !important; }   /* 4.65:1 on rgb(49, 30, 42) */
  html:not(.dark) [data-gw-c="139-92-246"] { color: rgb(122, 68, 245) !important; }   /* 4.65:1 on rgb(242, 238, 253) */
  html.dark [data-gw-c="139-92-246"] { color: rgb(153, 111, 247) !important; }   /* 4.76:1 on rgb(23, 28, 55) */
  html:not(.dark) [data-gw-c="14-165-233"] { color: rgb(10, 114, 161) !important; }   /* 4.79:1 on rgb(230, 245, 252) */
  html:not(.dark) [data-gw-c="244-63-94"] { color: rgb(208, 12, 46) !important; }   /* 4.75:1 on rgb(254, 232, 236) */
  html.dark [data-gw-c="244-63-94"] { color: rgb(245, 77, 106) !important; }   /* 4.61:1 on rgb(50, 29, 35) */
  html:not(.dark) [data-gw-c="34-197-94"] { color: rgb(21, 123, 59) !important; }   /* 4.77:1 on rgb(227, 247, 235) */
  html:not(.dark) [data-gw-c="156-163-175"] { color: rgb(107, 116, 132) !important; }   /* 4.70:1 on rgb(255, 255, 255) */

/* Supplier tiles (index.html / api-docs.html): the glyph colour comes from a
   JS `tint` rendered as `color: <tint>; background: <tint>18`. Same treatment. */
  html:not(.dark) [data-gw-c="06b6d4"] { color: rgb(4, 118, 138) !important; }   /* 4.73:1 on rgb(229, 245, 249) */
  html.dark [data-gw-c="06b6d4"] { color: rgb(6, 186, 217) !important; }   /* 6.29:1 on rgb(24, 43, 52) */
  html:not(.dark) [data-gw-c="0ea5e9"] { color: rgb(10, 114, 161) !important; }   /* 4.79:1 on rgb(230, 245, 252) */
  html.dark [data-gw-c="0ea5e9"] { color: rgb(14, 168, 238) !important; }   /* 5.54:1 on rgb(25, 42, 54) */
  html:not(.dark) [data-gw-c="10b981"] { color: rgb(10, 119, 83) !important; }   /* 4.86:1 on rgb(227, 244, 238) */
  html.dark [data-gw-c="10b981"] { color: rgb(16, 190, 132) !important; }   /* 6.07:1 on rgb(25, 44, 44) */
  html:not(.dark) [data-gw-c="14b8a6"] { color: rgb(13, 120, 108) !important; }   /* 4.88:1 on rgb(231, 247, 246) */
  html.dark [data-gw-c="14b8a6"] { color: rgb(21, 189, 170) !important; }   /* 6.16:1 on rgb(25, 44, 47) */
  html:not(.dark) [data-gw-c="3b82f6"] { color: rgb(10, 93, 228) !important; }   /* 4.73:1 on rgb(219, 237, 251) */
  html.dark [data-gw-c="3b82f6"] { color: rgb(74, 139, 247) !important; }   /* 4.71:1 on rgb(11, 37, 61) */
  html:not(.dark) [data-gw-c="6366f1"] { color: rgb(80, 84, 239) !important; }   /* 4.78:1 on rgb(238, 239, 253) */
  html.dark [data-gw-c="6366f1"] { color: rgb(122, 125, 243) !important; }   /* 4.81:1 on rgb(19, 29, 55) */
  html:not(.dark) [data-gw-c="64748b"] { color: rgb(98, 114, 136) !important; }   /* 4.62:1 on rgb(247, 247, 253) */
  html.dark [data-gw-c="64748b"] { color: rgb(139, 152, 171) !important; }   /* 4.74:1 on rgb(42, 45, 50) */
  html:not(.dark) [data-gw-c="8b5cf6"] { color: rgb(122, 68, 245) !important; }   /* 4.65:1 on rgb(242, 238, 253) */
  html.dark [data-gw-c="8b5cf6"] { color: rgb(153, 111, 247) !important; }   /* 4.76:1 on rgb(23, 28, 55) */
  html:not(.dark) [data-gw-c="a855f7"] { color: rgb(146, 41, 245) !important; }   /* 4.72:1 on rgb(245, 235, 254) */
  html.dark [data-gw-c="a855f7"] { color: rgb(178, 104, 248) !important; }   /* 4.78:1 on rgb(37, 29, 54) */
  html:not(.dark) [data-gw-c="ef4444"] { color: rgb(212, 18, 18) !important; }   /* 4.70:1 on rgb(252, 236, 237) */
  html.dark [data-gw-c="ef4444"] { color: rgb(239, 73, 73) !important; }   /* 4.62:1 on rgb(32, 26, 39) */
  html:not(.dark) [data-gw-c="f43f5e"] { color: rgb(208, 12, 46) !important; }   /* 4.75:1 on rgb(254, 232, 236) */
  html.dark [data-gw-c="f43f5e"] { color: rgb(245, 77, 106) !important; }   /* 4.61:1 on rgb(50, 29, 35) */
  html:not(.dark) [data-gw-c="f59e0b"] { color: rgb(153, 98, 6) !important; }   /* 4.70:1 on rgb(252, 245, 231) */
  html.dark [data-gw-c="f59e0b"] { color: rgb(245, 160, 16) !important; }   /* 6.80:1 on rgb(47, 41, 33) */
  html:not(.dark) [data-gw-c="f97316"] { color: rgb(180, 76, 5) !important; }   /* 4.73:1 on rgb(253, 240, 232) */
  html.dark [data-gw-c="f97316"] { color: rgb(249, 118, 27) !important; }   /* 5.42:1 on rgb(47, 37, 34) */

/* Same treatment for the pages that write the accent as `color: #hex`. */
  html:not(.dark) [data-gw-c="6-182-212"] { color: rgb(4, 118, 138) !important; }   /* 4.73:1 on rgb(229, 245, 249) */
  html:not(.dark) [data-gw-c="249-115-22"] { color: rgb(180, 76, 5) !important; }   /* 4.73:1 on rgb(253, 240, 232) */

/* Products mega-menu: text that takes its colour from the --ac custom property.
   --ac defaults to the brand and swaps to one of four accents while a row is
   hovered, so the elements carry a dynamic data-gw-c resolved from the same
   expression — a static override would paint teal over the purple/orange rows.
   Brand gets a light-theme ink only; on the dark surfaces #03D9F0 measures
   7-8:1 and is left alone. 22c55e is the same green as the existing 34-197-94
   rule, so it inherits that value. */
  html:not(.dark) [data-gw-c="03d9f0"] { color: rgb(13, 118, 133) !important; }   /* 4.64:1 on rgb(214,245,250) */
  html:not(.dark) [data-gw-c="22c55e"] { color: rgb(21, 123, 59) !important; }   /* 4.77:1 on rgb(227,247,235) */

/* Reseller "Distributor" role pill — theme colour #ff416c on its own 12% wash.
   #03D9F0 is the brand and stays untouched; this is a per-card accent. */
  html:not(.dark) [data-gw-c="ff416c"] { color: rgb(214, 0, 48) !important; }   /* 4.62:1 on rgb(255, 232, 237) */
  html.dark [data-gw-c="ff416c"] { color: rgb(255, 75, 116) !important; }   /* 4.62:1 on rgb(39, 39, 42) */

/* Tailwind shades that are too light for the surface they land on. Overridden
   per theme so the dark-mode value is never dragged down with the light one.
   #03D9F0 (brand) and #10B981 (success/online) are deliberately excluded. */
  html:not(.dark) .text-emerald-600 { color: rgb(4, 125, 88) !important; }   /* #059669 -> rgb(4, 125, 88): 4.87:1 on rgb(236, 253, 245) */
  html:not(.dark) .text-red-500 { color: rgb(226, 19, 19) !important; }   /* #ef4444 -> rgb(226, 19, 19): 4.61:1 on rgb(248, 250, 252) */
  html:not(.dark) .text-orange-500 { color: rgb(195, 83, 5) !important; }   /* #f97316 -> rgb(195, 83, 5): 4.62:1 on rgb(254, 255, 255) */
  html:not(.dark) .text-violet-500 { color: rgb(132, 82, 245) !important; }   /* #8b5cf6 -> rgb(132, 82, 245): 4.63:1 on rgb(254, 255, 255) */
  html:not(.dark) .text-amber-600 { color: rgb(172, 95, 5) !important; }   /* #d97706 -> rgb(172, 95, 5): 4.62:1 on rgb(255, 251, 235) */
  html:not(.dark) .text-purple-500 { color: rgb(146, 41, 245) !important; }   /* #a855f7 -> rgb(146, 41, 245): 4.72:1 on rgb(245, 235, 254) */
  html:not(.dark) .text-cyan-600 { color: rgb(7, 121, 149) !important; }   /* #0891b2 -> rgb(7, 121, 149): 4.81:1 on rgb(250, 250, 250) */
  html:not(.dark) .text-zinc-500 { color: rgb(108, 108, 117) !important; }   /* #71717a -> rgb(108, 108, 117): 4.73:1 on rgb(244, 244, 245) */
  html:not(.dark) .text-slate-500 { color: rgb(71, 85, 105) !important; }    /* slate-600: clears 4.5:1 on slate-100 pills too, not just white */
  /* zinc-400 is only ever correct as a dark-mode value; on the near-white and
     zinc-100 surfaces it lands on here it measures 2.2-4.4:1. */
  html:not(.dark) .text-zinc-400 { color: rgb(82, 82, 91) !important; }      /* zinc-600: 6.4:1 on zinc-100, 7.0:1 on white */
  html.dark .text-zinc-500 { color: rgb(161, 161, 170) !important; }   /* zinc-400: 5.96:1 even on the lightest dark surface (#27272a) */
  html.dark .text-slate-500 { color: rgb(148, 163, 184) !important; }   /* slate-400: 5.36:1 even on the lightest dark surface (#2a2d32) */
  html.dark .text-violet-500 { color: rgb(146, 102, 247) !important; }   /* #8b5cf6 -> rgb(146, 102, 247): 4.64:1 on rgb(22, 23, 27) */
  html.dark .text-purple-500 { color: rgb(178, 104, 248) !important; }   /* #a855f7 -> rgb(178, 104, 248): 4.78:1 on rgb(37, 29, 54) */

/* Brand-coloured *text*. gsmwhale-contrast-fix.css already substitutes
   --gw-text-brand-safe (#0e7c8c) for .text-brand, but that value measures
   4.41:1 on a bg-brand/10 wash and 4.25:1 on bg-brand/15 — both just under AA.
   Nudged one step darker (4.78:1 and 4.61:1). Fills, borders and glows keep
   #03D9F0; only the glyph colour moves.
   :not(:hover) so elements that swap to a brand fill on hover are left to
   their own hover rule — see the next block. */
  html:not(.dark) .text-brand:not(:hover) { color: rgb(13, 118, 133) !important; }

/* Hovering a brand CTA paints the background #03D9F0 and the author asked for a
   #04252b label. The .text-brand rule above out-specifies Tailwind's
   hover:text-[#04252b], so the label stayed teal on cyan (2.94:1). Restore it. */
  html:not(.dark) .text-brand[class*="hover:bg-brand"]:hover { color: #04252b !important; }

/* Brand-coloured TEXT set through an inline style (#03D9F0 on a light surface
   measures 1.50-1.72:1). 340 such elements were measured across the site —
   every one of them on a light background in light mode, none on a dark one —
   so a single light-theme override is safe. Dark mode is untouched: #03D9F0 on
   the dark surfaces measures 7-8:1 and needs no change.
   Fills, borders, glows and gradients keep #03D9F0; only `color` is overridden.
   .gw-wordmark is the footer "GsmWhale" logotype. WCAG 1.4.3 exempts text that
   is part of a logo or brand name, and recolouring it would change the mark. */
  html:not(.dark) [style*="color: rgb(3, 217, 240)"]:not(.gw-wordmark),
  html:not(.dark) [style*="color:rgb(3, 217, 240)"]:not(.gw-wordmark),
  html:not(.dark) [style*="color:#03D9F0"]:not(.gw-wordmark),
  html:not(.dark) [style*="color: #03D9F0"]:not(.gw-wordmark),
  html:not(.dark) [style*="color:#03d9f0"]:not(.gw-wordmark),
  html:not(.dark) [style*="color: #03d9f0"]:not(.gw-wordmark) {
    color: rgb(13, 118, 133) !important;   /* #0d7685 — worst case 4.64:1 on rgb(214,245,250) */
  }

/* Carousel step indicators: 6px tall, 24px hit area, identical appearance. */
.gw-dot { position: relative; }
.gw-dot::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 24px;
    transform: translateY(-50%);
}

/* --- autofill -----------------------------------------------------------------
   The auth fields now advertise autocomplete tokens (WCAG 1.3.5), which means the
   browser will actually fill them. Chrome repaints filled inputs pale yellow, which
   clashes badly with the dark theme. Pin the fill to the site's own input surfaces:
   bg-zinc-50 in light, dark:bg-zinc-900 in dark. The long transition suppresses the
   browser's own background animation. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-text-fill-color: #18181b;
    -webkit-box-shadow: 0 0 0 1000px #fafafa inset;
    caret-color: #18181b;
    transition: background-color 9999s ease-in-out 0s;
}

html.dark input:-webkit-autofill,
html.dark input:-webkit-autofill:hover,
html.dark input:-webkit-autofill:focus {
    -webkit-text-fill-color: #fafafa;
    -webkit-box-shadow: 0 0 0 1000px #18181b inset;
    caret-color: #fafafa;
}