/*
 * clientv2/assets/theme-bridge.css
 *
 * Selector overlay. Maps the 8 theme CSS variables (published by
 * theme.css.php under :root and html.theme-dark) onto every rule that
 * needs to react to a theme change.
 *
 * This file is why 14 tokens can repaint 24 step templates without
 * touching any template file. Every declaration targets markup that
 * already exists somewhere in clientv2 — no new classes introduced.
 *
 * Load order (both app.html and index.html):
 *   1) assets/app.css            (built Tailwind utilities — low priority)
 *   2) api/theme.css.php         (publishes var(--kyc-*) values)
 *   3) assets/theme-bridge.css   (this file — consumes the vars)
 *
 * Anything set in `<style>` blocks inside app.html overrides this file,
 * which is intentional: hand-crafted per-screen tweaks still win.
 */

/* ---------- Page background & body text ---------- */
html, body {
    background-color: var(--kyc-bg);
    color: var(--kyc-text);
    font-family: var(--kyc-font, Inter, ui-sans-serif, system-ui, sans-serif);
}

/* ---------- Step-page chrome ----------
 * Two background tokens:
 *   --kyc-bg      → the area OUTSIDE the phone frame (safe-area backdrop)
 *   --kyc-app-bg  → the INSIDE of the phone: header + content + footer
 *
 * Template structure every step shares:
 *   <div class="... bg-gradient-to-b from-blue-600 to-blue-800">  (outer → --kyc-bg)
 *     <div id="app" class="... bg-white">                         (app → --kyc-app-bg)
 *       header / progress / content / footer — all inherit or carry bg-white
 */
.bg-gradient-to-b.from-blue-600.to-blue-800 {
    background-color: var(--kyc-bg) !important;
    background-image: none !important;
}
#app,
#app.bg-white,
#app > .flex-shrink-0,
#app > div.bg-white,
#app > .kyc-brand-row,
.kyc-brand-row,
#app .kyc-step-name,
#app .kyc-progress-slot {
    background-color: var(--kyc-app-bg) !important;
    color: var(--kyc-text);
}
#app h1,
#app h2,
#app > .flex-shrink-0 h1,
.kyc-head-label,
.kyc-step-name {
    color: var(--kyc-text) !important;
}

/* ---------- Inputs ----------
 * Match input surfaces to --kyc-app-bg so form fields blend with the
 * app interior. Includes a Chrome autofill override — otherwise
 * -webkit-autofill forces a pale yellow/blue wash over dark themes
 * (seen when the browser fills saved name/PAN/address values). */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]):not([type="range"]),
select,
textarea {
    background-color: var(--kyc-app-bg);
    color: var(--kyc-text);
    border-color: color-mix(in srgb, var(--kyc-text) 20%, transparent);
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--kyc-app-bg) inset !important;
    box-shadow: 0 0 0 1000px var(--kyc-app-bg) inset !important;
    -webkit-text-fill-color: var(--kyc-text) !important;
    caret-color: var(--kyc-text);
    transition: background-color 9999s ease-in-out 0s;
}

/* ---------- Native form controls (checkbox, radio) ----------
 * `accent-color` is the single-property browser API for theming native
 * checkboxes/radios. Supported in Chrome 93+, Safari 15.4+, Firefox 92+.
 * Older browsers fall back to OS default — acceptable graceful path.
 */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--kyc-cbx);
}

/* ---------- Custom tick color ----------
 * The 2100/2200 tile pickers render a ✓ via CSS content on
 * .selected::after. The .kyc-check class is used where the tick is a
 * standalone element (e.g. consent blocks).
 */
.kyc-check,
.choice-btn.selected::after,
.proof-type-btn.selected::after {
    color: var(--kyc-tick);
}

/* ---------- Primary CTA ----------
 * .bg-brand / .text-brand / .border-brand are already defined in
 * clientv2/app.html's <style> block. Re-pointing them here lets every
 * template that uses `class="bg-brand"` pick up the admin-chosen color
 * without editing the template.
 */
.bg-brand,
.kyc-btn-primary,
button.bg-brand,
.bg-blue-500,
.bg-blue-600,
.bg-blue-700,
button.bg-blue-500,
button.bg-blue-600,
button.bg-blue-700,
.hover\:bg-blue-600:hover,
.hover\:bg-blue-700:hover,
.hover\:bg-brand-dark:hover {
    background-color: var(--kyc-primary) !important;
    color: var(--kyc-primary-text, #ffffff) !important;
}
.text-brand,
.text-blue-500,
.text-blue-600,
.text-blue-700 {
    color: var(--kyc-primary) !important;
}
.border-brand,
.border-blue-500,
.border-blue-600,
.border-blue-700,
.focus\:border-brand:focus,
.focus\:border-blue-500:focus {
    border-color: var(--kyc-primary) !important;
}
.focus\:ring-brand:focus,
.focus\:ring-blue-500:focus {
    --tw-ring-color: var(--kyc-primary) !important;
}

/* ---------- Secondary CTA ----------
 * Outline / ghost buttons. `.btn-outline` is used on a couple of
 * reset-to-default affordances in the upload pages.
 */
.kyc-btn-secondary,
.btn-outline {
    background-color: var(--kyc-secondary) !important;
    color: var(--kyc-secondary-text, #ffffff) !important;
    border-color: var(--kyc-secondary) !important;
}

/* ---------- Back / Next navigation ----------
 * `#backBtn` and `#continueBtn` are the canonical IDs used by app.js
 * throughout the wizard. The last-child fallback targets templates that
 * structure their footer as a two-button row without those IDs (the
 * selector is specific enough to avoid paging through <nav>/<header>).
 */
/* !important beats `.bg-brand { background-color: var(--kyc-primary) !important; }`
   which would otherwise repaint the Continue button with primary after
   a re-render (seen as a colour flash ~0.2s after mount).
   The doubled `#backBtn.bg-brand` variant is defensive — the 4 step templates
   (1200mobile, 1300email, 1500ekyc, 3300esign) render the back button with
   BOTH `id="backBtn"` AND `class="bg-brand"`. ID specificity already wins
   over class, but stating it explicitly stops future tweaks from tilting
   the cascade. */
#backBtn,
#backBtn.bg-brand,
button#backBtn,
[data-role="back"],
footer.kyc-nav button:first-child {
    background-color: var(--kyc-back) !important;
    color: var(--kyc-back-text, #ffffff) !important;
    background-image: none !important;
}
/* Back-button icon: the 4 templates use inline <svg stroke="currentColor">,
   so forcing `color` on the button is enough. The explicit rule here ensures
   the SVG keeps matching the text token even when a page adds its own
   `text-white` / `text-gray-*` utility on the same button. */
#backBtn svg,
button#backBtn svg,
[data-role="back"] svg,
footer.kyc-nav button:first-child svg {
    color: var(--kyc-back-text, #ffffff) !important;
    stroke: currentColor;
}
/* Neutralise `hover:bg-brand-dark` on the back button. Without this, hovering
   the back button would briefly repaint it with --kyc-primary (because
   `.hover\:bg-brand-dark:hover` is mapped to primary up in the primary-CTA
   block). Keep the back token on hover too. */
#backBtn:hover,
button#backBtn:hover,
[data-role="back"]:hover,
footer.kyc-nav button:first-child:hover {
    background-color: var(--kyc-back) !important;
    color: var(--kyc-back-text, #ffffff) !important;
}
#continueBtn,
#nextBtn,
[data-role="next"],
footer.kyc-nav button:last-child {
    background-color: var(--kyc-next) !important;
    color: var(--kyc-next-text, #ffffff) !important;
    position: relative;
    overflow: hidden;
}

/* Click-triggered L→R sweep — indicates forward UI motion on the press.
 * A <script> on each step toggles .kyc-press on tap; the class is removed
 * via animationend so the effect plays exactly once per click. */
#continueBtn.kyc-press::after,
#nextBtn.kyc-press::after,
[data-role="next"].kyc-press::after,
footer.kyc-nav button:last-child.kyc-press::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        transparent 0%,
        color-mix(in srgb, var(--kyc-next-text, #ffffff) 55%, transparent) 50%,
        transparent 100%
    );
    transform: translateX(-100%);
    animation: kyc-next-press 0.7s ease-out forwards;
}
@keyframes kyc-next-press {
    from { transform: translateX(-100%); }
    to   { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
    #continueBtn.kyc-press::after,
    #nextBtn.kyc-press::after,
    [data-role="next"].kyc-press::after,
    footer.kyc-nav button:last-child.kyc-press::after {
        animation: none;
        display: none;
    }
}

/* ---------- Utility buttons ----------
 * Shared surface for crop, rotate, retake, cancel, close/X, logout, and
 * the accessibility-FAB / theme-toggle affordances. These all play the
 * same "utility action" role so they collapse onto a single bg+text pair
 * per mode (lightUtilBg/Text, darkUtilBg/Text — theme.css.php remaps the
 * one --kyc-util variable under html.theme-dark).
 *
 * Selectors were chosen from recon of the existing markup — no new
 * data-* attributes added. If a template introduces a new utility button
 * without a stable ID, give it `data-role="util"` to opt in.
 */
#toolCropBtn,
#retakeBtn,
#a11yFab,
.color-btn,
.kyc-logout-btn,
#imageSheet button,
#deleteConfirmBox button:last-child,
#inlineDeleteConfirmBox button:last-child,
[data-role="util"] {
    background-color: var(--kyc-util) !important;
    color: var(--kyc-util-text) !important;
}
/* Close / X icon that's rendered as SVG child should inherit the text color. */
#toolCropBtn svg,
#retakeBtn svg,
#a11yFab svg,
.kyc-logout-btn svg,
#imageSheet button svg,
[data-role="util"] svg {
    color: var(--kyc-util-text) !important;
    fill: currentColor;
}