/* ================================
   ARTISOFT FLEET BRAND THEMES
   ================================ */

/* Artisoft - Default (Orange) */
:root,
.brand-default {
  --artisoft-main-50: 255 249 236;
  --artisoft-main-100: 255 243 211;
  --artisoft-main-200: 255 226 165;
  --artisoft-main-300: 255 205 109;
  --artisoft-main-400: 255 171 50;
  --artisoft-main-500: 255 144 10;
  --artisoft-main-600: 251 118 0;
  --artisoft-main-700: 204 87 2;
  --artisoft-main-800: 161 67 11;
  --artisoft-main-900: 130 57 12;
  --artisoft-main-950: 70 26 4;
}

/* GM - Purple */
.brand-gm {
  --artisoft-main-50: 242 232 252;
  --artisoft-main-100: 229 210 249;
  --artisoft-main-200: 204 164 244;
  --artisoft-main-300: 178 119 238;
  --artisoft-main-400: 153 73 233;
  --artisoft-main-500: 127 28 227;
  --artisoft-main-600: 102 22 182;
  --artisoft-main-700: 76 17 136;
  --artisoft-main-800: 51 11 91;
  --artisoft-main-900: 25 6 45;
  --artisoft-main-950: 18 4 32;
}

/* Sunoil - Blue */
.brand-sunoil {
  --artisoft-main-50: 238 240 255;
  --artisoft-main-100: 217 222 255;
  --artisoft-main-200: 182 192 255;
  --artisoft-main-300: 141 160 255;
  --artisoft-main-400: 98 131 255;
  --artisoft-main-500: 17 98 255;
  --artisoft-main-600: 0 75 204;
  --artisoft-main-700: 0 57 160;
  --artisoft-main-800: 0 37 112;
  --artisoft-main-900: 0 21 72;
  --artisoft-main-950: 0 13 53;
}

/* Sunoco - Blue */
.brand-sunoco {
  --artisoft-main-50: 230 238 254;
  --artisoft-main-100: 209 224 253;
  --artisoft-main-200: 159 195 251;
  --artisoft-main-300: 96 166 249;
  --artisoft-main-400: 40 138 224;
  --artisoft-main-500: 30 109 180;
  --artisoft-main-600: 20 82 137;
  --artisoft-main-700: 13 61 104;
  --artisoft-main-800: 7 43 76;
  --artisoft-main-900: 3 24 46;
  --artisoft-main-950: 1 15 31;
}

/* ================================
   TOGGLE SWITCH (self-contained; matches the Artisoft licensing project)
   ================================ */
.af-toggle {
    position: relative;
    display: inline-flex;
    height: 1.5rem;
    width: 2.75rem;
    flex-shrink: 0;
    cursor: pointer;
    border-radius: 9999px;
    border: 2px solid transparent;
    background-color: #e5e7eb;
    transition: background-color 0.2s ease-in-out;
    padding: 0;
}
.af-toggle.on { background-color: rgb(var(--artisoft-main-600)); }
.af-toggle .knob {
    pointer-events: none;
    display: inline-block;
    height: 1.25rem;
    width: 1.25rem;
    transform: translateX(0);
    border-radius: 9999px;
    background-color: #fff;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease-in-out;
}
.af-toggle.on .knob { transform: translateX(1.25rem); }

/* ================================
   DARK MODE (overrides applied when <body> has the `dark` class)
   ================================ */
.dark.brand-default { --artisoft-main-400: 255 186 92; --artisoft-main-500: 255 171 50; --artisoft-main-600: 255 144 10; --artisoft-main-700: 251 118 0; }
.dark.brand-gm { --artisoft-main-400: 178 119 238; --artisoft-main-500: 153 73 233; --artisoft-main-600: 127 28 227; --artisoft-main-700: 102 22 182; }
.dark.brand-sunoil { --artisoft-main-400: 141 160 255; --artisoft-main-500: 98 131 255; --artisoft-main-600: 17 98 255; --artisoft-main-700: 0 75 204; }
.dark.brand-sunoco { --artisoft-main-400: 96 166 249; --artisoft-main-500: 40 138 224; --artisoft-main-600: 30 109 180; --artisoft-main-700: 20 82 137; }

.dark body, body.dark { background-color: #0f172a; color: #e2e8f0; }
.dark .bg-white { background-color: #1e293b !important; }
.dark .bg-gray-50 { background-color: #111827 !important; }
.dark .bg-gray-100 { background-color: #1f2937 !important; }
.dark .bg-gray-200 { background-color: #334155 !important; }
/* Light accent surface (e.g. the support/message card) — darken so text stays readable in dark mode. */
.dark .bg-artisoft-main-50 { background-color: #24303f !important; }
.dark .hover\:bg-gray-50:hover { background-color: #1f2937 !important; }
.dark .hover\:bg-gray-100:hover { background-color: #263244 !important; }
.dark .text-gray-900 { color: #f1f5f9 !important; }
.dark .text-gray-800 { color: #e2e8f0 !important; }
.dark .text-gray-700 { color: #cbd5e1 !important; }
.dark .text-gray-600 { color: #94a3b8 !important; }
.dark .text-gray-500 { color: #94a3b8 !important; }
.dark .text-gray-400 { color: #64748b !important; }
.dark .stroke-gray-900, .dark .stroke-gray-800 { stroke: #cbd5e1 !important; }
.dark .hover\:text-artisoft-main-600:hover { color: rgb(var(--artisoft-main-500)) !important; }
.dark .hover\:stroke-artisoft-main-600:hover { stroke: rgb(var(--artisoft-main-500)) !important; }
.dark .border-gray-200 { border-color: #334155 !important; }
.dark .border-gray-300 { border-color: #475569 !important; }
.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: #334155 !important; }
.dark input, .dark select, .dark textarea { background-color: #0f172a !important; border-color: #475569 !important; color: #e2e8f0 !important; }
.dark ::placeholder { color: #64748b !important; }

/* Custom Scrollbar */

.container-scroll::-webkit-scrollbar {
  height: 20px;
}
.container-scroll::-webkit-scrollbar-track {
  background-color: transparent;
}
.container-scroll::-webkit-scrollbar-thumb {
  background-color: #d6dee1;
  border-radius: 20px;
  border: 6px solid transparent;
  background-clip: content-box;
}
.container-scroll::-webkit-scrollbar-thumb:hover {
  background-color: #a8bbbf;
}
/* Where both scrollbars meet; without this it paints an opaque white square. */
.container-scroll::-webkit-scrollbar-corner {
  background-color: transparent;
}

/* Table scroll container
   A table wider than the screen scrolls inside its own wrapper instead of dragging <main>
   sideways. It scrolls on both axes, bounded to the viewport, because a sticky <thead>
   sticks to its nearest scroll container: with overflow-x alone the wrapper would become
   that container at its full height and the header would stop sticking. :where() keeps
   the rule at zero specificity so utilities on a wrapper (max-h-72, overflow-auto, ...)
   still win. */
:where(.container-scroll) {
  max-width: 100%;
  overflow: auto;
  max-height: 100vh;
  max-height: 100dvh;
  overscroll-behavior-x: contain;
}

/* ================================
   DARK MODE — LOGO
   Give the customer-uploaded logo a light backdrop and lighten the fallback wordmark so both
   keep contrast on dark surfaces. Scoped to .app-logo so other base64 images are untouched.
   ================================ */
.dark .app-logo img[src^="data:"] {
  background-color: #ffffff;
  padding: 0.5rem;
  border-radius: 0.375rem;
}
.dark .app-logo .text-black {
  color: #f8fafc !important;
}

/* ================================
   DARK MODE - GOOGLE MAPS INFO WINDOW
   The info-window *content* is our own markup inside body.dark, so the rules above already flip it to
   light text on dark surfaces. The bubble Google draws around it is not ours and stays white, which
   left the station name and address as near-white text on white. Darken Google's own chrome - the
   bubble, its scroll wrapper and the pointer tail - so the content sits on the surface it expects,
   and invert the close glyph, which ships as a black icon.
   ================================ */
.dark .gm-style-iw,
.dark .gm-style-iw-c,
.dark .gm-style-iw-d {
  background-color: #1e293b !important;
  /* -iw-d is overflow:auto; without this its scrollbar renders light on the dark bubble */
  color-scheme: dark;
}
.dark .gm-style-iw-t::after,
.dark .gm-style-iw-tc::after {
  background: #1e293b !important;
}
.dark .gm-style-iw-chr button > span,
.dark .gm-ui-hover-effect > span {
  filter: invert(1);
}