/* =============================================================================
 * BRG Client theme overrides (FOR-137)
 * -----------------------------------------------------------------------------
 * Applied only when an authenticated user has *exclusively* the "BRG Client"
 * role (see RoleView.IsBrgClientOnly + _Layout.cshtml). RA staff who also hold
 * a BRG Client role for testing continue to see the standard green theme.
 *
 * Strategy: main.css declares its greens as CSS custom properties
 * (--ra-primary, --ra-mid, --ra-border, --ra-bg-pale, --ra-text-darkgrey).
 * Recoloring the whole app is just a matter of overriding those tokens here.
 * Image-based backgrounds (header-back.png, tab-back.png, home-back*.png) and
 * the RA wordmark logo are swapped explicitly below since CSS variables can't
 * reach into bitmap content.
 *
 * BRG brand palette:
 *   #e4701d  orange      -> replaces --ra-primary (RA green #1c8648)
 *   #22272b  dark grey   -> replaces --ra-mid     (RA green #92c688)
 *   #6e7072  mid grey    -> replaces --ra-border  (RA pale green #94cc8f)
 *   #ffffff  white       -> replaces --ra-bg-pale (RA pale green #e9f0df)
 *   #22272b  dark grey   -> replaces --ra-text-darkgrey (RA #3a4a3f)
 * =========================================================================== */

body.brg-theme {
    --ra-primary: #e4701d;
    --ra-mid: #22272b;
    --ra-border: #6e7072;
    --ra-bg-pale: #ffffff;
    --ra-text-darkgrey: #22272b;
}

/* --- Image swaps ----------------------------------------------------------
 * Variables can't recolor bitmap backgrounds, so override them with flat
 * brand colors. The PNG textures (header-back, tab-back, home-back*) are
 * subtle green gradients; flat grey/orange reads cleanly in their place.
 * ------------------------------------------------------------------------ */

body.brg-theme #wrapper header,
body.brg-theme footer,
body.brg-theme #compact-menu {
    background: #22272b;
}

/* Swap the RA wordmark for the BRG logo. #logo keeps its existing box;
   background-size: contain handles the differing aspect ratio.
   Using the full-color orange variant per client review (FOR-137 round 2). */
body.brg-theme #logo {
    background: url("/img/BRG-logo-orange.png") no-repeat left center;
    background-size: contain;
}

/* --- Sprite icon recolor --------------------------------------------------
 * /img/icons.png is a sprite sheet with the RA greens baked into the pixels,
 * so CSS variables can't touch it. We use a hue-rotate() filter on every
 * ::before pseudo-element that paints an icon — RA green sits near hue 146deg
 * and BRG orange is near hue 23deg, so rotating by ~237deg lands close
 * enough. White / transparent pixels are unaffected by hue-rotate.
 * ------------------------------------------------------------------------ */

body.brg-theme #main-menu span:before,
body.brg-theme #main-menu a:before,
body.brg-theme #footer-menu a span:before,
body.brg-theme #footer-menu a:before,
body.brg-theme #button-more span:before,
body.brg-theme #button-signin span:before,
body.brg-theme #compact-menu span:before,
body.brg-theme #compact-menu a:before {
    filter: hue-rotate(237deg) saturate(0.9);
}

/* --- Properties / search menu strip (FOR-137 round 2) --------------------
 * Client asked for the cream menu strip (which holds the icon nav + search
 * form) to be gray with white text, mirroring the two-gray-band layout of
 * BRG's existing portal. The strip is .menu / #main-menu in Header.cshtml.
 * ------------------------------------------------------------------------ */

body.brg-theme #main-menu,
body.brg-theme .menu {
    background-color: #6e7072;
    border-bottom-color: #22272b;
}

body.brg-theme #main-menu a,
body.brg-theme #main-menu a span {
    color: #ffffff;
}

/* On the new grey strip, white icons read cleaner than the hue-rotated
   orange tint above. brightness(0) invert(1) flattens any non-transparent
   sprite pixel to pure white; this rule wins on source order over the
   hue-rotate block. */
body.brg-theme #main-menu span:before,
body.brg-theme #main-menu a:before {
    filter: brightness(0) invert(1);
}

/* Search input + button on the same strip */
body.brg-theme #keyTerms {
    background-color: #ffffff;
    color: #22272b;
}
body.brg-theme #button-search {
    background-color: #22272b;
    color: #ffffff;
}

/* Global form-field background override. main.css paints every input/textarea
   /select with a cream #fbf8f3 (see main.css L250). That reads as off-white
   on the new grey strips (e.g. the FILTER box on the property list header).
   Flatten to white so form fields match the rest of the BRG palette. */
body.brg-theme input[type=text],
body.brg-theme input[type=password],
body.brg-theme textarea,
body.brg-theme select {
    background-color: #ffffff;
}

/* --- Page background fill (FOR-140 round 3 / r4) --------------------------
 * At browser zoom < 100% (and on tall viewports) the page content doesn't
 * reach the bottom of the window, leaving the default white html/body
 * background showing below the footer. Paint html dark grey globally so
 * the leftover viewport area matches the footer strip on every page
 * (login, RA-themed, BRG-themed) instead of flashing white. Body for BRG
 * is also painted so the same fill continues over body-level whitespace
 * on cobranded views.
 * ------------------------------------------------------------------------ */
html,
body.brg-theme {
    background-color: #22272b;
}