/* ============================================================================
 * BizBMS login screen styles (framework default). Tailwind source.
 * ----------------------------------------------------------------------------
 * Scope:        Wagtail admin login page (URL: <WAGTAIL_ADMIN_URL>login/).
 * Owner:        bizbms framework. Reused by every BizBMS-based project.
 * Loaded by:    bizbms/templates/wagtailadmin/login.html (extra_css block)
 *               via the symlink bizbms/static/bizbms/css/login.css.
 *
 * Build chain (per the BizBMS Django manual, "Static Files"):
 *   src/login.css   ──postcss──▶   dist/login.css   ◀── css/login.css (symlink)
 *
 * Most of the visual design lives in Tailwind utility classes on the
 * templates themselves (header.html, form.html, footer.html, project_panel
 * .html, login.html). This stylesheet only carries rules that cannot be
 * expressed cleanly with utilities:
 *
 *   1. body.login resets. Wagtail owns body/wrapper/skiplink markup.
 *   2. .bms-login page background. Multi-stop radial + linear gradient.
 *   3. Wagtail form DOM. Inputs/checkboxes are rendered by {% formattedfield %},
 *      so we can't drop Tailwind classes on them; we target via descendant
 *      selectors instead.
 *   4. Wagtail message list. Same reason.
 *   5. button-longrunning overrides. Wagtail injects this class on the
 *      submit button; reset its default chrome here.
 *
 * Project overrides:
 *   project/static/project/src/login.css is built to project/dist/login.css
 *   and loaded after this file by the shell template, so projects can
 *   layer on token or component tweaks without forking this file.
 * ========================================================================== */

/* ---------------------------------------------------------------------------
   1. body.login. Wagtail page chrome resets.
   --------------------------------------------------------------------------- */

body.login {
    background: #050816 !important;
    color: #e5e7eb;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    min-height: 100vh;
    margin: 0;
}

body.login .wrapper,
body.login main.content-wrapper {
    background: transparent !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 100vh !important;
    padding: 0 !important;
    margin: 0 !important;
}

body.login .skiplink {
    display: none;
}

/* Wagtail's core.css hijacks `.hidden` for a slide-up animation:
       .hidden { transform: translateY(200px); visibility: hidden; }
   That collides with Tailwind's `.hidden` (display: none) — when we use
   `hidden md:block` to swap visibility responsively, `md:block` only
   resets `display`, leaving Wagtail's `visibility:hidden` + `transform`
   still hiding the element. Reset those inside the login so `.hidden`
   behaves like a Tailwind utility (purely a display toggle). */

.bms-login .hidden {
    transform: none;
    visibility: visible;
}

/* ---------------------------------------------------------------------------
   2. .bms-login. Page background.
   Tailwind's `bg-[radial-gradient(...)]` arbitrary value choke on commas
   inside the gradient stops, so the multi-layer gradient stays here.
   --------------------------------------------------------------------------- */

.bms-login {
    background:
        radial-gradient(ellipse 90% 70% at 100% 100%, rgba(59, 130, 246, 0.20), transparent 60%),
        radial-gradient(ellipse 50% 40% at 0% 0%, rgba(147, 51, 234, 0.08), transparent 50%),
        #050816;
}

/* ---------------------------------------------------------------------------
   3. Wagtail-rendered form fields inside the login card.
   The DOM is `<div class="w-field__wrapper">…<input></div>`, generated by
   `{% formattedfield %}`. We can't add utility classes to those nodes, so
   we target them with descendant selectors scoped to .bms-login-form-card.
   --------------------------------------------------------------------------- */

.bms-login-form-card .login-form .w-field,
.bms-login-form-card .login-form .w-field__wrapper {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

.bms-login-form-card .login-form label {
    color: #e5e7eb;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
    display: block;
}

.bms-login-form-card .login-form input[type="text"],
.bms-login-form-card .login-form input[type="email"],
.bms-login-form-card .login-form input[type="password"] {
    width: 100%;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 10px !important;
    padding: 12px 14px !important;
    color: #fff !important;
    font-size: 15px !important;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.bms-login-form-card .login-form input[type="text"]::-moz-placeholder, .bms-login-form-card .login-form input[type="email"]::-moz-placeholder, .bms-login-form-card .login-form input[type="password"]::-moz-placeholder {
    color: #6b7280;
}

.bms-login-form-card .login-form input[type="text"]::placeholder,
.bms-login-form-card .login-form input[type="email"]::placeholder,
.bms-login-form-card .login-form input[type="password"]::placeholder {
    color: #6b7280;
}

.bms-login-form-card .login-form input[type="text"]:focus,
.bms-login-form-card .login-form input[type="email"]:focus,
.bms-login-form-card .login-form input[type="password"]:focus {
    outline: none !important;
    border-color: #3b82f6 !important;
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
}

.bms-login-form-card .login-form input[type="checkbox"] {
    accent-color: #3b82f6;
    width: 16px;
    height: 16px;
}

.bms-login-form-card .login-form .help,
.bms-login-form-card .login-form .help-block {
    color: #9ca3af;
    font-size: 12px;
}

.bms-login-form-card .login-form .error,
.bms-login-form-card .login-form .errorlist {
    color: #f87171;
    font-size: 13px;
}

/* ---------------------------------------------------------------------------
   4. Wagtail message list above the form.
   --------------------------------------------------------------------------- */

.bms-login-form-card .messages ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bms-login-form-card .messages li {
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px;
    background: rgba(248, 113, 113, 0.12);
    border: 1px solid rgba(248, 113, 113, 0.3);
    color: #fecaca;
}

.bms-login-form-card .messages li.success {
    background: rgba(52, 211, 153, 0.12);
    border-color: rgba(52, 211, 153, 0.3);
    color: #bbf7d0;
}

/* ---------------------------------------------------------------------------
   5. Wagtail's .button-longrunning chrome reset.
   Wagtail's stylesheet adds default button chrome we don't want; reset it
   here so the Tailwind classes on the submit button can take over.
   --------------------------------------------------------------------------- */

.bms-login-form-card .button-longrunning {
    border: none;
    background-image: none;
}

/* ============================================================================
 * Light theme overrides
 * ----------------------------------------------------------------------------
 * Activated when the theme-detection script in login.html sets
 * `html[data-bms-login-theme="light"]`. Default is dark; light kicks in for
 * users with prefers-color-scheme: light or who explicitly use the toggle.
 *
 * Hero gradient cards, the BizBMS brand badge, the "Web, mobile, AI" gradient,
 * the headline accent line, and the Sign in submit button all keep their
 * existing colors — their `text-white` sits on a colored gradient surface
 * where white reads cleanly on both themes.
 * ========================================================================== */

html[data-bms-login-theme="light"] body.login {
    background: #f5f3ef !important;
    color: #374151;
}

html[data-bms-login-theme="light"] .bms-login {
    background:
        radial-gradient(ellipse 80% 60% at 100% 100%, rgba(59, 130, 246, 0.12), transparent 65%),
        radial-gradient(ellipse 70% 55% at 0% 0%, rgba(217, 119, 6, 0.08), transparent 55%),
        linear-gradient(180deg, #f9f7f3 0%, #f3f1ec 100%),
        #f5f3ef;
}

/* Card shadows — dark theme uses rgba(0,0,0,0.6) 60px which is harsh on
   light. Use a layered close+ambient shadow at low alpha to anchor cards
   against the warm bg without darkening the surroundings. */

html[data-bms-login-theme="light"] .bms-login [class*="shadow-[0_30px_60px"] {
    box-shadow:
        0 1px 3px rgba(15, 23, 42, 0.05),
        0 12px 28px -12px rgba(15, 23, 42, 0.12);
}

/* ── Card surfaces — bright white surfaces on the duller body bg.
       Inverts the dark-theme pattern (where cards were a *whiter* tint on a
       very dark bg). On light, cards become near-white panels that pop off
       the slightly-grayed body. ─────────────────────────────────────────── */

html[data-bms-login-theme="light"] .bms-login [class*="bg-white/[0.04]"] {
    background-color: rgba(255, 255, 255, 0.92);
}

html[data-bms-login-theme="light"] .bms-login [class*="bg-white/[0.03]"] {
    background-color: rgba(255, 255, 255, 0.85);
}

html[data-bms-login-theme="light"] .bms-login .bg-white\/5 {
    background-color: rgba(255, 255, 255, 0.95);
}

html[data-bms-login-theme="light"] .bms-login [class*="border-white/10"] {
    border-color: rgba(15, 23, 42, 0.10);
}

html[data-bms-login-theme="light"] .bms-login [class*="border-white/[0.14]"] {
    border-color: rgba(15, 23, 42, 0.12);
}

/* Coloured left-border accents on the secondary KPI cards. The generic
   border-color override above is a shorthand that hits all four sides,
   wiping out Tailwind's border-l-X rule. Re-apply the accent colour
   specifically on the left side, using one Tailwind step darker for
   better presence on the near-white card surface. */

html[data-bms-login-theme="light"] .bms-login .border-l-blue-500 {
    border-left-color: #2563eb;
}

html[data-bms-login-theme="light"] .bms-login .border-l-purple-500 {
    border-left-color: #9333ea;
}

html[data-bms-login-theme="light"] .bms-login .border-l-amber-500 {
    border-left-color: #d97706;
}

html[data-bms-login-theme="light"] .bms-login .border-l-gray-500 {
    border-left-color: #6b7280;
}

/* Form-card linear gradient — bright white surface, slight bottom fade. */

html[data-bms-login-theme="light"] .bms-login-form-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.97) 0%, rgba(255, 255, 255, 0.88) 100%) !important;
}

/* ── Text — dark text on light surfaces ─────────────────────────────────── */

/* Headline plain line ("Not Your Spreadsheets.") */

html[data-bms-login-theme="light"] .bms-login h1 .text-white {
    color: #111827;
}

/* Subtitle bolded inline list ("drivers, vehicles, finance, ledger, analytics") */

html[data-bms-login-theme="light"] .bms-login p strong.text-white {
    color: #111827;
}

/* BizBMS wordmark "BMS" portion + "Sign in" heading inside the form card */

html[data-bms-login-theme="light"] .bms-login-form-card span.text-white,
html[data-bms-login-theme="light"] .bms-login-form-card h2.text-white {
    color: #111827;
}

/* Header brand name (e.g. "Kadam Mobility") */

html[data-bms-login-theme="light"] .bms-login header span.text-white {
    color: #111827;
}

/* Secondary KPI card values + Operations stats values */

html[data-bms-login-theme="light"] .bms-login [class*="border-l-"] .text-white,
html[data-bms-login-theme="light"] .bms-login .grid-cols-4 > .rounded-lg .text-white {
    color: #111827;
}

/* Muted greys — bump contrast on light backgrounds */

html[data-bms-login-theme="light"] .bms-login .text-gray-200 {
    color: #374151;
}

html[data-bms-login-theme="light"] .bms-login .text-gray-300 {
    color: #4b5563;
}

html[data-bms-login-theme="light"] .bms-login .text-gray-400 {
    color: #6b7280;
}

html[data-bms-login-theme="light"] .bms-login .text-gray-500 {
    color: #9ca3af;
}

/* Blue accents readable on light bg */

html[data-bms-login-theme="light"] .bms-login .text-blue-400,
html[data-bms-login-theme="light"] .bms-login-form-card .text-blue-400 {
    color: #1d4ed8;
}

html[data-bms-login-theme="light"] .bms-login .text-blue-500 {
    color: #1d4ed8;
}

/* Gradient text — the dark-mode stops (purple-600 / blue-500 / blue-700)
   read muted against a warm off-white. Bump to richer / darker stops so
   "Run Your Fleet." and "Web, mobile, AI" keep their punch on light bg.
   Targets every bg-clip-text gradient text inside the login (text-only
   gradients), without affecting the hero gradient cards which use
   bg-gradient-to-br on solid surfaces. */

html[data-bms-login-theme="light"] .bms-login .bg-clip-text.text-transparent {
    background-image: linear-gradient(
        to right,
        #6b21a8,
        #1e40af,
        #1e3a8a
    ) !important;
}

/* ── Wagtail-rendered form inputs ────────────────────────────────────────── */

html[data-bms-login-theme="light"] .bms-login-form-card .login-form label {
    color: #374151;
}

html[data-bms-login-theme="light"] .bms-login-form-card .login-form input[type="text"],
html[data-bms-login-theme="light"] .bms-login-form-card .login-form input[type="email"],
html[data-bms-login-theme="light"] .bms-login-form-card .login-form input[type="password"] {
    background: rgba(0, 0, 0, 0.04) !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
    color: #111827 !important;
}

html[data-bms-login-theme="light"] .bms-login-form-card .login-form input[type="text"]::-moz-placeholder, html[data-bms-login-theme="light"] .bms-login-form-card .login-form input[type="email"]::-moz-placeholder, html[data-bms-login-theme="light"] .bms-login-form-card .login-form input[type="password"]::-moz-placeholder {
    color: #6b7280;
}

html[data-bms-login-theme="light"] .bms-login-form-card .login-form input[type="text"]::placeholder,
html[data-bms-login-theme="light"] .bms-login-form-card .login-form input[type="email"]::placeholder,
html[data-bms-login-theme="light"] .bms-login-form-card .login-form input[type="password"]::placeholder {
    color: #6b7280;
}

html[data-bms-login-theme="light"] .bms-login-form-card .login-form input[type="text"]:focus,
html[data-bms-login-theme="light"] .bms-login-form-card .login-form input[type="email"]:focus,
html[data-bms-login-theme="light"] .bms-login-form-card .login-form input[type="password"]:focus {
    background: rgba(0, 0, 0, 0.02) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.20);
}

/* ── Alerts — dark theme uses red-200 text on red-400/12% which reads as
       light pink on light pink against a near-white card. Bump text to
       red-700 with stronger border so error messages stay legible on light.
       Same treatment for the success variant. */

html[data-bms-login-theme="light"] .bms-login-form-card .messages li {
    background: rgba(220, 38, 38, 0.06);
    border-color: rgba(220, 38, 38, 0.30);
    color: #b91c1c;
}

html[data-bms-login-theme="light"] .bms-login-form-card .messages li.success {
    background: rgba(5, 150, 105, 0.06);
    border-color: rgba(5, 150, 105, 0.30);
    color: #047857;
}

/* Inline form-field errors */

html[data-bms-login-theme="light"] .bms-login-form-card .login-form .error,
html[data-bms-login-theme="light"] .bms-login-form-card .login-form .errorlist {
    color: #b91c1c;
}

/* ── Theme toggle — bg tints match the visible icon's hue.
       Dark theme shows the sun (warm amber); light theme shows the moon
       (cool blue). The button surface picks up the same family so the
       toggle reads as a coloured affordance rather than a neutral pill. */

/* Dark theme: warm amber-tinted button (sun icon visible) */

html[data-bms-login-theme="dark"] #bms-login-theme-toggle {
    background-color: rgba(251, 191, 36, 0.10);
    border-color: rgba(251, 191, 36, 0.25);
}

html[data-bms-login-theme="dark"] #bms-login-theme-toggle:hover {
    background-color: rgba(251, 191, 36, 0.18);
    border-color: rgba(251, 191, 36, 0.40);
}

/* Light theme: cool blue-tinted button (moon icon visible).
   The moon's inline `text-blue-500` is too close in tone to the blue-tinted
   button surface — bump to blue-700 here for legible contrast on light. */

html[data-bms-login-theme="light"] #bms-login-theme-toggle {
    background-color: rgba(59, 130, 246, 0.10);
    border-color: rgba(59, 130, 246, 0.30);
}

html[data-bms-login-theme="light"] #bms-login-theme-toggle [data-theme-icon="light"] {
    color: #1d4ed8;
}

html[data-bms-login-theme="light"] #bms-login-theme-toggle:hover {
    background-color: rgba(59, 130, 246, 0.18);
    border-color: rgba(59, 130, 246, 0.45);
}

html[data-bms-login-theme="light"] #bms-login-theme-toggle:hover [data-theme-icon="light"] {
    color: #1e40af;
}