/*
 * en-masse EasyAdmin theme - design tokens
 * =========================================
 * This file cleanly overrides EasyAdmin 5's own CSS custom properties.
 * It does NOT use !important and it does NOT fight Bootstrap selectors;
 * it simply re-points EA's semantic tokens at a single brand source of
 * truth, --ea-brand-accent.
 *
 * --ea-brand-accent is set at runtime by the bundle (from
 * enmasse_admin.brand.accent); the fallback below keeps the theme complete
 * even with no configuration. Every other color is derived from it with
 * color-mix(), so a project rebrands the whole panel by changing ONE value.
 *
 * Load order matters: add this file AFTER EasyAdmin's own stylesheet so the
 * :root overrides win by normal cascade. The base dashboard controller does
 * this for you.
 */

:root {
    /* ---- Brand source of truth ---- */
    --ea-brand-accent: #4f46e5;
    --ea-brand-on-accent: #ffffff;

    /* Derived shades (light scheme darkens on hover/active). */
    --ea-brand-accent-hover: color-mix(in srgb, var(--ea-brand-accent) 88%, #000);
    --ea-brand-accent-active: color-mix(in srgb, var(--ea-brand-accent) 78%, #000);
    --ea-brand-accent-top: color-mix(in srgb, var(--ea-brand-accent) 92%, #fff);
    --ea-brand-accent-soft: color-mix(in srgb, var(--ea-brand-accent) 12%, #fff);
    --ea-brand-accent-soft-border: color-mix(in srgb, var(--ea-brand-accent) 26%, #fff);
    --ea-brand-accent-ring: color-mix(in srgb, var(--ea-brand-accent) 25%, transparent);

    /* ---- Map EasyAdmin 5 tokens to the brand ---- */
    /* EasyAdmin 5.3+ derives its primary color (switches, focus rings,
       select widgets) from --ea-primary; older 5.x releases ignore it. */
    --ea-primary: var(--ea-brand-accent);
    --color-primary: var(--ea-brand-accent);
    --link-color: var(--ea-brand-accent);
    --link-hover-color: var(--ea-brand-accent-hover);

    /* Primary buttons - keep EA's subtle top-to-bottom gradient, branded. */
    --button-primary-bg: linear-gradient(to bottom, var(--ea-brand-accent-top), var(--ea-brand-accent));
    --button-primary-color: var(--ea-brand-on-accent);
    --button-primary-icon-color: var(--ea-brand-on-accent);
    --button-primary-border-color: color-mix(in srgb, var(--ea-brand-accent) 70%, #000);
    --button-primary-hover-bg: linear-gradient(to bottom, var(--ea-brand-accent), var(--ea-brand-accent-hover));
    --button-primary-hover-color: var(--ea-brand-on-accent);
    --button-primary-hover-border-color: color-mix(in srgb, var(--ea-brand-accent) 60%, #000);
    --button-primary-active-bg: var(--ea-brand-accent-active);
    --button-primary-active-color: var(--ea-brand-on-accent);
    --button-focus-outline-color: var(--ea-brand-accent);

    /* Sidebar menu */
    --sidebar-menu-active-item-color: var(--ea-brand-accent);
    --sidebar-menu-active-item-bg: var(--ea-brand-accent-soft);
    --sidebar-menu-badge-active-bg: var(--ea-brand-accent);

    /* Form controls: branded focus ring + checked states */
    --form-input-hover-border-color: var(--ea-brand-accent);
    --form-input-hover-shadow: 0 0 0 0.2rem var(--ea-brand-accent-ring);
    --form-type-check-input-checked-bg: var(--ea-brand-accent);
    /* --form-switch-checked-bg is read by EasyAdmin < 5.2 only; 5.2+ renders
       the <twig:ea:Switch> component, which follows --ea-primary. */
    --form-switch-checked-bg: var(--ea-brand-accent);

    /* Tables, pagination, badges, dropdowns */
    --table-thead-sorted-marker-color: var(--ea-brand-accent);
    --table-thead-sorted-color: var(--ea-brand-accent);
    --pagination-active-bg: var(--ea-brand-accent);
    --pagination-active-color: var(--ea-brand-on-accent);
    --badge-boolean-true-bg: var(--ea-brand-accent);
    --dropdown-settings-active-item-color: var(--ea-brand-accent);
}

/*
 * Dark scheme. EasyAdmin re-declares its tokens under .ea-dark-scheme, so we
 * must re-map them there too. In dark mode the derived shades LIGHTEN on hover
 * (mix toward white) and the soft background mixes toward black.
 */
.ea-dark-scheme {
    --ea-brand-accent-hover: color-mix(in srgb, var(--ea-brand-accent) 82%, #fff);
    --ea-brand-accent-active: color-mix(in srgb, var(--ea-brand-accent) 65%, #fff);
    --ea-brand-accent-top: color-mix(in srgb, var(--ea-brand-accent) 88%, #fff);
    --ea-brand-accent-soft: color-mix(in srgb, var(--ea-brand-accent) 28%, #000);
    --ea-brand-accent-ring: color-mix(in srgb, var(--ea-brand-accent) 40%, transparent);

    --ea-primary: var(--ea-brand-accent);
    --color-primary: var(--ea-brand-accent);
    --link-color: color-mix(in srgb, var(--ea-brand-accent) 78%, #fff);
    --link-hover-color: color-mix(in srgb, var(--ea-brand-accent) 60%, #fff);

    --button-primary-bg: var(--ea-brand-accent);
    --button-primary-hover-bg: var(--ea-brand-accent-hover);
    --button-primary-active-bg: var(--ea-brand-accent-active);
    --button-primary-border-color: color-mix(in srgb, var(--ea-brand-accent) 70%, #fff);

    --sidebar-menu-active-item-color: color-mix(in srgb, var(--ea-brand-accent) 82%, #fff);
    --sidebar-menu-active-item-bg: var(--ea-brand-accent-soft);
    --sidebar-menu-badge-active-bg: var(--ea-brand-accent);

    --button-focus-outline-color: var(--ea-brand-accent);
    --form-input-hover-border-color: var(--ea-brand-accent);
    --form-input-hover-shadow: 0 0 0 0.2rem var(--ea-brand-accent-ring);
    --form-switch-checked-bg: var(--ea-brand-accent);
    --form-type-check-input-checked-bg: var(--ea-brand-accent);
    --pagination-active-bg: var(--ea-brand-accent);
    --badge-boolean-true-bg: var(--ea-brand-accent);
}