/*
 * POMP multi-portal accessible theme override.
 *
 * Loaded only for non-POMP portals. The original Pretty in Pink / JLAW
 * palette is preserved for branding, while darker derived colors are used
 * for interactive controls and text so the UI remains comfortable to read.
 */

html.portal-themed {
    color-scheme: light;

    /*
     * PIPB and JLAW deliberately share the same readable text palette.
     * Define it again at the themed-html scope so legacy/page-level theme
     * variables can never leak Compression Care's blue-gray body text into
     * a tenant modal or screen.
     */
    --portal-text: #2f3437;
    --portal-muted-text: #5f6163;
}

/* -------------------------------------------------------------------------
 * Readability defaults
 * ---------------------------------------------------------------------- */
html.portal-themed body {
    color: #2f3437 !important;
    color: var(--portal-text, #2f3437) !important;
}

/*
 * Bootstrap modal/card/popover bodies inherit from several old POMP style
 * sheets. Pin their normal reading text to the tenant text palette. Semantic
 * alert/status components keep their own success/warning/danger colors.
 */
html.portal-themed body .modal-body,
html.portal-themed body .card-body,
html.portal-themed body .popover-body,
html.portal-themed body .dropdown-menu,
html.portal-themed body .list-group-item {
    color: #2f3437 !important;
    color: var(--portal-text, #2f3437) !important;
}

html.portal-themed body p,
html.portal-themed body label,
html.portal-themed body .form-group label,
html.portal-themed body .table tbody td,
html.portal-themed body table.dataTable tbody td,
html.portal-themed body .dataTables_info,
html.portal-themed body .small,
html.portal-themed body small {
    color: var(--portal-text);
}

html.portal-themed body .text-muted,
html.portal-themed body .form-text,
html.portal-themed body .dataTables_empty {
    color: #5f6163 !important;
    color: var(--portal-muted-text, #5f6163) !important;
}

html.portal-themed body .modal-body p,
html.portal-themed body .modal-body label,
html.portal-themed body .modal-body .form-group label,
html.portal-themed body .modal-body .modal-body-text,
html.portal-themed body .card-body p,
html.portal-themed body .card-body label {
    color: #2f3437 !important;
    color: var(--portal-text, #2f3437) !important;
}

html.portal-themed body .modal-body .text-muted,
html.portal-themed body .modal-body .form-text,
html.portal-themed body .modal-body small,
html.portal-themed body .card-body .text-muted,
html.portal-themed body .card-body .form-text,
html.portal-themed body .card-body small {
    color: #5f6163 !important;
    color: var(--portal-muted-text, #5f6163) !important;
}

/* -------------------------------------------------------------------------
 * Primary action surfaces
 * Never use the light brand pink behind white text.
 * ---------------------------------------------------------------------- */
html.portal-themed body .pink-gradient,
html.portal-themed body .btn-primary,
html.portal-themed body .bg-primary,
html.portal-themed body .badge-primary,
html.portal-themed body .input-group-text.pink-gradient,
html.portal-themed body button.pink-gradient,
html.portal-themed body a.pink-gradient {
    background: var(--portal-action) !important;
    background-color: var(--portal-action) !important;
    background-image: none !important;
    border-color: var(--portal-action) !important;
    color: var(--portal-white) !important;
    text-shadow: none !important;
}

html.portal-themed body .btn-primary:hover,
html.portal-themed body .btn-primary:focus,
html.portal-themed body .btn-primary:active,
html.portal-themed body .btn-primary.active,
html.portal-themed body button.pink-gradient:hover,
html.portal-themed body button.pink-gradient:focus,
html.portal-themed body button.pink-gradient:active,
html.portal-themed body a.pink-gradient:hover,
html.portal-themed body a.pink-gradient:focus,
html.portal-themed body #left-menu:hover,
html.portal-themed body #left-menu:focus {
    background: var(--portal-action-hover) !important;
    background-color: var(--portal-action-hover) !important;
    border-color: var(--portal-action-hover) !important;
    color: var(--portal-white) !important;
}

html.portal-themed body .btn-primary:focus,
html.portal-themed body button.pink-gradient:focus,
html.portal-themed body a.pink-gradient:focus {
    box-shadow: 0 0 0 .2rem var(--portal-focus-ring) !important;
}

/* Secondary Bootstrap buttons are also darkened so white text is readable. */
html.portal-themed body .btn-secondary {
    background: var(--portal-secondary-dark) !important;
    border-color: var(--portal-secondary-dark) !important;
    color: var(--portal-white) !important;
}

html.portal-themed body .btn-secondary:hover,
html.portal-themed body .btn-secondary:focus,
html.portal-themed body .btn-secondary:active {
    background: var(--portal-secondary-darker) !important;
    border-color: var(--portal-secondary-darker) !important;
    color: var(--portal-white) !important;
}

/* -------------------------------------------------------------------------
 * Brand / text helpers
 * ---------------------------------------------------------------------- */
html.portal-themed body .content-color-primary,
html.portal-themed body .header-color-primary,
html.portal-themed body .text-primary,
html.portal-themed body a.content-color-primary,
html.portal-themed body .page-title.content-color-primary {
    color: var(--portal-action) !important;
}

html.portal-themed body .content-color-secondary,
html.portal-themed body .header-color-secondary,
html.portal-themed body .text-secondary {
    color: var(--portal-secondary-dark) !important;
}

html.portal-themed body .border-primary {
    border-color: var(--portal-action) !important;
}

html.portal-themed body .btn-outline-primary {
    color: var(--portal-action) !important;
    border-color: var(--portal-action) !important;
    background: var(--portal-white) !important;
}

html.portal-themed body .btn-outline-primary:hover,
html.portal-themed body .btn-outline-primary:focus,
html.portal-themed body .btn-outline-primary:active {
    background: var(--portal-action) !important;
    border-color: var(--portal-action) !important;
    color: var(--portal-white) !important;
}

html.portal-themed body a:not(.btn):not(.nav-link):not(.dropdown-item) {
    color: var(--portal-action);
}

html.portal-themed body a:not(.btn):not(.nav-link):not(.dropdown-item):focus,
html.portal-themed body a:not(.btn):not(.nav-link):not(.dropdown-item):hover {
    color: var(--portal-action-hover) !important;
}

/* -------------------------------------------------------------------------
 * Header / navigation
 * ---------------------------------------------------------------------- */
html.portal-themed body .main-header .pink-gradient,
html.portal-themed body #left-menu {
    background: var(--portal-action) !important;
    background-image: none !important;
    border-color: var(--portal-action) !important;
    color: var(--portal-white) !important;
}

html.portal-themed body .sidebar.sidebar-left {
    background: var(--portal-secondary-dark) !important;
}

html.portal-themed body .sidebar.sidebar-left .nav-link,
html.portal-themed body .sidebar.sidebar-left .nav-link .icon,
html.portal-themed body .sidebar.sidebar-left .nav-link i {
    color: var(--portal-white) !important;
}

html.portal-themed body .sidebar.sidebar-left .nav-link:hover,
html.portal-themed body .sidebar.sidebar-left .nav-link:focus,
html.portal-themed body .sidebar.sidebar-left .nav-link.active,
html.portal-themed body .sidebar.sidebar-left .nav-item.active > .nav-link {
    background: var(--portal-light) !important;
    color: var(--portal-text) !important;
}

html.portal-themed body .sidebar.sidebar-left .nav-link:hover .icon,
html.portal-themed body .sidebar.sidebar-left .nav-link:focus .icon,
html.portal-themed body .sidebar.sidebar-left .nav-link.active .icon,
html.portal-themed body .sidebar.sidebar-left .nav-item.active > .nav-link .icon,
html.portal-themed body .sidebar.sidebar-left .nav-link:hover i,
html.portal-themed body .sidebar.sidebar-left .nav-link:focus i,
html.portal-themed body .sidebar.sidebar-left .nav-link.active i {
    color: var(--portal-text) !important;
}

/*
 * Sidebar active-state precision
 *
 * POMP's original navigation CSS can style every descendant link when a
 * top-level section is active. Keep the section highlighted, but only give
 * the exact current page link the selected child treatment.
 */
html.portal-themed body .sidebar.sidebar-left > .nav > .nav-item.active > .nav.flex-column .nav-link:not(.portal-current-link),
html.portal-themed body .sidebar.sidebar-left > .nav > .nav-item.portal-current-section > .nav.flex-column .nav-link:not(.portal-current-link) {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--portal-white) !important;
    box-shadow: none !important;
    font-weight: 400 !important;
}

html.portal-themed body .sidebar.sidebar-left > .nav > .nav-item.active > .nav.flex-column .nav-link:not(.portal-current-link) .icon,
html.portal-themed body .sidebar.sidebar-left > .nav > .nav-item.active > .nav.flex-column .nav-link:not(.portal-current-link) i,
html.portal-themed body .sidebar.sidebar-left > .nav > .nav-item.portal-current-section > .nav.flex-column .nav-link:not(.portal-current-link) .icon,
html.portal-themed body .sidebar.sidebar-left > .nav > .nav-item.portal-current-section > .nav.flex-column .nav-link:not(.portal-current-link) i {
    color: var(--portal-white) !important;
}

html.portal-themed body .sidebar.sidebar-left > .nav > .nav-item.portal-current-section > .nav-link {
    background: var(--portal-light) !important;
    background-color: var(--portal-light) !important;
    color: var(--portal-text) !important;
}

html.portal-themed body .sidebar.sidebar-left > .nav > .nav-item.portal-current-section > .nav-link .icon,
html.portal-themed body .sidebar.sidebar-left > .nav > .nav-item.portal-current-section > .nav-link i {
    color: var(--portal-text) !important;
}

html.portal-themed body .sidebar.sidebar-left > .nav > .nav-item .nav.flex-column .nav-link.portal-current-link {
    background: var(--portal-action) !important;
    background-color: var(--portal-action) !important;
    color: var(--portal-white) !important;
    font-weight: 600 !important;
    box-shadow: inset 3px 0 0 var(--portal-brand-primary) !important;
}

html.portal-themed body .sidebar.sidebar-left > .nav > .nav-item .nav.flex-column .nav-link.portal-current-link .icon,
html.portal-themed body .sidebar.sidebar-left > .nav > .nav-item .nav.flex-column .nav-link.portal-current-link i {
    color: var(--portal-white) !important;
}

html.portal-themed body .sidebar.sidebar-left > .nav > .nav-item .nav.flex-column .nav-link:not(.portal-current-link):hover,
html.portal-themed body .sidebar.sidebar-left > .nav > .nav-item .nav.flex-column .nav-link:not(.portal-current-link):focus {
    background: rgba(255,255,255,.10) !important;
    color: var(--portal-white) !important;
}

/* -------------------------------------------------------------------------
 * Tables / DataTables
 * ---------------------------------------------------------------------- */
html.portal-themed body table.dataTable thead th,
html.portal-themed body table.dataTable thead td,
html.portal-themed body .table thead th,
html.portal-themed body .action-table table thead th,
html.portal-themed body #unclaimedReferralsTable_wrapper table.dataTable thead th,
html.portal-themed body #claimedReferralsTable_wrapper table.dataTable thead th {
    background: var(--portal-action) !important;
    background-color: var(--portal-action) !important;
    border-color: var(--portal-action-hover) !important;
    color: var(--portal-white) !important;
    text-shadow: none !important;
}

html.portal-themed body .table tbody td,
html.portal-themed body table.dataTable tbody td {
    color: var(--portal-text) !important;
}

html.portal-themed body .table-striped tbody tr:nth-of-type(odd),
html.portal-themed body table.dataTable.stripe tbody tr.odd,
html.portal-themed body table.dataTable.display tbody tr.odd {
    background-color: var(--portal-white) !important;
}

html.portal-themed body .table-striped tbody tr:nth-of-type(even),
html.portal-themed body table.dataTable.stripe tbody tr.even,
html.portal-themed body table.dataTable.display tbody tr.even {
    background-color: var(--portal-row-alt) !important;
}

html.portal-themed body .table tbody tr:hover,
html.portal-themed body table.dataTable tbody tr:hover {
    background-color: var(--portal-row-hover) !important;
}

/* -------------------------------------------------------------------------
 * Pagination
 * ---------------------------------------------------------------------- */
html.portal-themed body .page-item.active .page-link,
html.portal-themed body .dataTables_wrapper .dataTables_paginate .paginate_button.current,
html.portal-themed body .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--portal-action) !important;
    border-color: var(--portal-action) !important;
    color: var(--portal-white) !important;
}

html.portal-themed body .page-link,
html.portal-themed body .dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--portal-action) !important;
}

html.portal-themed body .page-link:hover,
html.portal-themed body .page-link:focus,
html.portal-themed body .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    color: var(--portal-action-hover) !important;
    border-color: var(--portal-brand-primary) !important;
    background: var(--portal-soft-bg) !important;
}

/* -------------------------------------------------------------------------
 * Forms
 * ---------------------------------------------------------------------- */
html.portal-themed body .form-control,
html.portal-themed body input,
html.portal-themed body select,
html.portal-themed body textarea {
    color: var(--portal-text);
}

html.portal-themed body .form-control::placeholder,
html.portal-themed body input::placeholder,
html.portal-themed body textarea::placeholder {
    color: var(--portal-muted-text) !important;
    opacity: 1;
}

html.portal-themed body .form-control:focus,
html.portal-themed body input:focus,
html.portal-themed body select:focus,
html.portal-themed body textarea:focus {
    border-color: var(--portal-action) !important;
    box-shadow: 0 0 0 .2rem var(--portal-focus-ring) !important;
}

/* -------------------------------------------------------------------------
 * Chosen
 * ---------------------------------------------------------------------- */
html.portal-themed body .chosen-container .chosen-results li {
    color: var(--portal-text) !important;
}

html.portal-themed body .chosen-container .chosen-results li.highlighted {
    background: var(--portal-action) !important;
    color: var(--portal-white) !important;
}

html.portal-themed body .chosen-container-active .chosen-single,
html.portal-themed body .chosen-container-active .chosen-choices {
    border-color: var(--portal-action) !important;
    box-shadow: 0 0 0 .12rem var(--portal-focus-ring) !important;
}

/* -------------------------------------------------------------------------
 * Select2
 * ---------------------------------------------------------------------- */
html.portal-themed body .select2-container--default .select2-results__option {
    color: var(--portal-text);
}

html.portal-themed body .select2-container--default .select2-results__option--highlighted[aria-selected],
html.portal-themed body .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable,
html.portal-themed body .select2-container--default .select2-results__option--highlighted.select2-results__option--selected {
    background-color: var(--portal-action) !important;
    color: var(--portal-white) !important;
}

html.portal-themed body .select2-container--default .select2-results__option[aria-selected="true"],
html.portal-themed body .select2-container--default .select2-results__option--selected {
    background-color: var(--portal-light) !important;
    color: var(--portal-text) !important;
}

html.portal-themed body .select2-container--default.select2-container--focus .select2-selection--single,
html.portal-themed body .select2-container--default.select2-container--focus .select2-selection--multiple,
html.portal-themed body .select2-container--default.select2-container--open .select2-selection--single,
html.portal-themed body .select2-container--default.select2-container--open .select2-selection--multiple,
html.portal-themed body .select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--portal-action) !important;
    box-shadow: 0 0 0 .15rem var(--portal-focus-ring) !important;
}

html.portal-themed body .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--portal-action) !important;
    border-color: var(--portal-action) !important;
    color: var(--portal-white) !important;
}

/* -------------------------------------------------------------------------
 * Tabs / switches / common controls
 * ---------------------------------------------------------------------- */
html.portal-themed body .nav-pills .nav-link.active,
html.portal-themed body .nav-pills .show > .nav-link {
    background-color: var(--portal-action) !important;
    color: var(--portal-white) !important;
}

html.portal-themed body .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--portal-action) !important;
    border-color: var(--portal-action) !important;
}

/*
 * Legacy POMP switch component.
 *
 * my-style.css intentionally hides the literal label text (usually "Switch")
 * by making it transparent. The general tenant label color rule above would
 * otherwise make that accessibility/helper text visible on PIPB/JLAW. Keep
 * the clickable label box intact, hide only its text, and theme the checked
 * rail with the portal action color.
 */
html.portal-themed body .switch .switch-label {
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    text-indent: -150% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    font-size: 0 !important;
}

html.portal-themed body .switch .switch-input:checked + .switch-label::before {
    background-color: var(--portal-action) !important;
}

html.portal-themed body .switch .switch-input:focus + .switch-label::before {
    box-shadow: 0 0 0 .15rem var(--portal-focus-ring) !important;
}

/* -------------------------------------------------------------------------
 * New Patient Directory
 * ---------------------------------------------------------------------- */
html.portal-themed body .patient-directory-page {
    --patient-primary: var(--portal-action) !important;
    --patient-primary-dark: var(--portal-action-hover) !important;
    --patient-primary-soft: var(--portal-soft-bg) !important;
    --patient-border: var(--portal-border) !important;
}

html.portal-themed body .patient-add-btn,
html.portal-themed body .patient-search-btn {
    background: var(--portal-action) !important;
    border-color: var(--portal-action) !important;
    color: var(--portal-white) !important;
}

html.portal-themed body .patient-add-btn:hover,
html.portal-themed body .patient-add-btn:focus,
html.portal-themed body .patient-search-btn:hover,
html.portal-themed body .patient-search-btn:focus {
    background: var(--portal-action-hover) !important;
    border-color: var(--portal-action-hover) !important;
    color: var(--portal-white) !important;
}

/* -------------------------------------------------------------------------
 * New Dashboard
 * ---------------------------------------------------------------------- */
html.portal-themed body .referral-dashboard-page {
    --dashboard-primary: var(--portal-action) !important;
    --dashboard-primary-dark: var(--portal-action-hover) !important;
    --dashboard-primary-soft: var(--portal-soft-bg) !important;
    --dashboard-border: var(--portal-border) !important;
    --dashboard-row-alt: var(--portal-row-alt) !important;
    --dashboard-row-hover: var(--portal-row-hover) !important;
}

html.portal-themed body #unclaimedReferralsTable_wrapper table.dataTable thead th,
html.portal-themed body #claimedReferralsTable_wrapper table.dataTable thead th {
    background: var(--portal-action) !important;
    border-bottom-color: var(--portal-action-hover) !important;
    color: var(--portal-white) !important;
}

/* -------------------------------------------------------------------------
 * Referral Notes modern view
 * ---------------------------------------------------------------------- */
html.portal-themed body .referral-notes-title-icon,
html.portal-themed body .referral-notes-create-btn {
    background: var(--portal-action) !important;
    border-color: var(--portal-action) !important;
    color: var(--portal-white) !important;
}

html.portal-themed body .referral-notes-create-btn:hover,
html.portal-themed body .referral-notes-create-btn:focus {
    background: var(--portal-action-hover) !important;
    border-color: var(--portal-action-hover) !important;
    color: var(--portal-white) !important;
}

html.portal-themed body .referral-notes-page a:not(.btn),
html.portal-themed body .referral-notes-page .content-color-primary {
    color: var(--portal-action) !important;
}

/* Keep portal logos contained regardless of source image proportions. */
/* ==========================================================================
   PORTAL LOGOS
   Each tenant logo has a different aspect ratio, so size them independently.
   ========================================================================== */

html.portal-themed body .main-header .logo {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin-left: 10px;
    vertical-align: middle;
}

html.portal-themed body .main-header .logo img {
    display: block;
    max-width: none !important;
    max-height: none !important;
}


/* --------------------------------------------------------------------------
   JUST LIKE A WOMAN
   Wide transparent logo - allow it to use more horizontal space.
   -------------------------------------------------------------------------- */

html.portal-justlikeawoman body .main-header .logo img {
    width: auto !important;
    height: 64px !important;
    max-width: 245px !important;
    object-fit: contain !important;
}


/* --------------------------------------------------------------------------
   PRETTY IN PINK
   Source image is square with large white top/bottom margins.
   object-fit: cover lets us visually crop that empty space without editing
   the original PNG.
   -------------------------------------------------------------------------- */

html.portal-prettyinpink body .main-header .logo img {
    width: 100px !important;
    height: 68px !important;

    object-fit: cover !important;
    object-position: center center !important;

    border: 0 !important;
}


/* --------------------------------------------------------------------------
   AUTH / LOGIN PAGES
   There is more room here, so logos can be slightly larger.
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {

    html.portal-justlikeawoman body.sidebar-left-close .main-header .logo img {
        height: 72px !important;
        max-width: 275px !important;
    }

    html.portal-prettyinpink body.sidebar-left-close .main-header .logo img {
        width: 115px !important;
        height: 78px !important;
    }
}


/* --------------------------------------------------------------------------
   MOBILE
   Keep both logos visible without crowding header controls.
   -------------------------------------------------------------------------- */

@media (max-width: 767.98px) {

    html.portal-themed body .main-header .logo {
        margin-left: 6px;
    }

    html.portal-justlikeawoman body .main-header .logo img {
        height: 46px !important;
        max-width: 175px !important;
    }

    html.portal-prettyinpink body .main-header .logo img {
        width: 78px !important;
        height: 53px !important;
    }
}

/* ==========================================================================
 * MODERN CC SCREEN COMPATIBILITY
 *
 * Several newer POMP-only screens contain their own hard-coded dark-teal and
 * green palette. These overrides run ONLY when html.portal-themed is present,
 * so Compression Care remains pixel-for-pixel on its existing colors while
 * Pretty in Pink and Just Like a Woman receive the shared rose/pink theme.
 * ========================================================================== */

/* Product/search action colors */
html.portal-themed body .product-price-modern,
html.portal-themed body .price-value,
html.portal-themed body .text_green,
html.portal-themed body .iconBox,
html.portal-themed body .empty-products-icon .material-icons,
html.portal-themed body .search-modal-icon,
html.portal-themed body .search-modal-icon i,
html.portal-themed body .modern-tabs .nav-link.active {
    color: var(--portal-action) !important;
}

html.portal-themed body .product-price-box,
html.portal-themed body .iconBox,
html.portal-themed body .search-modal-icon,
html.portal-themed body .view-toggle.active {
    background: var(--portal-soft-bg) !important;
    border-color: var(--portal-border) !important;
}

html.portal-themed body .thumb-img.active,
html.portal-themed body .thumb-img:hover,
html.portal-themed body .modern-tabs .nav-link.active,
html.portal-themed body .search-modal-input:focus,
html.portal-themed body .product-config-form .form-control:focus,
html.portal-themed body .view-toggle.active {
    border-color: var(--portal-action) !important;
}

html.portal-themed body .thumb-img.active,
html.portal-themed body .thumb-img:hover,
html.portal-themed body .search-modal-input:focus,
html.portal-themed body .product-config-form .form-control:focus {
    box-shadow: 0 0 0 4px var(--portal-focus-ring) !important;
}

html.portal-themed body .product-view-btn,
html.portal-themed body .add-to-cart-btn,
html.portal-themed body .search-submit-btn {
    background: linear-gradient(135deg, var(--portal-action), var(--portal-action-hover)) !important;
    background-color: var(--portal-action) !important;
    border-color: var(--portal-action) !important;
    color: var(--portal-white) !important;
    box-shadow: 0 8px 20px var(--portal-focus-ring) !important;
}

html.portal-themed body .product-view-btn:hover,
html.portal-themed body .product-view-btn:focus,
html.portal-themed body .add-to-cart-btn:hover,
html.portal-themed body .add-to-cart-btn:focus,
html.portal-themed body .search-submit-btn:hover,
html.portal-themed body .search-submit-btn:focus {
    background: var(--portal-action-hover) !important;
    background-color: var(--portal-action-hover) !important;
    border-color: var(--portal-action-hover) !important;
    color: var(--portal-white) !important;
}

/* Modern order screens: dark CC inline card/modal headers */
html.portal-themed body .modal-header[style*="#1e3036"],
html.portal-themed body .modal-header[style*="#163836"],
html.portal-themed body .card-header[style*="#1e3036"],
html.portal-themed body .card-header[style*="#163836"] {
    background: var(--portal-action) !important;
    background-color: var(--portal-action) !important;
    border-color: var(--portal-action-hover) !important;
    color: var(--portal-white) !important;
}

html.portal-themed body .modal-header[style*="#1e3036"] .modal-title,
html.portal-themed body .modal-header[style*="#163836"] .modal-title,
html.portal-themed body .card-header[style*="#1e3036"] h1,
html.portal-themed body .card-header[style*="#1e3036"] h2,
html.portal-themed body .card-header[style*="#1e3036"] h3,
html.portal-themed body .card-header[style*="#1e3036"] h4,
html.portal-themed body .card-header[style*="#1e3036"] h5,
html.portal-themed body .card-header[style*="#1e3036"] h6,
html.portal-themed body .card-header[style*="#163836"] h1,
html.portal-themed body .card-header[style*="#163836"] h2,
html.portal-themed body .card-header[style*="#163836"] h3,
html.portal-themed body .card-header[style*="#163836"] h4,
html.portal-themed body .card-header[style*="#163836"] h5,
html.portal-themed body .card-header[style*="#163836"] h6 {
    color: var(--portal-white) !important;
}

/* Report-specific buttons/processing overlays that do not use Bootstrap primary */
html.portal-themed body .btn-report-primary,
html.portal-themed body .btn-reorder-primary,
html.portal-themed body .dt-buttons .btn,
html.portal-themed body .dt-buttons button,
html.portal-themed body div.dataTables_processing {
    background: var(--portal-action) !important;
    background-color: var(--portal-action) !important;
    border-color: var(--portal-action) !important;
    color: var(--portal-white) !important;
}

html.portal-themed body .btn-report-primary:hover,
html.portal-themed body .btn-report-primary:focus,
html.portal-themed body .btn-reorder-primary:hover,
html.portal-themed body .btn-reorder-primary:focus {
    background: var(--portal-action-hover) !important;
    border-color: var(--portal-action-hover) !important;
    color: var(--portal-white) !important;
}

/* Referral-note custom components */
html.portal-themed body .referral-notes-card-title .material-icons,
html.portal-themed body .referral-notes-table tbody td:nth-child(1),
html.portal-themed body .referral-notes-table tbody td:nth-child(2) {
    color: var(--portal-action) !important;
}

html.portal-themed body .referral-notes-loading-spinner {
    border-color: var(--portal-focus-ring) !important;
    border-top-color: var(--portal-action) !important;
}

/* Email preview inside order modals: this green is branding, not a success state. */
html.portal-themed body .cc-email-referrals-button,
html.portal-themed body .cc-email-referrals-button a {
    background: var(--portal-action) !important;
    background-color: var(--portal-action) !important;
    border-color: var(--portal-action) !important;
    color: var(--portal-white) !important;
    -webkit-text-fill-color: var(--portal-white) !important;
}