/*
 * Joyn Member Portal — theme overrides.
 *
 * This file owns ALL color theming for the portal. It loads AFTER
 * combined-scoped.css, bootstrap-overright.css and main.css, so at equal
 * specificity it wins every cascade tie. Those three files are vendored
 * from another development area and must NEVER be edited — when upstream
 * ships replacements, drop them in and this file keeps theming working.
 *
 * Admin-chosen colors are injected as an inline <style> :root block after
 * this file (templates/portal-page.php); the :root below is the default
 * palette fallback.
 *
 * Color roles:
 *   --Primary-3 (+hover/soft)  accent: buttons, tabs, links, checked inputs
 *   --Secondary (+dark)        branded dark surfaces ONLY: membership card
 *                              headers, avatar circles, ribbons, active
 *                              toggles, dark table headers.
 * Functional neutrals (body text, form labels/fields/borders, menu links,
 * gray backgrounds) deliberately do NOT follow either color — they keep the
 * vendored --Neutral-* palette.
 */

:root {
    --Primary-3: #3f66fb;
    --Primary-3-hover: #375add; /* derive_shades('#3f66fb')['hover'] */
    --Primary-3-soft: #ecf0ff;  /* derive_shades('#3f66fb')['soft'] */
    --bs-primary-rgb: 63, 102, 251;
    --Secondary: #253142;
    --Secondary-dark: #212b3a;  /* derive_shades('#253142')['hover'] */
    /* Anchor color: combined-scoped.css scopes `a { color: var(--bs-link-color) }`
       to the portal, so overriding the token here only affects portal links. */
    --bs-link-color: var(--Primary-3);
    --bs-link-hover-color: var(--Primary-3-hover);
}

/* --- Bootstrap components ---------------------------------------------
   combined-scoped.css bakes #0d6efd into these as literals, so variable
   overrides alone don't reach them. */

#member-portal-main-div .btn-primary {
    --bs-btn-bg: var(--Primary-3);
    --bs-btn-border-color: var(--Primary-3);
    --bs-btn-hover-bg: var(--Primary-3-hover);
    --bs-btn-hover-border-color: var(--Primary-3-hover);
    --bs-btn-active-bg: var(--Primary-3-hover);
    --bs-btn-active-border-color: var(--Primary-3-hover);
    --bs-btn-disabled-bg: var(--Primary-3);
    --bs-btn-disabled-border-color: var(--Primary-3);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}
#member-portal-main-div .btn-outline-primary {
    --bs-btn-color: var(--Primary-3);
    --bs-btn-border-color: var(--Primary-3);
    --bs-btn-hover-bg: var(--Primary-3);
    --bs-btn-hover-border-color: var(--Primary-3);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--Primary-3-hover);
    --bs-btn-active-border-color: var(--Primary-3-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-color: var(--Primary-3);
    --bs-btn-disabled-border-color: var(--Primary-3);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}
#member-portal-main-div .alert-primary {
    --bs-alert-color: var(--Primary-3-hover);
    --bs-alert-bg: var(--Primary-3-soft);
    --bs-alert-border-color: var(--Primary-3);
}
#member-portal-main-div .list-group-item-primary {
    color: var(--Primary-3-hover);
    background-color: var(--Primary-3-soft);
}
#member-portal-main-div .link-primary {
    color: var(--Primary-3) !important;
}
#member-portal-main-div .link-primary:hover,
#member-portal-main-div .link-primary:focus {
    color: var(--Primary-3-hover) !important;
}

/* Checked checkboxes, radios and switches (baked #0d6efd) */
#member-portal-main-div .form-check-input:checked {
    background-color: var(--Primary-3);
    border-color: var(--Primary-3);
}

/* Active pagination pill (baked #0d6efd) */
#member-portal-main-div .pagination {
    --bs-pagination-active-bg: var(--Primary-3);
    --bs-pagination-active-border-color: var(--Primary-3);
}

/* Progress bars (baked #0d6efd) */
#member-portal-main-div .progress {
    --bs-progress-bar-bg: var(--Primary-3);
}

/* Active dropdown item (baked #0d6efd) */
#member-portal-main-div .dropdown-menu {
    --bs-dropdown-link-active-bg: var(--Primary-3);
}

/* Benefit-list checkmarks: static <img src="…svg/check.svg"> with the old
   brand blue (#3F66FB) baked into the SVG stroke. Recolor without touching
   the vendored asset: collapse the content box (border-box + full padding)
   so the bitmap never paints, then show the primary color through the
   SVG's own shape as a mask. check-green.svg (success) is not matched. */
#member-portal-main-div img[src$="svg/check.svg"] {
    width: 16px;
    height: 16px;
    box-sizing: border-box;
    padding: 16px 16px 0 0;
    background-color: var(--Primary-3);
    -webkit-mask: url("../svg/check.svg") no-repeat center / contain;
    mask: url("../svg/check.svg") no-repeat center / contain;
}

/* Ripple.svg preloader: static SVG with the old brand blue (#6177F2) baked
   into the stroke. Same collapse-and-mask approach as check.svg above;
   the mask keeps tracking the SVG's own SMIL animation, just recolored. */
#member-portal-main-div #preloader img[src$="Ripple.svg"] {
    width: 80px;
    height: 80px;
    box-sizing: border-box;
    padding: 80px 80px 0 0;
    background-color: var(--Primary-3);
    -webkit-mask: url("../Ripple.svg") no-repeat center / contain;
    mask: url("../Ripple.svg") no-repeat center / contain;
}

/* Committee roster icon: committee-icon.svg is a static two-tone SVG (soft
   blue circle + darker blue people icon baked in as literal fills), loaded
   via <img>. A single mask can't preserve two colors on one flattened
   bitmap, so the circle becomes a plain CSS background on the (now-hidden)
   <img>, and the icon glyph is re-drawn on top via ::before, masked from a
   circle-free copy of the icon (committee-icon-glyph.svg). */
#member-portal-main-div #app-joinportal-website .committee-item-click .card-body {
    position: relative;
}
#member-portal-main-div #app-joinportal-website .committee-item-click .card-body img[src$="svg/committee-icon.svg"] {
    width: 42px;
    height: 42px;
    box-sizing: border-box;
    padding: 42px 42px 0 0;
    background-color: var(--Primary-3-soft);
    border-radius: 50%;
}
#member-portal-main-div #app-joinportal-website .committee-item-click .card-body::before {
    content: "";
    position: absolute;
    top: 1rem; /* matches .card-body's default var(--bs-card-spacer-y), so this lines up with the img above */
    left: 50%;
    transform: translateX(-50%);
    width: 42px;
    height: 42px;
    background-color: var(--Primary-3);
    -webkit-mask: url("../svg/committee-icon-glyph.svg") no-repeat center / 20px 20px;
    mask: url("../svg/committee-icon-glyph.svg") no-repeat center / 20px 20px;
}

/* Avatar ring: prof_border.svg is a plain <div> (not an <img>), so it can be
   recolored the same way as the other two hardcoded assets above. Its own
   gradient (#3F66FB -> #88A1FF) simplifies to a single flat primary color. */
#member-portal-main-div #app-joinportal-website .avatar-border {
    background-image: none;
    background-color: var(--Primary-3);
    -webkit-mask: url("../svg/prof_border.svg") no-repeat center / 100% 100%;
    mask: url("../svg/prof_border.svg") no-repeat center / 100% 100%;
}

/* --- Secondary color areas --------------------------------------------
   Branded dark surfaces only. Text, form fields and borders stay neutral. */

/* Membership card headers (main.css uses var(--Neutral-1)) */
#member-portal-main-div #app-joinportal-website .membership-item .card-header {
    background-color: var(--Secondary);
}

/* Avatar circles (main.css uses var(--Neutral-1)) */
#member-portal-main-div #app-joinportal-website .avatar-circle {
    background-color: var(--Secondary);
}

/* Active secondary toggle buttons (bootstrap-overright.css uses var(--Neutral-1)) */
#member-portal-main-div #app-joinportal-website .btn-secondary.active {
    background-color: var(--Secondary);
}

/* Dark table headers (bootstrap-overright.css uses var(--Neutral-0)) */
#member-portal-main-div .table-dark {
    --bs-table-bg: var(--Secondary-dark);
}

/* --- Literal-color patches against the vendored stylesheets -----------
   Same selectors as the pristine files; only the color property is
   overridden, winning by load order. */

/* main.css:222 — hardcoded #253142 (card ribbon) */
#member-portal-main-div #app-joinportal-website .card .sticky-left {
    background: var(--Secondary);
}

/* main.css:1031 — hardcoded #e4eaff */
#member-portal-main-div #app-joinportal-website .my-activities-img-icon {
    background-color: var(--Primary-3-soft);
}

/* main.css:1220,1222 — hardcoded #0d6efd */
#member-portal-main-div #app-joinportal-website .file-image-upload-comp .upload-photo-btn {
    color: var(--Primary-3);
    border-color: var(--Primary-3);
}

/* main.css:1236 — hardcoded #0d6efd */
#member-portal-main-div #app-joinportal-website .file-image-upload-comp .upload-photo-btn::before {
    color: var(--Primary-3);
}

/* main.css:1417 — hardcoded #f0f4ff */
.phone-code-item:hover {
    background: var(--Primary-3-soft);
}

/* main.css:1177,1179 — "Members only" page-header pill, hardcoded #ccd7fe / #eef2ff */
#member-portal-main-div #portal-page-members-only {
    border-color: color-mix(in srgb, var(--Primary-3) 25%, #fff);
    background-color: var(--Primary-3-soft);
}

/* main.css:2442,2479 — profile / MCAT accordion cards, shadow tinted with #3f66fb */
#member-portal-main-div #profile-form-accordion .accordion-item,
#member-portal-main-div #mcatAccordion .accordion-item {
    box-shadow: 0 2px 8px rgba(var(--bs-primary-rgb), 0.06);
}

/* main.css:2469,2506 — open-accordion chevron: #3f66fb baked into a data-URI SVG.
   Same collapse-and-mask approach as check.svg above, using the chevron as the mask. */
#member-portal-main-div #profile-form-accordion .accordion-button:not(.collapsed)::after,
#member-portal-main-div #mcatAccordion .accordion-button:not(.collapsed)::after {
    background-image: none;
    background-color: var(--Primary-3);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* main.css:2152-2156 — confirmation dialogs: the default (non red/orange/green)
   ramp is the old brand blue. The typed variants set their own --jc-* on
   .jconfirm-box, which still wins over these. */
#member-portal-main-div .jconfirm.jconfirm-bootstrap {
    --jc-accent: var(--Primary-3);
    --jc-soft: var(--Primary-3-soft);
    --jc-hairline: color-mix(in srgb, var(--Primary-3) 30%, #fff);
    --jc-ink: color-mix(in srgb, var(--Primary-3) 75%, #000);
    --jc-shadow: rgba(var(--bs-primary-rgb), 0.22);
}

/* main.css:2349,2350 — dialog primary button hover, hardcoded #2a4fdc */
#member-portal-main-div .jconfirm.jconfirm-bootstrap .jconfirm-box .jconfirm-buttons button.btn-primary:hover {
    border-color: var(--Primary-3-hover);
    background-color: var(--Primary-3-hover);
}

/* main.css:363,538 — active meetings List/Calendar toggle (var(--Neutral-1)) */
#member-portal-main-div
    #app-joinportal-website
    .meetings-controls
    .meetings-toggle-switch
    > button.active,
#member-portal-main-div
    #app-joinportal-website
    .calendar-container
    .fc-toolbar
    .meetings-toggle-switch > button.active {
    background-color: var(--Secondary) !important;
}

/* main.css:1790-1854 — donation list: a dark branded panel built on --Neutral-0
   (title bar) and --Neutral-1 (rows), mapped the same way as .table-dark above. */
#member-portal-main-div #app-joinportal-website #donation-list .accordion {
    --bs-accordion-btn-bg: var(--Secondary-dark);
    --bs-accordion-active-bg: var(--Secondary-dark);
}
#member-portal-main-div #app-joinportal-website #donation-list .accordion-item,
#member-portal-main-div #app-joinportal-website .donation-fund-list,
#member-portal-main-div #app-joinportal-website .donation-fund-row {
    background-color: var(--Secondary);
}
/* main.css:1823 — hardcoded #131a24 */
#member-portal-main-div #app-joinportal-website #donation-list .accordion-button:hover {
    background-color: color-mix(in srgb, var(--Secondary-dark) 80%, #000);
}

/* --- Layout patches against the vendored stylesheets ------------------
   Not color, but this is the only plugin-owned stylesheet that loads after
   main.css, so WordPress-specific layout fixes live here too. */

/* main.css:29 — the preloader overlay is position: fixed with no offsets, so it
   starts at its static position (below the WP theme header) instead of
   covering the viewport. */
#member-portal-main-div #preloader {
    top: 0;
    left: 0;
}