/* Client Portal — Design D "Glass Cohesion".
   See DESIGN.md → Glass Cohesion, and the rationale header in utilities.css:1.

   The portal renders through MainLayout like every other page, so body's ground gradient and
   .main-container's `--mud-palette-background-gray: transparent` redefinition already reach it.
   This file therefore only has to STOP painting over the ground and retarget the .cp-* surfaces
   onto the house tokens:

     GROUND  .cp-bg / .cp-page   — paint nothing; let body's gradient through
     GLASS   .cp-header (+ the tab bar joined below it) — the chrome panel
     SOLID   .cp-card / .cp-metric-card / .cp-section-card — content cards

   No backdrop-filter anywhere: blur is reserved for the app bar and nav drawer (DESIGN.md:417).

   Load order: index.html links this AFTER utilities.css, so equal-specificity rules here win on
   source order and need no !important. */

/* ===== GROUND ==============================================================
   Both of these used to paint: .cp-bg a flat light grey, .cp-page a hairline frame on three
   sides. Together they read as a boxed document sitting on grey. Design D wants panels floating
   on the body gradient, so neither paints anything now. */
.cp-bg {
    min-height: calc(100dvh - 64px);
}

.cp-page {
    max-width: 1600px;
    margin: 0 auto;
}

.cp-section + .cp-section {
    margin-top: 0px;
}

/* ===== SOLID — content cards ===============================================
   The .custom-border recipe from utilities.css:1266, restated rather than applied via markup so
   ActivityChart/PieChartWidget need no edits. --defex-card-bg carries alpha, so the ground tints
   through very slightly — that is what makes a card read as lifted rather than pasted on. */
.cp-card,
.cp-section-card {
    background-color: var(--defex-card-bg);
    border: 1px solid var(--defex-card-edge);
    border-radius: var(--defex-radius-panel);
    box-shadow: var(--defex-card-shadow);
}

.cp-card-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

/* A card is translucent now, so any opaque child punches a solid rectangle through it. The
   global rule at utilities.css:1289 only matches .custom-border, so restate it for cp cards. */
.cp-card .mud-table,
.cp-card .mud-data-grid,
.cp-section-card .mud-table,
.cp-section-card .mud-data-grid {
    background-color: transparent;
}

/* ===== GLASS — the chrome panel ============================================
   Was a solid navy HUD bar (--mud-palette-primary, white ink) running flush to the page edges.
   Now the .page-header recipe from utilities.css:1466 — translucent, rimmed, floated. No blur:
   it reads as glass because the ground shows through it, not because it blurs.

   Margins match the 16px content gutter (the tab bar below and the .pa-4 tab bodies both sit at
   16px) so the header, the tab strip and the cards all share one left edge. */
.cp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin: 16px 16px 0;
    padding: 16px 20px;
    background: var(--defex-glass-panel);
    border: 1px solid var(--defex-glass-edge);
    border-radius: var(--defex-radius-panel);
    box-shadow: var(--defex-panel-shadow);
    /* The back button is Color.Inherit — it took white from the old navy bar and would be
       invisible on glass. Everything in here inherits page ink instead. */
    color: var(--mud-palette-text-primary);
}

.cp-header-eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 4px;
}

.cp-header-title {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--mud-palette-text-primary);
}

/* The address/eyebrow line under the title. Was an inline #8A96A8 literal chosen for the navy
   bar; now a class so it tracks the palette. */
.cp-header-subtitle {
    color: var(--mud-palette-text-secondary);
}

.cp-header-stats {
    display: flex;
    align-items: flex-start;
    gap: 40px;
}

.cp-header-stat {
    text-align: right;
}

.cp-header-stat-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 5px;
}

.cp-header-stat-value {
    font-size: 22px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    color: var(--mud-palette-text-primary);
}

.cp-header-stat-good {
    color: var(--mud-palette-success);
}

@media (max-width: 600px) {
    .cp-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .cp-header-stats {
        gap: 28px;
    }

    .cp-header-stat {
        text-align: left;
    }
}

/* ===== Header + tab strip as ONE panel =====================================
   Mirrors utilities.css:1506 for the portal's bespoke header. The header squares its bottom and
   MudTabs' own bar becomes the panel's lower half, so the two read as a single piece of glass.

   Requires .cp-header and .mud-tabs to be ADJACENT siblings — ClientPortalProperty's
   load-failure banner was moved above the header for exactly this reason. Anything reintroduced
   between them silently un-joins the panel. */
.cp-header:has(+ .mud-tabs) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: 0;
    /* Casts UPWARD only. The downward shadow belongs to the tab bar below; keeping the panel
       shadow here would drop a cast across the seam and draw the very line the join removes. */
    box-shadow: 0 -6px 24px rgba(15, 23, 43, 0.05);
}

.cp-header + .mud-tabs > .mud-tabs-tabbar {
    /* Tracks .cp-header's own margins — same panel, so the two edges must agree. */
    margin: 0 16px;
    padding-left: 16px;
    padding-right: 8px;
    background-color: var(--defex-glass-panel);
    border: 1px solid var(--defex-glass-edge);
    border-top: 1px solid var(--defex-rule);
    border-bottom-left-radius: var(--defex-radius-panel);
    border-bottom-right-radius: var(--defex-radius-panel);
    box-shadow: var(--defex-panel-shadow);
}

.cp-header + .mud-tabs {
    border-top: 0;
    margin-top: 0;
}

.cp-header + .mud-tabs > .mud-tabs-panels {
    margin-top: 0;
    background-color: transparent;
}

/* ===== KPI tiles ===========================================================
   Metric row — equal-width KPI cards. */
.cp-metric-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
}

@media (max-width: 960px) {
    .cp-metric-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
    .cp-metric-row { grid-template-columns: minmax(0, 1fr); }
}

/* SOLID card plus the portal's own 4px coloured left accent. The accent is kept deliberately: it
   is an ACCENT, not a surface, and it is the one piece of the old Figma language worth carrying
   over — it is how a client reads severity at a glance. */
.cp-metric-card {
    background-color: var(--defex-card-bg);
    border: 1px solid var(--defex-card-edge);
    border-left: 4px solid #9ca3af;
    border-radius: var(--defex-radius-panel);
    box-shadow: var(--defex-card-shadow);
    transition: box-shadow 0.15s ease;
}

.cp-metric-card:hover {
    box-shadow: var(--defex-menu-shadow);
}

/* Left accent colour per semantic type */
.cp-metric-card-red { border-left-color: #dc2626; }
.cp-metric-card-orange { border-left-color: #ea580c; }
.cp-metric-card-blue { border-left-color: #2563eb; }
.cp-metric-card-green { border-left-color: #16a34a; }
.cp-metric-card-purple { border-left-color: #7c3aed; }
.cp-metric-card-default { border-left-color: #9ca3af; }

.cp-metric-label {
    color: var(--mud-palette-text-secondary);
    font-size: 13px;
    font-weight: 500;
}

.cp-metric-value {
    color: var(--mud-palette-text-primary);
    font-weight: 700;
    font-size: 28px;
    line-height: 1.1;
}

/* Inline coloured icon (no background box) */
.cp-metric-icon {
    width: 18px;
    height: 18px;
    font-size: 18px;
}

.cp-metric-icon-red { color: #dc2626; }
.cp-metric-icon-blue { color: #2563eb; }
.cp-metric-icon-orange { color: #ea580c; }
.cp-metric-icon-green { color: #16a34a; }
.cp-metric-icon-purple { color: #7c3aed; }
.cp-metric-icon-default { color: var(--mud-palette-text-secondary); }

/* ===== Pie chart widget ==================================================== */
.cp-pie-row {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 24px;
    align-items: center;
}

.cp-pie-chart {
    position: relative;
}

.cp-pie-total {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    pointer-events: none;
}

.cp-pie-total-value {
    font-size: 18px;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.cp-pie-total-label {
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
}

.cp-pie-legend {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cp-pie-legend-row {
    display: grid;
    grid-template-columns: 12px 1fr auto;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.cp-pie-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.cp-pie-legend-label {
    color: var(--mud-palette-text-secondary);
}

.cp-pie-legend-value {
    color: var(--mud-palette-text-primary);
    font-weight: 600;
}

/* ===== Legacy / currently unreferenced =====================================
   .cp-tab-bar, .cp-property-bar and the .cp-detail-* pair are defined but not used by any markup
   today. Retargeted onto the tokens along with everything else rather than left on the old hex,
   so a future consumer cannot silently reintroduce the flat system. Worth a dead-CSS sweep
   separately — that is deliberately not part of this pass. */
.cp-tab-bar {
    position: sticky;
    top: 0;
    z-index: 5;
    background-color: var(--defex-glass-panel);
    border-bottom: 1px solid var(--defex-rule);
}

.cp-property-bar {
    background-color: var(--defex-card-bg);
    padding: 14px 28px;
    border-bottom: 1px solid var(--defex-rule);
}

.cp-property-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    margin: 0;
}

.cp-property-address {
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
    margin: 0;
}

/* Sectioned detail cards (job detail). Surface comes from the SOLID rule above. */
.cp-section-card {
    padding: 22px;
}

.cp-section-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    margin: 0 0 14px;
}

.cp-detail-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    margin: 0;
}

.cp-detail-value {
    font-size: 14px;
    color: var(--mud-palette-text-primary);
    margin-top: 4px;
}