html {
    scrollbar-gutter: stable;
}

/* My Account uses the shared page shell + tab shell — gpc-page-container,
   gpc-content-shell gpc-tab-shell, gpc-list-wrap rules in
   css/shared/page-shell.css. Tab strip geometry (height, top margin,
   tab card styling) is owned entirely by the shared sheet — do NOT
   add `.account-settings-page .mud-tabs-tabbar` or
   `.account-settings-page .mud-tab` overrides here, they would fight
   the shared rules and reintroduce the cross-page inconsistency that
   the shared shell was created to eliminate. */

/* Per-tab content wrapper. The `<MudGrid Class="mt-4 account-tab-grid">`
   markup is preserved on every MudTabPanel because removing 12 of them
   safely is high-risk for no visible benefit. Instead we neutralise
   the `mt-4` (since the shared `.gpc-tab-shell .mud-tab-panel` already
   adds 16 px of top padding — without this the gap would stack to
   32 px) and let the wrapper fill 100 % of the tab panel. The
   panel itself is constrained to 90 % / 1400 px by the shared rule
   `.gpc-tab-shell .mud-tabs-panels` in page-shell.css, so My Account
   content now reads at the same width as PSR / Support / future
   tabbed pages without a per-page max-width override. */
.gpc-tab-shell .mud-tab-panel .account-tab-grid {
    margin-top: 0 !important;
    max-width: none !important;
    width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.account-settings-page .mud-card {
    border-radius: 10px !important;
    border: 1px solid rgba(0,0,0,0.09) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
}

.account-settings-page .mud-grid-item {
    width: 100%;
}

.account-settings-page .mud-card-header {
    padding-top: 14px;
    padding-bottom: 8px;
}

.account-settings-page .mud-card-content {
    padding-top: 10px;
    padding-bottom: 12px;
}

.account-settings-page .mud-card-actions {
    padding-top: 8px;
    padding-bottom: 10px;
}

.profile-readonly-muted {
    opacity: 0.58;
}

.security-readonly-muted {
    opacity: 0.58;
}

.security-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 40px;
    row-gap: 12px;
    align-items: center;
}

.sg-header-left, .sg-header-right {
    padding-bottom: 2px;
}

.sg-mfa-cell .mfa-top-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

.sg-mfa-cell .mfa-contact-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.sg-mfa-cell .mfa-contact-trailing {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.sg-mfa-cell .mfa-contact-text {
    font-size: 1rem;
    color: #555;
    flex: 1 1 auto;
}

.sg-mfa-cell .mfa-status-label {
    font-size: 0.82rem;
    white-space: nowrap;
}

.sg-verify-row {
    grid-column: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Earlier this block stacked .security-grid to a single column at
   narrow viewports. With the portal shell locked to a 1400 px content
   minimum, the page never renders at <1400 px effective content width;
   stacking the grid based on viewport width caused a visible mismatch
   with the rest of the still-desktop layout (the user saw the security
   row collapse to a single column while the surrounding cards stayed
   side-by-side at 1400+ px). The two-column layout now stays put at
   every viewport size; users on a narrower window scroll horizontally
   to see the off-screen content. See css/_tokens.css and the responsive
   UI pass plan for the broader contract. */

/* ── Subscription tab ── */
.sub-modules-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.sub-module-card {
    border-radius: 10px;
    border: 2px solid #e0e0e0;
    padding: 18px 16px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: border-color 0.2s, box-shadow 0.2s;
    background: #fff;
}

.sub-module-active {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.sub-module-foundations.sub-module-active { border-color: #7AB8E0; }
.sub-module-enhance.sub-module-active    { border-color: #4AA5B0; }
.sub-module-optimise.sub-module-active   { border-color: #5B6080; }
.sub-module-complete.sub-module-active   { border-color: #2D5A68; }

.sub-module-foundations { background: linear-gradient(135deg, #EEF5FA 0%, #E8F1F7 100%); }
.sub-module-enhance    { background: linear-gradient(135deg, #EAF5F7 0%, #E4F0F3 100%); }
.sub-module-optimise   { background: linear-gradient(135deg, #EDEEF4 0%, #E9EAF0 100%); }
.sub-module-complete   { background: linear-gradient(135deg, #E8EEF0 0%, #E2E9EC 100%); }

.sub-module-inactive {
    opacity: 0.6;
}

.sub-module-header {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 10px;
}

.sub-module-name {
    font-size: 0.96rem;
    font-weight: 700;
    color: #333;
}

.sub-module-tagline {
    font-size: 0.76rem;
    color: #888;
    line-height: 1.3;
}

.sub-module-price {
    margin-bottom: 8px;
}

.sub-module-amount {
    font-size: 1.4rem;
    font-weight: 700;
    color: #2F8F83;
}

.sub-module-cadence {
    font-size: 0.78rem;
    color: #888;
}

.sub-module-badge {
    margin-bottom: 8px;
}

.sub-module-status {
    margin-top: auto;
}

.sub-module-foundations .sub-module-name { color: #5A9ABF; }
.sub-module-enhance .sub-module-name { color: #3D8F9A; }
.sub-module-optimise .sub-module-name { color: #5B6080; }
.sub-module-complete .sub-module-name { color: #2D5A68; }

.sub-module-card {
    position: relative;
    overflow: hidden;
}

.sub-trial-ribbon {
    position: absolute;
    bottom: 12px;
    right: -32px;
    width: 120px;
    text-align: center;
    transform: rotate(-35deg);
    background: linear-gradient(135deg, #2F8F83, #3BA899);
    padding: 3px 0;
    pointer-events: none;
}

.sub-trial-ribbon span {
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.sub-line-table {
    border-radius: 8px !important;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.06);
    margin-bottom: 24px;
}

.sub-line-table thead tr {
    background: rgba(59, 63, 122,0.06);
}

.sub-line-table thead th {
    padding: 10px 16px;
    font-weight: 600;
    color: #555;
    font-size: 0.88rem;
}

.sub-line-table tbody td {
    padding: 10px 16px;
    font-size: 0.92rem;
}

.sub-line-table .sub-total-row {
    background: rgba(59, 63, 122,0.06);
    border-top: 2px solid rgba(59, 63, 122,0.2);
}

.sub-line-table .sub-total-row td {
    padding: 10px 16px;
    font-size: 0.92rem;
}

.sub-payment-section {
    padding-top: 4px;
}

.sub-payment-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: rgba(47,143,131,0.04);
    border-radius: 8px;
}

.sub-payment-row > div {
    display: flex;
    flex-direction: column;
}

.sub-payment-title {
    font-size: 0.96rem;
    font-weight: 600;
    color: #333;
}

.sub-payment-detail {
    font-size: 0.84rem;
    color: #888;
}

.sub-row-inactive td {
    color: #bbb;
}

/* .sub-modules-row stays at its desktop column count regardless of
   viewport width. The portal shell is locked to a 1400 px minimum so
   reflowing this row to 2 / 1 columns based on viewport produced the
   same desktop-layout-with-stacked-row jumbling the security-grid
   block above used to show. Users on narrower windows scroll
   horizontally instead. See css/_tokens.css for --gpc-portal-min-content. */

/* ── Practices tab — Linked Practice tile ──────────────────────────
   Tile is laid out as four horizontal bands stacked top-to-bottom:
     1. .prc-tile__head      — title row + address line
     2. .prc-tile__actions   — uniform-height labelled buttons
     3. .prc-tile__body      — 2-column grid (Details | Controls)
     4. (optional)           — cross-group consent strip + history expander
   All tokens (colours, gaps, radii) live as `--prc-*` custom properties
   on the tile's host so it's self-contained.

   This file used to define `.prc-header-row`, `.prc-header-info`,
   `.prc-address-chip`, `.prc-header-actions`, `.prc-action-icon`,
   `.prc-detail-grid`, `.prc-details`, `.prc-toggles`, `.prc-toggle-item`,
   `.prc-practice-section` — those classes were removed when the tile
   was redesigned (the body was a lopsided grid with floating toggles
   and three tiny coloured icon buttons next to a fully-labelled CTA;
   the new design groups everything into clear bands). */

.prc-tile {
    /* Indigo aliases resolve to the global tokens in css/_tokens.css.
       Soft/line opacities here (0.06/0.18) are tile-specific and
       intentionally lighter than the auth-card defaults (0.08/0.22),
       so they stay as literals rather than referencing the shared
       soft/line tokens. */
    --prc-indigo: var(--gpc-indigo);
    --prc-indigo-soft: rgba(59, 63, 122, 0.06);
    --prc-indigo-line: rgba(59, 63, 122, 0.18);
    --prc-text: #1f2240;
    --prc-text-soft: #4a4d6b;
    --prc-muted: #6b6f85;
    --prc-faint: #a4a8bd;
    --prc-line: rgba(0, 0, 0, 0.06);
    --prc-line-strong: rgba(0, 0, 0, 0.09);
    --prc-surface: #ffffff;
    --prc-surface-alt: #fafbfd;

    border-radius: 14px !important;
    border: 1px solid var(--prc-line-strong) !important;
    overflow: hidden;
    margin-bottom: 16px;
    background: var(--prc-surface);
    transition: opacity 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.prc-tile:hover {
    border-color: var(--prc-indigo-line) !important;
    box-shadow: 0 4px 16px rgba(59, 63, 122, 0.06);
}

/* ─── Head: title row + address ───────────────────────────────────
   Slightly more generous padding, larger practice name, and the
   address sits in its own clean row aligned with the title's icon
   column for a left rail effect. */
.prc-tile__head {
    padding: 20px 24px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.prc-tile__title-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.prc-tile__icon {
    color: var(--prc-indigo) !important;
    font-size: 1.5rem !important;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--prc-indigo-soft);
}

.prc-tile__name {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--prc-text);
    line-height: 1.3;
    letter-spacing: -0.01em;
}

/* Status pills cluster — pushed to the right edge of the row by
   `margin-left: auto`. On narrow tiles the row wraps and the chips
   drop below; that's intentional, the chips stay together. */
.prc-tile__chips {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

/* Custom chip treatment that overrides MudBlazor's default colour-
   based chip palette so the status/primary chips read as cohesive
   pills with proper hierarchy. The semantic colour still comes
   from MudBlazor's `Color.Success/Warning/Error` mapping (so
   `PrcStatusColor()` keeps controlling green/amber/red), but we
   normalise the typography and shape here. */
.prc-tile__chip.mud-chip {
    height: 24px !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    border-radius: 999px !important;
    padding: 0 10px !important;
}

/* ─── Inline Active toggle (lives in the chips cluster) ──────────
   Pairs the "Active" caption with MudBlazor's switch so the most-
   clicked control on the tile is one glance away from the status
   chip. Sits inside `.prc-tile__chips` so it inherits the same
   right-edge alignment as the status chip. No background or border
   on purpose — the chip is the only pill in the cluster, the switch
   itself is sufficient visual signal. */
.prc-tile__active {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 0 0 6px;
}

.prc-tile__active-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--prc-text-soft);
    line-height: 1;
}

/* Trim MudBlazor's default switch padding so the pill stays compact
   and the thumb sits centred in the inline pill. */
.prc-tile__active-switch.mud-switch {
    margin: 0 !important;
    padding: 0 !important;
    height: 20px;
}
.prc-tile__active-switch .mud-switch-track {
    margin: 0 !important;
}

/* Inline address — sits on the SAME line as the practice name,
   separated from it by a thin pipe character. Layout reads as:
       [icon]  Practice Name | 12 Some Rd, Suburb NSW 2000   [chips]
   The pipe is decorative (aria-hidden) and uses the faint colour
   so it's clearly a separator and not a typographic emphasis. The
   address itself uses the muted body colour so the practice name
   stays the primary read. */
.prc-tile__name-sep {
    color: var(--prc-faint);
    font-weight: 400;
    user-select: none;
    line-height: 1.3;
}

.prc-tile__address-inline {
    color: var(--prc-text-soft);
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.3;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ─── Vertical action stack (right column of the body) ──────────
   Four equal-width adapter actions stacked vertically: Installer,
   Setup Guide, Email Instructions, Re-Sync Adapter. Lives inside
   the body grid as the second column (`.prc-tile__body`'s right
   track). Re-sync is the indigo CTA at the bottom; the three above
   are neutral ghost buttons differentiated by their leading icon. */
.prc-tile__action-stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-self: start;
}

/* Force every button in the stack to span the full column width so
   the Installer/Setup-Guide/Email/Re-Sync row visually reads as a
   tight peer group rather than four pills of varying length. */
.prc-tile__action-stack .prc-tile-action,
.prc-tile__action-stack .mud-button-root {
    width: 100% !important;
    justify-content: flex-start;
}

.prc-tile-action {
    text-transform: none !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 0.8rem !important;
    height: 34px !important;
    min-width: 0 !important;
    padding: 4px 14px !important;
    letter-spacing: 0 !important;
    transition: background 150ms ease, border-color 150ms ease, color 150ms ease, transform 80ms ease !important;
}

.prc-tile-action:hover:not(:disabled) {
    transform: translateY(-1px);
}

/* Unified ghost-button look for the three secondary actions
   (Email setup / Setup guide / Installer). All inherit the same
   subtle indigo-on-white treatment; hover state firms up the border
   and tints the background. The semantic icon already differentiates
   each action, so the colour stays neutral. */
.prc-tile-action--email,
.prc-tile-action--guide,
.prc-tile-action--download {
    color: var(--prc-text-soft) !important;
    border: 1px solid var(--prc-line-strong) !important;
    background: var(--prc-surface) !important;
}
.prc-tile-action--email:hover:not(:disabled),
.prc-tile-action--guide:hover:not(:disabled),
.prc-tile-action--download:hover:not(:disabled) {
    color: var(--prc-indigo) !important;
    background: var(--prc-indigo-soft) !important;
    border-color: var(--prc-indigo-line) !important;
}

/* Icon picks up the soft indigo on hover so the whole button reads
   as one piece rather than a coloured icon stuck to a grey pill. */
.prc-tile-action--email .mud-icon-root,
.prc-tile-action--guide .mud-icon-root,
.prc-tile-action--download .mud-icon-root {
    color: var(--prc-indigo) !important;
    transition: color 150ms ease;
}

/* Primary Re-sync CTA — solid indigo, the only filled button in the
   actions row so it leads the eye. */
.prc-tile-action--resync {
    background: var(--prc-indigo) !important;
    color: #ffffff !important;
    border: 1px solid var(--prc-indigo) !important;
    box-shadow: 0 1px 2px rgba(59, 63, 122, 0.15);
}
.prc-tile-action--resync:hover:not(:disabled) {
    background: #2f3361 !important;
    border-color: #2f3361 !important;
    box-shadow: 0 2px 6px rgba(59, 63, 122, 0.25);
}
.prc-tile-action--resync:disabled {
    box-shadow: none;
}

/* ─── Body: Details (2-col grid) | Controls panel ─────────────────
   The body is a soft alt-surface band that visually separates the
   active controls from the header chrome above. Stats on the left
   take the lion's share, the controls panel sits as a tidy white
   card on the right. */
.prc-tile__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 28px;
    padding: 20px 24px 22px;
    background: var(--prc-surface-alt);
    border-top: 1px solid var(--prc-line);
}

@media (max-width: 900px) {
    .prc-tile__body {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}

/* Stat list — flat <dl> styled as a 2-column grid of label/value
   pairs. Each cell stacks label-on-top, value-below. Bumped to
   readable sizing (was 0.68/0.86, now 0.7/0.95) so the data reads
   like content, not legalese. */
.prc-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 24px;
    margin: 0;
}

@media (max-width: 600px) {
    .prc-stats {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}

.prc-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.prc-stat__label {
    margin: 0;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--prc-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.4;
}

.prc-stat__value {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--prc-text);
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    overflow: hidden;
}

.prc-stat__value-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.prc-stat__value--mono {
    font-family: 'JetBrains Mono', 'Consolas', 'SFMono-Regular', monospace;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.prc-stat__value--muted {
    color: var(--prc-faint);
    font-weight: 400;
    font-style: italic;
}

/* Inline copy button on the Adapter UID stat — shrinks the default
   MudIconButton padding so it doesn't push the value's height out
   of line with the other stat rows. */
.prc-stat__copy {
    width: 24px !important;
    height: 24px !important;
    padding: 2px !important;
    color: var(--prc-muted) !important;
    flex-shrink: 0;
}
.prc-stat__copy:hover {
    color: var(--prc-indigo) !important;
}

/* The .prc-controls* rules were retired together with the bottom-
   right controls panel — the Active toggle now lives in the header
   chips cluster and the right column of the body is the action
   stack instead. Engagement-type select was removed as part of the
   tile simplification. */

/* ─── Cross-group consent strip (doctor only, conditional) ─────── */
.prc-tile__consent {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 0 24px 18px;
    padding: 14px 18px;
    border-radius: 12px;
    background: rgba(255, 152, 0, 0.06);
    border: 1px solid rgba(255, 152, 0, 0.25);
}

.prc-tile__consent-icon {
    color: #c98a3a !important;
    font-size: 1.5rem !important;
    flex-shrink: 0;
    margin-top: 2px;
}

.prc-tile__consent-body {
    flex: 1;
    min-width: 0;
}

.prc-tile__consent-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}

.prc-tile__consent-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: #6b4a18;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.prc-tile__consent-text {
    margin: 0;
    font-size: 0.82rem;
    color: var(--prc-muted);
    line-height: 1.45;
}

/* ─── Recent sync history expander ─────────────────────────────── */
.prc-tile__history {
    margin: 0 24px 18px !important;
    border: 1px solid var(--prc-line) !important;
    border-radius: 10px !important;
    overflow: hidden;
}

.prc-tile__history .mud-expand-panel {
    background: var(--prc-surface-alt) !important;
}

.prc-tile__history-table {
    font-size: 0.76rem !important;
}

/* When the Linked Practices card is hosting the inline AddPracticePanel
   we collapse the card body's default padding-top a touch so the
   panel's own first row doesn't sit too far below the header divider
   — and trim the bottom because the panel's action row has its own
   padded top border that doubles up otherwise. */
.prc-linked-card--adding .mud-card-content {
    padding-top: 4px;
    padding-bottom: 8px;
}

/* Card-host modifier for the AddPracticePanel. Pairs with the `--inline`
   modifier (defined in welcome.css) — `--inline` strips the panel's own
   padding so the host card owns layout; `--card` adds back a thin top
   border so the form sits visually below the card's MudCardHeader
   divider rather than floating in the same surface. */
.add-practice-panel--card {
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    padding-top: 4px;
}

@media (max-width: 600px) {
    .prc-detail-grid {
        grid-template-columns: 1fr;
    }
    .prc-toggles {
        flex-direction: row;
        border-left: none;
        border-top: 1px solid rgba(0,0,0,0.08);
        padding-left: 0;
        padding-top: 12px;
    }
    .prc-header-actions__divider {
        display: none;
    }
    .prc-address-chip {
        max-width: 100%;
    }
}

.gpc-teal-accent {
    --mud-palette-primary: #2F8F83;
    --mud-palette-primary-rgb: 47,143,131;
}

.alerts-main-card-item {
    margin-top: 0;
    margin-bottom: 10px;
}

.alerts-main-card-item-table {
    margin-bottom: 16px;
}

.compact-alert-grid .telemetry-email-cell {
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.compact-alert-grid .telemetry-email-inline {
    line-height: 1.1;
    margin: 0;
    display: flex;
    align-items: center;
}

.compact-alert-grid .mud-checkbox {
    margin-top: 2px;
    margin-bottom: 2px;
}

.psr-rules-grid {
    --psr-row-h: 38px;
    display: grid;
    grid-template-columns: max-content max-content max-content minmax(220px, 260px);
    column-gap: 14px;
    row-gap: 0;
    align-items: start;
    justify-content: space-between;
}

.psr-rule-column {
    display: grid;
    grid-template-rows: var(--psr-row-h) var(--psr-row-h);
    align-content: center;
}

.psr-rule-column .mud-checkbox {
    margin-top: 0;
    margin-bottom: 0;
    height: var(--psr-row-h);
    display: flex;
    align-items: center;
}

.psr-rules-grid .mud-checkbox .mud-button-label,
.psr-rules-grid .mud-checkbox .mud-checkbox-label {
    font-size: 0.92rem !important;
    line-height: 1.25 !important;
}

.account-settings-page .psr-rules-grid .mud-checkbox .mud-typography,
.account-settings-page .psr-rules-grid .mud-checkbox .mud-checkbox-label.mud-typography,
.account-settings-page .psr-rules-grid .mud-checkbox .mud-button-label .mud-typography {
    font-size: 0.92rem !important;
    line-height: 1.25 !important;
}

.psr-contact-column {
    display: grid;
    grid-template-rows: var(--psr-row-h) var(--psr-row-h);
    align-content: center;
    align-self: start;
    margin-left: -8px;
}

.psr-contact-row {
    display: flex;
    height: var(--psr-row-h);
    align-items: center;
    gap: 4px;
    line-height: 1.2;
    font-size: inherit;
    color: rgba(0,0,0,0.42);
}

.psr-contact-label {
    font-weight: 700;
}

.psr-contact-value {
    font-weight: 400;
    color: rgba(0,0,0,0.42);
}

.psr-threshold-column {
    display: flex;
    justify-content: flex-start;
    align-self: center;
    padding-top: 0;
}

.psr-threshold-field {
    max-width: 250px;
    width: 100%;
}

.account-settings-page .gpc-compact-input .mud-input-control {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.account-settings-page .gpc-compact-input .mud-input-slot {
    min-height: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.account-settings-page .gpc-compact-input .mud-select-input,
.account-settings-page .gpc-compact-input input,
.account-settings-page .gpc-compact-input .mud-input > input {
    font-size: 0.94rem !important;
    line-height: 36px !important;
    display: flex;
    align-items: center;
}

.account-settings-page .gpc-compact-input .mud-input-adornment {
    height: 36px !important;
    align-items: center !important;
}

.account-settings-page .profile-input .mud-input-slot {
    min-height: 40px !important;
    height: 40px !important;
}

.account-settings-page .profile-input .mud-select-input,
.account-settings-page .profile-input input,
.account-settings-page .profile-input .mud-input > input {
    line-height: 40px !important;
}

.account-settings-page .profile-input .mud-input-adornment {
    height: 40px !important;
}

.per-rule-main-card .per-rule-card-content {
    padding-bottom: 12px !important;
}

.per-rule-main-card .per-rule-table-shell {
    margin-bottom: 6px;
}

.account-settings-page .per-rule-table-shell {
    width: 97%;
    margin: 0 auto;
}

.account-settings-page .per-rule-table {
    table-layout: fixed !important;
    width: 100% !important;
    font-size: 0.94rem;
}

.account-settings-page .per-rule-table col.per-rule-col-toggle {
    width: 2% !important;
}

.account-settings-page .per-rule-table col.per-rule-col-name {
    width: 24% !important;
}

.account-settings-page .per-rule-table col.per-rule-col-module {
    width: 17% !important;
}

.account-settings-page .per-rule-table col.per-rule-col-description {
    width: 31% !important;
}

.account-settings-page .per-rule-table col.per-rule-col-method,
.account-settings-page .per-rule-table col.per-rule-col-frequency {
    width: 9% !important;
}

.account-settings-page .per-rule-table col.per-rule-col-threshold {
    width: 10% !important;
}

.account-settings-page .per-rule-table td {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

.account-settings-page .per-rule-table .per-rule-compact-input .mud-input-control {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.account-settings-page .per-rule-table .per-rule-compact-input .mud-input-slot {
    min-height: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.account-settings-page .per-rule-table .per-rule-compact-input .mud-select-input,
.account-settings-page .per-rule-table .per-rule-compact-input input,
.account-settings-page .per-rule-table .per-rule-compact-input .mud-input > input {
    font-size: inherit !important;
    line-height: 32px !important;
    text-align: left !important;
    display: flex;
    align-items: center;
}

.account-settings-page .per-rule-table .per-rule-compact-input .mud-select {
    justify-content: flex-start !important;
}

.account-settings-page .per-rule-table .per-rule-compact-input .mud-input-root {
    align-items: center !important;
}

.account-settings-page .per-rule-table .per-rule-compact-input .mud-select-input {
    padding-left: 10px !important;
}

.account-settings-page .per-rule-table .per-rule-compact-input .mud-input-adornment {
    height: 32px !important;
    align-items: center !important;
}

.account-settings-page .per-rule-table .per-rule-threshold-input input,
.account-settings-page .per-rule-table .per-rule-threshold-input .mud-input-slot {
    text-align: center !important;
    justify-content: center !important;
}

.account-settings-page .per-rule-threshold-header {
    white-space: nowrap;
}

.account-settings-page .per-rule-module-cell {
    position: relative;
    padding: 7px 14px 7px 10px;
    border-radius: 6px;
    font-size: inherit;
    color: #4f4f4f;
    background: rgba(59, 63, 122,0.06);
}

.account-settings-page .per-rule-module-cell::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    border-radius: 0 6px 6px 0;
}

.account-settings-page .per-rule-module-foundations::after {
    background: #7AB8E0;
}

.account-settings-page .per-rule-module-enhance::after {
    background: #4AA5B0;
}

.account-settings-page .per-rule-module-optimise::after {
    background: #5B6080;
}

.account-settings-page .per-rule-name {
    font-weight: 700;
    display: inline-block;
    font-size: 0.96rem !important;
    line-height: 1.25 !important;
}

/* Hierarchical row number rendered alongside the marker name (e.g.
   "1.1", "1.2", "2", "3"). Sized down and tinted neutral so it reads
   as an index rather than competing with the marker title; the trailing
   margin gives it breathing room from the title text. */
.account-settings-page .per-rule-index {
    display: inline-block;
    min-width: 28px;
    margin-right: 8px;
    color: #8a8fa6;
    font-weight: 600;
    font-size: 0.86rem !important;
    font-variant-numeric: tabular-nums;
    text-align: left;
    vertical-align: baseline;
}

.account-settings-page .per-rule-name.per-rule-module-foundations {
    color: #5A95C0;
}

.account-settings-page .per-rule-name.per-rule-module-enhance {
    color: #3D8E98;
}

.account-settings-page .per-rule-name.per-rule-module-optimise {
    color: #5B6080;
}

.account-settings-page .per-rule-description {
    color: #666;
    font-size: 0.92rem !important;
    line-height: 1.25;
    display: block;
    white-space: normal;
    overflow-wrap: anywhere;
}

.practice-admin-docs-table .pm-module-group-header,
.practice-admin-subscription-table .pm-module-group-header {
    text-align: center;
    font-weight: 700;
    color: #55607a;
    background: rgba(59, 63, 122, 0.09);
}

.practice-admin-docs-table .pm-module-col,
.practice-admin-subscription-table .pm-module-col {
    text-align: center;
}

.practice-admin-docs-table th.pm-module-col {
    text-align: center !important;
}

/* Trial-name link from PracticeSnapshot lands here with ?doctorId=N. The
 * targeted row gets a soft yellow flash for ~5s so the user immediately
 * sees which doctor the click was about, then naturally fades back to
 * the standard table styling. */
.practice-admin-docs-table tr.pm-row-highlight {
    background: #fff7d6 !important;
    animation: pm-row-flash 5s ease-out;
}

@keyframes pm-row-flash {
    0%   { background: #fde68a; }
    20%  { background: #fef3c7; }
    100% { background: #fff7d6; }
}

.practice-admin-docs-table .pm-module-switch-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.practice-admin-docs-table .pm-module-switch-wrap .mud-switch {
    margin-left: 0;
    margin-right: 0;
}

/* Pending-deactivation badge:
 * - Floats over the switch thumb so the days-remaining count sits inside
 *   the toggle circle.
 * - Amber background to visually separate it from the standard switch
 *   colour without screaming "error".
 * - The MudTooltip wrapper renders an inline span; we absolute-position the
 *   badge so it docks onto the thumb regardless of switch on/off state. */
.pm-module-switch-wrap .pm-deactivation-badge {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background: #f59e0b;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    pointer-events: auto;
    box-shadow: 0 0 0 2px #fff;
    cursor: help;
}

.practice-admin-docs-table .pm-module-col-foundations,
.practice-admin-subscription-table .pm-module-col-foundations {
    background: rgba(122, 184, 224, 0.15);
}

.practice-admin-docs-table .pm-module-col-enhance,
.practice-admin-subscription-table .pm-module-col-enhance {
    background: rgba(74, 165, 176, 0.15);
}

.practice-admin-docs-table .pm-module-col-optimise,
.practice-admin-docs-table .pm-module-col-complete,
.practice-admin-subscription-table .pm-module-col-optimise,
.practice-admin-subscription-table .pm-module-col-complete {
    background: rgba(91, 96, 128, 0.14);
}

.pm-module-pricing-strip {
    margin-bottom: 12px;
}

.practice-admin-subscription-table .pm-subscription-totals-row td {
    font-weight: 600;
    border-top: 2px solid rgba(0, 0, 0, 0.14);
    background: rgba(0, 0, 0, 0.02);
}

/* Module pricing strip and PSR rules grid stay at their desktop column
   counts regardless of viewport width — see the security-grid /
   sub-modules-row blocks above for the contract reasoning. The portal
   shell's 1400 px content minimum means none of these grids ever needs
   to reflow to fit a narrow viewport; users get horizontal scroll
   instead. */

.security-grid .sg-mfa-cell .mud-input-control {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* The Communications-tab trial overlay was retired in favour of
   per-card `.trial-watermark` overlays (the same shared component
   Consult Volume Data uses), so the corner-to-corner diagonal stripe
   styling stays consistent across the app. The wrapper below stays
   purely as a positioning context for the cards inside. */
.account-comms-panel-wrap {
    position: relative;
}

/* Make the per-card watermark host clip its overlay to the card's
   own rounded corners. MudCard renders with `border-radius: 4px`
   by default; the host inherits it via the .trial-watermark's
   `border-radius: inherit` rule in trial-lockdown.css. */
.account-comms-panel-wrap .trial-watermark-host {
    border-radius: 8px;
}