/*
 * Mills Capital — Wagtail admin theme.
 *
 * Brand tokens are scoped narrowly: we only override what's needed for brand
 * identity (sidebar, primary buttons, focus ring, font, login gradient).
 * Default Wagtail contrast tokens (text-label, text-context, surface-page…)
 * are intentionally LEFT ALONE so headings stay readable everywhere.
 */

:root,
.w-theme-light,
.w-theme-system {
    /* Brand palette */
    --mills-financial-green: #163029;
    --mills-financial-green-700: #102420;
    --mills-financial-green-500: #1f4339;
    --mills-ivory-banknote: #f9f1e7;
    --mills-ivory-banknote-soft: #f4ead9;
    --mills-accent: #c7a878;

    /* Drives the sidebar, primary buttons, brand emphasis, and the login
       fullscreen radial gradient (Wagtail wires --w-login-fullscreen-background
       to var(--w-color-primary)). */
    --w-color-primary: var(--mills-financial-green);
    --w-color-primary-200: var(--mills-financial-green-500);
    --w-color-primary-hover: var(--mills-financial-green-500);

    /* Sidebar / dark menus only */
    --w-color-surface-menus: var(--mills-financial-green);
    --w-color-surface-menus-active: var(--mills-financial-green-700);
    --w-color-surface-menu-item-active: var(--mills-financial-green-500);

    /* Focus ring */
    --w-color-focus: var(--mills-accent);

    /* Typography */
    --w-font-sans: "Satoshi Variable", "Satoshi", "Inter", -apple-system,
        BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Dark mode: lighten the brand for legibility on dark surfaces */
.w-theme-dark {
    --w-color-primary: var(--mills-ivory-banknote);
    --w-color-primary-hover: var(--mills-ivory-banknote-soft);
    --w-color-surface-menus: var(--mills-financial-green-700);
    --w-color-surface-menu-item-active: var(--mills-financial-green-500);
}

/* ------------------------------------------------------------------ */
/* Sidebar polish                                                      */
/* ------------------------------------------------------------------ */
.sidebar,
.sidebar-custom-branding {
    background-color: var(--mills-financial-green) !important;
}

.sidebar .sidebar-main-menu a,
.sidebar .menu-item a {
    color: var(--mills-ivory-banknote);
}

.sidebar .menu-item--active > a,
.sidebar .menu-item a:hover {
    background-color: var(--mills-financial-green-500);
    color: var(--mills-ivory-banknote);
}

/* Mills logo inside the React sidebar branding slot */
.sidebar svg.mills-logo,
.sidebar .mills-logo {
    display: block;
    max-width: 44px;
    height: auto;
    margin: 0 auto;
}

/* ------------------------------------------------------------------ */
/* Buttons                                                             */
/* ------------------------------------------------------------------ */
.button.button-primary,
.button.bicolor.button-primary,
button.button.button-primary {
    background-color: var(--mills-financial-green);
    border-color: var(--mills-financial-green);
    color: var(--mills-ivory-banknote);
}

.button.button-primary:hover,
.button.bicolor.button-primary:hover,
button.button.button-primary:hover {
    background-color: var(--mills-financial-green-500);
    border-color: var(--mills-financial-green-500);
}

/* ------------------------------------------------------------------ */
/* Login screen                                                        */
/*                                                                     */
/* Wagtail's layout: the body has class="login" with a radial-gradient *
 * green page background. The form/title live inside .content-wrapper, *
 * a centered cream card. We KEEP the card light, so default dark text *
 * stays readable. We only style the card chrome + form internals.     *
 * ------------------------------------------------------------------ */
body.login,
.login {
    /* Belt-and-suspenders: ensure the page bg is unmistakably brand green
       even if Wagtail's --w-login-fullscreen-background changes shape */
    background: radial-gradient(
        110% 220% at 100% 0%,
        var(--mills-financial-green-500) 0%,
        var(--mills-financial-green) 55%,
        var(--mills-financial-green-700) 100%
    ) !important;
}

/* Cream card: keep Wagtail's default surface (light) but harden border-radius
   and add a deeper shadow so it pops against the green */
.login .content-wrapper,
body.login .content-wrapper {
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

/* Form inputs inside the card */
.login .login-form input[type="text"],
.login .login-form input[type="email"],
.login .login-form input[type="password"] {
    border-radius: 6px;
}

.login .login-form input:focus {
    box-shadow: 0 0 0 2px var(--mills-accent);
    outline: none;
}

/* Login submit button — explicit brand color */
.login .form-actions .button,
.login button.button-longrunning {
    background-color: var(--mills-financial-green);
    border-color: var(--mills-financial-green);
    color: var(--mills-ivory-banknote);
}

.login .form-actions .button:hover,
.login button.button-longrunning:hover {
    background-color: var(--mills-financial-green-500);
    border-color: var(--mills-financial-green-500);
}

/* Subtitle / footnote we added in login.html */
.login .login-subtitle,
.login .login-footnote {
    text-align: center;
    margin: 0.5rem 0 1.5rem;
    color: var(--mills-financial-green);
    opacity: 0.85;
    font-size: 0.95rem;
}

.login .login-footnote {
    margin: 1.25rem 0 0;
    font-size: 0.85rem;
    opacity: 0.7;
}

/* Login logo — sits on the cream card → use the dark Mills wordmark */
.login-logo .mills-logo {
    display: block;
    margin: 0 auto;
    max-width: 200px;
    height: auto;
}

/* Logo above the welcome heading */
.login-logo--top {
    text-align: center;
    margin: 0 0 1.5rem;
}

.login-logo--top .mills-logo-wrap {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
}

/* ------------------------------------------------------------------ */
/* Focus ring (global)                                                 */
/* ------------------------------------------------------------------ */
*:focus-visible {
    outline-color: var(--mills-accent) !important;
}