/**
 * 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);
    --w-color-positive-100: var(--w-color-secondary-100);
    --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;
}

/* 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 color overrides
 * Ensure brand colors work well in dark mode too
 */
.w-theme-dark {
    --w-color-primary: #4A7BC8;
    --w-color-secondary: #26C6DA;
}