/* container + header */
.corp-main-container {
    padding-top: 1.5rem;
    padding-bottom: 2rem;
}

.corp-page-title {
    font-size: 1.6rem;
    font-weight: 700;
}

.corp-page-subtitle {
    font-size: 0.9rem;
    color: #888;
}

.corp-main-card {
    padding: 1.25rem 1.5rem;
}

.corp-section-title {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* donut cards */
.corp-donut-card {
    padding: 1rem 1.25rem;
}

.corp-donut-title {
    font-weight: 600;
    font-size: 0.95rem;
}

.corp-donut-body {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.corp-donut-chart-wrapper {
    position: relative;
    width: 100%;
    max-width: 260px;
    margin: 0 auto;
}

.corp-donut-chart {
    width: 100%;
    height: auto;
}

.corp-donut-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.corp-donut-center-number {
    font-size: 1.6rem;
    font-weight: 700;
    color: #e65100; /* placeholder orange; tweak to match XD */
}

.corp-donut-center-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #777;
}

/* legend */
.corp-donut-legend {
    font-size: 0.75rem;
    color: #555;
}

    .corp-donut-legend > div {
        display: flex;
        align-items: center;
        margin-bottom: 0.25rem;
    }

.corp-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    margin-right: 6px;
}

/* example palette, we can tune to exact XD colors later */
.corp-dot-blue {
    background-color: #00a6d6;
}

.corp-dot-teal {
    background-color: #00b5ad;
}

.corp-dot-purple {
    background-color: #7f3f98;
}

.corp-dot-orange {
    background-color: #f6a623;
}

.corp-dot-red {
    background-color: #e84c3d;
}

.corp-help-btn i {
    font-size: 0.95rem;
}

/* selection criteria button */
.corp-selection-btn {
    font-weight: 600;
}
/* Re-use the physio look; just add colors for corporate dots, etc. */

.corp-dot-blue {
    background-color: #00A6D6;
}

.corp-dot-teal {
    background-color: #00B5AD;
}

.corp-dot-purple {
    background-color: #7F3F98;
}

.corp-dot-orange {
    background-color: #F6A623;
}

.corp-dot-red {
    background-color: #E84C3D;
}

/* make sure ps-dot is neutral unless overridden */
.ps-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 6px;
}
/* ================================
   CORPORATE DASHBOARD – LEGENDS
   ================================ */

.corp-legend {
    display: flex;
    flex-wrap: wrap; /* <-- this is the key */
    gap: 4px 16px;
    margin-top: 8px;
    font-size: 0.70rem;
}

.corp-legend-item {
    display: flex;
    align-items: center;
    white-space: nowrap; /* keep dot + label together */
}

.corp-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 4px;
}

/* match your donut slice colors */
.corp-dot-veterans {
    background-color: #008876;
}

.corp-dot-justice {
    background-color: #7F3F98;
}

.corp-dot-underserved {
    background-color: #00B5AD;
}

.corp-dot-tribal {
    background-color: #F6A623;
}

.corp-dot-spouse {
    background-color: #E84C3D;
}
.ps-trend-arrow-btn {
    border: none;
    background: transparent;
    padding: 0;
    line-height: 1;
}

    .ps-trend-arrow-btn:focus {
        outline: none;
        box-shadow: none;
    }

.ps-trend-arrow-img {
    display: block;
    width: 32px;
    height: 32px;
}
/* ================================
   CORPORATE PAGE WRAPPER
   ================================ */

.corp-page {
    padding: 24px 16px;
}

.corp-content-wrapper {
    background-color: #f5f7fb;
    border-radius: 16px;
    padding: 24px;
}

/* ================================
   CARD
   ================================ */

.corp-card {
    background-color: #ffffff;
    border-radius: 16px;
    padding: 20px 24px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04);
}

/* ================================
   TABLE
   ================================ */

.corp-table table {
    width: 100%;
}

.corp-table thead th {
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #7b7f94;
    border-bottom: 1px solid #e1e4f0;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.corp-table tbody td {
    vertical-align: middle;
    border-bottom: 1px solid #f0f1f7;
    font-size: 0.9rem;
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
}

.corp-table tbody tr:hover {
    background-color: #f8fafc;
}

/* Name + link */

.corp-participant-name {
    font-weight: 600;
    font-size: 0.95rem;
}

    .corp-participant-name a {
        text-decoration: none;
        color: #202642;
    }

        .corp-participant-name a:hover {
            text-decoration: underline;
        }

/* ================================
   PARTICIPATION DOT
   ================================ */

.corp-status-dot {
    width: 10px;
    height: 10px;
    display: inline-block;
    border-radius: 50%;
    margin-right: 6px;
}

/* full → cyan */
.corp-status-full {
    background-color: #00c8d7;
}

/* substantial → teal */
.corp-status-substantial {
    background-color: #008876;
}

/* moderate → purple */
.corp-status-moderate {
    background-color: #7f3f98;
}

/* minimal → amber */
.corp-status-minimal {
    background-color: #f6a623;
}

/* non → red */
.corp-status-non {
    background-color: #e84c3d;
}

/* ================================
   PILL STYLES
   ================================ */

.corp-segment-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background-color: #eef4ff;
    color: #3b4a7a;
    font-size: 0.7rem;
    font-weight: 500;
    margin-right: 6px;
    margin-top: 4px;
}

.corp-preview-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background-color: #f0f1f7;
    color: #5c627a;
    font-size: 0.7rem;
    font-weight: 500;
    margin-left: 8px;
}

/* ================================
   ACTION BAR
   ================================ */

.corp-action-bar {
    margin-bottom: 16px;
}

    .corp-action-bar .btn {
        border-radius: 999px;
        font-size: 0.85rem;
    }

/* ================================
   SEARCH INPUT
   ================================ */

.corp-search-input {
    max-width: 260px;
}

/* ================================
   PAGINATION
   ================================ */

.corp-pagination .pagination {
    justify-content: center;
    gap: 0.5rem;
}
.corp-pagination .page-link {
    white-space: nowrap;
    padding: 0.45rem 1.1rem;
    border-radius: 999px !important;
}

.corp-pagination .page-item.active .page-link {
    background-color: #f15a24; /* corporate orange */
    border-color: #f15a24;
    color: #ffffff;
}

.corp-pagination .page-item.disabled .page-link {
    color: #c3c5d0;
}

/* Small helper for the subtitle */
.corp-page-subtitle {
    color: #7b7f94;
    font-size: 0.9rem;
}
/* ==========================================
   CORPORATE TABLE HEADER + DIVIDERS
   ========================================== */

/* Header row: white text, no forced dark bg */
.corp-table table thead th {
    color: #ffffff !important;
    background-color: transparent !important; /* lets the table/card decide */
    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
}

/* Thin line above the header row */
.corp-table table thead {
    border-top: 1px solid rgba(0, 0, 0, 0.25);
}

    /* Vertical column dividers (work on both stripe shades) */
    .corp-table table thead th,
    .corp-table table tbody td {
        border-right: 1px solid rgba(0, 0, 0, 0.25);
    }

        .corp-table table thead th:last-child,
        .corp-table table tbody td:last-child {
            border-right: none;
        }
.corp-participant-name a {
    text-decoration: none;
    color: inherit; /* << important: no forced dark color */
}

    .corp-participant-name a:hover {
        text-decoration: underline;
    }

/* Selection criteria modal */

.corp-criteria-body .form-label {
    font-weight: 600;
    font-size: 0.9rem;
}

.corp-project-multiselect {
    min-height: 160px; /* extra safety in case size attr gets ignored */
}

.corp-criteria-footer {
    border-top: 1px solid #e4e7f0;
}


/* Allow wrapping instead of clipping */
.corp-access-dd .dropdown-item {
    white-space: normal; /* <-- key change */
    overflow-wrap: anywhere; /* handles long words safely */
    line-height: 1.25;
    padding: 10px 14px;
}

/* Divider spacing */
.corp-access-dd .dropdown-divider {
    margin: 6px 0;
}

/* If your responsive wrapper is trapping the dropdown, this helps */
.corp-table.table-responsive {
    overflow-y: visible;
}
/* Access dropdown: desktop/tablet optimized */
.corp-access-dd .dropdown-menu {
    /*min-width: 240px;*/ /* roomy on desktop/tablet */
    /*z-index: 2000;
    border-radius: 14px;
    box-shadow: 0 12px 28px rgba(0,0,0,.12);
    border: 1px solid rgba(0,0,0,.08);*/
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: .75rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1rem;
}

.corp-access-dd .dropdown-item {
    white-space: nowrap; /* keep labels clean on one line */
    padding: 10px 14px;
}

/* Allow dropdown to paint over the table container */
.corp-table.table-responsive {
    overflow-y: visible;
}

/* Phone-in-a-pinch: keep it on-screen */
@media (max-width: 480px) {
    .corp-access-dd .dropdown-menu {
        min-width: 92vw; /* avoid off-screen overflow */
        max-width: 92vw;
    }
}
/* Force horizontal scroll when the viewport is narrow */
.corp-table-scrollx {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}



/* Keep Access button from wrapping */
.corp-access-dd .pill-button {
    white-space: nowrap;
}
/* Keep the Access column usable */
.corp-table-scrollx th:last-child,
.corp-table-scrollx td:last-child {
    width: 140px;
    min-width: 140px;
    white-space: nowrap;
}
@media (max-width: 992px) {
    .corp-card .d-flex.flex-md-row {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .corp-card form.d-flex {
        max-width: 100% !important;
    }
}
/* Corporate card header row: title left, arrow right */
.ps-card-header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

    /* Make sure the title block can shrink without forcing the arrow off */
    .ps-card-header-row .wh-card-section-title,
    .ps-card-header-row .ps-card-title {
        flex: 1 1 auto;
        min-width: 0;
    }

/* Card becomes the positioning context */
.ps-clickable-card {
    position: relative;
}

/* Full-card link overlay */
.ps-card-overlay-link {
    position: absolute;
    inset: 0;
    z-index: 5; /* above canvas */
    display: block;
    border-radius: inherit;
    cursor: pointer; /* hand */
    background: transparent;
}

/* Make sure the chart does NOT sit above the overlay */
.ps-clickable-card canvas {
    position: relative;
    z-index: 1;
}

/* Optional hover affordance */
.ps-clickable-card:hover {
    box-shadow: 0 10px 26px rgba(0,0,0,0.08);
    transform: translateY(-1px);
    transition: 0.15s ease-in-out;
}

/* Arrow cue should NOT steal clicks */
.ps-card-arrow-cue {
    pointer-events: none;
    display: flex;
    align-items: center;
}

/* Keep your arrow size */
.ps-trend-arrow-img {
    width: 32px;
    height: 32px;
    display: block;
}

.hr-engagement {
    border: none;
    height: 4px !important;
    background-color: #E54C38 !important;
    border-radius: 2px;
    margin: 28px 0 18px;
}
/* Tabs strip */
/* Tabs strip */
.wh-tabs {
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 10px 0 14px;
}

/* Base tab */
/* Tabs strip */
.wh-tabs {
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 10px 0 14px;
}

/* Base tab (inactive) */
.wh-tab {
    display: inline-flex;
    align-items: center;
    padding: 10px 16px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    background: #ffffff;
    color: #008876; /* ✅ teal text */
    border: 2px solid #008876; /* ✅ teal border */
}

    /* Hover (inactive tabs) */
    .wh-tab:hover {
        text-decoration: none;
        background: #f7fbfa; /* very subtle teal wash */
        color: #008876;
        border-color: #008876;
    }

    /* Active tab (Snapshot) */
    .wh-tabs.is-active {
        background: #E54C38; /* 🔥 red-orange */
        border-color: #E54C38;
        color: #ffffff;
    }

        /* Active tab hover should NOT change */
        .wh-tab.is-active:hover {
            background: #E54C38;
            color: #ffffff;
        }
.group-divider {
    border-right: 2px solid #d6dce2 !important;
}

.back-link {
    font-size: 0.95rem;
    font-weight: 600;
    color: #2c5aa0; /* muted professional blue */
    text-decoration: none;
}

    .back-link:hover {
        text-decoration: underline;
        color: #1d3f73;
    }

.corp-table-header {
    background-color: #0f6a72; /* your teal */
    color: #ffffff;
}
.hra-action-menu {
    min-width: 260px;
    padding: 8px 0;
    border: 1px solid #d9e2e6;
    border-radius: 12px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.10);
    overflow: hidden;
}

    .hra-action-menu .dropdown-item {
        white-space: nowrap;
        padding: 10px 16px;
        font-size: 15px;
        color: #2f3a40;
    }

        .hra-action-menu .dropdown-item:hover,
        .hra-action-menu .dropdown-item:focus {
            background-color: #f4f7f8;
            color: #0b6f75;
        }

        .hra-action-menu .dropdown-item.fw-semibold {
            font-weight: 600;
        }

.corp-access-dd .pill-button {
    min-width: 96px;
    text-align: center;
}

.hra-action-menu {
    min-width: 0 !important;
    width: max-content !important;
}

    .hra-action-menu .dropdown-item {
        white-space: nowrap;
    }

html, body {
    height: 100%;
    margin: 0;
}

body {
    min-height: 100vh;
}

#portalMain {
    display: flex;
    align-items: stretch;
    min-height: calc(100vh - 0px);
}

#portalMenu {
    width: 260px;
    background-color: #0f6a72;
    display: flex;
    align-self: stretch;
}

#menuContainer {
    flex: 1 1 auto;
}

#portalContent {
    flex: 1 1 auto;
}
.pill-button-sm {
    display: inline-block;
    padding: 4px 12px;
    border: 2px solid #D73C19;
    border-radius: 999px;
    background-color: white;
    color: #D73C19 !important;
    font-weight: 600;
    font-size: 13px;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.3s ease;
    white-space: nowrap;
    line-height: 1.2;
    height: auto !important;
    box-sizing: border-box;
}

    .pill-button-sm:hover {
        background-color: #046C7F;
        border: 2px solid #046C7F;
        color: white !important;
    }
.wh-card-section-title,
.wh-card-head,
.wh-bh-card-title {
    text-align: left;
}
.wh-bh-card ul {
    text-align: left;
    padding-left: 20px;
}
.wh-bh-card table th,
.wh-bh-card table td {
    text-align: left;
}
.wh-bh-card h3,
.wh-bh-card h4,
.wh-bh-card .section-title {
    text-align: left;
}

.isp-label {
    text-align: right;
    font-weight: 600;
    padding-right: 10px;
}

.isp-value {
    text-align: left;
}
.isp-header-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

    .isp-header-grid .isp-column {
        width: fit-content;
        margin: 0 auto; /* centers each block inside its half */
    }
.isp-snapshot-row {
    display: grid;
    grid-template-columns: 270px 1fr;
    align-items: start;
    margin-bottom: 8px;
}

.isp-label {
    text-align: right;
    font-weight: 600;
    padding-right: 10px;
}

.isp-value {
    text-align: left;
}
.isp-plan-header-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 0;
    width: 100%;
}

.isp-plan-header-half {
    display: grid;
    justify-self: center;
}

.isp-header-side {
    width: 360px;
    justify-self: center;
}



.isp-label {
    text-align: right;
    font-weight: 600;
    padding-right: 10px;
}

.isp-value {
    text-align: left;
}
.isp-snapshot-side {
    width: 100%;
}

.isp-row {
    display: grid;
    grid-template-columns: 230px 1fr;
    align-items: start;
    margin-bottom: 8px;
}

.isp-label {
    text-align: right;
    font-weight: 600;
    padding-right: 10px;
}

.isp-value {
    text-align: left;
}
.isp-snapshot-row .isp-label {
    white-space: nowrap;
}
.isp-card-body {
    padding-top: 6px;
    padding-bottom: 10px;
}
.isp-review-note-entry {
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid #e0e0e0;
}

    .isp-review-note-entry:last-child {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }

.isp-review-note-header {
    font-weight: 600;
    margin-bottom: 6px;
    text-align: left !important;
}



/* Fix note content specifically (this is the main issue in your screenshot) */
.isp-review-note-body {
    text-align: left !important;
}

/* Ensure headers are left */
.wh-card-section-title {
    text-align: left !important;
}

/* Fix table alignment */
table th,
table td {
    text-align: left !important;
}

.text-in-progress {
    color: #E8940A;
}