/*
 * Avanti-specific brand overrides on top of the vendored Vireo bundle
 * (app.css). Not part of the template — kept as its own small file so a
 * future `npm run build` regeneration of app.css/datatables-ax.css never
 * has to account for it.
 *
 * 1. A custom "avanti" accent preset, activated via data-ax-accent="avanti"
 *    (set alongside data-ax-theme in the anti-flash <script>). Vireo ships
 *    ~12 built-in accent presets (verdigris, cobalt, ...) gated the same
 *    way; this just adds one more using the client's actual brand blue
 *    instead of picking the closest stock preset. Only --ax-accent-* moves
 *    — --ax-success-*, used by toasts/success alerts, is a fully separate
 *    token family untouched by this, so success states stay green as
 *    intended.
 * 2. Light/dark logo swap: two <img> tags per logo spot (inc/vireo/nav.php's
 *    sidebar brand, inc/vireo/auth-header.php's auth-page brand), toggled
 *    by data-ax-theme rather than swapped via JS.
 */

[data-ax-accent="avanti"] {
	--ax-accent-50: #eef5fb;
	--ax-accent-100: #dbeaf6;
	--ax-accent-200: #b3d3ea;
	--ax-accent-300: #8abcdd;
	--ax-accent-400: #5c9ccc;
	--ax-accent-500: #3b7dab;
	--ax-accent-600: #2f6389;
	--ax-accent-700: #254c6b;
	--ax-accent-800: #1c3a51;
	--ax-accent-900: #152c3d;
	--ax-accent: var(--ax-accent-500);
	--ax-accent-hover: var(--ax-accent-600);
	--ax-accent-wash: var(--ax-accent-50);
	--ax-on-accent: #fff;
	--ax-focus-ring: var(--ax-accent-500);
	--ax-link: var(--ax-accent-700);
	--ax-accent-rgb: 59, 125, 171;
}

[data-ax-theme="dark"][data-ax-accent="avanti"] {
	--ax-accent: #5c9ccc;
	--ax-accent-hover: #8abcdd;
	--ax-accent-wash: #1c3a51;
	--ax-link: #8abcdd;
	--ax-focus-ring: #8abcdd;
	--ax-on-accent: #0b1f1a;
	--ax-accent-rgb: 92, 156, 204;
}

.ax-brand-logo-dark { display: none; }
[data-ax-theme="dark"] .ax-brand-logo-light { display: none; }
[data-ax-theme="dark"] .ax-brand-logo-dark { display: inline-block; }

/* Sidebar brand logo sizing. Both dimensions are auto and capped via
   max-block-size/max-inline-size (not a fixed height) so the browser's
   replaced-element sizing scales the whole image down proportionally to
   whichever constraint binds first — a fixed height alone would leave width
   to flexbox, which shrinks it to fit the collapsed icon rail while height
   stays pinned, squashing/distorting the pixel content instead of shrinking
   the image as a whole. */
.ax-sidebar__brand .ax-brand-logo-light,
.ax-sidebar__brand .ax-brand-logo-dark {
	inline-size: auto;
	block-size: auto;
	max-inline-size: 100%;
	max-block-size: 34px;
	object-fit: contain;
}
[data-ax-collapsed] .ax-sidebar__brand .ax-brand-logo-light,
[data-ax-collapsed] .ax-sidebar__brand .ax-brand-logo-dark {
	max-block-size: 24px;
}