/* fsq-brand.css - mERP SOP brand palette: DEEP PLUM (delta D-BRAND-1, brain/_reports/SOPUI/family-deltas.md).
   Family file (adopted from the shared FSQ/mERP UI library): the structure, selectors and token NAMES are unchanged so the rest of
   the library needs no edit; only the colour values changed from FSQ teal to Deep Plum. Original FSQ header: "FSQ brand palette
   (Color Direction E) + logo lockups. COMPLIANCE #181, OD-14".
   The ONE source of brand/accent colour. Loaded last in /_ui/shell/_incHead.cfm so these tokens win over older definitions.
   Selected palette (owner, 2026-10-10; plan sop-ui-build-v1.md s5):
     primary #6B3F8C   hover/pressed #532F6F   pale #F3EDF7   dark-mode accent #D8B4FE
   Derived steps (same hue, accessibility only): #3E2455 darkest ink / pressed (13.22:1 on white), #EBD9FF dark-mode pressed fill,
   #8A5CAB light-mode non-text accent (5.00:1 on white).
   - Brand/accent only. Semantic colours (success, warning, danger, info) are NOT defined here and stay the V5 / Bootstrap pairs.
   - Role split: --fsq-brand = INK (text, icons, borders, rings); --fsq-brand-fill = SOLID SURFACE
     (buttons, logo pill, step markers, sidebar active) with --fsq-on-brand as its label colour.
   - Measured pairs: white on #6B3F8C 7.74:1; white on #532F6F 10.48:1; #6B3F8C on #F3EDF7 6.73:1; #532F6F on #F3EDF7 9.12:1;
     #D8B4FE on #15171C 10.14:1 and on card #1E2128 9.11:1; #3E2455 on #D8B4FE 7.48:1 (dark hover label).
     In dark mode the plum fill is only 2.08:1 on a card, so buttons and markers carry a 1px #D8B4FE edge (9.11:1).
   - --sop-* aliases below name the four owner colours for SOP-only code; library code keeps using --fsq-* names. */

:root {
    /* Direction E (raw owner palette) */
    --fsq-e-primary: #6B3F8C;
    --fsq-e-hover:   #8A5CAB;
    --fsq-e-light:   #D8B4FE;
    --fsq-e-pale:    #F3EDF7;
    --fsq-e-dark:    #3E2455;
    --fsq-e-deep:    #532F6F;   /* derived darker step: light-mode hover fill, selected text */

    /* SOP aliases (delta D-BRAND-1): the owner palette by name, for SOP-only code */
    --sop-plum:        #6B3F8C;
    --sop-plum-deep:   #532F6F;
    --sop-plum-pale:   #F3EDF7;
    --sop-plum-accent: #D8B4FE;   /* dark-mode accent */

    /* fills */
    --fsq-brand-fill:        #6B3F8C;   /* white label 7.74:1 */
    --fsq-brand-fill-hover:  #532F6F;   /* 10.48:1 */
    --fsq-brand-fill-active: #3E2455;   /* 13.22:1 */
    --fsq-brand-fill-rgb:    107,63,140;
    --fsq-on-brand:          #FFFFFF;
    --fsq-on-brand-hover:    #FFFFFF;

    /* ink */
    --fsq-brand:       #6B3F8C;          /* on white 7.74:1 */
    --fsq-brand-rgb:   107,63,140;
    --fsq-brand-hover: #8A5CAB;          /* non-text accents only in light mode (borders, glow); 5.00:1 on white */

    /* focus */
    --fsq-focus:      #6B3F8C;
    --fsq-focus-halo: rgba(107,63,140,.25);

    /* links */
    --fsq-link:       #6B3F8C;
    --fsq-link-hover: #3E2455;

    /* selected / subtle */
    --fsq-selected-bg:     #F3EDF7;
    --fsq-selected-fg:     #532F6F;      /* 9.12:1 on #F3EDF7 */
    --fsq-selected-border: #6B3F8C;
    --fsq-subtle-bg:       rgba(107,63,140,.08);
    --fsq-subtle-border:   rgba(107,63,140,.25);
    --fsq-brand-bg:        #F3EDF7;      /* brand chip pair (e.g. "Managed in mERP") */
    --fsq-brand-fg:        #532F6F;

    /* logo */
    --fsq-logo-bg:  #6B3F8C;
    --fsq-logo-fg:  #FFFFFF;
    --fsq-logo-sub: #532F6F;             /* "Procedures & Workflows" line, 10.48:1 on white */

    /* shell aliases (UD-02 names kept; the shell reads these) */
    --merp-clr-brand: var(--fsq-brand);
    --merp-clr-inv:   var(--fsq-brand-fill);

    /* Bootstrap bridge (the variables Bootstrap really reads) */
    --bs-primary:               #6B3F8C;
    --bs-primary-rgb:           107,63,140;
    --bs-link-color:            #6B3F8C;
    --bs-link-color-rgb:        107,63,140;
    --bs-link-hover-color:      #3E2455;
    --bs-link-hover-color-rgb:  62,36,85;
    --bs-primary-bg-subtle:     #F3EDF7;
    --bs-primary-border-subtle: #D8B4FE;
    --bs-primary-text-emphasis: #3E2455;
    --bs-focus-ring-color:      rgba(107,63,140,.25);
}

[data-merp-theme="dark"] {
    --fsq-brand-fill:        #6B3F8C;    /* + 1px #D8B4FE edge on buttons/markers (9.11:1 on cards) */
    --fsq-brand-fill-hover:  #D8B4FE;
    --fsq-brand-fill-active: #EBD9FF;
    --fsq-on-brand:          #FFFFFF;
    --fsq-on-brand-hover:    #3E2455;    /* on #D8B4FE 7.48:1 */

    --fsq-brand:       #D8B4FE;          /* 10.14:1 on #15171c, 9.11:1 on #1e2128 */
    --fsq-brand-rgb:   216,180,254;
    --fsq-brand-hover: #F3EDF7;

    --fsq-focus:      #D8B4FE;
    --fsq-focus-halo: rgba(216,180,254,.35);

    --fsq-link:       #D8B4FE;
    --fsq-link-hover: #F3EDF7;

    --fsq-selected-bg:     rgba(216,180,254,.14);
    --fsq-selected-fg:     #D8B4FE;
    --fsq-selected-border: #D8B4FE;
    --fsq-subtle-bg:       rgba(216,180,254,.06);
    --fsq-subtle-border:   rgba(216,180,254,.20);
    --fsq-brand-bg:        rgba(216,180,254,.14);
    --fsq-brand-fg:        #D8B4FE;

    --fsq-logo-bg:  #6B3F8C;
    --fsq-logo-fg:  #FFFFFF;
    --fsq-logo-sub: #D8B4FE;

    --bs-link-color:           #D8B4FE;
    --bs-link-color-rgb:       216,180,254;
    --bs-link-hover-color:     #F3EDF7;
    --bs-link-hover-color-rgb: 243,237,247;
    /* --bs-primary stays #6B3F8C: it drives fills whose label is white */
}

/* Light islands: the top bar, user menu and section menu stay WHITE in dark mode, so they keep the
   light-mode ink values (same pattern as fsq-navbar.css). */
[data-merp-theme="dark"] #merpTopNav,
[data-merp-theme="dark"] #userMenuDropdown,
[data-merp-theme="dark"] .section-dropdown-menu {
    --fsq-brand: #6B3F8C; --fsq-brand-rgb: 107,63,140; --fsq-brand-hover: #8A5CAB;
    --fsq-focus: #6B3F8C; --fsq-focus-halo: rgba(107,63,140,.25);
    --fsq-link: #6B3F8C; --fsq-link-hover: #3E2455;
    --fsq-selected-bg: #F3EDF7; --fsq-selected-fg: #532F6F; --fsq-selected-border: #6B3F8C;
    --fsq-subtle-bg: rgba(107,63,140,.08); --fsq-subtle-border: rgba(107,63,140,.25);
    --fsq-brand-fill-hover: #532F6F; --fsq-on-brand-hover: #FFFFFF;
    --merp-clr-brand: #6B3F8C;
    --bs-link-color: #6B3F8C; --bs-link-color-rgb: 107,63,140;
    --bs-link-hover-color: #3E2455; --bs-link-hover-color-rgb: 62,36,85;
}

/* ---- Bootstrap components that hard-code their own blue (not reached by --bs-primary) ---- */
.btn-primary {
    --bs-btn-color: #fff; --bs-btn-bg: #6B3F8C; --bs-btn-border-color: #6B3F8C;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #532F6F; --bs-btn-hover-border-color: #532F6F;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #3E2455; --bs-btn-active-border-color: #3E2455;
    --bs-btn-focus-shadow-rgb: 107,63,140;
    --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #6B3F8C; --bs-btn-disabled-border-color: #6B3F8C;
}
[data-merp-theme="dark"] .btn-primary {
    --bs-btn-border-color: #D8B4FE;
    --bs-btn-hover-bg: #D8B4FE; --bs-btn-hover-border-color: #D8B4FE; --bs-btn-hover-color: #3E2455;
    --bs-btn-active-bg: #EBD9FF; --bs-btn-active-border-color: #EBD9FF; --bs-btn-active-color: #3E2455;
    --bs-btn-focus-shadow-rgb: 216,180,254;
}
.btn-outline-primary {
    --bs-btn-color: #6B3F8C; --bs-btn-border-color: #6B3F8C;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #6B3F8C; --bs-btn-hover-border-color: #6B3F8C;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #3E2455; --bs-btn-active-border-color: #3E2455;
    --bs-btn-focus-shadow-rgb: 107,63,140;
    --bs-btn-disabled-color: #6B3F8C; --bs-btn-disabled-border-color: #6B3F8C;
}
[data-merp-theme="dark"] .btn-outline-primary {
    --bs-btn-color: #D8B4FE; --bs-btn-border-color: #D8B4FE;
    --bs-btn-hover-color: #3E2455; --bs-btn-hover-bg: #D8B4FE; --bs-btn-hover-border-color: #D8B4FE;
    --bs-btn-active-color: #3E2455; --bs-btn-active-bg: #F3EDF7; --bs-btn-active-border-color: #F3EDF7;
    --bs-btn-focus-shadow-rgb: 216,180,254;
    --bs-btn-disabled-color: #D8B4FE; --bs-btn-disabled-border-color: #D8B4FE;
}
.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: #6B3F8C;
    box-shadow: 0 0 0 .25rem rgba(107,63,140,.25);
}
[data-merp-theme="dark"] .form-control:focus,
[data-merp-theme="dark"] .form-select:focus,
[data-merp-theme="dark"] .form-check-input:focus {
    border-color: #D8B4FE;
    box-shadow: 0 0 0 .25rem rgba(216,180,254,.35);
}
.form-check-input:checked,
.form-check-input[type=checkbox]:indeterminate {
    background-color: #6B3F8C;
    border-color: #6B3F8C;
}
.form-switch .form-check-input:focus:not(:checked) {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%236B3F8C'/%3e%3c/svg%3e");
}
.dropdown-menu { --bs-dropdown-link-active-bg: #6B3F8C; --bs-dropdown-link-active-color: #fff; }
.btn-close:focus, .nav-link:focus-visible { box-shadow: 0 0 0 .25rem rgba(107,63,140,.25); }
[data-merp-theme="dark"] .btn-close:focus,
[data-merp-theme="dark"] .nav-link:focus-visible { box-shadow: 0 0 0 .25rem rgba(216,180,254,.35); }
.page-link { --bs-pagination-color: var(--fsq-link); --bs-pagination-hover-color: var(--fsq-link-hover);
    --bs-pagination-active-bg: #6B3F8C; --bs-pagination-active-border-color: #6B3F8C;
    --bs-pagination-focus-box-shadow: 0 0 0 .25rem var(--fsq-focus-halo); }
.nav-pills { --bs-nav-pills-link-active-bg: #6B3F8C; }
.progress { --bs-progress-bar-bg: #6B3F8C; }

/* ---- #181 review fixes ---- */
/* F2: warning/light/secondary alerts keep their LIGHT backgrounds in dark mode (the info alert is plum-tinted since SOPUI #230 V-13, see the end of this file) (danger/success are given
   dark fills by fsq-global.css, so they keep the global light link colour), so links inside them need dark ink
   (dark plum ink on the light info/warning fills measures above 10:1); the global dark link colour would be ~1.3:1 there. */
[data-merp-theme="dark"] .alert-warning a:not(.btn):not(.nav-link):not(.navbar-brand):not(.merp-sidebar-link):not(.merp-admin-name),
[data-merp-theme="dark"] .alert-light a:not(.btn):not(.nav-link):not(.navbar-brand):not(.merp-sidebar-link):not(.merp-admin-name),
[data-merp-theme="dark"] .alert-secondary a:not(.btn):not(.nav-link):not(.navbar-brand):not(.merp-sidebar-link):not(.merp-admin-name) { color: #3E2455; }
[data-merp-theme="dark"] .alert-warning a:not(.btn):not(.nav-link):not(.navbar-brand):not(.merp-sidebar-link):not(.merp-admin-name):hover,
[data-merp-theme="dark"] .alert-light a:not(.btn):not(.nav-link):not(.navbar-brand):not(.merp-sidebar-link):not(.merp-admin-name):hover,
[data-merp-theme="dark"] .alert-secondary a:not(.btn):not(.nav-link):not(.navbar-brand):not(.merp-sidebar-link):not(.merp-admin-name):hover { color: #6B3F8C; }
/* Light mode: danger/success alert fills are tinted enough that plum links are re-checked there, so the darkest plum ink is used. */
:root:not([data-merp-theme="dark"]) .alert-danger a:not(.btn), :root:not([data-merp-theme="dark"]) .alert-success a:not(.btn) { color: #3E2455; }
/* L-1: dark checked controls get the light-plum edge so the control meets 3:1 on dark cards */
[data-merp-theme="dark"] .form-check-input:checked,
[data-merp-theme="dark"] .form-check-input[type=checkbox]:indeterminate { border-color: #D8B4FE; }
/* L-3: Bootstrap components not used yet that would still render their own blue */
.list-group { --bs-list-group-active-bg: #6B3F8C; --bs-list-group-active-border-color: #6B3F8C; --bs-list-group-active-color: #fff; }
.accordion { --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem rgba(107,63,140,.25); --bs-accordion-active-color: #3E2455; --bs-accordion-active-bg: #F3EDF7; }
.form-range::-webkit-slider-thumb { background-color: #6B3F8C; }
.form-range::-moz-range-thumb { background-color: #6B3F8C; }
.form-range:focus::-webkit-slider-thumb { box-shadow: 0 0 0 1px #fff, 0 0 0 .25rem rgba(107,63,140,.25); }

/* ---- Logo lockups (markup: /_ui/components/brand/_incBrandLockup.cfm) ----
   Option 1 (app): the mERP SOP navbar pill (Bootstrap .badge.rounded-pill + .logo-badge in fsq-navbar.css),
   recoloured through --bs-primary-rgb. Geometry unchanged: 1.08rem/600, 8px 16px padding, 50rem radius.
   Option 6 (prominent): the mERP login pill technique (.badge.rounded-pill + one class setting size,
   weight and the left-heavy padding) with a centered "Procedures & Workflows" descriptor underneath. */
.fsq-logo-pill {
    background-color: var(--fsq-logo-bg) !important;
    color: var(--fsq-logo-fg) !important;
}
.fsq-lockup {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 0 auto 1.25rem;
}
/* Auth pages: the panel is a left-aligned 480px card, so centre the lockup over the panel, not the page. */
.fsq-adm > .fsq-lockup { max-width: 480px; margin: .25rem 0 1.25rem; }
.fsq-lockup .fsq-lockup-pill {
    display: inline-block;
    font-size: 3.25rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    padding: .6rem 1.6rem .6rem 2.1rem;     /* login technique: left a little wider */
    border-radius: 50rem;
}
.fsq-lockup .fsq-lockup-tagline {
    margin-top: .6rem;
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: .04rem;
    line-height: 1.25;
    color: var(--fsq-logo-sub);
}
@media (max-width: 576px) {
    .fsq-lockup .fsq-lockup-pill { font-size: 2.5rem; padding: .5rem 1.25rem .5rem 1.65rem; }
    .fsq-lockup .fsq-lockup-tagline { font-size: .95rem; letter-spacing: .02rem; }
}
@media (prefers-reduced-motion: no-preference) {
    .fsq-lockup .fsq-lockup-pill { animation: fsqLockupIn .7s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
    .fsq-lockup .fsq-lockup-tagline { animation: fsqLockupTagIn .6s ease-out .35s both; }
}
@keyframes fsqLockupIn { 0% { opacity: 0; transform: scale(1.25); } 60% { opacity: 1; transform: scale(.97); } 100% { opacity: 1; transform: scale(1); } }
@keyframes fsqLockupTagIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ---- SOPUI #230 repair (D-BRAND-1, verify-230 V-02 / V-03 / V-13): focus indicators, field boundaries, info alert ---- */
/* V-02: a real 2px outline (offset 2px) in the brand focus colour on every control, in addition to the soft halo above.
   --fsq-focus is plum #6B3F8C in light (7.74:1 on white) and #D8B4FE in dark (9.11:1 on the card, 10.14:1 on the page);
   the white top-bar islands keep the light value through the island block above. */
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible {
    outline: 2px solid var(--fsq-focus);
    outline-offset: 2px;
}
/* V-03: field boundaries reach 3:1. Neutral slate (not brand), the same pair fsq-auth.css already uses for its fields:
   #7C8698 = 3.67:1 on white, #7A8396 = 4.23:1 on the dark card. Disabled fields keep the same boundary.
   fsq-global.css sets the dark field border with !important, so the dark rules need it as well (this file loads last). */
.form-control, .form-select { border-color: #7C8698; }
.form-check-input:not(:checked) { border-color: #7C8698; }
[data-merp-theme="dark"] .form-control,
[data-merp-theme="dark"] .form-select { border-color: #7A8396 !important; }
[data-merp-theme="dark"] .form-check-input:not(:checked) { border-color: #7A8396; }
/* V-13: info alert in the brand instead of Bootstrap cyan. Light: pale plum fill, plum border and icon, darkest-plum ink
   (11.50:1 on #F3EDF7). Dark: plum-tinted fill, light ink (#F3EDF7), light-plum border and icon. Links keep the library link colours. */
.alert-info {
    --bs-alert-color: #3E2455;
    --bs-alert-bg: #F3EDF7;
    --bs-alert-border-color: #8A5CAB;
    --bs-alert-link-color: #3E2455;
}
.alert-info > i, .alert-info > .bi { color: var(--fsq-brand); }
[data-merp-theme="dark"] .alert-info {
    --bs-alert-color: #F3EDF7;
    --bs-alert-bg: rgba(216,180,254,.12);
    --bs-alert-border-color: rgba(216,180,254,.55);
    --bs-alert-link-color: #D8B4FE;
}