/*
 * Brand override layer for The Hive Dashboard Theme.
 * Redefines CSS custom properties consumed by assets/theme/css/style.css
 * so the theme re-skins to the real product brand without touching vendor CSS.
 *
 * Primary:   #981c4b (wine)
 * Secondary: #2a3d56 (navy slate)
 *
 * This file MUST be loaded AFTER the inline <style> block in layout/head.php
 * so its :root declaration wins the cascade.
 */

:root {
    --primary-color: #981c4b;
    --primary-hover: #7a1640;        /* ~85% luminance of primary, for hover/active */
    --secondary-color: #2a3d56;
    --secondary-hover: #1f2d40;
    /* Keep --accent-color (#10b981) untouched — used in existing gradients */
}

[data-theme="dark"] {
    /* K1B-03 fix: remap --primary-color to a brighter wine on dark bg.
       The light-mode wine #981c4b measures ~3.1:1 contrast on a dark-slate
       background, which fails WCAG AA for text (needs 4.5:1). #c8315f
       measures ~5.2:1 on the same background — clears AA with headroom.
       This is a token-level remap (Option A) that flows through all 65+
       --primary-color consumers in style.css (sidebar active text,
       buttons, headings, links, borders, icons, gradients) in one line,
       rather than per-selector patching (Option B) which would need
       30+ individual overrides.
       --primary-hover follows the same brightening pattern — it was
       already bumped for dark in the jr4 plan; we just push it further
       so it stays brighter than the new rest-state token. */
    --primary-color: #c8315f;        /* was #981c4b, now AA-compliant on dark */
    --primary-hover: #e04a7b;        /* was #b02556, bumped to stay above new rest */
    --secondary-color: #2a3d56;
    --secondary-hover: #3a5170;
}

/* ---------------------------------------------------------------------
   Logo helper classes consumed by header.php / sidebar.php / login.php
   --------------------------------------------------------------------- */

/* ---------------------------------------------------------------------
   Header brand logo (k1b fix)
   --------------------------------------------------------------------- */
/* vendor style.css:82 sets .header-title to flex-direction: column, which
   stretched the injected <img> across the cross-axis and made it overflow
   the 70px navbar. Switch to CSS Grid: logo in col 1 (spans both rows),
   h1 in col 2 row 1, subtitle in col 2 row 2. This keeps the stacked-text
   look from the original design without adding any HTML wrapper. */

.app-header .header-title {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 0.75rem;
    row-gap: 0;
    margin-left: 1rem;
}

.app-header .header-title .header-brand-logo {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
}

.app-header .header-title h1 {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    line-height: 1.1;
}

.app-header .header-title .title-subtitle {
    grid-column: 2;
    grid-row: 2;
    line-height: 1;
}

/* Hard-cap the logo. 36px sits comfortably inside the 70px header with
   breathing room above/below; also fits the 60px mobile header (line 1052). */
.header-brand-logo {
    height: 36px;
    max-height: 36px;
    width: auto;
    max-width: 160px;
    display: block;
    margin: 0;
    flex-shrink: 0;
    object-fit: contain;
}

/* Sidebar brand block — works in expanded (260px) AND collapsed (70px) */
.sidebar-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 0.5rem;
    border-bottom: 1px solid var(--border-color);
    min-height: var(--header-height, 70px);
    box-sizing: border-box;
}
.sidebar-brand-logo {
    height: 40px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    display: block;
}

/* Login page full-lockup logo — replaces the Font Awesome hexagon
   (Scoped overrides moved to the "Login page polish (quick-260411-mcm)"
   block at the bottom of this file. The previous unscoped 220px rule
   bled to .header-brand-logo and the unscoped column flex lost the
   cascade against [dir="rtl"] .login-logo in vendor style.css.) */

/* =====================================================================
   Post-rebrand fixes (quick-260411-k1b)
   Addresses three regressions left over from quick-260411-jr4:
   1. Active sidebar background tint was hardcoded rgba(59,130,246,…)
      in vendor style.css — pre-rebrand demo blue #3b82f6 — which never
      flowed through --primary-color. Remap to color-mix of the current
      --primary-color so it tracks the brand.
   2. (Header logo layout fix is in the Header brand logo section above.)
   3. (Dark-mode --primary-color AA contrast remap is in the
      [data-theme="dark"] token block at the top of this file — see
      Change C / K1B-03.)
   ===================================================================== */

/* Active top-level nav link — vendor style.css:508 used rgba(59,130,246,0.1)
   which was the pre-rebrand blue. Remap to 10% of current primary.
   In dark mode this automatically picks up the brighter #c8315f wine
   from the [data-theme="dark"] token remap, so no dark-mode override
   is needed here. */
.nav-link.active {
    background-color: color-mix(in srgb, var(--primary-color) 10%, transparent);
}

/* Active submenu link — vendor style.css:603 used rgba(59,130,246,0.15).
   Remap to 15% of current primary (matches original alpha weight). */
.submenu-link.active {
    background-color: color-mix(in srgb, var(--primary-color) 15%, transparent);
}

/* NOTE: .nav-link.active { color, border-left } and .submenu-link.active
   { color, border-left } already resolve to var(--primary-color) in the
   vendor rules, so they correctly render as wine. Only the hardcoded
   rgba background-color needed overriding. RTL variants at style.css:1354
   and 1394 only flip border direction — they inherit the background-color
   fix above, so no [dir="rtl"] override is needed.

   Dark-mode readability of the active label text is handled by the
   [data-theme="dark"] --primary-color remap at the top of this file
   (Change C), which flows through to these selectors' color/border
   automatically — no per-selector dark override needed. */

/* =====================================================================
   Login page polish (quick-260411-mcm)
   Three fixes bundled together:
     A. Layout: force .login-logo to centered column flex inside the
        login card, beating the vendor RTL row-reverse rule.
     B. Size:   cap .login-brand-logo at 120px, scoped to .login-card
        so the k1b 36px header-brand-logo cap is untouched.
     C. Polish: tighten logo↔title gap, bump .logo-text typography,
        recolor .shape-* background circles to brand tints.
   Per MCM-CONTEXT decisions 1-4 (2026-04-11).
   ===================================================================== */

/* --- A. Layout override -----------------------------------------------
   Vendor style.css:1737 sets .login-logo to row flex and
   style.css:2219 [dir="rtl"] .login-logo forces row-reverse (specificity 0,1,1).
   We scope to .login-card .login-logo (also 0,1,1) and additionally
   re-override the RTL selector with the same 0,1,1 to keep column flex
   in both RTL (default) and LTR. Larger gap per MCM-D-03. */
.login-card .login-logo,
.login-card[dir] .login-logo,
[dir="rtl"] .login-card .login-logo,
[dir="ltr"] .login-card .login-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;               /* was 0.75rem row / 0.5rem stacked */
    margin-bottom: 1.75rem;     /* was 1.5rem */
}

/* --- B. Logo size cap, scoped --------------------------------------
   Per MCM-D-02: 120px max, only inside .login-card, so .header-brand-logo
   (k1b 36px cap) is not affected. width:100% + max-width keeps it fluid
   on narrow viewports; height:auto preserves aspect ratio. */
.login-card .login-brand-logo {
    max-width: 120px;
    width: 100%;
    height: auto;
    display: block;
    margin: 0;                  /* gap is handled by .login-logo flex gap */
    /* Subtle lift so the lockup reads as a header element, not clip-art.
       Uses primary-color tint so it tracks both light and dark mode. */
    filter: drop-shadow(0 4px 12px color-mix(in srgb, var(--primary-color) 18%, transparent));
}

/* --- C1. Login header spacing (MCM-D-03) ---------------------------- */
.login-card .login-header {
    margin-bottom: 2.25rem;     /* was 2rem — a touch more air before the form */
}

/* --- C2. Title typography bump (MCM-D-03) --------------------------
   Vendor .logo-text is 1.75rem / 700. Bump to a fluid clamp and tighten
   letter-spacing so the Arabic wordmark reads as a proper header. */
.login-card .logo-text {
    font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: var(--text-primary);
}

/* --- C3. Background shape recolor (MCM-D-04) -----------------------
   Vendor style.css:1625 paints .shape with a wine→green (accent) gradient
   — the green is the pre-rebrand accent and reads as off-brand noise.
   Switch to a brand-only duotone: primary→secondary at low opacity.
   We use color-mix with transparent instead of `opacity:` so each shape
   can carry its own tint without fighting vendor's opacity:0.1.

   Per-shape differentiation keeps visual rhythm:
   - shape-1 (biggest, top-start): primary-dominant
   - shape-2 (mid):                 secondary-dominant
   - shape-3 (smallest, bottom):    50/50 blend
   Opacity ranges target the ~0.08-0.15 band from MCM-D-04. */
.background-shapes .shape {
    /* Override vendor gradient + opacity in one shot.
       Setting background to transparent here so per-shape rules can
       define their own tinted fill without the gradient bleeding through. */
    background: transparent;
    opacity: 1;                 /* we bake alpha into color-mix below */
}

.background-shapes .shape-1 {
    background: radial-gradient(
        circle at 30% 30%,
        color-mix(in srgb, var(--primary-color) 14%, transparent),
        color-mix(in srgb, var(--primary-color) 4%,  transparent)
    );
}

.background-shapes .shape-2 {
    background: radial-gradient(
        circle at 70% 40%,
        color-mix(in srgb, var(--secondary-color) 16%, transparent),
        color-mix(in srgb, var(--secondary-color) 5%,  transparent)
    );
}

.background-shapes .shape-3 {
    background: radial-gradient(
        circle at 50% 50%,
        color-mix(in srgb, var(--primary-color) 10%, transparent),
        color-mix(in srgb, var(--secondary-color) 8%, transparent)
    );
}

/* --- C4. Dark-mode compensation -------------------------------------
   Vendor style.css:2231 [data-theme="dark"] .shape { opacity: 0.05 }
   was tuned for the old gradient. With our single-tint color-mix fills,
   0.05 is invisible on the dark-slate background. Reset opacity to 1
   (we already baked alpha in) and let the tints show through. The
   dark-mode --primary-color is already brightened to #c8315f by the
   [data-theme="dark"] token block at the top of this file, so the
   same color-mix percentages above render visibly on dark. */
[data-theme="dark"] .background-shapes .shape {
    opacity: 1;
}

/* Slightly cooler tint in dark mode for shape-2 so navy doesn't
   disappear against the dark-slate background. */
[data-theme="dark"] .background-shapes .shape-2 {
    background: radial-gradient(
        circle at 70% 40%,
        color-mix(in srgb, var(--secondary-color) 24%, transparent),
        color-mix(in srgb, var(--secondary-color) 10%, transparent)
    );
}