/* ── Section panels ──────────────────────────────────────────────
   Each major section (Network Health, Compliance Marker Risk
   Summary, etc.) is wrapped in a `.ps-section-card`. The card
   provides the outer border / radius / shadow; `.ps-section-label`
   inside it acts as the header strip (top of the panel) and
   `.ps-section-body` is the inset content area below. This gives
   the page the "header + body grouped as one panel" rhythm and
   keeps inner content from sitting flush against the page edges.

   Inner wrappers that previously carried their own bg + shadow
   (`.ps-heatmap-wrap`, `.ps-table-wrap`, `.ps-revenue-wrap`) drop
   them when nested inside `.ps-section-card` so we don't end up
   with a card-inside-a-card. Stat / doctor / metric tiles keep
   their own styling because they're meant to read as discrete
   sub-tiles inside the panel. */
.ps-section-card {
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid #D7DBEB;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    margin-bottom: 28px;
    overflow: hidden;
}

.ps-section-card .ps-section-label {
    /* Header strip — sits at the top of the card, full bleed.
       Mirrors the gradient + brand-blue type used by the
       Compliance Markers / Case Library table headers so the
       page reads as one design family. */
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 10px 16px;
    background: linear-gradient(180deg, #F4F5FA 0%, #ECEEF6 100%);
    border-bottom: 1px solid #D7DBEB;
    border-radius: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #565C82;
}

.ps-section-card .ps-section-label .ps-section-icon {
    color: #565C82;
}

.ps-section-card .ps-section-body {
    padding: 16px 20px;
}

/* Inner wrappers shed their own card chrome inside a section panel
   to avoid nested shadows. Their internal layout (table grid,
   revenue grid, etc.) is preserved. */
.ps-section-card .ps-section-body > .ps-heatmap-wrap,
.ps-section-card .ps-section-body > .ps-table-wrap,
.ps-section-card .ps-section-body > .ps-revenue-wrap {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}

/* Drop the trailing margin on bodies whose first child is a
   MudGrid carrying `mb-6` — the card's own margin-bottom is the
   spacer between sections now. */
.ps-section-card .ps-section-body > .mud-grid {
    margin-bottom: 0 !important;
}

/* Standalone (un-wrapped) section label — preserved for any
   remaining inline use, but the new card pattern is preferred. */
.ps-section-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.05rem;
    font-weight: 700;
    color: #333;
    margin: 28px 0 14px;
    padding: 7px 12px;
    background: rgba(115, 120, 160, 0.07);
    border-radius: 8px;
}
.ps-section-icon { color:#7378A0; font-size:1.2rem; }
.ps-help-icon { color:#aaa; font-size:0.95rem; cursor:help; vertical-align:middle; display:inline-flex !important; align-items:center; }
.ps-section-label .mud-tooltip-root,
.ps-section-label .mud-tooltip-activator { display:inline-flex !important; align-items:center; line-height:1; }

/* Flex row replaces a 12-col MudGrid so we can show 4 (PA) or 5 (GPM)
   stat tiles without the awkward 2.4-col fractional split. Each card
   grows to fill available width; min-width forces wrapping on narrow
   viewports. */
.ps-stats-row { display:flex; flex-wrap:wrap; gap:16px; width:100%; align-items:stretch; }
.ps-stats-row > .ps-stat-card { flex:1 1 200px; min-width:200px; }

.ps-stat-card { display:flex; align-items:center; gap:14px; padding:16px 18px; background:rgba(255,255,255,0.97); border-radius:12px; box-shadow:0 2px 8px rgba(0,0,0,0.07); min-height:76px; }
.ps-stat-icon-wrap { display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:10px; flex-shrink:0; font-size:1.4rem; }
.ps-stat-body { display:flex; flex-direction:column; gap:2px; }
.ps-stat-value { font-size:1.55rem; font-weight:700; color:#222; line-height:1.2; }
.ps-stat-label { font-size:0.78rem; color:#888; font-weight:500; letter-spacing:0.2px; }

.ps-doctor-card { background:rgba(255,255,255,0.97); border-radius:12px; box-shadow:0 2px 8px rgba(0,0,0,0.07); padding:14px 16px; height:100%; }
.ps-doctor-card--clickable { cursor:pointer; transition:box-shadow 0.15s, transform 0.15s; }
.ps-doctor-card--clickable:hover { box-shadow:0 6px 20px rgba(115,120,160,0.22); transform:translateY(-2px); }
.ps-doctor-card-header { display:flex; align-items:flex-start; gap:10px; margin-bottom:10px; }
.ps-health-gauge { flex-shrink:0; }
.ps-doctor-name { font-size:0.9rem; font-weight:600; color:#333; }
.ps-label-chip { display:inline-flex; align-items:center; padding:3px 10px; border-radius:20px; font-size:0.75rem; font-weight:700; letter-spacing:0.3px; }
.ps-doctor-stats { display:flex; flex-direction:column; gap:5px; }
.ps-doctor-stat-row { display:flex; align-items:center; justify-content:space-between; font-size:0.8rem; }
.ps-doctor-stat-key { color:#888; }
.ps-doctor-stat-val { color:#333; font-weight:500; }
.ps-val-red { color:#c62828 !important; font-weight:700 !important; }
.ps-val-amber { color:#A07040 !important; font-weight:600 !important; }

.ps-heatmap-wrap { background:rgba(255,255,255,0.97); border-radius:12px; box-shadow:0 2px 8px rgba(0,0,0,0.07); overflow:hidden; }
.ps-heatmap-scroll { overflow-x:auto; }
.ps-heatmap-table { width:100%; border-collapse:collapse; font-size:0.8rem; min-width:800px; }
/* Header strip mirrors the Compliance Markers table on PSR Case
   Insights (`.psr-rule-col-headers` / `.psr-cases-table-wrap .mud-table-head .mud-table-cell`)
   so the two surfaces feel like the same component family — same
   #F4F5FA→#ECEEF6 gradient, brand-blue uppercase labels, 0.08em
   tracking, and #D7DBEB hairline divider. */
.ps-heatmap-th {
    padding: 10px 10px 8px;
    text-align: center;
    font-weight: 700;
    font-size: 0.7rem;
    line-height: 1.2;
    color: #565C82;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: linear-gradient(180deg, #F4F5FA 0%, #ECEEF6 100%);
    border-bottom: 1px solid #D7DBEB;
    white-space: normal;
    word-break: break-word;
    vertical-align: middle;
}
.ps-heatmap-doctor-col { text-align:left !important; min-width:160px; max-width:200px; }
.ps-heatmap-rule-col { min-width:80px; cursor:default; }
.ps-heatmap-flags-col { min-width:70px; text-align:center !important; }
.ps-heatmap-td { padding:9px 10px; text-align:center; border-bottom:1px solid rgba(0,0,0,0.04); vertical-align:middle; }
.ps-heatmap-row:hover { background:rgba(115,120,160,0.04); }
.ps-heatmap-totals-row { background:rgba(115,120,160,0.06) !important; border-top:2px solid rgba(115,120,160,0.15); }
.ps-heatmap-doctor-name { font-weight:500; white-space:nowrap; }
.ps-heatmap-doctor-link { cursor:pointer; color:inherit; transition:color 0.15s; }
.ps-heatmap-doctor-link:hover { color:#4AA5B0; text-decoration:underline; }
.ps-heatmap-risk-cell { padding:7px 4px; }
.ps-risk-dot { width:18px; height:18px; border-radius:50%; margin:0 auto; cursor:default; }
.ps-risk-green { background:#4caf50; }
.ps-risk-amber { background:#ff9800; }
.ps-risk-red { background:#f44336; }
.ps-risk-nodata { background:#e0e0e0; }
/* Used for inactive (not-yet-subscribed) doctors. Visually distinct
   from ps-risk-nodata so the row reads as "gated" rather than "no
   data": hollow ring + diagonal hatching subtly suggests the cell
   is locked and would light up once the doctor is activated. */
.ps-risk-locked {
    background: repeating-linear-gradient(45deg, #f1f1f1 0 4px, #e6e6e6 4px 8px);
    border: 1px dashed #cfcfcf;
    box-sizing: border-box;
}
.ps-flag-badge { display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; border-radius:10px; font-size:0.72rem; font-weight:700; padding:0 5px; margin:1px; }
.ps-flag-red { background:#ffebee; color:#c62828; }
.ps-flag-amber { background:#fff8e1; color:#A07040; }
/* Legend strip below the heatmap. Each colour swatch + label is
   wrapped in its own `.ps-legend-item` so the dot always reads as
   "belonging" to the label that follows it. Items are right-aligned
   and packed against each other; the parent's justify-content keeps
   the whole strip flush with the right edge. */
.ps-heatmap-legend {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 10px 14px;
    font-size: 0.78rem;
    color: #666;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    flex-wrap: wrap;
}

.ps-heatmap-legend .ps-legend-item {
    display: inline-flex;
    align-items: center;
    flex-direction: row;
    gap: 8px;
    flex: 0 0 auto;
}

/* Swatch comes first, label follows — natural left-to-right reading
   for a colour key. */
.ps-heatmap-legend .ps-legend-item > span {
    text-align: left;
    white-space: nowrap;
}

.ps-table-wrap { background:rgba(255,255,255,0.97); border-radius:12px; box-shadow:0 2px 8px rgba(0,0,0,0.07); overflow:hidden; }
.ps-volume-table thead th { background:rgba(115,120,160,0.06) !important; border-bottom:2px solid rgba(115,120,160,0.12) !important; font-weight:700 !important; font-size:0.73rem !important; color:#555 !important; vertical-align:middle !important; text-align:center !important; padding:10px 10px 8px !important; }
.ps-volume-table thead th:first-child { text-align:left !important; }

.ps-revenue-wrap { background:rgba(255,255,255,0.97); border-radius:12px; box-shadow:0 2px 8px rgba(0,0,0,0.07); padding:16px; }
.ps-revenue-header-row, .ps-revenue-row { display:flex; align-items:center; gap:12px; padding:5px 0; }
.ps-revenue-row { border-bottom:1px solid rgba(0,0,0,0.04); }
.ps-revenue-row:last-of-type { border-bottom:none; }
.ps-revenue-doctor-col { flex:0 0 160px; min-width:0; }
.ps-revenue-doctor-name { font-size:0.83rem; font-weight:500; color:#444; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
.ps-revenue-indicator-group { flex:1; display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; align-items:center; }
.ps-revenue-indicator-group--4 { grid-template-columns:1fr 1fr 1fr 1fr; }
.ps-revenue-indicator-header { font-size:0.74rem; font-weight:700; color:#555; text-align:center; }
.ps-revenue-bar-wrap { width:100%; }
.ps-revenue-legend { display:flex; align-items:center; gap:12px; margin-top:14px; padding-top:10px; border-top:1px solid rgba(0,0,0,0.06); flex-wrap:wrap; }
.ps-revenue-legend-item { font-size:0.78rem; font-weight:600; }

.ps-addl-card { background:rgba(255,255,255,0.97); border-radius:12px; box-shadow:0 2px 8px rgba(0,0,0,0.07); padding:14px 16px; }
.ps-addl-card-header { display:flex; align-items:center; gap:7px; margin-bottom:10px; padding-bottom:8px; border-bottom:1px solid rgba(0,0,0,0.06); }
.ps-addl-doctor-name { font-size:0.88rem; font-weight:600; color:#333; }
.ps-addl-row { display:flex; align-items:center; justify-content:space-between; font-size:0.8rem; padding:5px 0; border-bottom:1px solid rgba(0,0,0,0.03); }
.ps-addl-row:last-child { border-bottom:none; }
.ps-addl-key { color:#888; }
.ps-addl-val { color:#333; font-weight:500; }

.ps-viz-card { background:rgba(255,255,255,0.97); border-radius:12px; box-shadow:0 2px 8px rgba(0,0,0,0.07); padding:18px 20px; overflow:hidden; }
.ps-viz-card--slim { padding:12px 16px; }
.ps-viz-title { font-size:0.8rem; color:#888; margin-bottom:10px; display:flex; align-items:center; flex-wrap:wrap; gap:6px; }
.ps-timeline-pair { display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start; margin-bottom:24px; }
.ps-timeline-pair > * { min-width:0; overflow:hidden; }
/* Timeline pair stays in its 2-column desktop layout regardless of
   viewport width. The portal shell is locked to a 1400 px minimum
   content width (see css/_tokens.css --gpc-portal-min-content), so
   reflowing the timeline to a single column at 860 px would produce
   the desktop-with-one-column-mid-page mismatch that caused the
   earlier "smashing up" the user reported. Narrower windows scroll
   horizontally instead. */

.ps-cal-legend { display:flex; align-items:center; justify-content:center; gap:4px; font-size:0.76rem; color:#666; margin-top:10px; flex-wrap:wrap; }
.ps-cal-swatch { width:13px; height:13px; border-radius:2px; flex-shrink:0; }

/* ── Doctor Volume Trends heatmap ────────────────────────────────────
   Shares the .ps-heatmap-* shell (table chrome, doctor column, scroll
   wrapper, legend layout) with the Compliance Marker Risk Summary
   above. The bits below add the metric-trend specific styling:

     • .ps-trend-col       — fixed-width sparkline columns
     • .ps-trend-cell      — cell padding tightened for tiny SVG sparks
     • .ps-trend-spark-wrap — flex wrap so sparkline scales to cell width
     • .ps-trend-spark      — base SVG class (height inherits from inline)
     • .ps-trend-direction-col — final summary chip column
     • .ps-trend-chip + ps-trend-{up,down,flat,nodata}
                            — colour-coded direction pill (also reused
                              by the legend at the bottom of the panel)
     • .ps-trend-empty     — em-dash placeholder when no data is present

   Direction palette mirrors the rest of the page:
     up    = #2e7d32 (green)
     down  = #c62828 (red, matches risk-red)
     flat  = #7378A0 (brand violet-grey)
     nodata = #cccccc */
/* Fixed layout so explicit percentage widths are honoured — without
   this the doctor column hogs the remaining horizontal space and the
   sparkline columns get crammed together on the right edge.

   Width budget (Doctor + 7 sparklines + Direction = 100%):
     Doctor      → 16%   (just enough for "Mike Ehrmantraut (inactive)")
     7 metrics   → 10%   each = 70%
     Direction   → 14%   (chip-only, fits "↓ Declining") */
.ps-trends-table {
    table-layout: fixed;
    min-width: 0;
}

.ps-trends-table .ps-heatmap-doctor-col {
    width: 16%;
    min-width: 150px;
    max-width: none;
}

.ps-trends-table .ps-trend-col {
    width: 10%;
    min-width: 78px;
    /* Force the metric column headers ("Prescriptions",
       "Telehealth services") to stay on one line so they don't
       break awkwardly when the page is narrowed. The markup uses
         between words to keep them readable while still
       respecting the nowrap rule. */
    white-space: nowrap;
    /* Slightly tighter horizontal padding on the headers so the
       seven labels sit comfortably across the row. */
    padding-left: 6px !important;
    padding-right: 6px !important;
}

.ps-trends-table .ps-trend-direction-col {
    width: 14%;
    min-width: 120px;
    text-align: center;
}

.ps-trends-table .ps-trend-cell {
    padding: 6px 6px;
    vertical-align: middle;
}

.ps-trend-spark-wrap {
    display: block;
    width: 100%;
    line-height: 0;
}

.ps-trend-spark {
    display: block;
    width: 100%;
    height: 24px;
}

.ps-trend-empty {
    color: #bbb;
    font-size: 0.78rem;
}

.ps-trend-chip {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.ps-trend-up {
    background: rgba(46, 125, 50, 0.12);
    color: #2e7d32;
}

.ps-trend-down {
    background: rgba(198, 40, 40, 0.12);
    color: #c62828;
}

.ps-trend-flat {
    background: rgba(115, 120, 160, 0.14);
    color: #565C82;
}

.ps-trend-nodata {
    background: rgba(0, 0, 0, 0.05);
    color: #888;
}

/* ── Trial ribbons ────────────────────────────────────────────────
   Diagonal ribbon attached to the doctor name cell when the parent
   CustomerAccount is in (or past) the 7-day trial. The cell becomes
   `position: relative` so the ribbon overlays the top-left corner
   without disturbing the column width. The "Trial Expired" variant
   reuses the ribbon shape with a warning palette.
*/
.ps-heatmap-doctor-col.ps-doctor-trial,
.ps-heatmap-doctor-col.ps-doctor-trial-expired {
    position: relative;
    overflow: hidden;
}

.ps-trial-ribbon {
    position: absolute;
    top: 8px;
    left: -22px;
    transform: rotate(-35deg);
    background: linear-gradient(135deg, #7AB8E0 0%, #5A98C4 100%);
    color: #fff;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 1px 26px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
    pointer-events: none;
    z-index: 2;
}

.ps-trial-ribbon-expired {
    background: linear-gradient(135deg, #D86E6E 0%, #B14D4D 100%);
}

/* The doctor-name span and "(N days remaining)" suffix sit to the
   right of where the ribbon overlays. Add some left padding so they
   don't clash with the ribbon edge. */
.ps-heatmap-doctor-col.ps-doctor-trial .ps-heatmap-doctor-name,
.ps-heatmap-doctor-col.ps-doctor-trial-expired .ps-heatmap-doctor-name {
    margin-left: 18px;
}