/* Light-gray background behind everything */
body {
    background-color: #f7f7f7 !important;
}

/* Recovery & Fatigue tweaks */
.ps-big-score {
    font-size: 48px;
    font-weight: 700;
    line-height: 1;
}

.ps-big-score-denominator {
    font-size: 20px !important; /* was 18px */
    margin-left: 4px;
    color: #888;
}

.ps-legend-box {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

/* Use colors aligned with existing palette */
.ps-legend-factor1 {
    background-color: #0084B4;
}

.ps-legend-factor2 {
    background-color: #FF7A00;
}

.ps-legend-factor3 {
    background-color: #7B3F98;
}



.ps-info-btn {
    border: none!important;
    background: transparent;
    padding: 0;
    margin-left: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .ps-info-btn:focus,
    .ps-info-btn:active {
        outline: none;
        box-shadow: none;
    }

    /* style the thin FA Pro icon */
    .ps-info-btn .fa-circle-info {
        font-size: 18px;
        color: #9a9a9a; /* tweak to taste */
    }

.colorGray {
    color: lightgray!important;
}

/* BP mini chart: a bit shorter but full width */
.ps-mini-chart-bp {
    height: 90px;
    min-height: 90px;
}

.ps-sleep-breakdown div {
    margin-bottom: 2px;
}

    .ps-sleep-breakdown div:last-child {
        margin-bottom: 0;
    }

/* Mobile-only padding for the Physiological Data header */
@media (max-width: 576px) {
    .ps-header {
        padding-left: 16px;
        padding-right: 16px;
    }
}

.ps-mini-chart-wrapper {
    padding-right: 16px;
}

@media (min-width: 1200px) {
    .ps-mini-chart-wrapper {
        padding-right: 28px;
    }
}

/* Limit Steps & Sleep modals width on desktop (and center them) */
#stepsTrendModal .modal-dialog,
#stepsDetailModal .modal-dialog,
#sleepDetailModal .modal-dialog,
#oxygenDetailModal .modal-dialog,
#heartDetailModal .modal-dialog,
#respDetailModal .modal-dialog,
#cardioLoadDataModal .modal-dialog,
#pulsePressureDataModal .modal-dialog,
#spo2DataModal .modal-dialog,
#hrRecoveryTrendModal .modal-dialog,
#tempDetailModal .modal-dialog,
#vo2TrendModal .modal-dialog,
#recoveryTrendModal .modal-dialog,
#restingHrTrendModal .modal-dialog,
#intakeQueueHelpModal .modal-dialog,
#systemHelpModal .modal-dialog,
#bpDetailModal .modal-dialog {
    max-width: 900px !important;
    width: 90% !important;
    margin: 30px auto;
}

/* Rounded edges like your cards */
#stepsTrendModal .modal-content,
#stepsDetailModal .modal-content,
#heartDetailModal .modal-dialog,
#sleepDetailModal .modal-content,
#bpDetailModal .modal-dialog {
    border-radius: 12px;
}
/* Steps detail list layout */
.ps-steps-detail-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ps-detail-row {
    background: #ffffff;
    border-radius: 10px;
    padding: 12px 14px;
    border: 1px solid #e0e0e0;
}

.ps-detail-line {
    display: flex;
    justify-content: space-between;
    font-size: 0.95rem;
    margin-bottom: 4px;
}

    .ps-detail-line:last-child {
        margin-bottom: 0;
    }

.ps-detail-label {
    font-weight: 600;
    color: #333;
}

.ps-detail-value {
    font-weight: 600;
    color: #008896; /* your teal */
}

.ps-detail-sub {
    font-size: 0.85rem;
    color: #666;
}

/* The big rounded light-gray panel behind all cards */
.ps-content-wrapper {
    background-color: #f4f4f4;
    border-radius: 14px;
    padding: 25px 30px;
    margin-top: 10px;
    margin-bottom: 40px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* Page padding for this screen */
.ps-page {
    padding: 10px 0 20px 0;
}

/* Individual cards */
.ps-card {
    border-radius: 10px;
    border: 1px solid #eee;
    background-color: #fff;
    padding: 10px 14px 14px 14px;
}

.ps-card-header {
    font-size: 1.15rem !important; /* was 0.95rem */
    font-weight: 700;
    margin-bottom: 6px;
}

.ps-card-title {
    font-size: 1.25rem !important; /* was 0.95rem */
    font-weight: 600;
}

.ps-big-number {
    font-size: 2.8rem !important; /* was 2.2rem */
    font-weight: 700;
    line-height: 1.1;
}

    /* Make the Steps number red/orange like the XD */
    .ps-big-number.steps-red {
        color: #E54C38;
    }

/* Make the Steps number red/orange like the XD */
.steps-red {
    color: #E54C38;
}
/* Make the Steps number red/orange like the XD */
.steps-orange {
    color: #E54C38;
}

/* Small link-style "Trends" text (for other cards) */
.ps-trend-btn {
    padding: 0;
    font-size: 0.8rem;
    text-decoration: none;
}

/* Card charts: fill remaining space + leave space at bottom */
.ps-mini-chart-wrapper {
    position: relative;
    width: 100%;
    flex: 1 1 auto;
    min-height: 260px; /* keep or tweak this as you like */
    margin-bottom: 12px; /* <<< adds space under the graph */
}

    /* Canvas uses all the wrapper space */
    .ps-mini-chart-wrapper canvas {
        width: 100% !important;
        height: 100% !important;
        display: block;
    }

/* Arrow button styled like the XD orange chevron */
.ps-trend-arrow-btn {
    border: none;
    background: transparent;
    padding: 0;
    cursor: default; /* disabled for now */
}
/* size your SVG cleanly */
.ps-trend-arrow-img {
    width: 24px;
    height: 24px;
    display: block;
}
.ps-trend-arrow-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid #ff6b3a;
    color: #ff6b3a;
    font-size: 16px;
    line-height: 1;
}

.ps-trend-arrow {
    position: relative;
    top: -1px;
}

/* Wider “wide” cards on xl (first row & last row) */
@media (min-width: 1200px) {
    .col-xl-wide {
        flex: 0 0 48%;
        max-width: 48%;
    }
}
/* Physiological mini charts: fixed height + bottom breathing room */
.ps-card .ps-mini-chart-wrapper {
    position: relative;
    width: 100%;
    height: 260px !important; /* fixed height for all 3 charts */
    margin-bottom: 12px; /* space between chart and card bottom */
}

    /* Canvas always fills wrapper – overrides Chart.js inline sizing */
    .ps-card .ps-mini-chart-wrapper canvas {
        width: 100% !important;
        height: 100% !important;
        display: block;
    }

/* Ensures Chart.js canvases have stable height */
.ps-mini-chart-wrapper {
    position: relative;
    min-height: 260px;
    height: 260px !important;
}

.ps-card-body canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
}

/* Shared legends for Performance & Efficiency */
.ps-legend-list {
    list-style: none;
    margin: 0.5rem 0 0;
    padding-left: 0;
    font-size: 0.95rem !important; /* was ~0.8–0.9rem */
}

    .ps-legend-list li {
        display: flex;
        align-items: center;
        gap: 0.4rem;
    }

.ps-legend-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

/* VO2 colors (match XD arc) */
.vo2-excellent {
    background: #008876;
}
/* deep teal */
.vo2-good {
    background: #00B5AD;
}
/* aqua */
.vo2-moderate {
    background: #7F3F98;
}
/* purple */
.vo2-fair {
    background: #F6A623;
}
/* amber */
.vo2-poor {
    background: #E84C3D;
}
/* red */

/* HR Recovery colors – can be same for now */
.hr-excellent {
    background: #008876;
}

.hr-good {
    background: #00B5AD;
}

.hr-moderate {
    background: #7F3F98;
}

.hr-fair {
    background: #F6A623;
}

.hr-poor {
    background: #E84C3D;
}

/* Make sure card & arrow align correctly */
.ps-card {
    position: relative;
}

.ps-trend-arrow-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    border: none;
    background: transparent;
    padding: 0;
    cursor: default; /* or pointer when you wire the modal fully */
}

.ps-trend-arrow-img {
    width: 24px;
    height: 24px;
    display: block;
}
/* VO2 gauge "ruler" strip – about 1/4 of the card height */
.ps-vo2-gauge-wrapper {
    height: 90px; /* tweak up/down; visually ~25% of the card */
    min-height: 70px;
    max-height: 140px;
}
.ps-info-btn {
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    line-height: 1;
}


/* Make the VO2 card a positioning context */
.ps-card {
    position: relative;
}

/* Help (circle i) button – top-right */
.ps-info-btn {
    position: absolute;
    top: 12px;
    right: 52px; /* leaves space for red data button at right:12 */
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
}
.ps-tiny-legend {
    display: flex;
    gap: 10px;
    font-size: 10px;
    color: #666;
    justify-content: center;
    margin-top: 4px;
}

.ps-legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.ps-legend-color {
    width: 10px;
    height: 3px;
    display: inline-block;
    border-radius: 2px;
}

    .ps-legend-color.avg {
        background-color: rgba(0,136,150,1); /* teal */
    }

    .ps-legend-color.max {
        background-color: rgba(229,76,56,1); /* red/orange */
    }

    .ps-legend-color.min {
        background-color: rgba(150,150,150,0.9); /* gray */
    }


/* Tiny legends under mini charts */
.ps-mini-legend {
    font-size: 14px !important; /* was 10px */
    margin-top: 4px;
    color: #777;
}

    .ps-mini-legend .ps-legend-item {
        margin-right: 12px;
        white-space: nowrap;
    }

.ps-mini-legend-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 4px;
 
}

/* Color mappings – keep in sync with Chart.js datasets */
.ps-legend-dot-steps {
    background-color: rgba(0,136,150,1);
}
/* teal bars */
.ps-legend-dot-sys {
    background-color: rgba(229,76,56,1);
}
/* BP systolic red */
.ps-legend-dot-dia {
    background-color: rgba(0,136,150,1);
}
/* BP diastolic teal */
.ps-legend-dot-oxy {
    background-color: rgba(0,136,150,1);
}
/* SpO2 teal line */
.ps-legend-dot-avg {
    background-color: rgba(0,136,150,1);
}
/* Heart avg teal */
.ps-legend-dot-max {
    background-color: rgba(229,76,56,1);
}
/* Heart max red */
.ps-legend-dot-min {
    background-color: rgba(150,150,150,1);
}
/* Heart min gray */
.ps-legend-dot-temp {
    background-color: rgba(0,136,150,1);
}
/* Temp avg teal */
.ps-legend-dot-resp {
    background-color: rgba(0,136,150,1);
}
/* Resp avg teal */
/* Tiny legends under mini charts */
.ps-mini-legend {
    font-size: 10px;
    color: #666;
    text-align: center;
    margin-top: 4px;
    white-space: nowrap;
}

    .ps-mini-legend span {
        margin: 0 4px;
    }

/* shared dot style */
.ps-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 3px;
    position: relative;
    top: 1px;
}

/* Colors matched to charts */
/* Steps & general teal */
.ps-dot-teal {
    background-color: #008896;
}

/* Sleep */
.ps-dot-sleep-deep {
    background-color: #7F3F98;
}

.ps-dot-sleep-light {
    background-color: #00B5AD;
}

/* Blood pressure */
.ps-dot-bp-sys {
    background-color: #E54C38;
}

.ps-dot-bp-dia {
    background-color: #008896;
}

/* Heart */
.ps-dot-heart-avg {
    background-color: #008896;
}

.ps-dot-heart-max {
    background-color: #E54C38;
}

.ps-dot-heart-min {
    background-color: #999999;
}

/* Temperature (teal line) */
.ps-dot-temp {
    background-color: #008896;
}

/* Respiratory (teal line) */
.ps-dot-resp {
    background-color: #008896;
}

/* Tiny legends under mini charts */
.ps-mini-legend {
    font-size: 10px;
    color: #666;
    text-align: center;
    margin-top: 4px;
    white-space: nowrap;
}

    .ps-mini-legend span {
        margin: 0 4px;
    }

/* Base dot */
.ps-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 3px;
    position: relative;
    top: 1px;
    background-color: #999; /* default, gets overridden below */
}
.ps-dot-sleep-deep {
    background-color: #7F3F98!important; /* purple */
}

.ps-dot-sleep-light {
    background-color: #00B5AD!important; /* teal-green */
}
/* Steps & general teal */
.ps-dot-teal {
    background-color: #008896!important;
}

/* Blood oxygen */
.ps-dot-spo2 {
    background-color: #008896!important;
}

/* Tiny round dot used in all mini-legends */
.ps-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 4px;
    background-color: currentColor; /* use this span's color */
}

/* Blood pressure */
.ps-dot-bp-sys {
    color: #ec796a!important; /* systolic bar color */
    font-size: 10px;
}

.ps-dot-bp-dia {
    color: #bc6356!important; /* diastolic bar color */
    font-size: 10px;
    margin-left: 10px;
}


/* Heart */
.ps-dot-heart-avg {
    background-color: #008896;
}

.ps-dot-heart-max {
    background-color: #E54C38;
}

.ps-dot-heart-min {
    background-color: #999999;
}

/* Temperature */
.ps-dot-temp {
    background-color: #008896;
}

/* Respiratory */
.ps-dot-resp {
    background-color: #008896;
}
.ps-pointer-line {
    width: 0;
    height: 0;
    position: absolute;
}

.ps-pointer-arrow {
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 10px solid #d9534f; /* red arrow */
}
/* Zones */
.ps-zone-poor {
    --zone-color: #e74c3c;
}
/* red */
.ps-zone-fair {
    --zone-color: #f1c40f;
}
/* yellow/orange */
.ps-zone-moderate {
    --zone-color: #8e44ad;
}
/* purple */
.ps-zone-good {
    --zone-color: #1abc9c;
}
/* teal */
.ps-zone-excellent {
    --zone-color: #00695c;
}
/* dark green */

/* Arrow + line use the CSS variable */
.ps-pointer-line {
    width: 0;
    height: 0;
    position: absolute;
}

.ps-pointer-arrow {
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 10px solid var(--zone-color);
}

.ps-pointer-line {
    border-left: 2px solid var(--zone-color);
    height: 20px; /* or 30 depending on your bar height */
}
.page-title,
h1.ps-page-title {
    font-size: 2rem !important; /* strong, modern, readable */
    font-weight: 800;
}
/* Hero page titles like "Personal Stats Overview" */
.ps-page-title {
    font-size: 2.1rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #05596f; /* deep teal */
}
/* Labels inside the little white personal stat cards */
.ps-personal-stat-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #777;
}

/* Values (26, Female, 5'7", etc.) */
.ps-personal-stat-value {
    font-size: 1.3rem;
    font-weight: 700;
    color: #008896; /* your teal */
}

/* Generic score colors */
.ps-score-excellent {
    color: #0f766e; /* teal */
}

.ps-score-good {
    color: #16a34a; /* green */
}

.ps-score-fair {
    color: #f59e0b; /* amber / yellow */
}

.ps-score-poor {
    color: #ea580c; /* orange */
}

.ps-score-high-risk {
    color: #dc2626; /* red */
}
/* ============================
   SCORE LEGEND (GLOBAL)
   ============================ */

.ps-score-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: 12px;
    justify-content: flex-end; /* optional but looks good by the header */
}

.ps-score-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ps-score-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
}

/* Band colors (TEXT ONLY – safe to use on big scores) */
.ps-score-excellent {
    color: #0f766e;
}
/* teal */
.ps-score-good {
    color: #16a34a;
}
/* green */
.ps-score-fair {
    color: #eab308;
}
/* amber */
.ps-score-poor {
    color: #f97316;
}
/* orange */
.ps-score-highrisk {
    color: #dc2626;
}
/* red */

/* Swatch background uses the same band color */
.ps-score-legend-dot.ps-score-excellent {
    background-color: #0f766e;
}

.ps-score-legend-dot.ps-score-good {
    background-color: #16a34a;
}

.ps-score-legend-dot.ps-score-fair {
    background-color: #eab308;
}

.ps-score-legend-dot.ps-score-poor {
    background-color: #f97316;
}

.ps-score-legend-dot.ps-score-highrisk {
    background-color: #dc2626;
}

.ps-score-legend-label {
    font-weight: 600;
}

.ps-score-legend-range {
    color: #6b7280;
    margin-left: 2px;
}
/* Force legends inside metrics to align left */
.ps-score-legend-wrapper .ps-score-legend {
    justify-content: flex-start !important;
    text-align: left;
}
/* ===========================================
   PERFORMANCE & EFFICIENCY  (VO2 + HRR)
   =========================================== */

/* Dot for legends */
.ps-perf-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    margin-right: 6px;
}

/* COLORS (same palette used everywhere else) */
.ps-perf-poor {
    background-color: #E84C3D; /* red */
}

.ps-perf-fair {
    background-color: #F6A623; /* amber */
}

.ps-perf-moderate {
    background-color: #7F3F98; /* purple */
}

.ps-perf-good {
    background-color: #00B5AD; /* teal */
}

.ps-perf-excellent {
    background-color: #008876; /* dark teal */
}

/* SCORE COLORING (for big numbers + labels) */
.ps-perf-score-poor {
    color: #E84C3D !important;
}

.ps-perf-score-fair {
    color: #F6A623 !important;
}

.ps-perf-score-moderate {
    color: #7F3F98 !important;
}

.ps-perf-score-good {
    color: #00B5AD !important;
}

.ps-perf-score-excellent {
    color: #008876 !important;
}

/* Category word under the big score */
.ps-perf-score-label {
    font-size: 1.15rem;
    font-weight: 700;
    margin-top: 2px;
}

/* ============================================================
   RECOVERY & FATIGUE (Score + Resting HR)
   ============================================================ */

/* Base dot – used only for this screen */
.ps-rf-dot {
    width: 10px;
    height: 10px;
    display: inline-block;
    border-radius: 50%;
    margin-right: 6px;
}

/* ============================
   SCORE COLORS – TEXT ONLY
   (used for RecoveryScore big number + label)
   ============================ */
.ps-rf-excellent {
    color: #008876 !important; /* dark teal */
}

.ps-rf-good {
    color: #00B5AD !important; /* teal */
}

.ps-rf-moderate {
    color: #7F3F98 !important; /* purple */
}

.ps-rf-fair {
    color: #F6A623 !important; /* amber */
}

.ps-rf-poor {
    color: #E84C3D !important; /* red */
}

/* ============================
   DOT COLORS FOR SCORE LEGEND
   ============================ */
.ps-rf-dot.ps-rf-excellent {
    background-color: #008876 !important;
}

.ps-rf-dot.ps-rf-good {
    background-color: #00B5AD !important;
}

.ps-rf-dot.ps-rf-moderate {
    background-color: #7F3F98 !important;
}

.ps-rf-dot.ps-rf-fair {
    background-color: #F6A623 !important;
}

.ps-rf-dot.ps-rf-poor {
    background-color: #E84C3D !important;
}

/* ============================
   RESTING HR LEGEND DOTS
   ============================ */
.ps-rf-dot.ps-rf-hr-low {
    background-color: #008876 !important;
}

.ps-rf-dot.ps-rf-hr-normal {
    background-color: #00B5AD !important;
}

.ps-rf-dot.ps-rf-hr-high {
    background-color: #E84C3D !important;
}

/* RESTING HR TEXT COLORS (for big number + label) */
.ps-rf-hr-low {
    color: #008876 !important;
}

.ps-rf-hr-normal {
    color: #00B5AD !important;
}

.ps-rf-hr-high {
    color: #E84C3D !important;
}

/* Score label under big number */
.ps-rf-label {
    font-size: 1.15rem;
    font-weight: 700;
    margin-top: 2px;
}

/* Legend layout */
.ps-legend-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
    text-align: left;
}

    .ps-legend-list li {
        display: flex;
        align-items: center;
        margin-bottom: 2px;
    }



/* ============================================================
   STRESS & READINESS
   ============================================================ */

/* ---- HRV Stress score colors ---- */
.ps-stress-low {
    color: #008876 !important; /* green/teal */
}

.ps-stress-moderate {
    color: #F6A623 !important; /* amber */
}

.ps-stress-high {
    color: #E84C3D !important; /* red */
}

/* Legend dots for HRV stress score */
.ps-rf-dot.ps-stress-low {
    background-color: #008876 !important;
}

.ps-rf-dot.ps-stress-moderate {
    background-color: #F6A623 !important;
}

.ps-rf-dot.ps-stress-high {
    background-color: #E84C3D !important;
}

/* ---- Allostatic load colors (by level text) ---- */
.ps-allo-low {
    color: #008876 !important;
}

.ps-allo-moderate {
    color: #F6A623 !important;
}

.ps-allo-high {
    color: #E84C3D !important;
}

/* ---- Sympathetic–Parasympathetic balance score ---- */
.ps-balance-good {
    color: #008876 !important;
}

.ps-balance-mixed {
    color: #F6A623 !important;
}

.ps-balance-poor {
    color: #E84C3D !important;
}

/* Legend dots for balance zones */
.ps-rf-dot.ps-balance-good {
    background-color: #008876 !important;
}

.ps-rf-dot.ps-balance-mixed {
    background-color: #F6A623 !important;
}

.ps-rf-dot.ps-balance-poor {
    background-color: #E84C3D !important;
}
.stress-score-label {
    font-size: 1.05rem;
    font-weight: 600;
    margin-top: 2px;
}
.ps-allo-low {
    color: #008876 !important;
}

.ps-allo-moderate {
    color: #F6A623 !important;
}

.ps-allo-high {
    color: #E84C3D !important;
}

.ps-rf-dot.ps-allo-low {
    background-color: #008876 !important;
}

.ps-rf-dot.ps-allo-moderate {
    background-color: #F6A623 !important;
}

.ps-rf-dot.ps-allo-high {
    background-color: #E84C3D !important;
}

/* WelHealth Overview – make donuts bigger */
.welhealth-overview .ps-mini-chart-wrapper {
    position: relative;
    height: 320px !important;
    min-height: 320px !important;
}

    /* Force the canvas to fill that wrapper (override Chart.js inline height) */
    .welhealth-overview .ps-mini-chart-wrapper canvas {
        width: 100% !important;
        height: 100% !important;
        display: block;
    }
.improve-score-btn {
    background-color: #006D75 !important; /* Left menu teal */
    color: #fff !important;
    border: none !important;
    padding: 6px 22px !important;
    border-radius: 30px !important; /* full pill */
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    margin: 12px 0 !important; /* breathing room */
    box-shadow: 0 2px 4px rgba(0,0,0,0.12);
    transition: all 0.2s ease-in-out;
}

    .improve-score-btn:hover {
        background-color: #005a61 !important; /* slightly darker for hover */
        transform: translateY(-1px);
    }
.ps-improveme-btn {
    font-size: 0.85rem;
    padding: 0.25rem 1rem;
    border-radius: 999px;
    border-width: 1px;
    text-transform: none;
    font-weight: 600;
    letter-spacing: 0.01em;
}

    .ps-improveme-btn i {
        margin-left: 0.25rem;
        font-size: 0.9em;
    }

/* =========================================
   Clickable dashboard cards
   ========================================= */
.ps-clickable-card {
    position: relative;
}

.ps-card-overlay-link {
    position: absolute;
    inset: 0;
    z-index: 5;
    border-radius: inherit;
    text-decoration: none;
}

/* Optional affordance */
.ps-clickable-card:hover {
    box-shadow: 0 10px 26px rgba(0,0,0,.08);
    transform: translateY(-1px);
}