/* Global Styles */
body {
    font-family: 'Lexend', sans-serif;
    -webkit-tap-highlight-color: transparent;
}

/* Hide scrollbars while keeping scroll functionality */
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.hide-scrollbar::-webkit-scrollbar { display: none; }

/* ===== Dynamic Theme CSS Variables ===================================================
   Defaults match the original green theme.
   Overridden at runtime by applyTheme() in global.js (reads from CompanyData API)
   or by the inline <head> script which applies the cached value from localStorage.
   Colors are stored as bare "R G B" channel triplets so Tailwind's
   `rgb(var(--theme-X) / <alpha-value>)` colour format works with opacity modifiers.
======================================================================================== */
:root {
    --theme-primary:     19 236 91;    /* #13ec5b – electric green          */
    --theme-bg-dark:     16 34 22;     /* #102216 – deep forest dark        */
    --theme-bg-light:    246 248 246;  /* #f6f8f6 – near-white              */
    --theme-card-dark:   28 39 31;     /* #1c271f – card background         */
    --theme-card-active: 37 50 41;     /* #253229 – active/hover card       */
    --theme-text-muted:  157 185 166;  /* #9db9a6 – muted text              */
    --theme-glow:        0 0 10px rgb(19 236 91 / 0.6);

    /* Light-mode variants (used when html:not(.dark) remaps below) */
    --theme-card-light:        255 255 255;  /* white cards                  */
    --theme-card-light-active: 234 244 238;  /* very light green hover card  */
    --theme-text-light-muted:  95 130 108;   /* readable muted green on white */
}

/* ── Light mode ───────────────────────────────────────────────────────────────
   Remap the "dark-named" CSS variables to their light equivalents.
   Every existing Tailwind class (bg-background-dark, bg-card-dark, etc.)
   automatically renders correctly in both modes — no HTML changes needed.
   ───────────────────────────────────────────────────────────────────────── */
html:not(.dark) {
    --theme-bg-dark:     var(--theme-bg-light);
    --theme-card-dark:   var(--theme-card-light);
    --theme-card-active: var(--theme-card-light-active);
    --theme-text-muted:  var(--theme-text-light-muted);
}

/* Tell the browser the app has its own dark mode, so forced dark mode of the phone /
   browser / WebView (Samsung Internet, Chrome "dark web pages") does not recolour it
   (white QR frames turned black). The <head> script follows the system theme until the
   member picks a mode with the toggle. */
html       { color-scheme: only light; }
html.dark  { color-scheme: dark; }

/* Smooth transition while switching modes (added/removed by toggleDarkMode()) */
html.mode-transitioning,
html.mode-transitioning * {
    transition: background-color 0.25s ease, border-color 0.25s ease,
                color 0.15s ease, box-shadow 0.25s ease !important;
}

/* ── Floating dark/light toggle button (injected by global.js on all pages) ─ */
.js-dark-toggle-btn {
    position: fixed;
    bottom: 5.5rem;   /* sits above the mobile footer nav */
    right: 1rem;
    z-index: 50;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    background: rgb(var(--theme-card-dark));
    border: 1px solid rgb(var(--theme-primary) / 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 12px rgb(0 0 0 / 0.25);
    transition: transform 0.15s, background-color 0.25s;
}
.js-dark-toggle-btn:hover { transform: scale(1.08); }
.js-dark-toggle-btn span  { font-size: 1.25rem; color: rgb(var(--theme-primary)); line-height: 1; }

/* Dark toggle is in the burger/sidebar menu — hide the floating button everywhere */
.js-dark-toggle-btn { display: none !important; }

/* ── Mode-icon visibility ──────────────────────────────────────────────────── */
/* .js-dark-icon-dark  = element shown when dark  mode is active (e.g. ☀ "Go light") */
/* .js-dark-icon-light = element shown when light mode is active (e.g. 🌙 "Go dark")  */
.js-dark-icon-dark  { display: none; }
.js-dark-icon-light { display: block; }
html.dark .js-dark-icon-dark  { display: block; }
html.dark .js-dark-icon-light { display: none; }

/* ── Guided tours (Driver.js popover, js/help/tours.js) ─────────────────────── */
.driver-popover.ipoint-tour {
    background: rgb(var(--theme-card-dark));
    color: #0f172a;
    border: 1px solid rgb(var(--theme-primary) / 0.35);
    border-radius: 16px;
    padding: 18px;
    max-width: 320px;
    box-shadow: 0 20px 40px rgb(0 0 0 / 0.35);
}
html.dark .driver-popover.ipoint-tour { color: #fff; }
.driver-popover.ipoint-tour * { font-family: 'Lexend', sans-serif; }
.driver-popover.ipoint-tour .driver-popover-title { font-size: 16px; font-weight: 700; padding-right: 20px; }
.driver-popover.ipoint-tour .driver-popover-description { font-size: 14px; line-height: 1.5; opacity: 0.85; }
.driver-popover.ipoint-tour .driver-popover-progress-text { color: rgb(var(--theme-primary)); font-size: 12px; font-weight: 700; }
.driver-popover.ipoint-tour .driver-popover-navigation-btns { gap: 6px; }
.driver-popover.ipoint-tour .driver-popover-footer button {
    text-shadow: none;
    border: none;
    border-radius: 10px;
    padding: 8px 14px;
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    background: rgb(127 127 127 / 0.15);
    color: inherit;
}
.driver-popover.ipoint-tour .driver-popover-footer .driver-popover-next-btn {
    background: rgb(var(--theme-primary));
    color: #102216;
}
.driver-popover.ipoint-tour .driver-popover-close-btn { color: inherit; opacity: 0.5; }
.driver-popover.ipoint-tour .driver-popover-arrow { display: none; }