/* =====================
   Brand Color Variables
   ===================== */
:root
{
    font-family: 'Inter', Roboto, Calibri !important;

    /* Primary palette */
    --color-primary:        #30c69b;  /* teal green — primary accent */
    --color-primary-hover:  #27a882;  /* darker teal for hover states */
    --color-primary-active: #1d9374;  /* deep teal for active/pressed */

    /* Dark navy — nav backgrounds, headings */
    --color-dark:           #1b2538;
    --color-dark-hover:     #2a3a56;  /* slightly lighter for hover */

    /* Neutral gray secondary text, borders */
    --color-muted:          #60686e;
    --color-muted-hover:    #4a5259;  /* darker for hover */
    --color-muted-light:    #9da5ab;  /* lighter for disabled/placeholder */

    /* Warm off-white page backgrounds, input fills */
    --color-light:          #f2efeb;
    --color-light-alt:      #e5e1dc;  /* slightly darker for hover/active backgrounds */
    --color-light-dark:     #d4cfc9;  /* for borders on light backgrounds */

    /* Utility */
    --color-white:          #ffffff;
    --color-text:           #1b2538;  /* default body text (same as dark) */
    --color-text-muted:     #60686e;  /* secondary text (same as muted) */
    --color-danger:         #cc0000;  /* errors / destructive actions */
    --color-warning:        #e8a020;  /* warnings */
    --color-success:        #30c69b;  /* success (same as primary) */

    /* Component tokens */
    --color-portlet-header: #60686e;  /* portlet/widget header bar background */
    --color-page-header:    #363749;  /* page-level title bars – Greenway dark grey */
}

@supports (font-variation-settings: normal) {
  :root { font-family: 'Inter var', sans-serif; }
}

/* =====================
   SFDC Override Styles
   ===================== */
html .brandSecondaryBrd { border: 0; }

/* === Whole page-block card: white card, box-shadow, rounded corners === */
.bPageBlock
{
    background: #fff !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,0.07), 0 0.0625rem 0.125rem rgba(0,0,0,0.05) !important;
    margin-bottom: 1.25rem !important;
    overflow: hidden !important;
    border: none !important;
}

/* === Header bar: dark grey, fills full width, no SFDC table gaps === */
.bPageBlock .pbHeader
{
    background-color: var(--color-page-header) !important;
    border-radius: 0.5rem 0.5rem 0 0 !important;
    padding: 0 !important;
    border: none !important;
}
.bPageBlock .pbHeader table
{
    width: 100% !important;
    border-collapse: collapse !important;
    border: none !important;
    background: transparent !important;
}
.bPageBlock .pbHeader td,
.bPageBlock .pbHeader .pbTitle,
.bPageBlock .pbHeader .pbButton
{
    background-color: transparent !important;
    color: #fff !important;
    border: none !important;
    vertical-align: middle !important;
    padding: 0.875rem 1.25rem !important;
}
/* Action buttons column: align right, don't over-pad */
.bPageBlock .pbHeader .pbButton
{
    text-align: right !important;
    white-space: nowrap !important;
    width: 1% !important;          /* shrink to content */
    padding: 0.5rem 1rem !important;
}

/* === Title text === */
h2.mainTitle, .bPageBlock .pbHeader .pbTitle h2
{
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    color: #fff !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
}

/* === Section sub-headers (apex:pageBlockSection title) === */
.pbSubheader
{
    background-color: var(--color-portlet-header) !important;
    color: #fff !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 0.45rem 1.25rem !important;
    border: none !important;
}
div.pbSubheader h3
{
    color: #fff !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin: 0 !important;
}

/* Action button inside pbHeader */
.pbButton
{
    background-color: var(--color-primary) !important;
    padding: 0.4rem 0.875rem !important;
    border-radius: 0.3rem !important;
}

.zen-pageMsg.textOnly.highImportance
{
    background-color: #fced79 !important;
    color: var(--color-text) !important;
    padding: 0.3125rem 0.75rem !important;
}
ul li { margin-left: 0; }

/* =====================
   Base / Reset
   ===================== */
*
{
    font-family: 'Inter', Roboto, Calibri !important;    
    font-size: 16px; /* 1rem = 16px throughout this stylesheet */
    box-sizing: border-box;
}
   
body, html
{
    font-family: 'Inter', Roboto, Calibri !important;
    color: var(--color-text);
    font-size: 1rem;
    margin: 0;
    padding: 0;
    min-width: 32.5rem;
    height: 100%;
}

/* Override the (ugly) SFDC pageBlockTable styling */
table {
    color: #2e2e2e !important;
}

/* Normalize VF table spacing */
table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
}

/* Label column */
th.labelCol {
    text-align: left !important;
    font-weight: 600 !important;
    color: #5f6a79 !important;
    padding: 12px 16px !important;
    width: 30% !important;
    vertical-align: middle !important;
}

/* Value column */
td.data2Col {
    padding: 12px 16px !important;
    color: #1f2933 !important;
}

/* Value styling */
td.data2Col span {
    display: inline-block !important;
    font-weight: 500 !important;
}

/* Add subtle separators */
tr + tr th.labelCol,
tr + tr td.data2Col {
    border-top: 1px solid #e5e7eb !important;
}

a, .pbBody a
{
    text-decoration: none;
    border: none;
    font-size: 1.0em;
    color: var(--color-primary);
    transition: color 0.2s;
}
a:hover
{
    color: var(--color-primary-hover);
    text-decoration: none;
}

/* =====================
   Buttons
   ===================== */
.mygButton,
input.mygButton,
a.mygButton,
button.mygButton
{
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    background-color: var(--color-primary) !important;
    background-image: none !important;
    border: 2px solid var(--color-primary) !important;
    border-radius: 0.3125rem !important;
    color: #fff !important;
    cursor: pointer !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    margin: 0.125rem !important;
    padding: 0.4rem 0.9rem !important;
    text-align: center !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    user-select: none !important;
    vertical-align: middle !important;
    transition: background-color 0.15s, color 0.15s !important;
}
.mygButton:hover,
input.mygButton:hover,
a.mygButton:hover,
button.mygButton:hover
{
    background-color: #fff !important;
    color: var(--color-primary) !important;
    text-decoration: none !important;
}
.mygButton img
{
    filter: invert(100%) sepia(4%) saturate(583%) hue-rotate(60deg) brightness(117%) contrast(100%);
}
.mygButton:hover img { filter: none; }

/* Ghost / secondary button variant */
.mygButtonGhost,
a.mygButtonGhost,
button.mygButtonGhost
{
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: transparent;
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
    border-radius: 0.3125rem;
    padding: 0.4rem 0.9rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}
.mygButtonGhost:hover,
a.mygButtonGhost:hover,
button.mygButtonGhost:hover
{
    background: var(--color-primary);
    color: #fff;
    text-decoration: none;
}

/* =====================
   Core Layout
   ===================== */

/* Outermost flex row: nav on left, right area on right */
.mpSiteWrapper
{
    display: flex;
    min-height: 100vh;
    align-items: stretch;
}

/* Left navigation sidebar full height, sticky */
#mpLeftNav
{
    background-color: var(--color-dark);
    width: 8rem;
    min-height: 100vh;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 100;
}

/* Company logo section at top of nav */
.mpNavLogo
{
    padding: 1.25rem 0.75rem 1rem;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    background-color: var(--color-dark);
    flex-shrink: 0;
}
.mpNavLogoImg
{
    max-width: 6rem;
    height: auto;
    display: block;
    margin: 0 auto 0.375rem;
}
.mpSandboxBadge
{
    margin-top: 0.5rem;
    color: #1b2538;
    background-color: #b8bcc4;
    padding: 0.25rem 0.625rem;
    font-size: 0.7em;
    font-weight: bold;
    display: inline-block;
    border-radius: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

#mpLeftNav ul
{
    padding: 0;
    margin: 0;
    list-style-type: none;
    flex: 1;
}
#mpLeftNav li img { padding: 0.3125rem; }

/* Sub-menus in left nav */
.mpNavSubMenu
{
    max-height: 0;
    overflow: hidden;
    background-color: var(--color-dark-hover);
    transition: max-height 0.3s ease;
}
.mpNavSubMenu.is-open
{
    max-height: 600px;
}

/* Right area: top header bar + page content */
#mpRightArea
{
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background-color: var(--color-light);
}

/* Top header bar inside right area */
#headerOuter
{
    background-color: var(--color-dark);
    box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,0.35);
}
.headerInner { padding: 0; }
.mpHeaderColumns
{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background-color: var(--color-dark);
    padding: 0.875rem 1.25rem;
    gap: 1.25rem;
}
.mpHeaderRight
{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.625rem;
    flex-shrink: 0;
    min-width: 13rem;
}
.mpHeaderActions
{
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.mpBanner
{
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

/* Page body */
#mpPageContent
{
    flex: 1;
    margin: 1.25rem;
    overflow-x: hidden;
}

/* Footer */
#mpFooter
{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.875rem 1.5rem;
    background-color: #1b2538;
    color: rgba(255,255,255,0.65);
    font-size: 0.82rem;
    flex-shrink: 0;
    box-sizing: border-box;
}
#mpFooter a
{
    color: rgba(255,255,255,0.65);
    text-decoration: none;
}
#mpFooter a:hover { color: var(--color-primary); }

/* =====================
   Navigation Items
   ===================== */
#mpNavigation li
{
    padding-left: 0;
    padding-right: 0;
}
#mpNavigation li:hover, .mpNavSubMenuItem:hover
{
    background-color: rgba(255,255,255,0.15);
    transition: background-color 0.2s;
}
#mpNavigation li a
{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0.625rem 0.5rem;
}
li.mpMenuItemActive
{
    background: linear-gradient(90deg, rgba(48,198,155,0.25) 0%, rgba(48,198,155,0.06) 100%);
    border-left: 3px solid var(--color-primary);
}
li.mpMenuItemInactive
{
    border-left: 3px solid transparent;
    filter: opacity(90%);
}
li.mpMenuItemActive a, li.mpMenuItemInactive a, .mpNavSubMenuItem a
{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
}
.mpNavSubMenuItem a
{
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
    padding: 0.5rem 0.75rem 0.5rem 1.25rem;
    font-size: 0.8rem;
    gap: 0.375rem;
}
.mpMenuIconActive
{
    height: 2.25rem;
    width: 2.25rem;
    filter: brightness(0) invert(1);
}
.mpMenuIconInactive
{
    height: 1.75rem;
    width: 1.75rem;
    filter: brightness(0) invert(1);
    opacity: 0.75;
}
.mpMenuLabelActive
{
    display: block;
    color: #fff;
    font-size: 0.875rem;
    font-weight: bold;
    margin-top: 0.1875rem;
}
.mpMenuLabelInactive
{
    display: block;
    color: rgba(255,255,255,0.8);
    font-size: 0.875rem;
    margin-top: 0.1875rem;
}
.mpNavSubMenuItem .mpMenuLabelActive,
.mpNavSubMenuItem .mpMenuLabelInactive
{
    margin-top: 0;
    font-size: inherit;
}
.mpMessageIndicator
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.125rem;
    height: 1.125rem;
    background-color: #d32f2f;
    border-radius: 0.65rem;         /* pill for 2-digit numbers, circle for 1-digit */
    color: #fff;
    padding: 0 0.275rem;
    font-weight: 700;
    font-size: 0.6rem;
    line-height: 1;
    border: 1.5px solid rgba(255,255,255,0.75);
    box-shadow: 0 1px 4px rgba(0,0,0,0.35);
    letter-spacing: 0;
    white-space: nowrap;
}

/* =====================
   Header / User Area
   ===================== */
.mpHeaderLinks
{
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: flex-end;
}
.mpUserDetail
{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.1rem;
}
.mpUserName
{
    color: #fff !important;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.2;
}
.mpUserDetailGid
{
    color: rgba(255,255,255,0.55) !important;
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0.02em;
}

/* Profile dropdown menu */
#menu
{
    display: none;
    position: fixed;
    z-index: 9999;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 0.375rem;
    box-shadow: 0 0.25rem 1rem rgba(0,0,0,0.18);
    padding: 0.375rem 0;
    min-width: 11.25rem;
    list-style: none;
    margin: 0;
}
#menu li a
{
    display: block;
    padding: 0.625rem 1rem;
    color: var(--color-text);
    font-weight: normal;
    font-size: 0.95em;
}
#menu li a:hover
{
    background-color: var(--color-light-alt);
    color: var(--color-primary);
}

#mpNeedHelpContainer
{
    display: flex;
    align-items: center;
}
.mpNeedHelpBtn
{
    background: transparent;
    border: 1px solid rgba(255,255,255,0.45);
    color: rgba(255,255,255,0.85);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 0.35rem 0.875rem;
    border-radius: 2rem;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}
.mpNeedHelpBtn img
{
    filter: brightness(0) invert(1);
    opacity: 0.85;
}
.mpNeedHelpBtn:hover
{
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.8);
    color: #fff;
}
.mpNeedHelpBtn:hover img { opacity: 1; }

/* =====================
   Banner Carousel (native)
   ===================== */

/* Outer group: shrinks to content width so dots stay under the banner */
.mpCarouselGroup
{
    display: flex;
    flex-direction: column;
    align-self: flex-start;     /* do NOT stretch to full .mpBanner width */
    align-items: center;        /* center both the row and the dots */
    max-width: 100%;
}

/* Inner row: [prev-btn] [carousel] [next-btn] */
.mpCarouselWrapper
{
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.mpCarousel
{
    position: relative;
    overflow: hidden;
    border-radius: 0.375rem;
    flex: 1;
    min-width: 0;
    max-width: 728px;              /* cap at standard leaderboard width */
    /* Fixed height to match standard 728x90 banner spec */
    height: 90px;
    background: #000;
}
.mpCarouselTrack
{
    display: flex;
    flex-wrap: nowrap;
    height: 100%;
    transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}
.mpCarouselSlide
{
    /* width set in px by JS to match carousel.offsetWidth */
    flex: 0 0 auto;
    height: 100%;
    overflow: hidden;
}
.mpCarouselImage
{
    border: none;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mpCarouselSlide a
{
    display: block;
    height: 100%;
    line-height: 0;
}
.mpCarouselBtn
{
    flex-shrink: 0;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.25);
    color: #fff;
    font-size: 1.75rem;
    line-height: 1;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.2s, border-color 0.2s;
    z-index: 10;
}
.mpCarouselBtn:hover
{
    background: rgba(255,255,255,0.28);
    border-color: rgba(255,255,255,0.6);
}
/* Prev/Next no longer need absolute positioning — they are flex siblings */
/* Dots render BELOW the carousel wrapper (not inside overflow:hidden) */
.mpCarouselDots
{
    display: flex;
    justify-content: center;
    gap: 0.375rem;
    margin-top: 0.25rem;
}
.mpCarouselDot
{
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: rgba(255,255,255,0.5);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s, transform 0.2s;
}
.mpCarouselDot.active
{
    background: #fff;
    transform: scale(1.3);
}

/* =====================
   Native Dialog Styles
   ===================== */
dialog
{
    border: none;
    border-radius: 0.5rem;
    box-shadow: 0 0.375rem 1.875rem rgba(0,0,0,0.25);
    padding: 0;
    max-width: 90vw;
    max-height: 90vh;
    overflow: hidden;
}
dialog[open]
{
    display: flex;
    flex-direction: column;
}
dialog::backdrop
{
    background-color: rgba(0,0,0,0.5);
}
.dialog-header
{
    background-color: var(--color-dark);
    color: #fff;
    padding: 0.875rem 1.125rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.1em;
    font-weight: bold;
    flex-shrink: 0;
}
.dialog-header span { color: #fff !important; }
.dialog-close-btn
{
    background: none;
    border: none;
    color: #fff;
    font-size: 1.3em;
    cursor: pointer;
    padding: 0 0.25rem;
    line-height: 1;
    opacity: 0.8;
}
.dialog-close-btn:hover { opacity: 1; }
.dialog-body
{
    padding: 1.25rem;
    overflow: auto;
    flex: 1;
}
.dialog-footer
{
    padding: 0.75rem 1.25rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    border-top: 1px solid #e0e0e0;
    flex-shrink: 0;
}

/* myg-modal: div-based modal for VF components (dialog not supported in components) */
.myg-modal
{
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    background: #fff;
    border-radius: 0.5rem;
    box-shadow: 0 0.375rem 1.875rem rgba(0,0,0,0.25);
    max-width: 90vw;
    max-height: 90vh;
    overflow: hidden;
    flex-direction: column;
    min-width: 25rem;
}

/* =====================
   Misc / Utility
   ===================== */
iframe { border: 0; margin: 0; padding: 0; }
.formButton, a.formButton
{
    background-color: var(--color-primary);
    border-radius: 0.4375rem;
    color: white;
    font-size: 1.2em;
    text-decoration: none;
    padding: 0 0.3125rem 0 2rem;
    height: 1.875rem;
    margin-left: 0.3125rem;
    margin-top: 0.3125rem;
    display: flex;
    align-items: center;
    width: 3.125rem;
    float: left;
}
.formButtonLoading, a.formButtonLoading { width: 5rem; }
.formButton:hover
{
    background-color: var(--color-primary-hover);
    color: #000;
    cursor: pointer;
    text-decoration: none;
}
.pageInstructions
{
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    background: rgba(48,198,155,0.08);
    color: var(--color-dark);
    border-left: 4px solid var(--color-primary);
    border-radius: 0 0.3125rem 0.3125rem 0;
    padding: 0.75rem 1rem;
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
    line-height: 1.5;
}
.pageInstructions::before
{
    content: '\2139';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.375rem;
    height: 1.375rem;
    background: var(--color-primary);
    color: #fff;
    border-radius: 50%;
    font-size: 0.875rem;
    font-weight: bold;
    line-height: 1;
    margin-top: 0.1rem;
}
.displayNone { display: none; }
.center { text-align: center; }
.required { border-left: 0.1875rem solid var(--color-danger); }
div.clearFloats { clear: both; }

/* Slide-out sidebar (direct JS open/close) */
.sidebar
{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 33%;
    display: none;
    border-left: 3px solid var(--color-primary);
    box-shadow: -0.25rem 0 1.5rem rgba(0,0,0,0.22);
    background: #fff;
    overflow: auto;
    z-index: 999;
}
.sidebar-backdrop
{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 998;
    display: none;
}
div.sidebarHeader
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    height: 3.5rem;
    background: var(--color-dark);
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
div.sidebarTitle { font-size: 1.05em; font-weight: 600; color: #fff; }
div.sidebarClose
{
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border-radius: 50%;
    height: 2rem;
    width: 2rem;
    flex-shrink: 0;
    border: 1.5px solid rgba(255,255,255,0.4);
    background: transparent;
    transition: background 0.2s;
}
div.sidebarClose:hover { background: rgba(255,255,255,0.15); }
div.sidebarClose span { color: #fff; font-size: 1.2rem; font-weight: bold; line-height: 1; }
.normal { width: 33%; }
.wide { width: 50%; }
.extrawide { width: 75%; }
.narrow { width: 25%; }

/* Hamburger toggle icon */
.hamburger, a span.hamburger
{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3em;
    height: 3rem;
    width: 3rem;
}
.hamburger::after, a span.hamburger::after { content: '\2261'; }
.hamburger:hover, a span.hamburger:hover
{
    transform: scale(1.2);
    text-decoration: none !important;
}

/* =====================
   mygSelect widget
   ===================== */
.transition { transition: all 0.4s ease-in-out; }
.mygSelect
{
    display: inline-block;
    position: relative;
    margin-left: 0.375rem;
}
.mygSelect ul
{
    text-align: left;
    position: absolute;
    padding: 0.5rem 0.75rem 0.5rem 0.25rem;
    top: 0.3125rem;
    left: 0;
    display: none;
    background-color: #eee;
    z-index: 999;
    min-width: 7.5rem;
    box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,0.15);
    border-radius: 0.25rem;
}
.mygSelect ul .active { display: block; }
.mygSelect li { list-style: none; width: 100%; }
.mygSelect li:first-child a { color: #000; }
.mygSelect a
{
    transition: all 0.4s;
    font-size: 1.1em;
    color: var(--color-muted);
    position: relative;
    width: 100%;
}
.mygSelect a:after
{
    position: absolute;
    content: "";
    height: 0.1875rem;
    width: 0;
    left: 0;
    background: #b066ff;
    bottom: 0;
    transition: all 0.4s ease-out;
}
.mygSelect a:hover { cursor: pointer; color: #000; }
.mygSelect a:hover:after { width: 100%; }
.placeholder
{
    border-bottom: 4px solid var(--color-primary);
    cursor: pointer;
    font-size: 1.4em;
    font-weight: bold;
}
.placeholder:hover { color: #888; }

/* =====================
   More Utilities
   ===================== */
.both { clear: both; }
.hiddenPanel { display: none; }
.noDecoration { text-decoration: none; }
.noDecoration:hover { text-decoration: none; }
.pageActionHeader
{
    border: 1px solid #ddd;
    background-color: #fff;
    padding: 0.5rem;
    margin-bottom: 0.5rem;
}
.icon
{
    filter: invert(27%) sepia(75%) saturate(1183%) hue-rotate(195deg) brightness(88%) contrast(97%);
}
.icon:hover
{
    cursor: pointer;
    height: 2rem;
    transition: .5s;
    width: 2rem;
}
.paginationBlock div
{
    display: flex;
    align-items: center;
    gap: 1.25rem;
}
.paginationBlock div span
{
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* =====================
   Help Prompt
   ===================== */
.mpHelpPrompt
{
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin: 0;
    padding: 0.5rem;
    border: 2px solid var(--color-primary);
    background-color: var(--color-primary);
    border-radius: 0.5rem;
    text-decoration: none;
    width: 8.75rem;
    height: 2.5rem;
    overflow: hidden;
    cursor: pointer;
}
.mpHelpPrompt img { height: 2rem; width: 2rem; }
.mpHelpPrompt span { font-weight: bold; font-size: 1.2em; color: #fff; }
.mpHelpPrompt:hover
{
    background-color: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    transform: scale(1.05);
    transition: .3s;
}
/* =====================
   "Need Help" Dialog
   ===================== */
.nhDialogBody
{
    padding: 0;
    min-width: 28rem;
    max-width: 38rem;
}
.nhOptionList
{
    list-style: none;
    margin: 0;
    padding: 0;
}
.nhOption
{
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--color-light-alt);
    transition: background 0.15s;
}
.nhOption:last-child { border-bottom: none; }
.nhOptionClickable { cursor: pointer; }
.nhOptionClickable:hover { background: var(--color-light); }
.nhOptionIcon
{
    flex-shrink: 0;
    width: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.nhOptionIcon img
{
    filter: brightness(0) saturate(100%) invert(63%) sepia(58%) saturate(500%) hue-rotate(120deg) brightness(95%);
    /* renders roughly as the teal primary color */
}
.nhOptionContent { flex: 1; min-width: 0; }
.nhOptionTitle
{
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--color-text);
    margin-bottom: 0.2rem;
}
.nhOptionPhone
{
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 0.2rem;
}
.nhOptionDesc
{
    font-size: 0.82rem;
    color: var(--color-text-muted);
    line-height: 1.5;
}
.nhOptionAvail
{
    flex-shrink: 0;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-primary);
    background: rgba(48,198,155,0.12);
    padding: 0.2rem 0.625rem;
    border-radius: 2rem;
    white-space: nowrap;
}
.nhOptionAvailOff
{
    color: var(--color-muted);
    background: var(--color-light-alt);
}
.nhOptionOffHours .nhOptionTitle,
.nhOptionOffHours .nhOptionDesc { color: var(--color-muted); }
.nhOptionLinks .nhOptionDesc a { display: block; margin-bottom: 0.2rem; }

/* =====================
   Field Groups
   ===================== */
.mygFieldGroup { margin-bottom: 0.5rem; }
.mygFieldLabel { font-size: 1.1em; font-weight: bold; }
.mygFieldValue { display: block; margin-left: 0.9375rem; }

/* =====================
   Navigation Misc
   ===================== */
.navMenuOpen, .navMenuClose
{
    cursor: pointer;
    display: block;
    font-weight: bold;
    color: rgba(255,255,255,0.7);
    font-size: 1.7em;
    padding-top: 0.9375rem;
    padding-bottom: 0.9375rem;
}
.img-link, .img-link img
{
    text-decoration: none !important;
    border: none !important;
    outline: none;
    border-width: 0;
    outline-width: 0;
}

/* =====================
   Tips Panel
   ===================== */
.tips.mygreenwaytips
{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: auto;
    z-index: 999;
    background-color: #fff;
    border: 1px solid #aaa;
    box-shadow: 0 -0.25rem 1rem rgba(0,0,0,0.15);
    overflow: hidden;
    transition: height 0.5s ease;
}

/* =====================
   Segmented Radio (mygRadio)
   ===================== */
ol.mygRadio { margin: 0; padding: 0; border: 0; }
ol.mygRadio li
{
    cursor: pointer;
    border: 2px solid var(--color-primary);
    background-color: #fff;
    color: var(--color-primary);
    display: inline-block;
    margin: 0;
    padding: 0.9375rem;
}
ol.mygRadio li.selected
{
    border: 2px solid var(--color-primary);
    background-color: var(--color-primary);
    color: #fff;
}
ol.mygRadio li:first-child { border-radius: 0.75rem 0 0 0.75rem; }
ol.mygRadio li:last-child { border-radius: 0 0.75rem 0.75rem 0; }

/* =====================
   Advanced Search Table
   ===================== */
.advancedTable
{
    border-collapse: collapse;
    width: 100%;
}
.advancedTable th
{
    background-color: var(--color-dark);
    color: #fff;
    padding: 0.5rem 0.75rem;
    text-align: left;
}
.advancedTable td
{
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #eee;
    vertical-align: top;
}


/* Home page layout */
.homePageMain
{
	display:flex;
	justify-content:space-evenly;
}
.portletContainer
{
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 1.25rem;
	padding: 0;
}
/* Each column stacks portlets vertically with matching gap */
.column
{
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	flex: 1;
	min-width: 0;
}
.toolAlley
{
	width:60px;
	text-align:center;
}
.portlet-header
{
	background-color: var(--color-portlet-header);
	color: #fff;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	border-radius: 0.5rem 0.5rem 0 0;
	margin-bottom: 0;
	padding: 0.625rem 0.875rem;
	position: relative;
	display: flex;
	align-items: center;
}
.portlet-toggle
{
	margin-right:8px;
	color:#fff;
	cursor:pointer;
	font-size:1em;
	user-select:none;
	min-width:16px;
	display:inline-block;
}
.portlet
{
	border: none;
	border-radius: 0.5rem;
	box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,0.08), 0 0.0625rem 0.125rem rgba(0,0,0,0.06);
	background: #fff;
	margin-bottom: 0;
	overflow: hidden;
}
.portlet-content
{
	padding: 1rem;
}
.portlet-content-minimized
{
	display: none;
	padding: 0;
}
/* =====================
   Portlet Content Styles
   ===================== */

/* Common portlet utilities */
.portletCentered { text-align: center; }
.portletEmpty { text-align: center; color: #aaa; }

/* Modern home portlets */
.feedPortlet,
.calendarPortlet,
.greenpayPortlet,
.knowledgePortlet,
.newsPortlet,
.systemStatusPortlet
{
    border: 1px solid #e3e9e7;
    box-shadow: 0 0.75rem 1.75rem rgba(27,37,56,0.08), 0 0.125rem 0.375rem rgba(27,37,56,0.06);
}
.feedHeader,
.calendarHeader,
.greenpayHeader,
.knowledgeHeader,
.newsHeader,
.systemStatusHeader
{
    background: linear-gradient(135deg, var(--color-dark) 0%, #2d3d59 100%);
    padding: 0.75rem 1rem;
}
.feedHeaderText,
.calendarHeaderText,
.greenpayHeaderText,
.knowledgeHeaderText,
.newsHeaderText,
.systemStatusHeaderText
{
    font-size: 0.95rem;
    letter-spacing: 0.04em;
}
.feedContent,
.calendarContent,
.greenpayContent,
.knowledgeContent,
.newsContent,
.systemStatusContent
{
    background: linear-gradient(180deg, #fbfcfb 0%, #fff 45%);
    padding: 1rem;
}
.feedPortlet .portletEmpty,
.knowledgePortlet .portletEmpty,
.newsPortlet .portletEmpty
{
    background: #f7faf8;
    border: 1px dashed #d8e3df;
    border-radius: 0.5rem;
    color: var(--color-muted);
    padding: 1.25rem;
}

/* PortletCalendar */
.portletCalendarSurface
{
    background: #fff;
    border: 1px solid #e4e9ec;
    border-radius: 0.5rem;
    padding: 0.75rem;
}
.portletEventTitle
{
    color: var(--color-text);
    font-size: 1.2rem;
    font-weight: 800;
    margin-bottom: 0.35rem;
}
.calendarPortlet .fc .fc-toolbar-title
{
    color: var(--color-text);
    font-size: 1.1rem;
    font-weight: 800;
}
.calendarPortlet .fc .fc-col-header-cell-cushion,
.calendarPortlet .fc .fc-daygrid-day-number
{
    color: var(--color-text);
    font-size: 0.82rem;
    text-decoration: none;
}
.calendarPortlet .fc-theme-standard td,
.calendarPortlet .fc-theme-standard th,
.calendarPortlet .fc-theme-standard .fc-scrollgrid
{
    border-color: #e8ecef;
}
.calendarPortlet .fc-event,
.calendarPortlet .fc-event-dot
{
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary-hover) !important;
    border-radius: 0.375rem;
    color: #fff !important;
}
.calendarPortlet .fc .fc-button-primary
{
    background-color: var(--color-dark) !important;
    border-color: var(--color-dark) !important;
    border-radius: 0.375rem !important;
    box-shadow: none !important;
    color: #fff !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    padding: 0.35rem 0.6rem !important;
}
.calendarPortlet .fc .fc-button-primary:hover
{
    background-color: var(--color-dark-hover) !important;
    border-color: var(--color-dark-hover) !important;
}
.calendarPortlet .fc .fc-button-primary:disabled
{
    background-color: var(--color-muted-light) !important;
    border-color: var(--color-muted-light) !important;
}

/* PortletFeed */
.portletToolbar
{
    align-items: center;
    background: #f7faf8;
    border: 1px solid #e0e8e3;
    border-radius: 0.5rem;
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.875rem;
    padding: 0.6rem 0.75rem;
}
.feedPortlet .mygSelect
{
    margin-left: 0;
}
.feedPortlet .placeholder
{
    background: #fff;
    border: 1px solid #dce5e1;
    border-radius: 999px;
    color: var(--color-text);
    display: inline-flex;
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1;
    padding: 0.55rem 2rem 0.55rem 0.85rem;
    position: relative;
}
.feedPortlet .placeholder::after
{
    color: var(--color-primary);
    content: '\25BE';
    font-size: 0.75rem;
    position: absolute;
    right: 0.8rem;
    top: 50%;
    transform: translateY(-50%);
}
.feedPortlet .mygSelect ul
{
    background: #fff;
    border: 1px solid #dfe7e4;
    border-radius: 0.5rem;
    box-shadow: 0 0.75rem 1.75rem rgba(27,37,56,0.14);
    left: 0;
    padding: 0.35rem;
    top: 2.75rem;
}
.feedPortlet .mygSelect a
{
    border-radius: 0.375rem;
    color: var(--color-text);
    display: block;
    font-size: 0.9rem;
    padding: 0.5rem 0.65rem;
}
.feedPortlet .mygSelect a:hover
{
    background: #effbf7;
    color: var(--color-primary-hover);
}
.feedPortlet .mygSelect a::after
{
    display: none;
}
.feedPreferencesButton
{
    align-items: center;
    background: #fff;
    border: 1px solid #dce5e1;
    border-radius: 999px;
    display: inline-flex;
    height: 2.25rem;
    justify-content: center;
    transition: background 0.15s, border-color 0.15s, transform 0.15s;
    width: 2.25rem;
}
.feedPreferencesButton:hover
{
    background: #effbf7;
    border-color: var(--color-primary);
    transform: translateY(-1px);
}
.feedPreferencesButton .hamburger,
.feedPreferencesButton span.hamburger
{
    font-size: 1.5rem;
    height: 2.25rem;
    width: 2.25rem;
}
.feedPreferencesButton .hamburger:hover
{
    transform: none;
}
.homeFeedItem
{
    align-items: flex-start;
    background: #fff;
    border: 1px solid #e8ecef;
    border-radius: 0.5rem;
    box-shadow: 0 0.125rem 0.375rem rgba(27,37,56,0.04);
    display: flex;
    gap: 0.875rem;
    margin-bottom: 0.75rem;
    padding: 0.875rem;
}
.portletFeedList { margin-top: 0.25rem; padding: 0; }
.portletFeedItem { margin-bottom: 0; }
.portletFeedPhoto
{
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px #dfe8e4;
    flex-shrink: 0;
    object-fit: cover;
}
.portletFeedContent
{
    color: var(--color-text);
    flex-grow: 4;
    line-height: 1.45;
    min-width: 0;
}
.portletFeedContent strong
{
    font-weight: 800;
}
.portletFeedTimestamp
{
    color: var(--color-muted);
    display: inline-block;
    font-size: 0.8rem;
    margin-top: 0.25rem;
}
.portletFeedMessage
{
    background-color: #f7faf8;
    border: 1px solid #dfe8e4;
    border-left: 4px solid var(--color-primary);
    border-radius: 0.375rem;
    margin-top: 0.6rem;
    padding: 0.65rem 0.75rem;
    word-wrap: break-word;
}
.portletFeedMoreWrap { margin-top: 0.5rem; }
.portletFeedShowMoreBtn
{
    background-color: #fff;
    border: 1px solid var(--color-primary);
    border-radius: 999px;
    color: var(--color-primary);
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 800;
    padding: 0.3rem 0.65rem;
}
.portletFeedShowMoreBtn:hover
{
    background: #effbf7;
    color: var(--color-primary-hover);
    text-decoration: none;
}
.portletFeedDivider
{
    border: 0;
    border-top: 1px solid #e8ecef;
    margin: 0.75rem 0;
    width: 100%;
}
.portletFeedActions
{
    align-items: center;
    display: flex;
    flex-shrink: 0;
    gap: 0.35rem;
}
.portletFeedRemoveIcon
{
    background: #f7faf8;
    border: 1px solid #dfe8e4;
    border-radius: 999px;
    cursor: pointer;
    height: 2rem;
    padding: 0.4rem;
    transition: background 0.15s, border-color 0.15s, transform 0.15s;
    width: 2rem;
}
.portletFeedRemoveIcon:hover
{
    background: #fff4f1;
    border-color: #fc7a5f;
    transform: translateY(-1px);
}
.portletFeedDialogFooter
{
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-top: 0.75rem;
}
.portletFeedDialogActions { text-align: right; margin-top: 0.75rem; }

/* PortletGreenpay */
.portletFinancialSummary
{
    background: #fff;
    border: 1px solid #e4e9ec;
    border-collapse: separate !important;
    border-radius: 0.5rem;
    border-spacing: 0 !important;
    margin-bottom: 0.875rem;
    overflow: hidden;
    width: 100%;
}
.portletFinancialSummary td
{
    border-bottom: 1px solid #eef2f4;
    font-size: 0.95rem;
    padding: 0.75rem;
}
.portletFinancialSummary tr:first-child td
{
    background: linear-gradient(135deg, #f7faf8 0%, #effbf7 100%);
    padding-bottom: 1rem;
    padding-top: 1rem;
}
.portletFinancialSummary tr:last-child td { border-bottom: none; }
.portletFinancialLabel
{
    color: var(--color-muted);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
}
.portletFinancialValue
{
    color: var(--color-text);
    font-weight: 600;
    text-align: right;
}
.portletFinancialBalance
{
    color: var(--color-text);
    font-size: 1.55rem;
    font-weight: 800;
}
.portletFinancialValue a .portletFinancialBalance
{
    color: var(--color-primary-hover);
}
.portletFinancialAgingTable
{
    border-collapse: separate !important;
    border-spacing: 0.35rem !important;
    margin: 0 -0.35rem;
    table-layout: fixed;
    width: calc(100% + 0.7rem);
}
.portletAgingBucket30,
.portletAgingBucket60,
.portletAgingBucket61,
.portletAgingBucket91
{
    border-radius: 0.5rem 0.5rem 0 0;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    padding: 0.5rem 0.25rem;
    text-align: center;
    width: 25%;
}
.portletAgingBucket30  { background-color: #dff7ee; color: #10694f; }
.portletAgingBucket60  { background-color: #fff2c8; color: #765307; }
.portletAgingBucket61  { background-color: #ffe5c2; color: #7d4700; }
.portletAgingBucket91  { background-color: #ffe1dc; color: #9d2d18; }
.portletAgingCell
{
    background: #fff;
    border: 1px solid #e4e9ec;
    border-radius: 0 0 0.5rem 0.5rem;
    color: var(--color-text);
    font-size: 0.86rem;
    font-weight: 700;
    padding: 0.65rem 0.25rem;
    text-align: center;
}

/* PortletKnowledge */
.portletKnowledgeTable
{
    border-collapse: separate !important;
    border-spacing: 0 0.5rem !important;
    font-size: 0.95rem;
    width: 100%;
}
.portletKnowledgeTable th
{
    border-bottom: 0;
    color: var(--color-muted);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    padding: 0.25rem 0.75rem;
    text-align: left;
    text-transform: uppercase;
}
.portletKnowledgeTable td
{
    background: #fff;
    border-bottom: 1px solid #e8ecef;
    border-top: 1px solid #eef2f4;
    padding: 0.75rem;
    vertical-align: middle;
}
.portletKnowledgeTable tr td:first-child
{
    border-bottom-left-radius: 0.5rem;
    border-left: 1px solid #eef2f4;
    border-top-left-radius: 0.5rem;
}
.portletKnowledgeTable tr td:last-child
{
    border-bottom-right-radius: 0.5rem;
    border-right: 1px solid #eef2f4;
    border-top-right-radius: 0.5rem;
}
.portletKnowledgeTable tr:hover td
{
    background-color: #f7faf8;
}
.portletKnowledgeTable td a
{
    color: var(--color-text);
    font-weight: 700;
}
.portletKnowledgeTable td a:hover
{
    color: var(--color-primary-hover);
    text-decoration: none;
}
.portletKnowledgeViews
{
    color: var(--color-muted);
    font-size: 0.85rem;
    font-weight: 800;
    text-align: right;
    white-space: nowrap;
    width: 4rem;
}
/* Raise specificity so th.portletKnowledgeViews beats .portletKnowledgeTable th */
.portletKnowledgeTable th.portletKnowledgeViews { text-align: right; }
.portletKnowledgeShowMore
{
    align-items: center;
    display: flex;
    font-size: 0.9rem;
    justify-content: center;
    margin-top: 0.75rem;
}
.portletKnowledgeShowMore a
{
    background: #fff;
    border: 1px solid var(--color-primary);
    border-radius: 999px;
    color: var(--color-primary);
    font-weight: 800;
    padding: 0.4rem 0.85rem;
}
.portletKnowledgeShowMore a:hover
{
    background: #effbf7;
    color: var(--color-primary-hover);
    text-decoration: none;
}

@media (max-width: 48rem)
{
    .calendarPortlet .fc .fc-toolbar
    {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.5rem;
    }

    .portletToolbar
    {
        align-items: stretch;
        gap: 0.75rem;
    }
}

@media (max-width: 34rem)
{
    .feedContent,
    .calendarContent,
    .greenpayContent,
    .knowledgeContent,
    .newsContent
    {
        padding: 0.875rem;
    }

    .homeFeedItem
    {
        gap: 0.65rem;
        padding: 0.75rem;
    }

    .portletFeedPhoto
    {
        height: 3rem !important;
        width: 3rem !important;
    }

    .portletFinancialSummary td
    {
        display: block;
        padding: 0.55rem 0.75rem;
        text-align: left;
    }

    .portletFinancialValue
    {
        padding-top: 0 !important;
        text-align: left;
    }
}

/* PortletNews */
.portletNewsAccordion
{
    display: grid;
    gap: 0.75rem;
}
.postedDateTime,
.postedDateTime span
{
    color: var(--color-muted);
    font-size: 0.8rem;
}
.newsItem
{
    background: #fff;
    border: 1px solid #e8ecef;
    border-radius: 0.5rem;
    box-shadow: 0 0.125rem 0.375rem rgba(27,37,56,0.04);
    margin-bottom: 0;
    overflow: hidden;
}
.newsItem summary
{
    align-items: center;
    color: var(--color-text);
    cursor: pointer;
    display: flex;
    font-weight: 800;
    gap: 0.65rem;
    line-height: 1.35;
    list-style: none;
    padding: 0.875rem;
    transition: background 0.15s, color 0.15s;
}
.newsItem summary:hover
{
    background-color: #f7faf8;
    color: var(--color-primary-hover);
}
.newsItemToggle
{
    align-items: center;
    background: #effbf7;
    border: 1px solid #d4eee6;
    border-radius: 999px;
    color: var(--color-primary-hover);
    display: inline-flex;
    flex-shrink: 0;
    font-size: 0.75rem;
    height: 1.5rem;
    justify-content: center;
    transition: transform 0.2s ease;
    width: 1.5rem;
}
details[open] > summary .newsItemToggle { transform: rotate(90deg); }
details > summary::-webkit-details-marker { display: none; }
.newsItemNewBadge
{
    align-items: center;
    background: #fff2c8;
    border: 1px solid #f3d77d;
    border-radius: 999px;
    color: #765307;
    display: inline-flex;
    font-size: 0.75rem;
    font-weight: 800;
    height: 1.5rem;
    justify-content: center;
    margin-left: auto;
    min-width: 1.5rem;
    padding: 0 0.4rem;
}
.newsItemBody
{
    border-top: 1px solid #eef2f4;
    color: var(--color-text);
    line-height: 1.55;
    padding: 0.875rem;
}
.newsItemDate
{
    margin: 0 0 0.75rem;
    text-align: left;
}
@keyframes blinker { 50% { opacity: 0; } }

/* PortletSystemStatus */
.systemStatusTableWrap
{
    margin: -0.25rem 0;
}
/* Health indicator dots */
.healthGreen, .healthRed, .healthYellow
{
    border-radius: 50%;
    height: 1rem;
    width: 1rem;
    flex-shrink: 0;
}
.healthGreen  { background-color: #30c69b; border: 2px solid #15936f; box-shadow: 0 0 0 0.25rem rgba(48,198,155,0.14); }
.healthRed    { background-color: #fc7a5f; border: 2px solid #d94424; box-shadow: 0 0 0 0.25rem rgba(252,122,95,0.14); }
.healthYellow { background-color: #f8da50; border: 2px solid #c99d00; box-shadow: 0 0 0 0.25rem rgba(248,218,80,0.2); }
/* Status text */
.portletStatusOngoing { color: var(--color-danger); font-weight: 600; }
.portletStatusResolved { color: var(--color-success); font-weight: 600; }
/* Main table */
.portletStatusTable
{
    width: 100%;
    border-collapse: separate !important;
    border-spacing: 0 0.5rem !important;
}
.portletStatusTable th
{
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-muted);
    border-bottom: 0;
    padding: 0.25rem 0.75rem;
    text-align: left;
}
.portletStatusTable td
{
    background: #fff;
    border-bottom: 1px solid #e8ecef;
    border-top: 1px solid #eef2f4;
    padding: 0.75rem;
    vertical-align: middle;
}
.portletStatusTable tr td:first-child
{
    border-left: 1px solid #eef2f4;
    border-bottom-left-radius: 0.5rem;
    border-top-left-radius: 0.5rem;
}
.portletStatusTable tr td:last-child
{
    border-bottom-right-radius: 0.5rem;
    border-right: 1px solid #eef2f4;
    border-top-right-radius: 0.5rem;
}
.portletStatusTable tr:last-child td { border-bottom: 1px solid #e8ecef; }
.portletStatusTh { border-bottom: 0; }
.portletStatusThCenter { border-bottom: 0; text-align: center; }
/* Raise specificity so th.portletStatusThCenter beats .portletStatusTable th */
.portletStatusTable th.portletStatusThCenter { text-align: center; }
.portletStatusWatchCol
{
    text-align: center;
    width: 2.75rem;
}
.systemStatusWatchIcon
{
    background: #f4f8f6;
    border: 1px solid #dce5e1;
    border-radius: 999px;
    height: 2rem;
    padding: 0.35rem;
    transition: background 0.15s, border-color 0.15s, transform 0.15s;
    width: 2rem;
}
.systemStatusWatchIcon:hover
{
    background: #effbf7;
    border-color: var(--color-primary);
    transform: translateY(-1px);
}
.portletStatusSystemCell
{
    color: var(--color-text);
    font-weight: 600;
}
.portletStatusLink
{
    color: var(--color-text);
    cursor: pointer;
    font-weight: 700;
    text-decoration: none;
}
.portletStatusLink:hover { color: var(--color-primary-hover); text-decoration: none; }
.portletStatusCenter { text-align: center; }
.portletStatusCenterFlex { display: flex; align-items: center; justify-content: center; }
.portletStatusDetail
{
    background: #f7faf8;
    border: 1px solid #dfe8e4;
    border-radius: 0.5rem;
    color: var(--color-text);
    display: grid;
    gap: 0.75rem;
    font-size: 0.9rem;
    margin: 0.25rem 0 0.5rem;
    padding: 1rem;
}
.portletStatusDetail > div
{
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.portletStatusDetail label
{
    color: #41504c;
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0;
}
.portletStatusDetail input[type="checkbox"]
{
    accent-color: var(--color-primary);
    height: 1rem;
    width: 1rem;
}
.portletStatusDetail .mygButton
{
    justify-content: center;
    margin: 0.25rem 0 0 !important;
    width: fit-content;
}
.portletStatusOutage
{
    background: #fff;
    border: 1px solid #e4e9ec;
    border-radius: 0.5rem;
    margin: 0.25rem 0 0.5rem;
    padding: 0.75rem;
}
.portletStatusOutageDivider { border-bottom: 0; padding-bottom: 0; }
.portletStatusSaveLink
{
    color: var(--color-primary);
    font-size: 0.9rem;
    font-weight: 700;
    padding-left: 0.5rem;
}
/* Outage detail table inside the expanded row */
.portletOutageTable
{
    border-collapse: separate !important;
    border-spacing: 0 !important;
    font-size: 0.9rem;
    width: 100%;
}
.portletOutageTable th
{
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-muted);
    border-bottom: 1px solid #e1e7eb;
    padding: 0.5rem 0.625rem;
    text-align: left;
}
.portletOutageTable td
{
    border-bottom: 1px solid #eef2f4;
    color: var(--color-text);
    padding: 0.625rem;
    vertical-align: top;
}
.portletOutageTable tr:last-child td { border-bottom: none; }
/* Outage detail modal */
.portletOutageModal { background-color: #fff; color: var(--color-text); }
.portletOutageTitle
{
    color: var(--color-text);
    font-size: 1.2rem;
    font-weight: 800;
    margin-bottom: 0.75rem;
    text-align: center;
}
.portletOutageHeader
{
    background-color: #f7faf8;
    border: 1px solid #e0e8e3;
    border-radius: 0.5rem;
    padding: 0.75rem;
    margin-top: 0.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.85rem;
}
.portletOutageHeaderLeft { font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-muted); }
.portletOutageHeaderRight { text-align: right; }
.portletOutageBody { padding: 0.75rem 0; }
.portletOutageSection { margin-top: 0.75rem; }
.portletOutageSectionTitle { font-size: 0.95rem; font-weight: 700; margin-bottom: 0.25rem; color: var(--color-text); }
.portletOutageFooter
{
    margin-top: 0.75rem;
    color: var(--color-muted);
    border-top: 1px solid var(--color-light-alt);
    padding-top: 0.75rem;
    font-size: 0.82rem;
}

/* =====================
   Navigation Loading Spinners
   ===================== */
img[id^="loadPage-"]
{
    display: none;
}

@keyframes mpNavSpin
{
    to { transform: rotate(360deg); }
}
li.mpNavLoading,
.mpNavSubMenuItem.mpNavLoading
{
    position: relative;
    pointer-events: none;
}
li.mpNavLoading::after,
.mpNavSubMenuItem.mpNavLoading::after
{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.125rem;
    height: 1.125rem;
    margin: -0.5625rem 0 0 -0.5625rem;
    border: 2px solid rgba(255,255,255,0.25);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: mpNavSpin 0.7s linear infinite;
    z-index: 10;
}

/* Messaging badge position wrappers */
.mpMsgBadgeWrapper
{
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.mpMsgBadgeAnchor
{
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(30%, -30%);
    z-index: 101;
    pointer-events: none;
}

/* =====================
   Search Bar
   ===================== */
#searchControlGroup
{
    display: flex;
    align-items: center;
}
.mpSearchWrap
{
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 2rem;
    padding: 0.25rem 0.25rem 0.25rem 1rem;
    gap: 0.25rem;
    transition: background 0.2s, border-color 0.2s;
    width: 100%;
    max-width: 28rem;
}
.mpSearchWrap:focus-within
{
    background: rgba(255,255,255,0.16);
    border-color: rgba(255,255,255,0.45);
}
#searchPattern
{
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-size: 0.9rem;
    padding: 0.25rem 0;
    min-width: 0;
}
#searchPattern::placeholder { color: rgba(255,255,255,0.5); }
.mpSearchBtn
{
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: none;
    background: var(--color-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.2s;
}
.mpSearchBtn:hover { background: #25aa83; }
.mpSearchBtnIcon { filter: brightness(0) invert(1); }

/* Content-loading / waiting overlay — thin progress bar */
#mpPageContentWaiting { display: none; }
.mpSearchProgress
{
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, var(--color-primary) 40%, var(--color-primary-hover) 60%, transparent 100%);
    background-size: 200% 100%;
    animation: mpSearchSweep 1.2s linear infinite;
}
@keyframes mpSearchSweep
{
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

/* Search button spinner (shown while search is running) */
.mpSearchBtnSpinner
{
    display: none;
    width: 1.1rem;
    height: 1.1rem;
    border: 2px solid rgba(255,255,255,0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: mpSpin 0.65s linear infinite;
}
@keyframes mpSpin { to { transform: rotate(360deg); } }

/* =====================
   Profile / User Menu
   ===================== */
.mpProfileRow
{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 1.25rem;
}
.mpProfilePhoto
{
    border: 2px solid rgba(255,255,255,0.6);
    border-radius: 50%;
    cursor: pointer;
    transition: border-color 0.2s;
}
.mpProfilePhoto:hover { border-color: #fff; }
.mpProfileIcon
{
    filter: brightness(0) invert(1);
    cursor: pointer;
    opacity: 0.85;
    transition: opacity 0.2s;
}
.mpProfileIcon:hover { opacity: 1; }
.mpLogoutBtn
{
    background: transparent;
    border: 1px solid rgba(255,255,255,0.45);
    color: rgba(255,255,255,0.85);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 0.35rem 0.875rem;
    border-radius: 2rem;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    white-space: nowrap;
}
.mpLogoutBtn:hover
{
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.8);
    color: #fff;
}

/* =====================
   Page Notices
   ===================== */
.mpPageNotice
{
    border: 2px solid var(--color-danger);
    padding: 0.75rem;
    margin-bottom: 0.75rem;
    margin-top: 0.75rem;
    background-color: #fceded;
}
.mpPageNoticeTitle
{
    font-size: 1.5em;
    font-weight: bold;
    color: var(--color-danger);
}

/* Accounting-alert dialog body paragraphs */
#accountingAlert .dialog-body p
{
    font-size: 1.2em;
    color: var(--color-danger);
}

/* Need Help dialog */
.mpNeedHelpIntro
{
    margin-top: 0.5rem;
    font-size: 1.4em;
    color: #3f88f7;
}

/* Support option columns (equal 3-column layout) */
.mpSupportCol { width: 33.33%; }

/* =====================
   Urgent Messages Dialog
   ===================== */
#urgentMessagesPanel { min-width: 22rem; max-width: 30rem; }
.umDialogHeader { background: #b71c1c !important; }

.umCard
{
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.5rem 0 1rem;
}
.umIconArea
{
    position: relative;
    flex-shrink: 0;
}
.umIconCircle
{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #fdecea;
    border: 2px solid #ef9a9a;
    display: flex;
    align-items: center;
    justify-content: center;
}
.umMailIcon
{
    filter: invert(17%) sepia(96%) saturate(2600%) hue-rotate(349deg) brightness(85%) contrast(90%);
}
.umUrgentPip
{
    position: absolute;
    top: -3px;
    right: -3px;
    width: 1.375rem;
    height: 1.375rem;
    background: #b71c1c;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.75rem;
    line-height: 1;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
.umTitle
{
    font-size: 1rem;
    font-weight: 700;
    color: #b71c1c;
    margin: 0 0 0.375rem;
}
.umBody
{
    font-size: 0.875rem;
    color: var(--color-text);
    margin: 0;
    line-height: 1.55;
}
.umContent { flex: 1; min-width: 0; }
.umActions
{
    display: flex;
    gap: 0.625rem;
    justify-content: flex-end;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-light-alt);
}
.umGoBtn
{
    display: inline-block;
    background: #c62828;
    color: #fff !important;
    padding: 0.5rem 1.25rem;
    border-radius: 0.35rem;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none !important;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
}
.umGoBtn:hover { background: #b71c1c; }
.umDismissBtn
{
    background: transparent;
    border: 1px solid var(--color-light-alt);
    color: var(--color-muted);
    padding: 0.5rem 1rem;
    border-radius: 0.35rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.umDismissBtn:hover
{
    background: var(--color-light);
    border-color: #bbb;
    color: var(--color-text);
}

/* =====================
   Tips Panel Components
   ===================== */
.mpTipHeader
{
    background-color: #3F88F7;
    height: 2.5em;
    padding: 0.75rem;
}
.mpTipHeaderTitle
{
    font-size: 1.5em;
    color: #fff;
    float: left;
}
.mpTipHeaderClose
{
    padding: 0.5rem;
    float: right;
}
.mpTipHeaderCloseBtn
{
    cursor: pointer;
    font-size: 1.2em;
    font-weight: bold;
    border: 1px solid #000;
    padding: 0.5rem;
    color: #fff;
    background-color: #999;
    border-radius: 0.3125rem;
}
.mpTipBody { padding: 0.5rem; }
.mpTipBodyTitle
{
    font-size: 1.1em;
    font-weight: bold;
}
.mpTipBodyContent { padding: 0.5rem; }
.mpTipArticleContainer
{
    height: 28.125rem;
    overflow: auto;
}
#fullArticle
{
    display: none;
    padding: 0.5rem;
}
.mpTipBody .mygButton { margin-top: 0.9375rem; }

/* =====================
   Field / value grid — reusable replacement for apex:pageBlockSection
   ===================== */
.fields-grid
{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.field
{
    display: flex;
    flex-direction: column;
    padding: 0.35rem 0;
    border-bottom: 1px solid #f0ede9;
    min-width: 0;
}
.field:last-child,
.field--full:last-child { border-bottom: none; }
.field--full
{
    grid-column: 1 / -1;
    border-bottom: 1px solid #f0ede9;
}
.field dt
{
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-muted, #60686e);
    margin: 0 0 0.1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.field dd
{
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-dark, #1b2538);
    word-break: break-word;
    line-height: 1.4;
}
/* Strip SFDC outputField decoration inside the grid */
.field dd .outputText,
.field dd span
{
    font-size: inherit;
    color: inherit;
}

/* =====================
   Utility / Debug
   ===================== */
#viewstatePanel { display: none; }

/* =====================
   gw- layout / form utilities
   (display grid, edit grid, photo upload, info boxes — shared across pages)
   ===================== */
.gw-wrapper
{
    max-width: 860px;
    margin: 1.5rem auto;
    padding: 0 1rem;
}

/* ── Card ── */
.gw-card
{
    background: #fff;
    border-radius: 0.625rem;
    box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,0.08), 0 0.0625rem 0.125rem rgba(0,0,0,0.05);
    overflow: hidden;
    margin-bottom: 1.25rem;
}
.gw-card-header
{
    background: var(--color-page-header);
    color: #fff;
    padding: 0.875rem 1.25rem;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}
.gw-card-body { padding: 1.5rem; }


/* ── Details column ── */
.gw-detail-col
{
    flex: 1 1 0;
    min-width: 0;
}

/* ── Field table (display grid) ── */
.gw-field-table
{
    width: 100%;
    border-collapse: collapse;
}
.gw-field-table tr + tr td { border-top: 1px solid var(--color-light-alt); }
.gw-field-table td
{
    padding: 0.55rem 0.5rem;
    font-size: 0.875rem;
    vertical-align: middle;
}
.gw-field-label
{
    color: var(--color-text-muted);
    font-weight: 600;
    white-space: nowrap;
    width: 42%;
}
.gw-field-value { color: var(--color-text); }

/* ── Action buttons row ── */
.gw-actions
{
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-light-alt);
}

/* ── Inline spinner ── */
.gw-spinner
{
    display: none;
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--color-light-dark);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: gwSpin 0.7s linear infinite;
    vertical-align: middle;
    margin-left: 0.4rem;
}
@keyframes gwSpin { to { transform: rotate(360deg); } }

/* ── Edit form rows (edit grid) ── */
.gw-edit-row
{
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-bottom: 0.875rem;
}
.gw-edit-row label
{
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-muted);
}
.gw-edit-row input,
.gw-edit-row select
{
    font-size: 0.875rem;
    border: 1px solid var(--color-light-dark);
    border-radius: 0.3125rem;
    padding: 0.4rem 0.6rem;
    width: 100%;
    box-sizing: border-box;
    color: var(--color-text);
    background: #fff;
    transition: border-color 0.15s;
}
.gw-edit-row input:focus,
.gw-edit-row select:focus
{
    outline: none;
    border-color: var(--color-primary);
}
.gw-edit-two-col
{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1rem;
}

/* ── Info / warning boxes ── */
.gw-info-box
{
    background: var(--color-light);
    border: 1px solid var(--color-light-dark);
    border-radius: 0.5rem;
    padding: 0.875rem 1rem;
    font-size: 0.875rem;
    line-height: 1.6;
    margin-top: 0.75rem;
    color: var(--color-text);
}
.gw-info-box p { margin: 0.4rem 0; }
.gw-warn-box
{
    background: #fff5f5;
    border: 1px solid #f4b8b8;
    border-radius: 0.4rem;
    padding: 0.6rem 0.875rem;
    color: #a30000;
    font-size: 0.85rem;
    margin: 0.75rem 0;
}

/* ── PDF links ── */
.gw-pdf-link
{
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.875rem;
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
}
.gw-pdf-link:hover { text-decoration: underline; color: var(--color-primary-hover); }
.gw-pdf-icon { width: 18px; height: 18px; vertical-align: middle; }

/* ── Responsive ── */
@media (max-width: 580px)
{
    .gw-profile-layout { flex-direction: column; align-items: stretch; }
    .gw-photo-col { flex: none; align-items: center; }
    .gw-edit-two-col { grid-template-columns: 1fr; }
}