/**
 * GEMS — Wellington Electricity (WE) display theme (third option alongside Light / Dark).
 * Scoped to html.gems-theme-we. Uses data-bs-theme="light" so Bootstrap surfaces stay readable.
 *
 * Two references often diverge:
 * - **we.co.nz (marketing):** warm gold yellow, safety orange (outages / high-vis), charcoal hero, white type.
 * - **AMP / disclosure PDFs:** print-first — black/grey body, yellow chart callouts, sometimes teal/green grid or second series — not the same as the consumer homepage orange blocks.
 *
 * This theme leans **marketing shell** (gold + orange bar + charcoal) while keeping **teal** for
 * app-wide primary buttons/links (yellow/orange fills fail WCAG on white; AMP diagrams often use a cool accent).
 * Verify hex values against official WE brand packs when available.
 *
 * Partner mark: `public/assets/images/partners/wellington-electricity-logo.svg` — same asset as
 * https://www.welectricity.co.nz/_resources/app/client/assets/images/we-logo.svg (hosted locally;
 * replace if WE updates brand files). Nav co-branding is shown only when this theme is active.
 */

html.gems-theme-we {
    /* ~ we.co.nz hero / headline gold (warmer than pure #FFDD00) */
    --gems-we-yellow: #ffcd00;
    --gems-we-yellow-muted: rgba(255, 205, 0, 0.45);
    /* ~ we.co.nz “outages / developer” safety orange */
    --gems-we-orange: #ff6b00;
    --gems-we-orange-muted: rgba(255, 107, 0, 0.35);
    --gems-we-ink: #1a1a1a;
    --gems-we-teal: #007c84;
    --gems-we-teal-hover: #00646c;
    --gems-we-teal-subtle: rgba(0, 124, 132, 0.12);
    /* Charcoal band like WE marketing header/footer */
    --gems-we-shell: #1a1a1a;
    --gems-we-shell-border: #2d2d2d;
    /* Header chrome on charcoal — high-contrast type (we.co.nz–style white hero copy) */
    --gems-we-header-text: #ffffff;
    --gems-we-header-text-soft: rgba(255, 255, 255, 0.92);

    color-scheme: light;
}

/* Bootstrap semantic tokens — primary stays readable (teal), not yellow fill */
html.gems-theme-we {
    --bs-primary: var(--gems-we-teal);
    --bs-primary-rgb: 0, 124, 132;
    --bs-link-color: var(--gems-we-teal);
    --bs-link-hover-color: var(--gems-we-teal-hover);
}

/* Marketing orange for caution blocks — scoped so .badge.bg-warning can stay gold */
html.gems-theme-we .alert-warning {
    --bs-alert-color: var(--gems-we-ink);
    --bs-alert-bg: rgba(255, 107, 0, 0.12);
    --bs-alert-border-color: var(--gems-we-orange);
    color: var(--gems-we-ink) !important;
}

html.gems-theme-we .alert-warning h1,
html.gems-theme-we .alert-warning h2,
html.gems-theme-we .alert-warning h3,
html.gems-theme-we .alert-warning h4,
html.gems-theme-we .alert-warning h5,
html.gems-theme-we .alert-warning h6 {
    color: var(--gems-we-ink) !important;
}

html.gems-theme-we body {
    background-color: #f4f6f8;
    color: var(--gems-we-ink);
}

html.gems-theme-we #main-wrapper {
    background-color: #f4f6f8;
}

/* ─── Chrome — charcoal shell + gold→orange bar (we.co.nz-style band) ─── */
html.gems-theme-we .nav-header {
    position: relative;
    background: var(--gems-we-shell);
    border-color: var(--gems-we-shell-border);
    border-bottom: 0;
}

html.gems-theme-we .nav-header::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--gems-we-yellow) 0%, var(--gems-we-orange) 100%);
    pointer-events: none;
}

/* Template SVG uses purple fills — align menu chevron with WE accent */
html.gems-theme-we .nav-header .hamburger .line svg path {
    fill: var(--gems-we-yellow) !important;
}

html:not(.gems-theme-we) .gems-brand-we-mark {
    display: none !important;
}

html.gems-theme-we .gems-brand-stack > a.brand-logo.gems-brand-default {
    display: none !important;
}

/* WE client mark: left ribbon (~same inset as default GEMS brand-logo) */
html.gems-theme-we .nav-header .gems-brand-stack {
    align-items: flex-start;
    padding-left: 1.25rem;
    padding-right: 2.25rem;
    width: 100%;
    box-sizing: border-box;
}

@media only screen and (max-width: 87.5rem) {
    html.gems-theme-we .nav-header .gems-brand-stack {
        padding-left: 1.1rem;
        padding-right: 2rem;
    }
}

@media only screen and (max-width: 47.9375rem) {
    html.gems-theme-we .nav-header .gems-brand-stack {
        padding-left: 0.5rem;
        padding-right: 1.75rem;
    }
}

html.gems-theme-we .gems-brand-we-mark {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    flex: 1 1 auto;
    min-height: 0;
    gap: 0.2rem;
    padding: 0.15rem 0 0.1rem;
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
}

html.gems-theme-we .gems-brand-we-mark .gems-we-external-logo {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    line-height: 0;
}

html.gems-theme-we .gems-brand-we-mark .gems-we-external-logo:hover {
    opacity: 0.9;
}

html.gems-theme-we .gems-brand-we-mark .gems-we-external-logo img {
    height: 34px;
    width: auto;
    max-width: min(220px, 52vw);
}

html.gems-theme-we .gems-we-powered-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.25rem 0.35rem;
    font-size: 0.52rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.2;
}

html.gems-theme-we .gems-we-powered-gems-link {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    line-height: 1;
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    font-weight: 500;
}

html.gems-theme-we .gems-we-powered-gems-link:hover {
    color: rgba(255, 255, 255, 0.95);
}

html.gems-theme-we .gems-we-powered-name {
    font-size: inherit;
    letter-spacing: inherit;
}

html.gems-theme-we .gems-we-powered-gems-link img {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    opacity: 0.85;
}

html.gems-theme-we .gems-we-powered-gems-link:focus-visible {
    outline: 2px solid var(--gems-we-yellow);
    outline-offset: 2px;
}

html.gems-theme-we .gems-we-powered-gems-link:hover img {
    filter: brightness(1.12);
    opacity: 1;
}

html.gems-theme-we .header {
    background: var(--gems-we-shell);
    border-color: var(--gems-we-shell-border);
}

html.gems-theme-we .header .dashboard_bar {
    color: var(--gems-we-header-text) !important;
    font-weight: 600;
}

/* All top-bar nav labels + icons (incl. .nav-link.btn) — bright white, hover gold */
html.gems-theme-we .header .navbar-nav .nav-link {
    color: var(--gems-we-header-text-soft) !important;
}

html.gems-theme-we .header .navbar-nav .nav-link:hover,
html.gems-theme-we .header .navbar-nav .nav-link:focus {
    color: var(--gems-we-yellow) !important;
}

html.gems-theme-we .header .navbar-nav .nav-link.btn {
    color: var(--gems-we-header-text) !important;
    border-color: rgba(255, 255, 255, 0.55) !important;
    background-color: transparent !important;
}

html.gems-theme-we .header .navbar-nav .nav-link.btn:hover,
html.gems-theme-we .header .navbar-nav .nav-link.btn:focus {
    color: var(--gems-we-ink) !important;
    background-color: var(--gems-we-yellow) !important;
    border-color: var(--gems-we-yellow) !important;
}

html.gems-theme-we .header .form-control,
html.gems-theme-we .header .input-group-text {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: var(--gems-we-shell-border);
    color: var(--gems-we-header-text);
}

html.gems-theme-we .header .search-area .form-control::placeholder {
    color: rgba(255, 255, 255, 0.55);
}

html.gems-theme-we .header .search-area .input-group-text a svg path {
    fill: rgba(255, 255, 255, 0.75) !important;
}

html.gems-theme-we .header .search-area .input-group-text a:hover svg path {
    fill: var(--gems-we-yellow) !important;
}

/* Profile / org strip — template used muted lavender on light header */
html.gems-theme-we .header .header-profile2 > a.nav-link,
html.gems-theme-we .header .header-profile2 > a.nav-link .header-info2,
html.gems-theme-we .header .header-profile2 > a.nav-link .header-info2 span,
html.gems-theme-we .header .header-profile2 > a.nav-link .header-info2 strong {
    color: var(--gems-we-header-text) !important;
}

html.gems-theme-we .header .header-profile2 > a.nav-link .header-info2 small,
html.gems-theme-we .header .header-profile2 > a.nav-link .header-info2 .small {
    color: rgba(255, 255, 255, 0.78) !important;
}

html.gems-theme-we .deznav {
    background: var(--gems-we-shell);
    border-right: 1px solid var(--gems-we-shell-border);
}

html.gems-theme-we .deznav .metismenu > li > a {
    color: #cfd6df;
}

html.gems-theme-we .deznav .metismenu > li:hover > a {
    background: rgba(255, 205, 0, 0.1);
    color: #fff;
}

html.gems-theme-we .deznav .metismenu > li.mm-active > a {
    background: rgba(255, 205, 0, 0.2);
    color: var(--gems-we-yellow);
    box-shadow: inset 3px 0 0 var(--gems-we-orange);
}

html.gems-theme-we .content-body {
    background-color: #f4f6f8;
    color: var(--gems-we-ink);
}

html.gems-theme-we .content-body .card {
    border-color: rgba(35, 31, 32, 0.12);
    box-shadow: 0 0.125rem 0.35rem rgba(30, 45, 54, 0.06);
}

html.gems-theme-we .footer,
html.gems-theme-we #footer {
    background: #fff;
    border-color: rgba(35, 31, 32, 0.08);
}

/* Primary buttons app-wide — teal */
html.gems-theme-we .btn-primary {
    background-color: var(--gems-we-teal);
    border-color: var(--gems-we-teal);
}

html.gems-theme-we .btn-primary:hover,
html.gems-theme-we .btn-primary:focus {
    background-color: var(--gems-we-teal-hover);
    border-color: var(--gems-we-teal-hover);
}

html.gems-theme-we .btn-outline-primary {
    color: var(--gems-we-teal);
    border-color: var(--gems-we-teal);
}

html.gems-theme-we .btn-outline-primary:hover {
    background-color: var(--gems-we-teal);
    border-color: var(--gems-we-teal);
}

html.gems-theme-we a:not(.btn):not(.nav-link):not(.dropdown-item) {
    color: var(--gems-we-teal);
}

html.gems-theme-we a:not(.btn):not(.nav-link):not(.dropdown-item):hover {
    color: var(--gems-we-teal-hover);
}

/* Badges: yellow chip for emphasis */
html.gems-theme-we .badge.bg-warning.text-dark {
    background-color: var(--gems-we-yellow) !important;
    color: var(--gems-we-ink) !important;
}

/* Theme dropdown readability on dark chrome */
html.gems-theme-we .gems-theme-menu {
    background: #fff;
    border: 1px solid rgba(35, 31, 32, 0.12);
}