/* PrivatePay — login / register / password pages.
 *
 * Loaded by layouts/guest.blade.php AFTER the Vite bundle, and ONLY when
 * config('view.theme') === 'privatepay' and this file exists on disk. Every
 * other white label renders the guest pages exactly as before.
 *
 * This is the auth-page sibling of
 * themes/dashboard/privatepay/css/privatepay.css (privatepay-dashboard-public
 * repo), which covers the cabinet. They are separate because the two areas
 * load different stylesheets and deploy from different repos — keep the brand
 * tokens below in sync with that file by hand.
 *
 * Hand-written: nothing here needs `npm run build`. Deliberately avoids
 * introducing new Tailwind utilities, which would require rebuilding
 * public/dist/css/*.css from an install that has this theme.
 */

:root {
    --pp-brand-bg: #163231;
    --pp-brand-fg: #92e0c4;
    --pp-brand-bg-hover: #0f2423;
}

/* ---------------------------------------------------------------------------
 * Figma round 2, #1 + #3 — logo size and alignment on login and register.
 *
 * The shared partial used to stamp width/height from LOGO_W/LOGO_H (60/60),
 * which letterboxes a wide wordmark into a 60x60 square and leaves it a few
 * pixels tall. themes/fe/privatepay/blocks/auth-logo.blade.php drops those
 * attributes; the size lives here so it is one number to tune, in a file that
 * deploys without a build step.
 *
 * 48px is the height, width follows the asset's aspect ratio. The wrapper in
 * guest.blade.php is already a centred flex column, so margin:auto only
 * matters if that ever changes.
 * ------------------------------------------------------------------------ */
.pp-auth-logo {
    display: block;
    height: 48px;
    width: auto;
    max-width: 100%;
    margin: 0 auto;
}

/* ---------------------------------------------------------------------------
 * Figma round 2, #4 — LOG IN / SIGN UP buttons: brand-dark background, mint
 * text.
 *
 * Targets the <x-primary-button> signature (components/primary-button.blade.php
 * merges `bg-gray-800 ... text-white`) rather than a bare element selector, so
 * a future non-primary button on these pages is not swept up. !important
 * because Tailwind's utilities land in the same cascade layer and we cannot
 * outrank a compound utility class by specificity alone.
 * ------------------------------------------------------------------------ */
button.bg-gray-800,
a.bg-gray-800,
input[type="submit"].bg-gray-800 {
    background-color: var(--pp-brand-bg) !important;
    color: var(--pp-brand-fg) !important;
}

button.bg-gray-800:hover,
button.bg-gray-800:focus,
button.bg-gray-800:active,
a.bg-gray-800:hover,
a.bg-gray-800:focus,
input[type="submit"].bg-gray-800:hover,
input[type="submit"].bg-gray-800:focus {
    background-color: var(--pp-brand-bg-hover) !important;
    color: var(--pp-brand-fg) !important;
}

/* Dark-mode variants of the same component (dark:bg-gray-200 /
 * dark:text-gray-800) — the guest layout carries dark: classes even though it
 * ships no toggle, so cover them or the pair inverts if one is ever added. */
.dark button.bg-gray-800,
.dark a.bg-gray-800,
.dark input[type="submit"].bg-gray-800 {
    background-color: var(--pp-brand-bg) !important;
    color: var(--pp-brand-fg) !important;
}

/* The stock focus ring is indigo; retint so the button does not flash a
 * colour that is nowhere else in the brand. */
button.bg-gray-800:focus,
a.bg-gray-800:focus,
input[type="submit"].bg-gray-800:focus {
    --tw-ring-color: rgba(146, 224, 196, .45) !important;
}