html, body {
    margin: 0;
    padding: 0;
    font-family: "Golos Text", "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Validation utility classes */
.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }
.invalid { outline: 1px solid #e50000; }
.validation-message { color: #e50000; }

/* ─────────────────────────────────────────────────────────────────── */
/*  AppBar                                                            */
/* ─────────────────────────────────────────────────────────────────── */

.ph-appbar {
    z-index: 1300 !important;
    /* HUD frame: cyan body, brighter cyan top hairline, sharp dark base.
       The brand color signs the chrome instead of a small accent stripe. */
    background: linear-gradient(
        180deg,
        var(--mud-palette-primary) 0%,
        var(--mud-palette-primary-darken) 100%
    ) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.25) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset, 0 6px 18px rgba(0, 0, 0, 0.10);
}

.ph-appbar::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 2px;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.55) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    pointer-events: none;
}

.ph-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-left: 8px;
    flex-shrink: 0;
    text-decoration: none;
    padding: 4px 10px;
    border-radius: 4px;
    transition: background 0.12s ease;
}
.ph-brand:hover {
    background: rgba(255, 255, 255, 0.10);
}

/* Wordmark — uses the transparent-background logo, filtered to white so it
   reads cleanly on the cyan AppBar. Drop shadow gives it lift against the
   cyan field. Height matches a non-dense AppBar so the brand isn't crushed. */
.ph-brand-mark {
    height: 40px;
    width: auto;
    display: block;
    filter: brightness(0) invert(1)
            drop-shadow(0 1px 1px rgba(0, 0, 0, 0.20));
}

/* Brand text beside the logo — "Globe" (bold, leads) over "Product Visibility Hub"
   (lighter, follows). Globe is the brand; the descriptor is the app's role. Descriptor
   hides on phones so the AppBar doesn't crowd the search/freshness pill/user chip. */
.ph-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}
.ph-brand-name {
    font-size: 15px;
    font-weight: 700;
    color: #FFFFFF;
    letter-spacing: -0.01em;
}
.ph-brand-descriptor {
    font-size: 10.5px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.82);
    letter-spacing: 0.04em;
}
@media (max-width: 767px) {
    .ph-brand-descriptor { display: none; }
}

.ph-search-wrap {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 460px;
    margin: 0 24px;
    display: flex;
    align-items: center;
}

.ph-appbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
    flex-shrink: 0;
}

/* Legacy globe + dual-line text styles retained for fallback; current AppBar
   uses .ph-brand-mark only. Safe to remove if no other surface uses these. */
.ph-brand-globe { filter: brightness(0) invert(1); display: block; }

/* AppBar status dot — wired up in Phase 5 */
.ph-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 4px;
    transition: box-shadow 0.2s ease, background 0.2s ease;
}
.ph-status-dot.fresh   { background: #00C853; box-shadow: 0 0 0 3px rgba(0, 200, 83, 0.20); }
.ph-status-dot.stale   { background: #FF9800; box-shadow: 0 0 0 3px rgba(255, 152, 0, 0.22); }
.ph-status-dot.expired { background: #F44336; box-shadow: 0 0 0 3px rgba(244, 67, 54, 0.22); }

.ph-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    background: #00C853;
    box-shadow: 0 0 0 3px rgba(0, 200, 83, 0.20);
}

/* AppBar freshness pill — replaces the bare status dot with a labeled pill,
   hidden on phones (the AppBar sheds it below 768px along with the search box). */
.ph-freshness-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.92);
    cursor: default;
}
.ph-freshness-pill .ph-mono { font-size: 11px; letter-spacing: 0.01em; }
@media (max-width: 768px) {
    .ph-freshness-pill { display: none; }
}

/* AppBar user chip */
.ph-user-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 10px 4px 6px;
    border-radius: 999px;
    cursor: pointer;
    color: #FFFFFF;
    transition: background 0.12s ease;
}
.ph-user-chip:hover {
    background: rgba(255, 255, 255, 0.12);
}
.ph-user-chip-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    text-align: left;
}
.ph-user-chip-name { font-size: 12.5px; font-weight: 600; }
.ph-user-chip-title { font-size: 10.5px; opacity: 0.78; }
@media (max-width: 768px) {
    .ph-user-chip-text { display: none; }
}

.ph-avatar-circle {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.22);
    color: #FFFFFF;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.02em;
}
.ph-avatar-circle-sm { width: 30px; height: 30px; font-size: 11.5px; }

.ph-user-menu-popover {
    border-radius: 10px !important;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.18) !important;
}

.ph-user-menu {
    padding: 12px 16px 10px;
    min-width: 240px;
}
.ph-user-menu-name { font-size: 13.5px; font-weight: 600; }
.ph-user-menu-sso { font-size: 11px; color: var(--mud-palette-text-secondary); margin-top: 2px; }

.ph-role-badge {
    display: inline-block;
    margin-top: 8px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    background: var(--mud-palette-primary-hover);
    color: var(--mud-palette-primary);
}
.ph-role-badge.is-admin {
    background: rgba(180, 101, 0, 0.14);
    color: #b46500;
}
[data-mud-theme="dark"] .ph-role-badge.is-admin { color: #e6a44d; }

/* NavDrawer — Exceptions open-count badge */
.ph-nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: 8px;
    border-radius: 999px;
    background: var(--mud-palette-error);
    color: #FFFFFF;
    font-size: 10.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ─────────────────────────────────────────────────────────────────── */
/*  NavDrawer                                                         */
/* ─────────────────────────────────────────────────────────────────── */

/* Drawer sidebar content is a short, bounded nav list that should never need
   its own scrollbar (matches the prototype, which never scrolls the rail) —
   MudBlazor's base .mud-drawer rule sets overflow-y:auto unconditionally. */
.ph-drawer {
    overflow-y: hidden !important;
}

.ph-nav { padding: 16px 0 0; }

.ph-nav-section {
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 10px !important;
    font-weight: 700 !important;
    color: var(--mud-palette-primary-darken) !important;
    padding: 16px 20px 8px;
    display: flex;
    align-items: center;
    border-top: 1px dashed rgba(0, 178, 226, 0.20);
}
.ph-nav-section:first-of-type {
    border-top: none;
}

/* HUD-style left rail: every nav item has padding for the rail; active = cyan
   block with bright bar + uppercase label tracking, hover = subtle tint */
.ph-nav .mud-nav-link {
    padding: 9px 16px;
    margin: 2px 8px;
    border-radius: 6px;
    font-size: 13px;
    transition: background 0.12s ease, color 0.12s ease;
}
.ph-nav .mud-nav-link.active {
    background: var(--mud-palette-primary) !important;
    color: #FFFFFF !important;
    font-weight: 600;
    letter-spacing: 0.02em;
    box-shadow: 0 1px 2px rgba(0, 178, 226, 0.25);
}
.ph-nav .mud-nav-link.active .mud-nav-link-icon {
    color: #FFFFFF !important;
}
.ph-nav .mud-nav-link:not(.active):hover {
    background: rgba(0, 178, 226, 0.08);
    color: var(--mud-palette-primary-darken);
}
.ph-nav .mud-nav-link:not(.active):hover .mud-nav-link-icon {
    color: var(--mud-palette-primary);
}

.ph-nav-footer {
    padding: 12px 20px 16px;
    border-top: 1px dashed rgba(0, 178, 226, 0.20);
    margin-top: auto;
}

.ph-nav-version {
    font-family: "Roboto Mono", "JetBrains Mono", monospace;
    font-size: 11px !important;
    opacity: 0.55;
    cursor: default;
}

/* ─────────────────────────────────────────────────────────────────── */
/*  Page layout                                                       */
/* ─────────────────────────────────────────────────────────────────── */

.ph-main {
    background: var(--mud-palette-background-grey);
    min-height: 100vh;
}

/* Page chrome (.ph-page, max-width + responsive padding steps) now lives in
   css/ph-components.css — do not redefine here. */

.ph-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 24px;
    gap: 16px;
    flex-wrap: wrap;
}

.ph-crumbs {
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.ph-crumbs a { color: inherit; text-decoration: none; }
.ph-crumbs .sep { color: var(--mud-palette-divider); }

/* .ph-page__title / .ph-page__sub now live in css/ph-components.css. */

/* ─────────────────────────────────────────────────────────────────── */
/*  Dashboard hero — branded landing surface above the data grid      */
/* ─────────────────────────────────────────────────────────────────── */

.ph-dashboard-hero {
    position: relative;
    margin: -30px -40px 32px -40px;     /* bleed past .ph-page padding */
    padding: 52px 40px 44px;
    overflow: hidden;
    background:
        radial-gradient(ellipse 80% 60% at 85% 0%, rgba(0, 178, 226, 0.10) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 0% 100%, rgba(0, 178, 226, 0.06) 0%, transparent 55%),
        linear-gradient(180deg, var(--mud-palette-surface) 0%, var(--mud-palette-background) 100%);
    border-bottom: 1px solid var(--mud-palette-divider);
}

/* Faint precision grid — gives the hero spatial weight without decoration noise */
.ph-dashboard-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(0, 178, 226, 0.045) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 178, 226, 0.045) 1px, transparent 1px);
    background-size: 56px 56px;
    background-position: -1px -1px;
    mask-image: radial-gradient(ellipse 70% 80% at 50% 40%, #000 0%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 40%, #000 0%, transparent 75%);
    pointer-events: none;
}

/* Single sharp cyan rule along the bottom — the editorial signature */

.ph-hero-content {
    position: relative;     /* lift above ::before grid */
    max-width: 1520px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
}

.ph-hero-logo {
    height: 96px;
    width: auto;
    margin-bottom: 8px;
    filter: drop-shadow(0 2px 12px rgba(0, 178, 226, 0.18));
}

.ph-hero-eyebrow {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--mud-palette-primary);
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.ph-hero-eyebrow::before,
.ph-hero-eyebrow::after {
    content: "";
    display: inline-block;
    width: 28px;
    height: 1px;
    background: currentColor;
    opacity: 0.45;
}

.ph-hero-title {
    margin: 0;
    font-size: 34px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.05;
    color: var(--mud-palette-text-primary);
    max-width: 22ch;
}

/* Smaller black supporting line under the cyan eyebrow.
   Visually subordinate — secondary nameplate beneath the brand element. */
.ph-hero-subtitle {
    margin-top: 2px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--mud-palette-text-primary);
}

.ph-hero-sub {
    margin: 0;
    font-size: 16px;
    line-height: 1.55;
    color: var(--mud-palette-text-secondary);
    max-width: 62ch;
}
.ph-hero-sub strong {
    color: var(--mud-palette-text-primary);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.ph-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 14px;
}

@media (max-width: 1179px) {
    .ph-dashboard-hero {
        margin: -24px -24px 24px -24px;
        padding: 40px 24px 34px;
    }
    .ph-hero-title { font-size: 30px; }
    .ph-hero-logo { height: 72px; }
}
@media (max-width: 767px) {
    .ph-dashboard-hero {
        margin: -18px -14px 24px -14px;
        padding: 30px 16px 26px;
    }
    .ph-hero-title { font-size: 25px; }
}

/* HUD-style section header — small uppercase label with cyan dot */
.ph-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--mud-palette-divider);
}
.ph-section-header::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--mud-palette-primary);
    box-shadow: 0 0 0 3px rgba(0, 178, 226, 0.18);
}
.ph-section-header h2,
.ph-section-header .ph-section-title {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--mud-palette-text-secondary);
    margin: 0;
}
.ph-section-header .ph-section-meta {
    margin-left: auto;
    font-size: 11px;
    color: var(--mud-palette-text-disabled);
    font-family: "Roboto Mono", monospace;
    letter-spacing: 0.04em;
}

/* .ph-page__sub base rule lives in css/ph-components.css; this just adds the
   bold-inline-count treatment some pages use inside it. */
.ph-page__sub strong {
    color: var(--mud-palette-text-primary);
    font-weight: 600;
}

.ph-mono {
    font-family: "Roboto Mono", "JetBrains Mono", monospace;
    font-size: 0.92em;
}

/* ─────────────────────────────────────────────────────────────────── */
/*  Cards                                                             */
/* ─────────────────────────────────────────────────────────────────── */

.ph-card {
    border-radius: 8px !important;
}

.ph-card-head {
    display: flex;
    align-items: center;
    padding: 18px 20px;
    gap: 12px;
}

.ph-card-head h6 {
    letter-spacing: -0.005em;
}

/* ─────────────────────────────────────────────────────────────────── */
/*  KPI cards — neutral surface, the number does the talking          */
/* ─────────────────────────────────────────────────────────────────── */

/* KPI grid/card structural classes now live in css/ph-components.css
   (.ph-kpi-grid, .ph-kpi-card, .ph-kpi-card__*) — do not redefine here. */

/* ─────────────────────────────────────────────────────────────────── */
/*  Dashboard — Stock-watch & Source-health                           */
/* ─────────────────────────────────────────────────────────────────── */

.ph-watch-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    cursor: pointer;
    border-bottom: 1px solid var(--mud-palette-divider-light);
    transition: background 0.1s ease;
}
.ph-watch-row:hover {
    background: var(--mud-palette-action-default-hover);
}
.ph-watch-row:last-child { border-bottom: none; }

.ph-watch-icon { flex-shrink: 0; }

.ph-rank-chip {
    display: inline-block;
    padding: 1px 8px;
    margin-left: 8px;
    background: var(--mud-palette-primary-hover);
    color: var(--mud-palette-primary);
    border-radius: 999px;
    font-family: "Roboto Mono", monospace;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.ph-rank-num {
    font-family: "Roboto Mono", monospace;
    font-size: 12px;
    font-weight: 600;
    color: var(--mud-palette-primary);
}

/* Rating treatment — gold star + tabular numerals.
   Used in ListingsMatrix per-retailer cells, the Rating rollup column,
   and per-attribute Rating row. */
.ph-rating-glyph {
    font-family: "Roboto Mono", monospace;
    font-size: 12.5px;
    font-weight: 600;
    color: #b8860b;             /* dark goldenrod — readable on light */
    font-variant-numeric: tabular-nums;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1.2;
}
[data-mud-theme="dark"] .ph-rating-glyph {
    color: #ffc94d;             /* warmer gold on dark */
}


/* Source-health cells — neutral now, no colored stripe.
   Uses the retailer color only for the small dot. */
.ph-source-cell {
    padding: 18px 20px;
    height: 100%;
    border-right: 1px solid var(--mud-palette-divider);
}
.ph-source-cell:last-child { border-right: none; }

.ph-source-cell .ph-retailer-dot {
    background: var(--retailer-color, var(--mud-palette-primary));
}

/* ─────────────────────────────────────────────────────────────────── */
/*  Detail page                                                       */
/* ─────────────────────────────────────────────────────────────────── */

.ph-hero-thumb {
    aspect-ratio: 1;
    background: var(--mud-palette-background-grey);
    border-radius: 6px;
    border: 1px solid var(--mud-palette-divider);
}

.ph-retailer-dot {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex-shrink: 0;
    display: inline-block;
}

.ph-coverage-bar {
    height: 6px !important;
    border-radius: 999px;
    overflow: hidden;
}

/* ─────────────────────────────────────────────────────────────────── */
/*  Tables — single style for all MudDataGrid + MudTable instances    */
/* ─────────────────────────────────────────────────────────────────── */

.ph-table .mud-table-row,
.ph-table tbody tr {
    height: 40px;
}

.ph-table .mud-table-cell,
.ph-table td,
.ph-table th {
    padding: 13px 18px;
}

.ph-table thead .mud-table-cell,
.ph-table thead th {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    color: var(--mud-palette-text-secondary);
}

.ph-row-clickable,
.ph-table tbody tr:hover {
    cursor: pointer;
}

.ph-table tbody tr:hover {
    background: var(--mud-palette-action-default-hover) !important;
}

/* MudDataGrid row click affordance */
.mud-data-grid .mud-table-row.mud-table-row-clickable,
.mud-table-hover .mud-table-row {
    cursor: pointer;
}

/* Top-of-table search toolbar (industry-standard quick filter) */
.ph-table-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px 8px;
    border-bottom: 1px solid var(--mud-palette-divider-light);
}

.ph-table-search {
    max-width: 480px;
    flex: 1 1 auto;
}

.ph-table-search-meta {
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Sortable column-header affordance — make the sort arrow visible & cyan */
.ph-table .mud-table-sort-label-icon,
.mud-data-grid .mud-table-sort-label-icon {
    color: var(--mud-palette-primary) !important;
    opacity: 0.85;
}
.ph-table .mud-table-sort-label:hover,
.mud-data-grid .mud-table-sort-label:hover {
    color: var(--mud-palette-primary) !important;
}

/* ─────────────────────────────────────────────────────────────────── */
/*  Stock pills                                                       */
/* ─────────────────────────────────────────────────────────────────── */

.ph-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.6;
    white-space: nowrap;
}

.ph-pill .ph-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.ph-pill.in_stock     { background: rgba(0, 200, 83, 0.10);  color: #00873a; }
.ph-pill.low_stock    { background: rgba(255, 152, 0, 0.10); color: #b46500; }
.ph-pill.out_of_stock { background: rgba(244, 67, 54, 0.10); color: #b41e15; }
.ph-pill.unlisted     { background: rgba(0, 0, 0, 0.05);     color: rgba(0, 0, 0, 0.55); }

[data-mud-theme="dark"] .ph-pill.in_stock     { color: #5BD68A; background: rgba(0, 200, 83, 0.16); }
[data-mud-theme="dark"] .ph-pill.low_stock    { color: #FFB74D; background: rgba(255, 152, 0, 0.18); }
[data-mud-theme="dark"] .ph-pill.out_of_stock { color: #EF5350; background: rgba(244, 67, 54, 0.18); }
[data-mud-theme="dark"] .ph-pill.unlisted     { color: rgba(255, 255, 255, 0.55); background: rgba(255, 255, 255, 0.06); }

/* Listings matrix price extremes */
.ph-cell-price.is-low  { color: var(--mud-palette-success); font-weight: 600; }
.ph-cell-price.is-high { color: var(--mud-palette-error);   font-weight: 500; }

/* ─────────────────────────────────────────────────────────────────── */
/*  Sources & sync — filter rules                                     */
/* ─────────────────────────────────────────────────────────────────── */

.ph-filter-rule {
    display: flex;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--mud-palette-divider-light);
}
.ph-filter-rule:last-child { border-bottom: none; }

.ph-filter-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    background: rgba(0, 178, 226, 0.10);
    display: flex;
    align-items: center;
    justify-content: center;
}
[data-mud-theme="dark"] .ph-filter-icon {
    background: rgba(53, 197, 234, 0.18);
}

.ph-sql-rule {
    margin: 6px 0 0 0;
    padding: 8px 12px;
    background: var(--mud-palette-background-grey);
    border-left: 3px solid var(--mud-palette-primary);
    border-radius: 2px;
    font-family: "Roboto Mono", "JetBrains Mono", monospace;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--mud-palette-text-primary);
    white-space: pre;
    overflow-x: auto;
}

.ph-sql-inline {
    font-family: "Roboto Mono", "JetBrains Mono", monospace;
    font-size: 11.5px;
    background: var(--mud-palette-background-grey);
    padding: 2px 6px;
    border-radius: 3px;
    color: var(--mud-palette-text-primary);
}

/* ─────────────────────────────────────────────────────────────────── */
/*  Internal vs Retailer — provenance distinction                     */
/* ─────────────────────────────────────────────────────────────────── */

:root {
    --ph-internal-bg: rgba(0, 178, 226, 0.06);
    --ph-internal-border: rgba(0, 178, 226, 0.30);
}
[data-mud-theme="dark"] {
    --ph-internal-bg: rgba(53, 197, 234, 0.10);
    --ph-internal-border: rgba(53, 197, 234, 0.40);
}

.ph-prov-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 1.5;
    white-space: nowrap;
}
.ph-prov-internal {
    background: var(--mud-palette-primary);
    color: #FFFFFF;
}
.ph-prov-retailer {
    background: rgba(0, 0, 0, 0.06);
    color: var(--mud-palette-text-secondary);
}
[data-mud-theme="dark"] .ph-prov-retailer {
    background: rgba(255, 255, 255, 0.10);
}

/* Compact Internal-row prefix in the catalog list view — small cyan accent
   bar on the left of the row, then plain text. Avoids the heavy "long blue
   column" anti-pattern. */
.ph-product-prefix {
    display: flex;
    align-items: stretch;
    gap: 12px;
    padding: 6px 0;
}

.ph-product-internal-bar {
    width: 3px;
    align-self: stretch;
    background: var(--mud-palette-primary);
    border-radius: 2px;
    flex-shrink: 0;
}

.ph-product-name {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--mud-palette-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 2px;
}

.ph-product-meta {
    font-size: 11.5px;
    color: var(--mud-palette-text-secondary);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ph-product-sep {
    color: var(--mud-palette-divider);
    margin: 0 4px;
}

/* Override MudDataGrid sticky-cell background so it's not grey by default.
   With <=8 columns we don't actually scroll horizontally; sticky just creates
   a confusing background colour band. Keeping the rule in case sticky is
   re-introduced for a wider matrix later. */
.ph-table .mud-data-grid-cell-sticky,
.ph-table th.mud-data-grid-cell-sticky {
    background: var(--mud-palette-surface) !important;
    box-shadow: none !important;
}
.ph-table .mud-table-row:hover .mud-data-grid-cell-sticky {
    background: var(--mud-palette-action-default-hover) !important;
}

/* Matrix Internal cell + header (used on Detail page attribute matrix) */
.ph-internal-header {
    background: var(--ph-internal-bg) !important;
    color: var(--mud-palette-primary-darken) !important;
    font-weight: 700 !important;
}

.ph-internal-cell {
    background: var(--ph-internal-bg);
    border-left: 3px solid var(--mud-palette-primary);
    padding: 12px 14px;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ph-internal-title {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--mud-palette-text-primary);
}

.ph-internal-code {
    color: var(--mud-palette-text-secondary);
    font-size: 11px;
}

.ph-internal-dept {
    color: var(--mud-palette-text-secondary);
    font-size: 11.5px;
    margin-top: 2px;
}


/* ─────────────────────────────────────────────────────────────────── */
/*  Per-product attribute matrix                                      */
/*  rows = attributes, cols = Internal + retailers                    */
/* ─────────────────────────────────────────────────────────────────── */

.ph-attr-matrix-wrap {
    overflow-x: auto;
}

.ph-attr-matrix {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.ph-attr-matrix thead th {
    text-align: left;
    padding: 14px 16px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    border-bottom: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-surface);
    position: sticky;
    top: 0;
}

.ph-attr-matrix tbody th.ph-attr-label {
    text-align: left;
    padding: 12px 16px;
    font-size: 12px;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-background-grey);
    border-bottom: 1px solid var(--mud-palette-divider-light);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    width: 180px;
}

.ph-attr-matrix tbody td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--mud-palette-divider-light);
    vertical-align: middle;
}

.ph-attr-matrix tbody tr:hover td,
.ph-attr-matrix tbody tr:hover .ph-attr-label {
    background: var(--mud-palette-action-default-hover);
}

/* Internal column visual treatment: cyan-tinted background, cyan left edge.
   Cyan is reserved exclusively for Internal — see UX-CONVENTIONS.md. */
.ph-attr-matrix .ph-attr-internal-col,
.ph-attr-matrix .ph-attr-internal-cell {
    background: var(--ph-internal-bg);
    border-left: 2px solid var(--mud-palette-primary);
    border-right: 1px solid var(--ph-internal-border);
    font-weight: 500;
}
.ph-attr-matrix tbody tr:hover .ph-attr-internal-cell {
    background: rgba(0, 178, 226, 0.10);
}
[data-mud-theme="dark"] .ph-attr-matrix tbody tr:hover .ph-attr-internal-cell {
    background: rgba(53, 197, 234, 0.15);
}

/* Section row visually separates groups (cross-source vs internal-only) */
.ph-attr-matrix tbody tr.ph-attr-section-row th,
.ph-attr-matrix tbody tr.ph-attr-section-row td {
    border-top: 2px solid var(--mud-palette-divider);
    padding-top: 16px;
}

.ph-attr-dash {
    color: var(--mud-palette-text-disabled);
    font-size: 12px;
}

/* ─────────────────────────────────────────────────────────────────── */
/*  Detail page — view toolbar (Matrix / Cards / Tiles toggle)        */
/* ─────────────────────────────────────────────────────────────────── */

.ph-view-toolbar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 20px;
    flex-wrap: wrap;
}

.ph-view-toolbar-text {
    flex: 1 1 auto;
    font-size: 12.5px;
    color: var(--mud-palette-text-secondary);
    line-height: 1.5;
}
.ph-view-toolbar-text strong {
    color: var(--mud-palette-text-primary);
    font-weight: 600;
    margin-right: 4px;
}

.ph-view-body {
    padding: 4px 0 0;
}

/* ─────────────────────────────────────────────────────────────────── */
/*  Detail page — Card view (one card per source)                     */
/* ─────────────────────────────────────────────────────────────────── */

.ph-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
    padding: 20px;
}

.ph-source-card {
    border: 1px solid var(--mud-palette-divider);
    border-radius: 8px;
    background: var(--mud-palette-surface);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.ph-source-card:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}

/* Trademark Internal — cyan accent so the eye learns "cyan = our data". */
.ph-source-card-internal {
    border-color: var(--mud-palette-primary);
    box-shadow: inset 4px 0 0 0 var(--mud-palette-primary);
}
.ph-source-card-internal .ph-source-card-head {
    background: var(--ph-internal-bg);
}

.ph-source-card-empty {
    opacity: 0.65;
}

.ph-source-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--mud-palette-divider-light);
    font-size: 13px;
}

.ph-source-card-label {
    font-weight: 700;
    letter-spacing: 0.02em;
}

.ph-source-card-meta {
    margin-left: auto;
    font-family: "Roboto Mono", monospace;
    font-size: 10px;
    color: var(--mud-palette-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.ph-source-card-body {
    margin: 0;
    padding: 12px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 0;
    font-size: 13px;
}

.ph-source-card-not-listed {
    padding: 16px 0;
    text-align: center;
    font-size: 12.5px;
}

/* Attribute row inside a card: label / value, two-column grid */
.ph-attr-row {
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 12px;
    padding: 6px 0;
    align-items: baseline;
}
.ph-attr-row dt {
    font-size: 10.5px;
    color: var(--mud-palette-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}
.ph-attr-row dd {
    margin: 0;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.ph-attr-divider {
    height: 1px;
    margin: 8px 0;
    background: var(--mud-palette-divider-light);
}

/* ─────────────────────────────────────────────────────────────────── */
/*  Top-nav search                                                    */
/* ─────────────────────────────────────────────────────────────────── */

.ph-search {
    width: 100%;
}

.ph-search .mud-input-outlined-border {
    border-color: rgba(255, 255, 255, 0.30) !important;
    background: rgba(255, 255, 255, 0.08) !important;
}
.ph-search .mud-input-control:hover .mud-input-outlined-border {
    border-color: rgba(255, 255, 255, 0.55) !important;
    background: rgba(255, 255, 255, 0.12) !important;
}
.ph-search .mud-input-control.mud-input-control-focused .mud-input-outlined-border {
    border-color: #FFFFFF !important;
    border-width: 1px !important;
    background: rgba(255, 255, 255, 0.16) !important;
}

.ph-search input {
    color: #FFFFFF !important;
    letter-spacing: 0.01em;
}
.ph-search input::placeholder {
    color: rgba(255, 255, 255, 0.65) !important;
    letter-spacing: 0.02em;
}
.ph-search .mud-input-adornment-start svg {
    color: rgba(255, 255, 255, 0.85) !important;
}

.ph-search-result {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 2px;
}

.ph-search-result-name {
    font-weight: 600;
    font-size: 13.5px;
    line-height: 1.3;
    color: var(--ph-primary-dark);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ph-search-result-meta {
    font-family: "Roboto Mono", monospace;
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ph-search-result-match {
    background: var(--mud-palette-primary-hover);
    color: var(--mud-palette-primary);
    border-radius: 3px;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    flex-shrink: 0;
}

.ph-search-variant-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 7px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #006D62;
    background: rgba(0, 218, 197, 0.16);
    border: 1px solid rgba(0, 218, 197, 0.45);
    border-radius: 999px;
    vertical-align: 1px;
}


/* ─────────────────────────────────────────────────────────────────── */
/*  Retailer link — Detail page                                       */
/* ─────────────────────────────────────────────────────────────────── */

.ph-retailer-link {
    color: var(--mud-palette-primary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.ph-retailer-link:hover {
    text-decoration: underline;
}

/* ─────────────────────────────────────────────────────────────────── */
/*  Internal column treatment — header signal for Trademark-sourced   */
/*  columns in ListingsMatrix. Cyan vertical bar + Internal badge.     */
/* ─────────────────────────────────────────────────────────────────── */

/* Layer the cyan tint over the opaque surface color so sticky headers stay
   readable during scroll (transparent backgrounds let scrolled content
   bleed through and wash out the column title). */
.ph-internal-col-head {
    background:
        linear-gradient(var(--ph-internal-bg), var(--ph-internal-bg)),
        var(--mud-palette-surface) !important;
    background-clip: padding-box !important;
}

.ph-internal-header {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    position: relative;
    padding-left: 8px;
}

.ph-internal-header .ph-internal-bar {
    position: absolute;
    left: -4px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 18px;
    background: var(--mud-palette-primary);
    border-radius: 2px;
}

/* ─────────────────────────────────────────────────────────────────── */
/*  Retailer logo — replaces the colored dot in column headers and    */
/*  Source-health cells when a logo file has been dropped in           */
/*  wwwroot/assets/retailers/{slug}.svg (see KnownRetailers.cs).       */
/* ─────────────────────────────────────────────────────────────────── */

.ph-retailer-logo {
    height: 22px;
    width: auto;
    max-width: 96px;
    object-fit: contain;
    display: block;
}

.ph-retailer-logo-lg {
    height: 32px;
}

/* ─────────────────────────────────────────────────────────────────── */
/*  PhFilterSelect — searchable, scrollable multi-select for filters  */
/* ─────────────────────────────────────────────────────────────────── */

.ph-filter-select {
    position: relative;
    display: inline-block;
}

.ph-filter-select-trigger {
    text-transform: none !important;
    justify-content: flex-start !important;
    background: var(--mud-palette-surface) !important;
    height: 34px;
    padding: 0 10px 0 12px !important;
    gap: 10px;
}
.ph-filter-select-trigger .ph-filter-select-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mud-palette-text-secondary);
}
.ph-filter-select-trigger .ph-filter-select-summary {
    font-size: 13px;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
    margin-left: 4px;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ph-filter-select-popover {
    z-index: 1400;
}

.ph-filter-select-panel {
    width: 320px;
    max-width: 90vw;
    display: flex;
    flex-direction: column;
}

.ph-filter-select-search {
    padding: 10px 12px 6px;
}

.ph-filter-select-actions {
    display: flex;
    align-items: center;
    padding: 0 8px 6px;
    gap: 4px;
}
.ph-filter-select-count {
    font-family: "Roboto Mono", monospace;
    font-size: 11px;
    color: var(--mud-palette-text-disabled);
    padding-right: 8px;
}

.ph-filter-select-list {
    max-height: 320px;
    overflow-y: auto;
    padding: 4px 0;
}

.ph-filter-select-row {
    display: flex;
    align-items: center;
    padding: 4px 12px;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}
.ph-filter-select-row:hover {
    background: var(--mud-palette-action-default-hover);
}
.ph-filter-select-row-label {
    font-size: 13px;
    color: var(--mud-palette-text-primary);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ph-filter-select-empty {
    padding: 14px 16px;
    font-size: 13px;
    color: var(--mud-palette-text-disabled);
    text-align: center;
}

/* ---------- Exception emphasis (rows / chip / page-head badge) ----------
   Used in the Listings Monitor to surface SKUs that have at least one
   retailer flagged OOS or Unlisted (today: Rollup.OosCount > 0). When
   the SOW's exception engine ships, the signal source moves to
   app.Exception but the classes stay the same. */

/* Row-level marker is intentionally restrained — the per-row chip in the
   Stock column does the calling-out. We only keep a thin red left edge
   so the eye can scan down the page and pick out exception rows without
   the whole table looking like a fire. */
.ph-row-action-needed > td:first-child {
    box-shadow: inset 3px 0 0 0 #d32f2f;
}

/* Stock cells on the Product Detail page (Matrix + Cards) pick up a soft
   red tint when the listing isn't InStock — just enough to scan the column
   for "what needs attention" without recolouring the whole row. */
.ph-attr-retailer-cell:has(.ph-stock-emphasis),
.ph-attr-row:has(.ph-stock-emphasis) {
    background: rgba(244, 67, 54, 0.08);
}

.ph-action-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    color: #b71c1c;
    background: rgba(244, 67, 54, 0.10);
    border: 1px solid rgba(244, 67, 54, 0.40);
    border-radius: 999px;
    white-space: nowrap;
    width: fit-content;
}

/* The page-head badge is the bold callout — the single high-impact
   "X SKUs need action" pill in the Listings Monitor header. Solid red
   fill, white text, slight shadow + subtle pulse on the warning glyph
   so it draws the eye without saturating the page. */
.ph-action-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-left: 12px;
    padding: 5px 14px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1.4;
    color: #fff;
    background: linear-gradient(135deg, #d32f2f 0%, #b71c1c 100%);
    border: 1px solid #8e0000;
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(211, 47, 47, 0.40);
    transition: transform 120ms ease, box-shadow 120ms ease;
    font-family: inherit;
    text-transform: uppercase;
}
.ph-action-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(211, 47, 47, 0.55);
}
.ph-action-badge.is-active {
    background: linear-gradient(135deg, #8e0000 0%, #5e0000 100%);
    border-color: #5e0000;
}

/* ─────────────────────────────────────────────────────────────────── */
/*  Sign-in — real-SSO redesign (2026-07-31, docs/UI/signin-page-handoff) */
/*  Two columns via flex-wrap, NOT a grid/media query — bases sum to    */
/*  740px so panels sit side by side down to ~740px, then stack. Do     */
/*  NOT reintroduce a JS-measured column split (see handoff README).    */
/* ─────────────────────────────────────────────────────────────────── */

.ph-signin {
  min-height: 100vh;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

.ph-signin__brand {
  flex: 1.1 1 380px;
  min-width: 300px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  padding: 40px 32px 34px;
  background: linear-gradient(160deg, #0090B5 0%, #00B2E2 55%, #33C5EA 100%);
}

.ph-signin__brand::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 50% at 80% 10%, rgba(255, 255, 255, .18), transparent 60%),
    radial-gradient(ellipse 60% 50% at 0% 100%, rgba(0, 0, 0, .18),       transparent 55%);
}

.ph-signin__brand > * { position: relative; }

.ph-signin__logo {
  align-self: flex-start;
  flex: 0 0 auto;
  height: 56px;
  width: auto;
  max-width: 240px;
  object-fit: contain;
  filter: brightness(0) invert(1) drop-shadow(0 2px 6px rgba(0, 0, 0, .25));
}

.ph-signin__eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .85);
}

.ph-signin__title {
  margin-top: 14px;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.02em;
  max-width: 14ch;
  color: #fff;
}

.ph-signin__lede {
  margin: 18px 0 0;
  font-size: 15px;
  line-height: 1.6;
  max-width: 46ch;
  color: rgba(255, 255, 255, .88);
}

.ph-signin__caps {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  max-width: 44ch;
}
.ph-signin__cap { display: flex; align-items: flex-start; gap: 12px; }

.ph-signin__cap-icon {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .22);
  color: #fff;
}
.ph-signin__cap-icon svg { width: 17px; height: 17px; }

.ph-signin__cap-title { font-size: 13.5px; font-weight: 600; color: #fff; }
.ph-signin__cap-body {
  font-size: 12.5px;
  line-height: 1.5;
  margin-top: 2px;
  color: rgba(255, 255, 255, .78);
}

.ph-signin__foot { display: flex; flex-direction: column; gap: 18px; }

.ph-signin__coverage-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
}

.ph-signin__chips {
  margin-top: 11px;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.ph-signin__chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  border-radius: 13px;
  background: rgba(255, 255, 255, .13);
  border: 1px solid rgba(255, 255, 255, .20);
  font-size: 11.5px;
  font-weight: 500;
  color: #fff;
}

/* The white ring keeps dark accents (Lowe's #004990) legible on cyan. */
.ph-signin__chip-swatch {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  flex-shrink: 0;
  background: var(--ph-retailer-color, #fff);
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .55);
}

.ph-signin__version {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ph-mono, "Roboto Mono", monospace);
  font-size: 12px;
  color: rgba(255, 255, 255, .80);
}
.ph-signin__version-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .22);
}
.ph-signin__version-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #A7F3C4;
}
.ph-signin__build { color: rgba(255, 255, 255, .62); }

.ph-signin__panel {
  flex: 0.9 1 360px;
  min-width: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: var(--ph-bg);
}
@media (max-width: 767px) {
  .ph-signin__panel { padding: 28px 20px 40px; }
}

.ph-signin__col {
  width: 100%;
  max-width: 396px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ph-signin__card {
  background: var(--ph-surface);
  border: 1px solid var(--ph-divider);
  border-radius: 12px;
  padding: 30px 28px 26px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .05);
}

.ph-signin__avatar {
  width: 116px;
  height: 116px;
  margin: 0 auto;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--ph-surface-2);
  border: 1px solid var(--ph-divider);
}
.ph-signin__avatar svg {
  width: 86px;
  height: 86px;
  color: var(--ph-text-3);
}

.ph-signin__heading {
  margin-top: 18px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.01em;
}

.ph-signin__body {
  margin: 7px 0 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ph-text-2);
}

.ph-signin__cta {
  margin-top: 22px;
  width: 100%;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  border-radius: 8px;
  background: var(--ph-primary);
  color: #fff;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 178, 226, .35);
  text-transform: none;
}
.ph-signin__cta:hover { background: var(--ph-primary-dark); }
.ph-signin__cta svg { width: 20px; height: 20px; }

.ph-signin__support {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 4px;
  font-size: 11.5px;
  color: var(--ph-text-3);
}
.ph-signin__support svg { width: 16px; height: 16px; }
.ph-signin__support a { font-weight: 600; }

.ph-signin-denied {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  text-align: center;
}
.ph-signin-denied__inner { max-width: 420px; }
.ph-signin-denied__icon  { color: var(--ph-red); }
.ph-signin-denied__icon svg { width: 56px; height: 56px; }
.ph-signin-denied__title { margin-top: 14px; font-size: 22px; font-weight: 700; }
.ph-signin-denied__body  {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ph-text-2);
}
.ph-signin-denied__back {
  margin-top: 22px;
  height: 42px;
  padding: 0 22px;
  border: 1px solid var(--ph-divider);
  border-radius: 8px;
  background: var(--ph-surface);
  color: var(--ph-text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

/* ─────────────────────────────────────────────────────────────────── */
/*  Stoplight — strictly binary red/green, always paired with a glyph */
/*  for colour-blind accessibility. Used on Products, Listings         */
/*  Monitor, and Exceptions rows.                                      */
/* ─────────────────────────────────────────────────────────────────── */

.ph-stoplight {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
}
.ph-stoplight .mud-icon-root { font-size: 15px !important; }
.ph-stoplight.is-red   { background: rgba(180, 30, 21, 0.12);  color: #b41e15; }
.ph-stoplight.is-green { background: rgba(0, 135, 58, 0.12);   color: #00873a; }
[data-mud-theme="dark"] .ph-stoplight.is-red   { color: #ff6b60; background: rgba(255, 107, 96, 0.16); }
[data-mud-theme="dark"] .ph-stoplight.is-green { color: #34d17a; background: rgba(52, 209, 122, 0.16); }

/* Stratification pill — Top = red, Middle = amber, Bottom = slate
   (semantic color rule from the design tokens — distinct from stoplight red/green). */
.ph-strat-pill {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.01em;
}
.ph-strat-pill.top    { background: rgba(180, 30, 21, 0.10);  color: #b41e15; }
.ph-strat-pill.middle { background: rgba(180, 101, 0, 0.10);  color: #b46500; }
.ph-strat-pill.bottom { background: rgba(85, 96, 110, 0.12);  color: #55606e; }
[data-mud-theme="dark"] .ph-strat-pill.top    { color: #ff6b60; background: rgba(255, 107, 96, 0.14); }
[data-mud-theme="dark"] .ph-strat-pill.middle { color: #e6a44d; background: rgba(230, 164, 77, 0.14); }
[data-mud-theme="dark"] .ph-strat-pill.bottom { color: #9aa4b0; background: rgba(154, 164, 176, 0.14); }

/* ─────────────────────────────────────────────────────────────────── */
/*  Retailers — card grid                                             */
/*  Card chrome (surface/border/overflow) is .ph-card from             */
/*  ph-components.css. Only the auto-fill grid template and the bits   */
/*  that need a per-card --retailer-color custom property live here,   */
/*  plus a 10px-radius override (the handoff calls out 10px for this   */
/*  screen specifically vs. .ph-card's generic 8px).                   */
/* ─────────────────────────────────────────────────────────────────── */

.ph-retailer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.ph-retailer-card {
    border-radius: 10px;
}

.ph-retailer-card .ph-card__body {
    padding: 16px 18px;
}

.ph-retailer-card-bar {
    height: 6px;
    background: var(--retailer-color, var(--ph-primary));
}

.ph-retailer-tile {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--retailer-color, var(--ph-primary));
    color: #FFFFFF;
    font-weight: 700;
    font-size: 15px;
    flex-shrink: 0;
}

.ph-retailer-card-source {
    font-size: 11px;
    color: var(--ph-text-3);
}

.ph-retailer-rows {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    font-size: 12.5px;
}

.ph-retailer-card-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ph-seller-section {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed var(--ph-divider);
}

.ph-seller-label {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ph-text-3);
    margin-bottom: 6px;
}

.ph-seller-chip {
    display: inline-block;
    padding: 3px 7px;
    border-radius: 6px;
    background: var(--ph-internal-bg);
    color: var(--ph-primary-dark);
    font-size: 10.5px;
}

/* ─────────────────────────────────────────────────────────────────── */
/*  Exceptions — status pill, type pill, group colors                 */
/*  Offline = red, PTH = amber, PTL = slate (design-token semantic     */
/*  rule) — distinct from the binary red/green stoplight.              */
/* ─────────────────────────────────────────────────────────────────── */

.ph-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}
.ph-status-pill__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}
.ph-status-pill.open     { background: rgba(180, 30, 21, 0.10);  color: #b41e15; }
.ph-status-pill.resolved { background: rgba(0, 135, 58, 0.10);   color: #00873a; }
.ph-status-pill.closed   { background: rgba(85, 96, 110, 0.12);  color: #55606e; }
[data-mud-theme="dark"] .ph-status-pill.open     { color: #ff6b60; background: rgba(255, 107, 96, 0.14); }
[data-mud-theme="dark"] .ph-status-pill.resolved { color: #34d17a; background: rgba(52, 209, 122, 0.14); }
[data-mud-theme="dark"] .ph-status-pill.closed   { color: #9aa4b0; background: rgba(154, 164, 176, 0.14); }

.ph-exc-type-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    width: fit-content;
}
.ph-exc-type-pill .mud-icon-root { font-size: 13px !important; }
.ph-exc-type-pill.offline { background: rgba(180, 30, 21, 0.10); color: #b41e15; }
.ph-exc-type-pill.pth     { background: rgba(180, 101, 0, 0.10); color: #b46500; }
.ph-exc-type-pill.ptl     { background: rgba(85, 96, 110, 0.12); color: #55606e; }
.ph-exc-type-pill.other   { background: rgba(0, 0, 0, 0.06);     color: var(--mud-palette-text-secondary); }
[data-mud-theme="dark"] .ph-exc-type-pill.offline { color: #ff6b60; background: rgba(255, 107, 96, 0.14); }
[data-mud-theme="dark"] .ph-exc-type-pill.pth     { color: #e6a44d; background: rgba(230, 164, 77, 0.14); }
[data-mud-theme="dark"] .ph-exc-type-pill.ptl     { color: #9aa4b0; background: rgba(154, 164, 176, 0.14); }

.ph-promo-chip {
    display: inline-block;
    width: fit-content;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: rgba(238, 158, 34, 0.14);
    color: #b46500;
}

/* Closed (superseded) rows are de-emphasized, never hidden */
.ph-row-suppressed {
    opacity: 0.62;
}

/* ─────────────────────────────────────────────────────────────────── */
/*  Exceptions — Layout B, priority lanes                             */
/* ─────────────────────────────────────────────────────────────────── */

.ph-lanes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
@media (max-width: 1180px) { .ph-lanes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 768px)  { .ph-lanes { grid-template-columns: 1fr; } }

.ph-lane {
    border: 1px solid var(--mud-palette-divider);
    border-radius: 8px;
    background: var(--mud-palette-surface);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.ph-lane-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 700;
    border-top: 3px solid transparent;
    border-bottom: 1px solid var(--mud-palette-divider-light);
}
.ph-lane-head.offline { border-top-color: #b41e15; }
.ph-lane-head.pth     { border-top-color: #b46500; }
.ph-lane-head.ptl     { border-top-color: #55606e; }

.ph-lane-count {
    font-family: "Roboto Mono", monospace;
    font-size: 11px;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--mud-palette-background-grey);
}

.ph-lane-body {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* Was calc(100vh - 420px) — cramped the lane down to a couple of visible cards on most
       window sizes (reported 2026-08-03: "very hard to read"). Subtracting less headroom and
       giving a generous floor makes the lane itself tall and genuinely scrollable, rather than
       a tiny peephole onto the (still page-capped, not full-filtered-set — see the comment
       above this block in Exceptions.razor for why) list of cards. */
    max-height: calc(100vh - 260px);
    min-height: 560px;
    overflow-y: auto;
}

.ph-lane-card {
    padding: 10px 12px;
    border-radius: 6px;
    background: var(--mud-palette-background-grey);
    border-left: 3px solid var(--retailer-color, var(--mud-palette-primary));
    cursor: pointer;
    transition: background 0.12s ease;
}
.ph-lane-card:hover { background: var(--mud-palette-action-default-hover); }
.ph-lane-card-title { font-size: 12.5px; font-weight: 600; margin-bottom: 2px; }
.ph-lane-card-meta {
    font-size: 10.5px;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ph-lane-empty {
    padding: 20px 0;
    text-align: center;
    font-size: 12px;
    color: var(--mud-palette-text-disabled);
}

/* ─────────────────────────────────────────────────────────────────── */
/*  Exceptions — Layout C, by tier                                    */
/* ─────────────────────────────────────────────────────────────────── */

/* Exceptions layout C ("By tier") — ExceptionsByTier.razor. Grouped tables sharing
   .ph-grid--exceptions' column template with layout A, not the old auto-fill card grid
   (.ph-tier-grid/.ph-tier-card, removed 2026-07-29 — read as clutter, inconsistent columns). */
.ph-tier-section + .ph-tier-section .ph-grid__head {
    opacity: 0.72;
}
.ph-grid--exceptions .ph-grid__row:last-of-type {
    border-bottom: 0;
}
.ph-tier-band {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    position: sticky;
    top: 64px;
    z-index: 2;
    padding: 8px 0;
    background: var(--ph-bg);
}
@media (max-width: 767px) {
    .ph-tier-band { position: static; }
}

/* ─────────────────────────────────────────────────────────────────── */
/*  Exception detail                                                  */
/* ─────────────────────────────────────────────────────────────────── */

/* Type glyph circle rendered inline in ExceptionDetail.razor now (solid group-colour fill,
   white glyph) instead of via this pale-tint class — kept only as a comment marker so a future
   .ph-exc-glyph reintroduction doesn't silently resurrect the pale-tint look. */

.ph-detail-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 20px;
    align-items: start;
}
@media (max-width: 1179px) {
    .ph-detail-grid { grid-template-columns: 1fr; }
    .ph-notes-panel { position: static !important; }
}

.ph-detail-label {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 2px;
}

.ph-detail-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 24px;
    font-size: 13px;
}

/* Goal-bounds bar, audit timeline, and notes panel structural styles now live in
   css/ph-components.css (.ph-goalbar__*, .ph-timeline__*, .ph-note*) — superseded, do not
   redefine here. Kept: .ph-detail-grid/.ph-detail-label/.ph-detail-fields (no equivalent in
   the new stylesheet) and .ph-mono.<group>-text (Actual-value colour, still used). */

/* ─────────────────────────────────────────────────────────────────── */
/*  Dashboard — clickable KPI cards, lower grid, type bars             */
/* ─────────────────────────────────────────────────────────────────── */

.ph-kpi-link {
    text-decoration: none;
    color: inherit;
    display: block;
}
.ph-dashboard-lower {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 20px;
    align-items: start;
}
@media (max-width: 1024px) {
    .ph-dashboard-lower { grid-template-columns: 1fr; }
}

.ph-type-bar-row {
    display: grid;
    grid-template-columns: 110px 1fr 32px;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
}
.ph-type-bar-label {
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
}
.ph-type-bar-track {
    height: 8px;
    border-radius: 999px;
    background: var(--mud-palette-background-grey);
    overflow: hidden;
}
.ph-type-bar-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.2s ease;
}
.ph-type-bar-fill.offline { background: #b41e15; }
.ph-type-bar-fill.pth     { background: #b46500; }
.ph-type-bar-fill.ptl     { background: #55606e; }
.ph-type-bar-count {
    text-align: right;
    font-size: 12px;
    font-weight: 600;
}

/* ─────────────────────────────────────────────────────────────────── */
/*  Admin panel — OOS threshold stepper                                */
/* ─────────────────────────────────────────────────────────────────── */

.ph-goal-lookup-result {
    padding: 14px 16px;
    border-radius: 6px;
    background: var(--mud-palette-background-grey);
}

.ph-goal-bounds-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.ph-goal-bound-tile {
    padding: 12px 14px;
    border-radius: 6px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
    text-align: center;
}
.ph-goal-bound-tile.is-goal {
    border-color: var(--mud-palette-primary);
    background: var(--ph-internal-bg);
}

.ph-goal-bound-value {
    font-size: 18px;
    font-weight: 600;
    margin-top: 4px;
}
.ph-goal-bound-value.is-goal {
    color: var(--mud-palette-primary);
    font-weight: 700;
}

@media (max-width: 600px) {
    .ph-goal-bounds-row { grid-template-columns: 1fr; }
}

.ph-threshold-value {
    min-width: 90px;
    text-align: center;
    padding: 10px 20px;
    border: 2px solid var(--mud-palette-primary);
    border-radius: 8px;
    font-family: "Roboto Mono", monospace;
    font-size: 28px;
    font-weight: 700;
    color: var(--mud-palette-primary);
}