/*
 * Engelhardt base rules: Bootstrap bridge, page elements, focus and the brand details every area shares
 * (the orange title rule, the lead paragraph, the icon tile). Registered on the theme after tokens.css;
 * the stylesheet per area follows it: layout, identity, documents, contact, admin and account
 * (web/Theming/EngelhardtThemes.cs, docs/architecture/styling.md). Package rules go in their own area file.
 * Rules: only var(--dxds-*) / var(--eng-*), no colour literals, no important flags,
 * no DevExpress internal classes or variables (see docs/design/theming/css-rules.md). DevExpress components are
 * styled through CssClass + public --dxds-* variables on our own classes.
 */

/* ------------------------------------------------------------------ */
/* Bootstrap bridge. Bootstrap 5.3 is loaded ONLY by the Identity Razor Pages
   (Areas/Identity/Pages/Shared/_Layout.cshtml), which have no DevExpress components.
   The Blazor part does not load Bootstrap (its classes clash with DxButton/DxMenu/DxToolbar,
   dxdocs 403286). These variables make Bootstrap look like the Fluent theme; without
   Bootstrap on the page they are unused. */
/* ------------------------------------------------------------------ */
:root,
[data-bs-theme="light"] {
    --bs-body-font-family: var(--dxds-font-family-sans-serif);
    --bs-body-font-size: var(--eng-font-size-body);
    --bs-body-line-height: var(--eng-line-height-body);
    --bs-body-color: var(--eng-color-text);
    --bs-body-color-rgb: var(--eng-color-dark-rgb);
    --bs-body-bg: var(--eng-color-surface);  /* also the form-control background */
    --bs-emphasis-color: var(--eng-color-text);
    --bs-heading-color: var(--eng-color-text);
    --bs-secondary-color: var(--dxds-color-content-neutral-subdued-rest);
    --bs-tertiary-bg: var(--dxds-color-surface-neutral-subdued-rest);
    --bs-primary: var(--eng-color-brand);
    --bs-primary-rgb: var(--eng-color-brand-rgb);
    --bs-danger-rgb: var(--eng-color-danger-rgb);
    --bs-success-rgb: var(--eng-color-success-rgb);
    --bs-link-color: var(--dxds-color-content-primary-default-rest);
    --bs-link-color-rgb: var(--eng-color-brand-rgb);
    --bs-link-hover-color: var(--dxds-color-content-primary-default-hovered);
    --bs-link-hover-color-rgb: var(--eng-color-brand-hover-rgb);
    --bs-border-color: var(--dxds-color-border-neutral-default-rest);
    --bs-border-radius: var(--dxds-border-radius-40);
    --bs-border-radius-lg: var(--dxds-border-radius-60);
    --bs-form-invalid-color: var(--dxds-color-content-danger-default-rest);
    --bs-form-invalid-border-color: var(--dxds-color-border-danger-default-rest);
    --bs-focus-ring-color: var(--eng-focus-ring-color);
}

/* Bootstrap's reboot sets the h1-h6 margin-bottom to .5rem with element selectors (specificity 0,0,1) and no
   variable to override. The body prefix gives 0,0,2, so the Fluent spacing wins whatever the stylesheet order.
   Component rules with a class (0,1,0 and up) still win. Same value as the :where() rule below without Bootstrap. */
body :is(h1, h2, h3, h4, h5, h6) {
    margin-bottom: var(--dxds-spacing-120);
}

.btn {
    --bs-btn-font-weight: var(--dxds-font-weight-700);
    --bs-btn-border-radius: var(--dxds-border-radius-40);
    --bs-btn-border-radius-lg: var(--dxds-border-radius-60);
    --bs-btn-focus-box-shadow: none;
}

.btn-primary {
    --bs-btn-bg: var(--dxds-color-surface-primary-default-rest);
    --bs-btn-border-color: var(--dxds-color-surface-primary-default-rest);
    --bs-btn-hover-bg: var(--dxds-color-surface-primary-default-hovered);
    --bs-btn-hover-border-color: var(--dxds-color-surface-primary-default-hovered);
    --bs-btn-active-bg: var(--dxds-color-surface-primary-default-active);
    --bs-btn-active-border-color: var(--dxds-color-surface-primary-default-active);
    --bs-btn-disabled-bg: var(--dxds-color-surface-primary-default-rest);
    --bs-btn-disabled-border-color: var(--dxds-color-surface-primary-default-rest);
    --bs-btn-color: var(--dxds-color-content-neutral-default-static-dark-rest);
    --bs-btn-hover-color: var(--dxds-color-content-neutral-default-static-dark-rest);
    --bs-btn-active-color: var(--dxds-color-content-neutral-default-static-dark-rest);
    --bs-btn-disabled-color: var(--dxds-color-content-neutral-default-static-dark-rest);
}

.btn-outline-primary {
    --bs-btn-color: var(--dxds-color-content-primary-default-rest);
    --bs-btn-border-color: var(--dxds-color-surface-primary-default-rest);
    --bs-btn-hover-bg: var(--dxds-color-surface-primary-default-rest);
    --bs-btn-hover-border-color: var(--dxds-color-surface-primary-default-rest);
    --bs-btn-hover-color: var(--dxds-color-content-neutral-default-static-dark-rest);
    --bs-btn-active-bg: var(--dxds-color-surface-primary-default-active);
    --bs-btn-active-border-color: var(--dxds-color-surface-primary-default-active);
    --bs-btn-active-color: var(--dxds-color-content-neutral-default-static-dark-rest);
}

/* ------------------------------------------------------------------ */
/* Page elements (Fluent's ApplyToPageElements styles body, headings, links and inputs;
   these rules only adjust them. :where() keeps specificity at 0 so component styles win.) */
/* ------------------------------------------------------------------ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
}

body {
    margin: 0;
    background-color: var(--eng-page-bg);
    color: var(--eng-color-text);
    font-size: var(--eng-font-size-body);
    line-height: var(--eng-line-height-body);
}

:where(h1, h2, h3, h4, h5, h6) {
    margin: 0 0 var(--dxds-spacing-120);
    color: var(--eng-color-text);
}

:where(p) {
    margin: 0 0 var(--dxds-spacing-160);
}

/* Links stay underlined: link colour alone does not reach 3:1 against the text (WCAG 1.4.1). */
:where(a) {
    color: var(--dxds-color-content-primary-default-rest);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

:where(a):hover {
    color: var(--dxds-color-content-primary-default-hovered);
}

/* ------------------------------------------------------------------ */
/* Focus: 2 px #0B1F26 with 2 px offset on our own HTML and the Bootstrap elements on the Identity pages. */
/* DevExpress components draw their own focus ring: its colour comes from --dxds-color-border-focus-default */
/* (tokens.css); width and offset stay at the DevExpress defaults (decision 25), since changing them needs */
/* DevExpress internal variables. These rules have no effect on DevExpress elements (:where() = specificity 0). */
/* ------------------------------------------------------------------ */
:where(a, button, summary, [tabindex]:not([tabindex="-1"]), .btn, .form-check-input):focus-visible {
    outline: var(--eng-focus-ring-width) solid var(--eng-focus-ring-color);
    outline-offset: var(--eng-focus-ring-offset);
    box-shadow: none;
}

/* Fluent marks a focused DevExpress editor only with a darker underline. Every editor has the class eng-editor (CssClass), and
   the same 2 px ring goes around the whole editor (WCAG 2.4.7, decision 25, #81): our class, no DevExpress internals. */
.eng-editor:focus-within {
    outline: var(--eng-focus-ring-width) solid var(--eng-focus-ring-color);
    outline-offset: var(--eng-focus-ring-offset);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--eng-focus-ring-color);
    box-shadow: none;
    outline: var(--eng-focus-ring-width) solid var(--eng-focus-ring-color);
    outline-offset: var(--eng-focus-ring-offset);
}

/* Bootstrap components with their own (low-contrast) focus shadow (Identity pages). */
.btn:focus-visible,
.nav-link:focus-visible,
.btn-close:focus-visible,
.navbar-toggler:focus-visible {
    outline: var(--eng-focus-ring-width) solid var(--eng-focus-ring-color);
    outline-offset: var(--eng-focus-ring-offset);
    box-shadow: none;
}

.navbar-toggler:focus:not(:focus-visible) {
    box-shadow: none;
}

.form-check-input:checked {
    background-color: var(--dxds-color-surface-primary-default-rest);
    border-color: var(--dxds-color-surface-primary-default-rest);
}

/* Form controls: visible 1 px border with at least 3:1 against white (WCAG 1.4.11). */
.form-control,
.form-select,
.form-check-input {
    border-color: var(--eng-color-border-input);
}

.form-floating > label {
    color: var(--dxds-color-content-neutral-subdued-rest);
}

/* ------------------------------------------------------------------ */
/* Headings with the CVI's short orange rule (decoration only) */
/* ------------------------------------------------------------------ */
.eng-page-title {
    margin-bottom: var(--dxds-spacing-240);
}

.eng-page-title h1 {
    margin-bottom: var(--dxds-spacing-80);
}

.eng-page-title h1::after,
.eng-auth-card h1::after {
    content: "";
    display: block;
    width: var(--eng-rule-width);
    height: var(--eng-rule-height);
    margin-top: var(--dxds-spacing-80);
    background: var(--eng-color-accent-orange);
}

.eng-lead {
    max-width: var(--eng-measure);
    margin: 0;
    color: var(--dxds-color-content-neutral-subdued-rest);
}

/* ------------------------------------------------------------------ */
/* Icon tile (red thread 3): a Bootstrap icon in the brand colour on the page grey, in the crown's rounded */
/* square. Decoration: put aria-hidden="true" on it and say the meaning in text next to it. */
/* ------------------------------------------------------------------ */
.eng-icon-tile {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: var(--eng-icon-tile-size);
    height: var(--eng-icon-tile-size);
    border-radius: var(--dxds-border-radius-80);
    background: var(--eng-page-bg);
    color: var(--dxds-color-content-primary-default-rest);
    font-size: var(--eng-icon-tile-font-size);
    line-height: 1;
}