/* HHaappss brand mark + wordmark — Concept A ("Geometric/Tech").
   Loaded after the vendor Color Admin CSS (see _Layout.cshtml) so these
   rules can override the theme's generic .navbar-logo/.logo placeholder
   box styling without editing the vendored stylesheet itself. */

/* ---- Accent color: "Brand-True Indigo" ----
   Color Admin's own accent-color mechanism is a set of --bs-app-theme*
   custom properties, normally set per theme-list swatch (see
   _ThemePanel.cshtml / .theme-blue, .theme-purple, etc. in app.min.css)
   and defaulting to the vendor's stock teal (#00acac) at :root. Overriding
   them here at :root — after app.min.css in load order, so this wins —
   makes the logo's own indigo (#2E3AA8) the default accent (buttons,
   links, active sidebar item, focus rings, checked switches/checkboxes)
   without touching the vendored file, and without disturbing the other
   11 selectable swatches in the theme panel, which still set their own
   scoped values that override this default when picked. Presented to the
   user as 4 mockup options via an Artifact before building; "Brand-True
   Indigo" (reuse the logo's own colors as the single accent) was chosen
   over three other directions (warm-amber accent, deep-navy chrome,
   indigo-violet gradient) as the lowest-risk, most cohesive option. */
:root {
    --bs-app-theme: #2E3AA8;
    --bs-app-theme-rgb: 46, 58, 168;
    --bs-app-theme-color: #FFFFFF;
    --bs-app-theme-color-rgb: 255, 255, 255;
    --bs-app-theme-hover: #242E82;
    --bs-app-theme-hover-border-color: #242E82;
    --bs-app-theme-hover-color: #FFFFFF;
    --bs-app-theme-active: #242E82;
    --bs-app-theme-active-border-color: #242E82;
    --bs-app-theme-active-color: #FFFFFF;
    --bs-app-theme-disabled: #A1A6D8;
    --bs-app-theme-disabled-border-color: #A1A6D8;
    --bs-app-theme-disabled-color: #FFFFFF;
    --bs-app-theme-gradient: linear-gradient(135deg, #2E3AA8, #242E82);
}

/* --bs-app-theme* alone only reaches the small set of elements Color Admin
   explicitly wired to it (switches/checkboxes, active sidebar item, the
   Login page's .btn-theme). The app's actual CRUD screens overwhelmingly
   use plain Bootstrap .btn-primary/.btn-outline-primary (~30 views) and
   the .text-primary/.bg-primary/.border-primary utilities — a completely
   separate color system (--bs-primary, stock Bootstrap blue #348fe2) that
   --bs-app-theme has no effect on. Both need overriding for the accent
   change to actually show up on the buttons a user interacts with day to
   day, not just the login screen and sidebar. */
:root {
    --bs-primary: #2E3AA8;
    --bs-primary-rgb: 46, 58, 168;
}

/* .btn-primary/.btn-outline-primary set their own --bs-btn-* custom
   properties per instance (Bootstrap 5.3's compiled component pattern) —
   they don't read from --bs-primary at all, so overriding it above has no
   effect on them without this. Redeclaring only the properties that need
   to change (same class, later in cascade order, so these win) rather
   than repeating every property from the vendored rule. */
.btn-primary {
    --bs-btn-bg: #2E3AA8;
    --bs-btn-border-color: #2E3AA8;
    --bs-btn-hover-bg: #242E82;
    --bs-btn-hover-border-color: #242E82;
    --bs-btn-active-bg: #242E82;
    --bs-btn-active-border-color: #242E82;
    --bs-btn-focus-shadow-rgb: 90, 99, 196;
    --bs-btn-disabled-bg: #A1A6D8;
    --bs-btn-disabled-border-color: #A1A6D8;
}

.btn-outline-primary {
    --bs-btn-color: #2E3AA8;
    --bs-btn-border-color: #2E3AA8;
    --bs-btn-hover-bg: #2E3AA8;
    --bs-btn-hover-border-color: #2E3AA8;
    --bs-btn-active-bg: #2E3AA8;
    --bs-btn-active-border-color: #2E3AA8;
    --bs-btn-focus-shadow-rgb: 46, 58, 168;
    --bs-btn-disabled-color: #2E3AA8;
    --bs-btn-disabled-border-color: #2E3AA8;
}

/* A THIRD, separate color variable: the sidebar's own surface color,
   --bs-app-sidebar-bg (+ -rgb, for a couple of translucent-overlay uses).
   Neither --bs-app-theme nor --bs-primary above touch this at all — it's
   why the sidebar kept looking grey/dark even after both other overrides.
   _Sidebar.cshtml no longer hardcodes data-bs-theme="dark" (it used to —
   the approved "Brand-True Indigo" mockup showed a light lavender sidebar
   with muted indigo text, not the vendor's dark-navy default), so the
   light-mode values below are what's actually visible day to day; the
   dark-mode block is kept so the sidebar still looks intentional (dark
   indigo, not the vendor's generic slate #2d353c) if the app-wide
   light/dark toggle is ever switched to dark. */
:root {
    --bs-app-sidebar-bg: #F4F2FF;
    --bs-app-sidebar-bg-rgb: 244, 242, 255;
    --bs-app-sidebar-menu-link-color: #6B6D8F;
    --bs-app-sidebar-menu-link-hover-color: #232544;
    --bs-app-sidebar-menu-submenu-link-color: #6B6D8F;
    --bs-app-sidebar-menu-submenu-link-hover-color: #232544;
}
[data-bs-theme="dark"] {
    --bs-app-sidebar-bg: #151A4C;
    --bs-app-sidebar-bg-rgb: 21, 26, 76;
}

/* The active sidebar item's highlight is driven by yet another pair of
   variables, --bs-app-sidebar-component-active-bg/-color — NOT
   --bs-app-theme. The --bs-app-theme-based active-state rule in the vendor
   CSS only applies when the theme panel's "Gradient Enabled" switch is on
   (.app-gradient-enabled .app-sidebar ...); off by default, the plain rule
   below it wins instead, using this separate variable pair, defaulting to
   a light grey (#f0f2f4 bg / #20252a text) — the "still grey" active item
   the user spotted even after the sidebar itself turned lavender. */
:root {
    --bs-app-sidebar-component-active-bg: #2E3AA8;
    --bs-app-sidebar-component-active-color: #FFFFFF;
}

/* The active item's icon has its OWN color rule, separate from the
   --bs-app-sidebar-component-active-color text override above:
   .app-sidebar .menu .menu-item.active>.menu-link .menu-icon{color:var(--bs-app-theme)}
   in the vendored CSS. Since --bs-app-theme (#2E3AA8) is now the exact
   same color as the active background set above, the icon was rendering
   indigo-on-indigo — invisible. Overriding with the exact same selector
   (equal specificity, later in the cascade) so the icon matches the
   white text instead of vanishing into the background. */
.app-sidebar .menu .menu-item.active>.menu-link .menu-icon {
    color: #FFFFFF;
}

/* The sidebar-collapse ("minify") button at the bottom of the sidebar
   used the vendor's default very-light-grey background (#e9ecef), which
   barely registered against the new light-lavender sidebar (#F4F2FF) —
   both are close to the same lightness, so the button all but
   disappeared. A white pill with a soft indigo-tinted shadow reads as a
   distinct, clickable control against the lavender background instead. */
:root {
    --bs-app-sidebar-minify-btn-bg: #FFFFFF;
}
.app-sidebar-minify-btn {
    color: #2E3AA8;
    box-shadow: 0 1px 4px rgba(46, 58, 168, 0.25);
}

/* Swatch dot for the theme panel's "Default" entry — a literal hex match
   for the logo, since Bootstrap's own bg-teal/bg-indigo utility classes
   are tied to different, unrelated hex values. */
.bg-hhaappss {
    background-color: #2E3AA8 !important;
}

@font-face {
    font-family: "HH Brand";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/brand/IBMPlexSans-Bold.woff2") format("woff2");
}
@font-face {
    font-family: "HH Brand";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/brand/IBMPlexSans-Medium.woff2") format("woff2");
}

/* ---- Monogram ---- */

.brand-mark {
    display: inline-block;
    flex-shrink: 0;
    vertical-align: middle;
}

.navbar-brand .brand-mark {
    width: 30px;
    height: 30px;
    margin-inline-end: 10px;
}

.login-header .brand .brand-mark {
    width: 40px;
    height: 40px;
    margin-inline-end: 0.703125rem;
}

/* ---- Wordmark ---- */

.brand-wordmark {
    font-family: "HH Brand", "Open Sans", sans-serif;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.brand-wordmark .hh {
    font-weight: 700;
    color: #2e3aa8;
}

.brand-wordmark .aappss {
    font-weight: 500;
    color: #6b6d8f;
}

/* On the dark sidebar/header surface, the muted grey half needs more
   contrast than it gets on a light background. */
[data-bs-theme="dark"] .brand-wordmark .aappss {
    color: #a9acd6;
}