/*
 * brand.css — applies the per-customer CSS variables from
 * wwwroot/customers/{themeKey}/theme.css to Bootstrap components.
 * Loaded after theme.css in _Layout.cshtml so the cascade resolves correctly.
 *
 * theme.css supplies:
 *   --brand-primary, --brand-primary-hover
 *   --brand-accent,  --brand-accent-hover
 *   --brand-radius, --brand-font
 */

/* Primary buttons */
.btn-primary {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    background-color: var(--brand-primary-hover);
    border-color: var(--brand-primary-hover);
}

.btn-primary:focus,
.btn-primary.focus {
    box-shadow: 0 0 0 0.2rem rgba(var(--brand-primary-rgb, 74, 139, 240), 0.25);
}

.btn-outline-primary {
    color: var(--brand-primary);
    border-color: var(--brand-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #fff;
}

/* Secondary accent — useful for success/confirm style buttons that are not the primary action */
.btn-success,
.btn-accent {
    background-color: var(--brand-accent);
    border-color: var(--brand-accent);
}

.btn-success:hover,
.btn-success:focus,
.btn-accent:hover,
.btn-accent:focus {
    background-color: var(--brand-accent-hover);
    border-color: var(--brand-accent-hover);
}

/* Links */
a {
    color: var(--brand-primary);
}

a:hover {
    color: var(--brand-primary-hover);
}

/* Form control focus ring */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 0.25rem rgba(var(--brand-primary-rgb, 74, 139, 240), 0.25);
}

.form-check-input:checked {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

/* Sidebar active item */
.sidebar .nav-link.active {
    color: var(--brand-primary);
}

.sidebar .nav-link:hover {
    color: var(--brand-primary-hover);
}

/* Brand text in navbar */
.navbar-brand,
.navbar-brand:hover {
    color: #fff;
}

/* Page header / section titles — pick up brand color subtly */
h1.brand-title,
h2.brand-title {
    color: var(--brand-primary);
}

/* Validation summary / required field highlight uses accent color */
.text-brand-accent {
    color: var(--brand-accent);
}

/* Rounded radius for cards / buttons / inputs */
.btn,
.form-control,
.form-select,
.card {
    border-radius: var(--brand-radius);
}
