/**
 * Concord Health Branding
 * 
 * This file customizes Wagtail's admin interface with Concord Health colors.
 * Colors based on the Concord Health logo, adjusted for better readability.
 * 
 * Following Wagtail's official theming approach:
 * https://docs.wagtail.org/en/stable/advanced_topics/customization/admin_templates.html#custom-user-interface-colors
 */

:root {
    /* Concord Health brand colors - toned down for better UI readability */
    --concord-primary-blue: #2E5B9E;
    --concord-primary-dark: #1a3a6b;
    --concord-secondary-cyan: #0097A7;
    --concord-accent-light: #4FC3F7;
    
    /* Override Wagtail's primary color (used for branding, headings, panels) */
    --w-color-primary: #2E5B9E;
    --w-color-primary-200: #1a3a6b;
    
    /* Override secondary color (used for buttons, action links) */
    --w-color-secondary: #0097A7;
    --w-color-secondary-600: #00838F;
    --w-color-secondary-400: #00ACC1;
    --w-color-secondary-100: #4FC3F7;
    --w-color-secondary-75: #80D8FF;
    --w-color-secondary-50: #E0F7FA;

    --w-color-text-link-default: var(--concord-primary-blue);
    --w-color-text-link-hover: var(--concord-primary-dark);
    --w-color-surface-button-default: var(--concord-primary-blue);
    --w-color-text-button-outline-default: var(--concord-primary-blue);
    /*
     * `positive` is Wagtail's SUCCESS semantic, not a brand slot. Aliasing it
     * to the brand secondary painted every success affordance in the admin
     * with the brand's light blue -- success messages, success dialogs,
     * approved workflow items, the accessibility result count -- so a save
     * looked like an informational notice, and Wagtail's own
     * `color: var(--w-color-white)` on that fill measured 2.00:1, below any
     * WCAG threshold. Brand the surface tokens; leave the semantic ones to
     * mean what they say.
     */
    --w-color-secondary: var(--w-color-secondary-100);
    --w-color-border-field-hover: var(--w-color-primary);
    --w-color-focus: var(--w-color-primary);
}

/* 
 * Sidebar menu styling 
 * Make submenus more opaque and readable
 */

/* Submenu background - make it more solid and visible */
[data-nav-submenu],
.sidebar-submenu {
    background-color: rgba(26, 58, 107, 0.98) !important;
    backdrop-filter: blur(4px);
}

/* Submenu item text - ensure high contrast */
[data-nav-submenu] a,
.sidebar-submenu a {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Submenu hover states */
[data-nav-submenu] a:hover,
.sidebar-submenu a:hover {
    background-color: rgba(46, 91, 158, 0.5) !important;
    color: #ffffff !important;
}

/* Ensure better text visibility in sidebar */
.sidebar-menu-item,
[data-sidebar-menu-item] {
    opacity: 1 !important;
}

/*
 * The focus ring inside the sidebar. Wagtail paints the light sidebar with
 * --w-color-primary, and the ring above IS --w-color-primary, so on the bar it
 * was the ground's own colour. Measured 3 October 2026 on a host without the
 * kit: 1.00:1 on the toggle, every menu item and the search field -- a keyboard
 * user could not see where they were. Inside the sidebar the ring is the brand
 * blue lifted most of the way to white: 4.61:1 on the bar, 7.69:1 on the
 * submenu and active item (#1a3a6b), and 9.3:1 or better on every dark ground,
 * where it follows the dark primary. The kit's chrome does the same with a 45%
 * mix (--cc-chrome-focus), but its ground is near-black; on this mid-blue
 * ground 45% is only 3.24:1, so the lift here is stronger.
 */
.sidebar {
    --w-color-focus: color-mix(in srgb, var(--w-color-primary) 25%, #fff);
}

/* Login page accent */
.login-form {
    border-top: 4px solid var(--w-color-primary);
}

/*
 * Additional refinements for Concord Health brand consistency
 * These complement the CSS custom property overrides above
 */

/*
 * Dark theme colour overrides -- for BOTH ways the admin is dark.
 *
 * `.w-theme-dark` is a user's explicit choice. The default setting is
 * `.w-theme-system`, which is dark when the OS is, and Wagtail answers it with
 * the media query below; this block used to answer only the class. On the
 * default setting the admin therefore kept the LIGHT brand blue on a dark
 * ground. Measured 2 October 2026: every text link (the link ink is pinned to
 * --concord-primary-blue above) and the focus ring (#2E5B9E) were 2.4:1 on
 * the dark panels -- under 4.5:1 for text and 3:1 for a focus indicator.
 *
 * The link, outline-button and focus inks are a lighter tint of the same
 * brand blue: #8FB4EA is 7.5:1 on the dark page and 5.9:1 on Wagtail's
 * lightest dark surface (#333). Keep the two blocks identical.
 */
.w-theme-dark {
    --w-color-primary: #4A7BC8;
    --w-color-secondary: #26C6DA;
    --w-color-text-link-default: #8FB4EA;
    --w-color-text-link-hover: #B9D0F3;
    --w-color-text-button-outline-default: #8FB4EA;
    --w-color-focus: #8FB4EA;
}

@media (prefers-color-scheme: dark) {
    .w-theme-system {
        --w-color-primary: #4A7BC8;
        --w-color-secondary: #26C6DA;
        --w-color-text-link-default: #8FB4EA;
        --w-color-text-link-hover: #B9D0F3;
        --w-color-text-button-outline-default: #8FB4EA;
        --w-color-focus: #8FB4EA;
    }
}