/* PaperTrail Admin - App Styles */

html, body {
    font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
    margin: 0;
    padding: 0;
    height: 100%;
}

/* Ensure Blazor error UI doesn't obstruct */
#blazor-error-ui {
    background: #ffdc00;
    bottom: 0;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

.org-type-pill {
    display: inline-block;
    background: rgba(0, 0, 0, 0.07);
    border-radius: 10px;
    padding: 1px 8px;
    font-size: 0.65rem;
    margin-left: 6px;
    vertical-align: middle;
    white-space: nowrap;
    color: #555;
}

.org-secondary-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 1px;
    font-size: 0.7rem;
    color: #9E9E9E;
}

.org-id-link {
    cursor: pointer;
}

.org-id-link:hover {
    text-decoration: underline;
}

a.modal-link {
    color: var(--mud-palette-primary);
    cursor: pointer;
    text-decoration: none;
}
a.modal-link:hover {
    text-decoration: underline;
}

.license-context-link {
    font-weight: 600;
}

.license-context-org-id {
    color: #757575;
    margin-left: 4px;
    vertical-align: middle;
}

.license-context-separator {
    color: #9E9E9E;
}

.account-context-panel {
    margin-bottom: 16px;
    padding: 12px 14px;
    border: 1px solid rgba(25, 118, 210, 0.14);
    border-radius: 8px;
    background: #f7f9fc;
}

.account-context-item + .account-context-item {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(96, 125, 139, 0.16);
}

.account-context-title {
    margin-bottom: 4px;
    color: #607D8B;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.45px;
    text-transform: uppercase;
}

.account-context-body {
    margin-bottom: 6px;
    color: #37474F;
    font-size: 0.85rem;
}

/* Product Cards - LicensesTab */
.product-card {
    border-left: 4px solid transparent;
    margin-bottom: 16px;
}

.product-card-bid { border-left-color: #1976D2; }
.product-card-takeoff { border-left-color: #FF6D00; }
.product-card-estimation { border-left-color: #8CC140; }
.product-card-planswift { border-left-color: #00897B; }
.product-card-estimation-license { border-left-color: #689F38; }
.product-card-comworker { border-left-color: #2E7D32; }

.product-card-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    flex-wrap: wrap;
}

.product-card-header .product-logo {
    height: 22px;
    width: auto;
    flex-shrink: 0;
}

.product-card-header .header-actions {
    display: flex;
    gap: 4px;
    align-items: center;
}

.product-card-body {
    padding: 12px 16px;
}

.license-product-section + .license-product-section {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.license-product-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.license-product-section .header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.license-product-section .header-actions .mud-button-root {
    text-transform: none;
}

.product-card-body .field-row,
.product-card-body-columns .field-row {
    display: flex;
    align-items: baseline;
    padding: 5px 0;
    font-size: 0.85rem;
    gap: 8px;
}

.product-card-body .field-label,
.product-card-body-columns .field-label {
    color: #9E9E9E;
    min-width: 180px;
    flex-shrink: 0;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.product-card-body .field-value,
.product-card-body-columns .field-value {
    color: #212121;
    font-weight: 500;
}

.product-card-body .admin-section-title {
    font-size: 0.8rem;
    font-style: italic;
    color: #9E9E9E;
    margin-top: 8px;
    margin-bottom: 4px;
}

.license-modification-item {
    padding: 12px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.license-modification-item:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.license-option-editor {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Bid + Billing two-column layout */
.bid-row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: 16px;
    margin-bottom: 16px;
    align-items: start;
}

.bid-row > .product-card {
    margin-bottom: 0;
    min-width: 0;
}

/* Plan badge */
.plan-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #fff;
    vertical-align: middle;
}

.plan-badge-free { background: #757575; }
.plan-badge-plus { background: #1976D2; }
.plan-badge-pro { background: #FF6D00; }
.plan-badge-silver { background: #78909C; }
.plan-badge-gold { background: #F9A825; color: #333; }
.plan-badge-platinum { background: #5C6BC0; }

/* Spend badge in header */
.spend-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    background: rgba(0,0,0,0.05);
    color: #424242;
    white-space: nowrap;
}

.account-overview-totals {
    margin-left: auto;
}

.spend-badge .spend-label {
    color: #9E9E9E;
    font-weight: 400;
}

/* Product family mini-badges (invoice tables) */
.product-family-badges {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.invoice-product-with-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.invoice-plan-level-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.2px;
    white-space: nowrap;
    line-height: 1.4;
    color: #37474F;
    border: 1px solid transparent;
}

.invoice-plan-level-silver {
    background: #ECEFF1;
    border-color: #CFD8DC;
}

.invoice-plan-level-gold {
    background: #FFF8E1;
    border-color: #FFECB3;
    color: #8D6E00;
}

.invoice-plan-level-platinum {
    background: #F3E5F5;
    border-color: #E1BEE7;
    color: #4A148C;
}

.invoice-plan-level-paygo {
    background: #E3F2FD;
    border-color: #BBDEFB;
    color: #1565C0;
}

.family-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: #fff;
    white-space: nowrap;
    line-height: 1.4;
}

.family-badge-bid { background: #1976D2; }
.family-badge-takeoff { background: #FF6D00; }
.family-badge-estimation { background: #8CC140; }
.family-badge-planswift { background: #00897B; }
.family-badge-gextim { background: #6D4C41; }
.family-badge-comworker { background: #2E7D32; }
.family-badge-other { background: #757575; }

.bucket-inactive {
    opacity: 0.5;
    position: relative;
}

.bucket-inactive::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(
        transparent calc(50% - 1px), red calc(50% - 1px),
        red calc(50% + 1px), transparent calc(50% + 1px));
    pointer-events: none;
}

.family-logo {
    height: 16px;
    width: auto;
}

.family-logo-small {
    height: 10px;
}

.activity-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px 2px 4px;
    border-radius: 12px;
    font-size: 0.7rem;
    color: white;
    line-height: 1;
    height: 22px;
    white-space: nowrap;
    margin: 1px 2px;
}

.account-transaction-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
    cursor: pointer;
}

.account-transaction-summary > * {
    min-width: 0;
}

/* Organization page tabs */
.org-tab-strip {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
    /* The tab strip is a flex child of .org-tabs (a flex column). Never let it shrink when a tab's content
       overflows vertically — otherwise the 48px buttons get clipped by overflow:hidden (cut-off headers). */
    flex-shrink: 0;
}

.org-tab-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 0;
    min-height: 48px;
    padding: 0 14px;
    border: 0;
    border-bottom: 3px solid transparent;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.2px;
    cursor: pointer;
}

.org-tab-button:hover {
    color: var(--mud-palette-text-primary);
    background: rgba(255, 255, 255, 0.03);
}

.org-tab-button.is-active {
    color: var(--mud-palette-primary);
    border-bottom-color: var(--mud-palette-primary);
    background: rgba(255, 255, 255, 0.04);
}

.org-tab-button-icon {
    flex-shrink: 0;
}

.org-tab-button-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Fill the window body so the panel below the (fixed) tab strip becomes the single bounded scroll area. */
.org-tabs {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
}

/* The active tab's content scrolls here — both axes. A wide table (Invoices, Users, …) overflows into this
   shell, so its horizontal scrollbar sits at the bottom of the visible window (not buried under a tall table),
   while the tab strip above stays put. Cross-cutting: every tab gets this behaviour. */
.org-tab-panel-shell {
    padding: 6px 0 0;
    overflow: auto;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    /* Force a classic, always-on scrollbar (not an overlay one that hides until you scroll) so it's obvious
       the content can be scrolled — this is the visible affordance the overflow previously lacked. */
    scrollbar-width: thin;
}

.org-tab-panel-shell::-webkit-scrollbar {
    height: 12px;
    width: 12px;
}

.org-tab-panel-shell::-webkit-scrollbar-thumb {
    background: rgba(128, 128, 128, 0.55);
    border-radius: 6px;
}

.org-tab-panel-shell::-webkit-scrollbar-track {
    background: rgba(128, 128, 128, 0.15);
}

/* Let grids inside a window push their natural width into the shell's scroll instead of trapping a hidden
   internal scrollbar at the bottom of a tall table. The table fills the panel when there's room, but never
   compresses below its content — so when the window is narrower than the table, it overflows into the shell's
   scroll (a visible horizontal scrollbar at the window's bottom edge). Cross-cutting across all tabs. */
.org-tab-panel-shell .mud-table-container {
    overflow: visible;
}

.org-tab-panel-shell .mud-table-container table {
    min-width: max-content;
    width: 100%;
}

.clients-page-toolbar {
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Clickable header for date columns whose first click sorts descending (custom sort, not MudBlazor's). */
.cl-sort-header {
    cursor: pointer;
    user-select: none;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

    .cl-sort-header .mud-icon-root {
        font-size: 1.05rem;
        opacity: 0.55;
    }

    .cl-sort-header.cl-sort-active .mud-icon-root {
        opacity: 1;
    }

.clients-mobile-columns-menu {
    display: none;
}

.clients-activity-header {
    display: none;
}

.org-users-actions {
    align-items: flex-start;
}

.org-comment-meta {
    gap: 8px;
    flex-wrap: wrap;
}

.org-comment-text {
    line-height: 1.45;
}

.org-invoices-grid .mud-table-toolbar {
    gap: 12px;
    flex-wrap: wrap;
}

.org-invoices-grid {
    width: 100%;
    min-width: 0;
}

/* Products badges wrap within the width-capped column instead of widening the row. (Table fit/overflow is
   handled cross-cutting by the .org-tab-panel-shell rules above.) */
.org-invoices-grid .product-family-badges {
    flex-wrap: wrap;
}

/* Sales chart — compare year bars (even series): narrow */
.sales-chart-monthly .apexcharts-bar-series > g:nth-child(even) path,
.sales-chart-monthly .apexcharts-bar-series > g:nth-child(even) rect {
    clip-path: inset(0 30%);
}

/* Sales report KPI cards */
.sales-kpi-item {
    display: flex;
}

.sales-kpi-item > .mud-paper,
.sales-kpi-item > .sales-kpi-tooltip-wrapper {
    width: 100%;
}

.sales-kpi-tooltip-wrapper {
    height: 100%;
}

.sales-kpi-tooltip-wrapper .mud-tooltip-root {
    display: block;
    height: 100%;
}

.sales-kpi-card {
    height: 100%;
    min-height: 126px;
    display: flex;
    flex-direction: column;
}

.sales-kpi-heading-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.sales-kpi-projection {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    color: var(--mud-palette-text-secondary);
    cursor: help;
}

.sales-kpi-projection-label {
    line-height: 1.2;
}

.sales-kpi-projection-value {
    font-size: 0.9375rem;
    font-style: italic;
    line-height: 1.2;
}

.sales-kpi-progress-area {
    margin-top: 8px;
}

.sales-kpi-progress-end-indicator {
    position: absolute;
    right: 0;
    top: -22px;
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--mud-palette-text-secondary);
    text-align: right;
    line-height: 1.2;
    white-space: nowrap;
    pointer-events: none;
    z-index: 2;
}

.sales-kpi-progress-end-icon {
    font-size: 0.8rem;
}

.sales-kpi-progress-end-value {
    color: var(--mud-palette-text-secondary);
    line-height: 1.2;
}

.sales-kpi-tooltip-zone {
    display: block;
    width: 100%;
}

.sales-kpi-card > .mud-typography-caption:first-child,
.sales-kpi-heading-row > .mud-typography-caption:first-child {
    font-size: 1rem;
}

.sales-kpi-objective-card .mud-typography-caption {
    font-size: 0.8625rem;
}

.sales-kpi-objective-card .sales-kpi-heading-row > .mud-typography-caption:first-child {
    font-size: 1.15rem;
}

.sales-kpi-objective-card .sales-kpi-projection-value {
    font-size: 1.0781rem;
}

.sales-kpi-objective-card .sales-kpi-progress-end-icon {
    font-size: 0.92rem;
}

.sales-kpi-compact {
    min-height: 106px;
}

@media (max-width: 1599px) {
    .sales-kpi-card .mud-typography-h5 { font-size: 1.125rem; }
    .sales-kpi-card .mud-typography-h6 { font-size: 0.9375rem; }
    .sales-kpi-card .mud-typography-caption { font-size: 0.5625rem; }
    .sales-kpi-card > .mud-typography-caption:first-child { font-size: 0.75rem; }
    .sales-kpi-projection-value { font-size: 0.75rem; }
    .sales-kpi-progress-end-indicator { top: -20px; }
    .sales-kpi-objective-card .mud-typography-caption { font-size: 0.6469rem; }
    .sales-kpi-objective-card .sales-kpi-heading-row > .mud-typography-caption:first-child { font-size: 0.8625rem; }
    .sales-kpi-objective-card .sales-kpi-projection-value { font-size: 0.8625rem; }
    .sales-kpi-objective-card .sales-kpi-progress-end-icon { font-size: 0.69rem; }
}

.sales-kpi-subscription-stats {
    display: flex;
    flex-direction: column;
    font-size: 0.8em;
}

.sales-kpi-progress-wrap {
    position: relative;
}

.sales-kpi-progress-target {
    position: absolute;
    top: -3px;
    bottom: -3px;
    width: 4px;
    transform: translateX(-50%);
    background: var(--mud-palette-warning);
    border-radius: 2px;
    pointer-events: none;
    opacity: 0.95;
}

.sales-kpi-footer-row {
    margin-top: 4px;
    gap: 8px;
    flex-wrap: wrap;
}

.sales-kpi-footer-main {
    min-width: 0;
    flex: 1 1 220px;
}

.sales-kpi-remaining-bottom,
.sales-kpi-footer-side {
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    margin-left: auto;
    text-align: right;
}

.sales-report-filter-bar .mud-input-control {
    margin: 0;
}

.sales-report-filter-inline {
    gap: 6px;
}

.sales-report-filter-label {
    white-space: nowrap;
    color: var(--mud-palette-text-secondary);
}

/* ── Sponsors report ─────────────────────────────────────────── */

/* Layered elevation — slightly lighter bg than page for surfaces */
.dark-mode .sponsors-report .sponsors-surface,
.dark-mode .sponsors-report .mud-paper {
    background-color: color-mix(in srgb, var(--mud-palette-surface) 100%, white 4%);
}

/* Stronger contrast for secondary text in the filter bar */
.sponsors-report .sponsors-filter .mud-input-label,
.sponsors-report .sponsors-filter .mud-input-root,
.sponsors-report .sponsors-filter .mud-switch-label {
    color: var(--mud-palette-text-primary) !important;
    opacity: 0.92;
}

/* Non-intrusive progress bar during filter reloads */
.sponsors-report-progress {
    position: absolute;
    top: -6px;
    left: 0;
    right: 0;
    z-index: 5;
}

/* Subtle opacity dim on the content while new data loads */
.sponsors-report-content.sponsors-reloading > :not(.sponsors-report-progress) {
    opacity: 0.55;
    transition: opacity 0.15s ease-out;
    pointer-events: none;
}

/* Scoped dim overlay for the geo section when only the geo heatmap is still loading. */
.sponsors-geo-section {
    position: relative;
}

.sponsors-geo-section.sponsors-geo-loading::after {
    content: "";
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--mud-palette-background-paper) 55%, transparent);
    border-radius: 4px;
    /* Leaflet controls (zoom, attribution) live at z-index 1000; this overlay must sit above them
       and intercept pointer events so the user can't interact with a half-loaded map. */
    pointer-events: auto;
    z-index: 1100;
}

.sponsors-geo-section .sponsors-geo-progress {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1101;
}

.sponsors-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 10px;
}

.sponsors-kpi-card {
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sponsors-kpi-card .sponsors-kpi-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    opacity: 0.75;
}

.sponsors-kpi-card .sponsors-kpi-value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.sponsors-kpi-card .sponsors-kpi-delta {
    font-size: 0.75rem;
    font-weight: 600;
}

/* Insights bar above the fold */
.sponsors-insights-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    grid-auto-rows: 1fr;
    gap: 8px;
}

/* MudTooltip wraps each tile in a root element — make it stretch to fill the grid cell so tiles align. */
.sponsors-insights-bar > * {
    display: flex;
    height: 100%;
    min-width: 0;
}

.sponsors-insight-tile {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 10px 12px;
    border-radius: 6px;
    border-left: 3px solid currentColor;
    background: color-mix(in srgb, currentColor 10%, transparent);
    color: var(--mud-palette-text-primary);
    height: 100%;
}

.sponsors-insight-tile.success { --tile-color: var(--mud-palette-success); color: var(--mud-palette-success); }
.sponsors-insight-tile.warning { --tile-color: var(--mud-palette-warning); color: var(--mud-palette-warning); }
.sponsors-insight-tile.info    { --tile-color: var(--mud-palette-info);    color: var(--mud-palette-info); }

.sponsors-insight-tile .sponsors-insight-body {
    color: var(--mud-palette-text-primary);
    flex: 1;
    min-width: 0;
}

.sponsors-insight-tile .sponsors-insight-title {
    font-size: 0.8rem;
    font-weight: 700;
}

.sponsors-insight-tile .sponsors-insight-detail {
    font-size: 0.78rem;
    opacity: 0.85;
}

.sponsors-insight-tile .sponsors-insight-emoji {
    font-size: 1.1rem;
    line-height: 1.2;
    flex-shrink: 0;
}

.sponsors-insight-tile .sponsors-insight-thumb {
    display: block;
    max-width: 100%;
    max-height: 36px;
    object-fit: contain;
    margin-top: 6px;
    border-radius: 3px;
}

/* Fullscreen lightbox for banner previews */
.sponsors-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    cursor: zoom-out;
    animation: sponsors-lightbox-fade 0.15s ease-out;
}

@keyframes sponsors-lightbox-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.sponsors-lightbox img {
    max-width: 92vw;
    max-height: 84vh;
    object-fit: contain;
    cursor: default;
    border-radius: 4px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
}

.sponsors-lightbox-caption {
    margin-top: 16px;
    color: #f5f5f5;
    font-size: 0.9rem;
    opacity: 0.85;
    cursor: default;
}

.sponsors-lightbox-close {
    position: absolute;
    top: 20px;
    right: 24px;
    background: rgba(255, 255, 255, 0.15);
    color: #f5f5f5;
    border: none;
    border-radius: 50%;
    width: 38px;
    height: 38px;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sponsors-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.28);
}

/* V-shape behavioral funnel */
.sponsors-funnel-v {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    padding: 8px 0;
}

.sponsors-funnel-step {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sponsors-funnel-bar-v {
    height: 42px;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 0.82rem;
    padding: 0 14px;
    min-width: 140px;
    box-shadow: 0 2px 6px color-mix(in srgb, currentColor 30%, transparent);
    transition: width 0.3s ease;
}

.sponsors-funnel-bar-v .sponsors-funnel-bar-label {
    font-size: 0.72rem;
    opacity: 0.88;
    line-height: 1.1;
}

.sponsors-funnel-bar-v .sponsors-funnel-bar-value {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.15;
}

.sponsors-funnel-passthrough {
    font-size: 0.8rem;
    color: var(--mud-palette-text-primary);
    text-align: center;
    padding: 4px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}

.sponsors-funnel-passthrough .sponsors-funnel-passrate {
    font-weight: 700;
    color: var(--mud-palette-success);
}

.sponsors-funnel-passthrough .sponsors-funnel-droprate {
    font-size: 0.68rem;
    color: var(--mud-palette-text-secondary);
}

.sales-family-label {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.sales-family-caret {
    width: 18px;
    min-width: 18px;
    line-height: 1;
    transform: rotate(0deg);
    transform-origin: center;
    transition: transform 0.12s ease;
}

.sales-family-caret.expanded {
    transform: rotate(90deg);
}

.mrr-family-row {
    background: rgba(255,255,255,0.03);
}
.mrr-family-row:hover {
    background: var(--mud-palette-table-hover) !important;
}
.mrr-bucket-row {
    background: rgba(255,255,255,0.06);
    font-size: 0.85rem;
}
.mrr-bucket-row:hover {
    background: var(--mud-palette-table-hover) !important;
}
.mrr-count-sub {
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
}
.mrr-sticky-header {
    position: sticky;
    top: 48px;
    z-index: 10;
    background: var(--mud-palette-surface) !important;
}

/* Clickable user names */
.user-link {
    cursor: pointer;
    border-bottom: 1px dashed #BDBDBD;
}

.user-link:hover {
    color: #1976D2;
    border-bottom-color: #1976D2;
}

.cc-details-trigger.mud-button-root {
    min-width: 0;
    padding: 0;
    color: inherit;
    font-size: inherit;
    font-weight: 600;
    line-height: inherit;
    text-transform: none;
}

.cc-details-trigger.mud-button-root:hover {
    background: transparent;
}

.cc-details-trigger .mud-button-label {
    border-bottom: 1px dashed currentColor;
}

.cc-details-popover {
    width: min(360px, 80vw);
}

.cc-details-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cc-detail-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

.cc-detail-label {
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.cc-detail-value {
    font-weight: 500;
    text-align: right;
}

/* Estimation licenses grid */
.est-licenses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
}

.est-license-item {
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 4px;
    padding: 12px;
}

/* Two-column body (subscription details + stats/config) */
.product-card-body-columns {
    display: flex;
    gap: 24px;
    padding: 12px 16px;
}

.product-card-body-columns .body-main {
    flex: 1;
    min-width: 0;
}

.product-card-body-columns .body-side {
    flex: 0 0 360px;
    border-left: 1px solid rgba(0,0,0,0.08);
    padding-left: 24px;
}

.body-side .side-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 0.8rem;
    color: #757575;
}

/* Spend donut chart in Account overview */
.spend-donut-wrapper {
    position: relative;
    width: 100%;
}

.spend-donut-toggle-group.mud-toggle-group {
    gap: 0;
}

.spend-donut-toggle-group .mud-toggle-item {
    padding: 3px 8px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    font-size: 0.68rem !important;
    line-height: 1 !important;
    letter-spacing: 0.3px;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* Draggable floating windows. The themed background + rounded corners live here so dark/light mode stays
   correct; the inner .window-frame re-clips the content to the same radius so the resize handles can overhang
   the edges (in the drop-shadow margin) without being cut off. */
.draggable-window {
    position: fixed;
    background: #fff;
    border-radius: 8px;
    /* Thick drop shadow lifts the window off the page (replaces the old hard outline border). */
    box-shadow: 0 24px 64px rgba(0,0,0,0.40), 0 8px 24px rgba(0,0,0,0.28);
    display: flex;
    flex-direction: column;
    min-width: 300px;
    min-height: 200px;
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
}

/* Clips titlebar + body to the window's rounded corners. Transparent on purpose, so the themed
   .draggable-window background (light #fff / dark #0E2F45) shows through — including in dark mode. */
.window-frame {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    overflow: hidden;
}

/* Resize from any edge or corner (JS-driven, see window-manager.js). Replaces the old CSS `resize: both`,
   which only offered the bottom-right grip. Thin invisible strips overhang each edge/corner. */
.window-resize-handle {
    position: absolute;
    z-index: 12;
    touch-action: none;
}
.wrh-n  { top: -5px; left: 10px; right: 10px; height: 9px; cursor: ns-resize; }
.wrh-s  { bottom: -5px; left: 10px; right: 10px; height: 9px; cursor: ns-resize; }
.wrh-e  { top: 10px; bottom: 10px; right: -5px; width: 9px; cursor: ew-resize; }
.wrh-w  { top: 10px; bottom: 10px; left: -5px; width: 9px; cursor: ew-resize; }
.wrh-ne { top: -5px; right: -5px; width: 16px; height: 16px; cursor: nesw-resize; z-index: 13; }
.wrh-nw { top: -5px; left: -5px; width: 16px; height: 16px; cursor: nwse-resize; z-index: 13; }
.wrh-se { bottom: -5px; right: -5px; width: 16px; height: 16px; cursor: nwse-resize; z-index: 13; }
.wrh-sw { bottom: -5px; left: -5px; width: 16px; height: 16px; cursor: nesw-resize; z-index: 13; }

/* Windows maximize on mobile — no manual resize there. */
@media (max-width: 900px) {
    .window-resize-handle { display: none; }
}

/* MudBlazor dialogs must stay above draggable organization windows,
   while the backdrop remains below the dialog content. */
.mud-overlay-dialog {
    z-index: 10000 !important;
}

.mud-dialog-container {
    z-index: 10001 !important;
}

.mud-dialog-container .mud-dialog {
    position: relative;
    z-index: 10002 !important;
}

.mud-popover {
    z-index: 10010 !important;
}

.draggable-window-pending-layout {
    visibility: hidden;
}

.window-titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px;
    background: #1976D2;
    color: #fff;
    cursor: grab;
    user-select: none;
    flex-shrink: 0;
}

.window-titlebar:active {
    cursor: grabbing;
}

.window-titlegroup {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
}

.window-title {
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.window-header-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.72rem;
    line-height: 1.3;
    white-space: nowrap;
    flex-shrink: 0;
}

.window-header-chip-button {
    appearance: none;
    cursor: pointer;
    font-family: inherit;
}

.window-header-chip-id {
    background-color: rgba(14, 47, 69, 0.85);
    color: #d7e9f6;
    border-color: #3f6f8c;
}

.window-header-chip-button:hover {
    filter: brightness(1.06);
}

.window-header-chip-registered {
    background-color: rgba(42, 76, 34, 0.9);
    color: #daf2b7;
    border-color: #79a84a;
}

.window-buttons {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}

.window-btn {
    color: #fff !important;
}
.window-btn-pin {
    /* Separate the [Pin Minimize Close] control group from the [v1 link / share-link] group. */
    margin-left: 8px;
}
a.share-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    text-decoration: none;
}
a.share-link:hover {
    background: rgba(255,255,255,0.15);
}

a.legacy-papertrail-link {
    width: auto;
    gap: 4px;
    padding: 0 8px;
    border-radius: 999px;
}

.legacy-papertrail-link-label {
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1;
}

.window-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    overflow: auto;
    padding: 0;
}

/* Window taskbar */
.window-taskbar {
    position: fixed;
    bottom: 0;
    left: var(--mud-drawer-width-mini-left, 56px);
    right: 0;
    display: flex;
    gap: 4px;
    padding: 4px 8px;
    background: rgba(0,0,0,0.05);
    z-index: 1999;
}

.window-taskbar:empty {
    display: none;
}

.window-taskbar-item {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 4px;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.12);
    cursor: pointer;
    font-size: 0.75rem;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.clients-product-option .mud-list-item-icon {
    min-width: 32px;
}

/* ── Dark Mode Overrides ── */
html.dark-mode .org-type-pill { background: rgba(255,255,255,0.1); color: #B0C4D8; }
html.dark-mode .org-secondary-row { color: #6B8A9E; }
html.dark-mode .field-label { color: #6B8A9E; }
html.dark-mode .field-value { color: #E4E8F4; }
html.dark-mode .account-context-panel { background: rgba(14,47,69,0.5); border-color: rgba(74,159,217,0.2); }
html.dark-mode .account-context-title { color: #8EA4B5; }
html.dark-mode .account-context-body { color: #C9CCD6; }
html.dark-mode .spend-badge { background: rgba(255,255,255,0.08); color: #B0C4D8; }
html.dark-mode .spend-badge .spend-label { color: #6B8A9E; }
html.dark-mode .draggable-window {
    background: #0E2F45;
    box-shadow: 0 24px 64px rgba(0,0,0,0.70), 0 8px 24px rgba(0,0,0,0.55);
}
html.dark-mode .window-titlebar { background: #0A2740; }
html.dark-mode .window-taskbar { background: rgba(0,0,0,0.3); }
html.dark-mode .window-taskbar-item { background: #0E2F45; border-color: rgba(228,232,244,0.12); }
html.dark-mode .user-link:hover { color: #F1C400; border-bottom-color: #F1C400; }
html.dark-mode .license-context-org-id { color: #6B8A9E; }
html.dark-mode .body-side .side-header { color: #8EA4B5; }
html.dark-mode .product-card-header { border-bottom-color: rgba(228,232,244,0.08); }
html.dark-mode .est-license-item { border-color: rgba(228,232,244,0.08); }
html.dark-mode .product-card-body .admin-section-title { color: #6B8A9E; }
html.dark-mode .license-product-section + .license-product-section { border-top-color: rgba(228,232,244,0.08); }
html.dark-mode .license-modification-item { border-top-color: rgba(228,232,244,0.08); }
html.dark-mode .product-card-body-columns .body-side { border-left-color: rgba(228,232,244,0.08); }
html.dark-mode .account-context-item + .account-context-item { border-top-color: rgba(228,232,244,0.08); }
html.dark-mode .invoice-plan-level-badge { color: #C9CCD6; }
html.dark-mode .invoice-plan-level-silver { background: rgba(120,144,156,0.2); border-color: rgba(120,144,156,0.3); }
html.dark-mode .invoice-plan-level-gold { background: rgba(249,168,37,0.15); border-color: rgba(249,168,37,0.3); color: #F9A825; }
html.dark-mode .invoice-plan-level-platinum { background: rgba(92,107,192,0.15); border-color: rgba(92,107,192,0.3); color: #9FA8DA; }
html.dark-mode .invoice-plan-level-paygo { background: rgba(25,118,210,0.15); border-color: rgba(25,118,210,0.3); color: #64B5F6; }
html.dark-mode .license-context-separator { color: #6B8A9E; }

/* PlanSwift is a PNG with no light variant — invert in dark mode */
html.dark-mode img.family-logo[src$=".png"],
html.dark-mode img.product-logo[src$=".png"] { filter: brightness(0) invert(1); }

/* Blazor reconnect modal: reset inherited dark-mode text color so it stays readable on the white shadow-DOM dialog */
#components-reconnect-modal {
    color: initial;
}

/* Invoice viewer: force light appearance regardless of dark mode */
.invoice-viewer-container { color: #212121; }

.papertrail-header-brand {
    margin-left: 0 !important;
    gap: 0;
}

.papertrail-header-logo-slot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    margin-right: 8px;
    flex: 0 0 auto;
}

.papertrail-header-logo {
    display: block;
    width: 56px;
    height: auto;
    max-width: 56px;
    object-fit: contain;
}

.papertrail-breadcrumbs,
.papertrail-breadcrumb {
    min-width: 0;
}

.papertrail-breadcrumb {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The mobile drawer's nav items are each wrapped in a MudTooltip (.mud-tooltip-root, inline-block by default) — without these rules they flow inline and wrap into a 2-column grid.
   Force a single column at every width so the menu can never render multi-column, even mid-resize. */
.papertrail-mobile-drawer .mud-navmenu {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
.papertrail-mobile-drawer .mud-tooltip-root {
    display: block;
    width: 100%;
}

/* Mobile usability adjustments */
@media (max-width: 900px) and (hover: none), (max-width: 900px) and (pointer: coarse) {
    /* Touch devices: disable tooltip popovers to avoid stuck states. */
    .mud-popover.mud-tooltip {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}

@media (max-width: 900px) {
    .papertrail-mobile-menu-btn {
        display: inline-flex !important;
        margin-left: -4px;
        margin-right: 0;
    }

    .papertrail-header-brand {
        flex: 1 1 auto;
        overflow: hidden;
        max-width: none !important;
    }

    .papertrail-breadcrumbs {
        flex: 1 1 auto;
        overflow: hidden;
    }

    .papertrail-breadcrumb:not(.papertrail-breadcrumb-current),
    .papertrail-breadcrumb-separator,
    .papertrail-org-id-chip,
    .papertrail-user-menu-button .mud-button-label {
        display: none !important;
    }

    .papertrail-user-menu-button {
        min-width: 36px !important;
        padding-left: 4px !important;
        padding-right: 0 !important;
        margin-right: 0 !important;
    }

    .papertrail-desktop-drawer {
        display: none !important;
    }

    .papertrail-mobile-drawer {
        display: block !important;
        width: fit-content !important;
        min-width: 0 !important;
        max-width: calc(100vw - 16px) !important;
    }

    .papertrail-mobile-drawer.mud-drawer,
    .papertrail-mobile-drawer .mud-drawer-content {
        width: fit-content !important;
        min-width: 0 !important;
        max-width: calc(100vw - 16px) !important;
    }

    .papertrail-mobile-drawer .mud-navmenu {
        display: inline-flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: max-content;
        min-width: 0;
    }

    .papertrail-mobile-drawer .mud-tooltip-root {
        display: block;
        width: max-content;
        max-width: 100%;
    }

    .papertrail-mobile-drawer .mud-nav-link {
        width: max-content;
        min-width: 0;
        justify-content: flex-start;
        white-space: nowrap;
        padding-right: 12px;
    }

    .org-tab-strip {
        margin-bottom: 4px;
    }

    .org-tab-button {
        gap: 8px;
        min-height: 42px;
        padding: 0 8px;
        font-size: 0.68rem;
    }

    /* Show more content per viewport by scaling down rem-based UI sizing. */
    html {
        font-size: 75%;
    }

    .papertrail-header-logo-slot {
        margin-right: 6px;
    }

    .papertrail-header-logo {
        width: 44px;
        max-width: 44px;
    }

    /* Prevent sticky/fixed app bar behavior on mobile and reduce its height. */
    .papertrail-top-appbar.mud-appbar-fixed-top {
        position: static !important;
        top: auto !important;
        min-height: 36px !important;
        height: 36px !important;
    }

    .papertrail-top-appbar .mud-toolbar {
        min-height: 36px !important;
        height: 36px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        padding-left: calc(env(safe-area-inset-left) + 2px) !important;
        padding-right: 8px !important;
    }

    .papertrail-main-content.mud-main-content {
        padding-top: 0 !important;
        margin-left: 0 !important;
    }

    .mrr-sticky-header {
        top: 0;
    }

    /* Report tabs — compact on mobile */
    .mud-tabs .mud-tab {
        min-width: 0 !important;
        padding: 6px 8px !important;
        font-size: 0.68rem;
        min-height: 32px !important;
    }

    .mud-tabs .mud-tab .mud-icon-root {
        font-size: 1rem !important;
    }

    /* Sales KPI: last 3 compact cards side-by-side (override item sizing only) */
    .sales-kpi-grid .sales-kpi-item:has(.sales-kpi-compact) {
        flex-basis: 33.333% !important;
        max-width: 33.333% !important;
    }

    /* MRR KPI: 4 cards as 2×2 grid */
    .mrr-kpi-grid .sales-kpi-item {
        flex-basis: 50% !important;
        max-width: 50% !important;
    }

    /* Compact KPI cards — tighter content */
    .sales-kpi-compact.sales-kpi-card {
        padding: 6px 8px !important;
    }

    .sales-kpi-compact .mud-typography-h6 {
        font-size: 0.88rem;
    }

    .sales-kpi-compact .mud-typography-caption {
        font-size: 0.52rem;
        line-height: 1.3;
    }

    .sales-kpi-compact .mud-icon-root {
        font-size: 0.75rem !important;
    }

    .sales-kpi-subscription-stats {
        font-size: 0.7em;
    }

    .product-card {
        margin-bottom: 12px;
    }

    .product-card-header {
        gap: 8px;
        padding: 10px 12px;
        align-items: center;
    }

    .product-card-header .product-logo {
        height: 18px;
        max-width: min(180px, 52vw);
    }

    .product-card-header .header-actions {
        margin-left: auto;
    }

    .product-card-body,
    .product-card-body-columns {
        padding: 12px;
    }

    .product-card-body-columns {
        flex-wrap: wrap;
        gap: 14px;
    }

    .product-card-body-columns .body-main,
    .product-card-body-columns .body-side {
        flex: 1 1 100%;
    }

    .product-card-body-columns .body-side {
        border-left: 0;
        border-top: 1px solid rgba(0, 0, 0, 0.08);
        padding-left: 0;
        padding-top: 12px;
    }

    .body-side .side-header {
        flex-wrap: wrap;
        row-gap: 6px;
    }

    .spend-donut-wrapper {
        max-width: 320px;
        margin: 0 auto;
    }

    .product-card-body .field-row,
    .product-card-body-columns .field-row {
        display: grid;
        grid-template-columns: 88px minmax(0, 1fr);
        align-items: start;
        gap: 10px;
        padding: 6px 0;
    }

    .product-card-body .field-label,
    .product-card-body-columns .field-label {
        min-width: 0;
        font-size: 0.67rem;
        letter-spacing: 0.24px;
    }

    .product-card-body .field-value,
    .product-card-body-columns .field-value {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .product-card-body .field-value > .mud-chip,
    .product-card-body-columns .field-value > .mud-chip {
        max-width: 100%;
        height: auto;
        white-space: normal;
    }

    .spend-badge {
        max-width: 100%;
        padding: 2px 7px;
        gap: 4px;
        font-size: 0.64rem;
        white-space: normal;
    }

    .account-overview-totals {
        margin-left: 0;
        width: 100%;
    }

    .clients-page-toolbar {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 2px;
    }

    .clients-page-toolbar > * {
        flex: 0 0 auto;
    }

    .clients-page-toolbar .mud-button-root {
        white-space: nowrap;
    }

    .clients-mobile-columns-menu {
        display: inline-flex;
    }

    .clients-filter-shell {
        padding: 12px !important;
    }

    .clients-filter-grid {
        align-items: end;
    }

    .clients-filter-grid > .mud-grid-item,
    .clients-filter-advanced-grid > .mud-grid-item {
        padding-top: 0 !important;
    }

    .clients-filter-search {
        flex: 1 1 18rem;
        max-width: none;
        min-width: 13rem;
    }

    .clients-filter-products,
    .clients-filter-status {
        flex: 0 1 10rem;
        max-width: 10rem;
    }

    .clients-filter-activity {
        flex: 1 1 auto;
        max-width: none;
        min-width: 0;
        padding-right: 0;
    }

    .clients-filter-advanced {
        flex: 0 0 auto;
        max-width: none;
        margin-left: auto;
    }

    .clients-filter-shell .mud-input-control {
        margin-top: 0;
    }

    .clients-filter-shell .mud-icon-button-root {
        width: 28px;
        height: 28px;
    }

    .clients-table .mud-table-toolbar {
        gap: 8px;
        flex-wrap: wrap;
    }

    .clients-table .mud-table-cell {
        padding: 8px 6px;
    }

    .clients-table-products-cell .product-family-badges {
        gap: 2px;
    }

    .clients-table-products-cell .family-logo-small {
        height: 7px;
    }

    .clients-table-products-cell .invoice-plan-level-badge,
    .clients-table-products-cell .family-badge {
        font-size: 0.44rem;
        padding-left: 3px;
        padding-right: 3px;
    }

    .clients-lifecycle-chip.mud-chip {
        height: 18px;
        font-size: 0.56rem;
    }

    .org-users-grid .mud-table-toolbar {
        gap: 8px;
        flex-wrap: wrap;
    }

    .org-users-grid .mud-table-cell {
        padding-top: 8px;
        padding-bottom: 8px;
        vertical-align: top;
    }

    .org-users-grid .mud-table-cell:first-child {
        width: 1%;
        white-space: nowrap;
    }

    .org-users-actions {
        gap: 4px !important;
    }

    .org-users-actions .org-users-action-btn {
        min-width: 32px;
        width: 32px;
        padding: 0 !important;
    }

    .org-users-actions .org-users-action-text {
        display: none;
    }

    .org-users-actions .mud-button-label {
        gap: 0;
    }

    .org-comments-form {
        padding: 10px !important;
    }

    .org-comments-form-grid {
        align-items: flex-end;
        row-gap: 4px;
    }

    .org-comments-form .mud-input > textarea {
        min-height: 40px !important;
    }

    .org-comments-form-product {
        flex: 0 1 9.5rem;
        max-width: 9.5rem;
    }

    .org-comments-form-action {
        flex: 0 0 8.25rem;
        max-width: 8.25rem;
    }

    .org-comments-add-btn {
        white-space: nowrap;
        min-height: 40px;
    }

    .org-comment-card {
        padding: 12px !important;
    }

    .org-comment-meta {
        align-items: flex-start;
    }

    .org-comment-edit-actions {
        gap: 8px;
        flex-wrap: wrap;
    }

    /* Invoice list — compact mobile rows instead of cards.
       Column order: 1=InvoiceID, 2=Organization, 3=Date, 4=Status, 5=Products, 6=Subtotal, 7=Total, 8=PO, 9=Salesman
       Line 1: Organization + Total.  Line 2: #ID · Date · Status · Products. */
    .invoice-list-grid.mud-xs-table .mud-table-head {
        display: none !important;
    }

    .invoice-list-grid.mud-xs-table .mud-table-body {
        border-top: 0;
    }

    .invoice-list-grid.mud-xs-table .mud-table-row {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        padding: 8px 12px;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        border-bottom: 1px solid rgba(228, 232, 244, 0.08) !important;
        background: transparent !important;
    }

    /* Force line break between line 1 (order ≤ 2) and line 2 (order ≥ 3) */
    .invoice-list-grid.mud-xs-table .mud-table-row::after {
        content: "" !important;
        order: 2;
        flex-basis: 100%;
        height: 0;
    }

    .invoice-list-grid.mud-xs-table .mud-table-cell {
        width: auto !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

    .invoice-list-grid.mud-xs-table .mud-table-cell::before {
        display: none !important;
        content: none !important;
        padding: 0 !important;
        width: 0 !important;
    }

    /* Hide Subtotal(6), PO(8), Salesman(9) */
    .invoice-list-grid.mud-xs-table .mud-table-cell:nth-child(6),
    .invoice-list-grid.mud-xs-table .mud-table-cell:nth-child(8),
    .invoice-list-grid.mud-xs-table .mud-table-cell:nth-child(9) {
        display: none !important;
    }

    /* Line 1 — Organization (fills remaining space after Total) */
    .invoice-list-grid.mud-xs-table .mud-table-cell:nth-child(2) {
        order: 1;
        flex: 1 1 0;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-weight: 600;
    }

    /* Line 1 — Total (right-aligned) */
    .invoice-list-grid.mud-xs-table .mud-table-cell:nth-child(7) {
        order: 2;
        flex: 0 0 auto;
        font-weight: 600;
        padding-left: 8px !important;
        white-space: nowrap;
    }

    /* Line 2 — Invoice ID */
    .invoice-list-grid.mud-xs-table .mud-table-cell:nth-child(1) {
        order: 3;
        flex: 0 0 auto;
        font-size: 0.72rem;
        color: var(--mud-palette-text-secondary);
        margin-top: 1px;
        white-space: nowrap;
    }

    /* Line 2 — Date (with dot separator) */
    .invoice-list-grid.mud-xs-table .mud-table-cell:nth-child(3) {
        order: 4;
        flex: 0 0 auto;
        font-size: 0.72rem;
        color: var(--mud-palette-text-secondary);
        margin-top: 1px;
        white-space: nowrap;
    }

    .invoice-list-grid.mud-xs-table .mud-table-cell:nth-child(3)::before {
        display: inline !important;
        content: "·" !important;
        padding: 0 5px !important;
        color: var(--mud-palette-text-secondary);
    }

    /* Line 2 — Status chip */
    .invoice-list-grid.mud-xs-table .mud-table-cell:nth-child(4) {
        order: 5;
        flex: 0 0 auto;
        margin-top: 1px;
        margin-left: 6px;
    }

    .invoice-list-grid.mud-xs-table .mud-table-cell:nth-child(4) .mud-chip {
        height: 18px;
        font-size: 0.6rem;
    }

    /* Line 2 — Products (right-aligned) */
    .invoice-list-grid.mud-xs-table .mud-table-cell:nth-child(5) {
        order: 6;
        flex: 0 0 auto;
        margin-top: 1px;
        margin-left: auto;
    }

    .invoice-list-grid.mud-xs-table .mud-table-cell:nth-child(5) .family-logo-small {
        height: 8px;
    }

    .invoice-list-grid.mud-xs-table .mud-table-cell:nth-child(5) .invoice-plan-level-badge,
    .invoice-list-grid.mud-xs-table .mud-table-cell:nth-child(5) .family-badge {
        font-size: 0.48rem;
        padding: 0 3px;
    }

    .invoice-list-grid.mud-xs-table .mud-table-cell:nth-child(5) .product-family-badges {
        gap: 2px;
    }

    /* Invoice summary cards — horizontal 2x2 grid on mobile */
    .invoice-summary-cards .mud-grid-item {
        padding: 4px !important;
    }

    .invoice-summary-cards .mud-paper {
        padding: 8px 12px !important;
    }

    .invoice-summary-cards .mud-typography-caption {
        font-size: 0.6rem;
    }

    .invoice-summary-cards .mud-typography-h6 {
        font-size: 0.88rem;
    }

    /* Snapshot client drilldown grid — same compact mobile treatment as invoice/MMR grids.
       With renewal: 1=Client, 2=Products, 3=Renewal, 4=ARR
       Without renewal: 1=Client, 2=Products, 3=ARR */
    .snapshot-client-grid.mud-xs-table .mud-table-body {
        border-top: 0;
    }

    .snapshot-client-grid.mud-xs-table .mud-table-head {
        display: none !important;
    }

    .snapshot-client-grid.mud-xs-table .mud-table-row {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        padding: 8px 12px;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        border-bottom: 1px solid rgba(228, 232, 244, 0.08) !important;
        background: transparent !important;
    }

    .snapshot-client-grid.mud-xs-table .mud-table-row::after {
        content: "" !important;
        order: 2;
        flex-basis: 100%;
        height: 0;
    }

    .snapshot-client-grid.mud-xs-table .mud-table-cell {
        width: auto !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

    .snapshot-client-grid.mud-xs-table .mud-table-cell::before {
        display: none !important;
        content: none !important;
        padding: 0 !important;
        width: 0 !important;
    }

    .snapshot-client-grid.mud-xs-table .mud-table-cell:nth-child(1) {
        order: 1;
        flex: 1 1 0;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-weight: 600;
        font-size: 0.82rem;
    }

    .snapshot-client-grid.mud-xs-table .mud-table-cell:nth-child(2) {
        order: 3;
        flex: 0 0 auto;
        margin-top: 2px;
    }

    .snapshot-client-grid.mud-xs-table .mud-table-cell:nth-child(2) .family-logo-small {
        height: 7px;
    }

    .snapshot-client-grid.mud-xs-table .mud-table-cell:nth-child(2) .invoice-plan-level-badge,
    .snapshot-client-grid.mud-xs-table .mud-table-cell:nth-child(2) .family-badge {
        font-size: 0.44rem;
        padding: 0 3px;
    }

    .snapshot-client-grid--with-renewal.mud-xs-table .mud-table-cell:nth-child(4),
    .snapshot-client-grid--no-renewal.mud-xs-table .mud-table-cell:nth-child(3) {
        order: 2;
        flex: 0 0 auto;
        font-weight: 600;
        font-size: 0.82rem;
        padding-left: 8px !important;
        white-space: nowrap;
        margin-left: auto;
    }

    .snapshot-client-grid--with-renewal.mud-xs-table .mud-table-cell:nth-child(3) {
        order: 4;
        flex: 0 0 auto;
        font-size: 0.7rem;
        color: var(--mud-palette-text-secondary);
        margin-top: 2px;
        margin-left: 6px;
        white-space: nowrap;
    }

    /* MRR drilldown grid — compact mobile rows.
       Columns: 1=Organization, 2=Product, 3=Plan/Item, 4=Qty, 5=Total, 6=MRR Delta, 7?=Reason, 8?=Invoice
       Line 1: Organization + Total.  Line 2: Product badges · Plan + MRR Delta. */
    .mrr-drilldown-grid.mud-xs-table .mud-table-body {
        border-top: 0;
    }

    .mrr-drilldown-grid.mud-xs-table .mud-table-head {
        display: none !important;
    }

    .mrr-drilldown-grid.mud-xs-table .mud-table-row {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        padding: 8px 12px;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        border-bottom: 1px solid rgba(228, 232, 244, 0.08) !important;
        background: transparent !important;
    }

    .mrr-drilldown-grid.mud-xs-table .mud-table-row::after {
        content: "" !important;
        order: 2;
        flex-basis: 100%;
        height: 0;
    }

    .mrr-drilldown-grid.mud-xs-table .mud-table-cell {
        width: auto !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

    .mrr-drilldown-grid.mud-xs-table .mud-table-cell::before {
        display: none !important;
        content: none !important;
        padding: 0 !important;
        width: 0 !important;
    }

    /* Hide Qty(4), Reason(7) */
    .mrr-drilldown-grid.mud-xs-table .mud-table-cell:nth-child(4),
    .mrr-drilldown-grid.mud-xs-table .mud-table-cell:nth-child(7) {
        display: none !important;
    }

    /* Line 1 — Organization (fills row) */
    .mrr-drilldown-grid.mud-xs-table .mud-table-cell:nth-child(1) {
        order: 1;
        flex: 1 1 0;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-weight: 600;
        font-size: 0.82rem;
    }

    /* Line 1 — Total (right-aligned) */
    .mrr-drilldown-grid.mud-xs-table .mud-table-cell:nth-child(5) {
        order: 2;
        flex: 0 0 auto;
        font-weight: 600;
        font-size: 0.82rem;
        padding-left: 8px !important;
        white-space: nowrap;
    }

    /* Line 2 — Product badges */
    .mrr-drilldown-grid.mud-xs-table .mud-table-cell:nth-child(2) {
        order: 3;
        flex: 0 0 auto;
        margin-top: 2px;
    }

    .mrr-drilldown-grid.mud-xs-table .mud-table-cell:nth-child(2) .family-logo-small {
        height: 7px;
    }

    .mrr-drilldown-grid.mud-xs-table .mud-table-cell:nth-child(2) .invoice-plan-level-badge,
    .mrr-drilldown-grid.mud-xs-table .mud-table-cell:nth-child(2) .family-badge {
        font-size: 0.44rem;
        padding: 0 3px;
    }

    /* Line 2 — Plan/Item */
    .mrr-drilldown-grid.mud-xs-table .mud-table-cell:nth-child(3) {
        order: 4;
        flex: 0 0 auto;
        font-size: 0.7rem;
        color: var(--mud-palette-text-secondary);
        margin-top: 2px;
        margin-left: 6px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 40%;
    }

    /* Line 2 — MRR Delta (right) */
    .mrr-drilldown-grid.mud-xs-table .mud-table-cell:nth-child(6) {
        order: 5;
        flex: 0 0 auto;
        font-size: 0.7rem;
        font-weight: 600;
        margin-top: 2px;
        margin-left: auto;
        white-space: nowrap;
    }

    /* Line 2 — Invoice (after MRR delta) */
    .mrr-drilldown-grid.mud-xs-table .mud-table-cell:nth-child(8) {
        order: 6;
        flex: 0 0 auto;
        font-size: 0.7rem;
        color: var(--mud-palette-text-secondary);
        margin-top: 2px;
        margin-left: 6px;
        white-space: nowrap;
    }

    /* Sales item table (MudSimpleTable) — horizontal scroll on mobile */
    .sales-item-table {
        overflow-x: auto;
    }

    .sales-item-table th,
    .sales-item-table td {
        font-size: 0.68rem;
        padding: 4px 6px !important;
        white-space: nowrap;
    }

    /* Invoice filter bar — wrap on mobile */
    .invoice-filters .mud-stack {
        flex-wrap: wrap;
        gap: 8px !important;
    }

    .invoice-filters .mud-input-control {
        min-width: 0;
    }

    /* Org invoices tab — compact mobile rows.
       Columns: 1=TransactionID, 2=InvoiceID, 3=Date, 4=Salesman, 5=Status, 6=Products, 7=Subtotal, 8=Total, 9=Actions
       Line 1: #InvoiceID + Total.  Line 2: Date · Status · Products + Actions. */
    .org-invoices-grid.mud-xs-table .mud-table-head {
        display: none !important;
    }

    .org-invoices-grid.mud-xs-table .mud-table-body {
        border-top: 0;
    }

    .org-invoices-grid.mud-xs-table .mud-table-row {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        padding: 8px 12px;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        border-bottom: 1px solid rgba(228, 232, 244, 0.08) !important;
        background: transparent !important;
    }

    .org-invoices-grid.mud-xs-table .mud-table-row::after {
        content: "" !important;
        order: 2;
        flex-basis: 100%;
        height: 0;
    }

    .org-invoices-grid.mud-xs-table .mud-table-cell {
        width: auto !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

    .org-invoices-grid.mud-xs-table .mud-table-cell::before {
        display: none !important;
        content: none !important;
        padding: 0 !important;
        width: 0 !important;
    }

    /* Hide TransactionID(1), Salesman(4), Subtotal(7) */
    .org-invoices-grid.mud-xs-table .mud-table-cell:nth-child(1),
    .org-invoices-grid.mud-xs-table .mud-table-cell:nth-child(4),
    .org-invoices-grid.mud-xs-table .mud-table-cell:nth-child(7) {
        display: none !important;
    }

    /* Line 1 — Invoice ID (fills row, prefixed with #) */
    .org-invoices-grid.mud-xs-table .mud-table-cell:nth-child(2) {
        order: 1;
        flex: 1 1 0;
        min-width: 0;
        font-weight: 600;
        white-space: nowrap;
    }

    /* Line 1 — Total (right-aligned) */
    .org-invoices-grid.mud-xs-table .mud-table-cell:nth-child(8) {
        order: 2;
        flex: 0 0 auto;
        font-weight: 600;
        padding-left: 8px !important;
        white-space: nowrap;
    }

    /* Line 2 — Date */
    .org-invoices-grid.mud-xs-table .mud-table-cell:nth-child(3) {
        order: 3;
        flex: 0 0 auto;
        font-size: 0.72rem;
        color: var(--mud-palette-text-secondary);
        margin-top: 1px;
        white-space: nowrap;
    }

    /* Line 2 — Status */
    .org-invoices-grid.mud-xs-table .mud-table-cell:nth-child(5) {
        order: 4;
        flex: 0 0 auto;
        margin-top: 1px;
        margin-left: 6px;
    }

    .org-invoices-grid.mud-xs-table .mud-table-cell:nth-child(5) .mud-chip {
        height: 18px;
        font-size: 0.6rem;
    }

    /* Line 2 — Products */
    .org-invoices-grid.mud-xs-table .mud-table-cell:nth-child(6) {
        order: 5;
        flex: 0 0 auto;
        margin-top: 1px;
        margin-left: 6px;
    }

    .org-invoices-grid.mud-xs-table .mud-table-cell:nth-child(6) .family-logo-small {
        height: 8px;
    }

    .org-invoices-grid.mud-xs-table .mud-table-cell:nth-child(6) .invoice-plan-level-badge,
    .org-invoices-grid.mud-xs-table .mud-table-cell:nth-child(6) .family-badge {
        font-size: 0.48rem;
        padding: 0 3px;
    }

    /* Line 2 — Actions (right-aligned) */
    .org-invoices-grid.mud-xs-table .mud-table-cell:nth-child(9) {
        order: 6;
        flex: 0 0 auto;
        margin-top: 1px;
        margin-left: auto;
    }

    /* Always maximize floating windows on mobile so they stay reachable. */
    .draggable-window {
        left: env(safe-area-inset-left) !important;
        top: env(safe-area-inset-top) !important;
        width: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right)) !important;
        max-width: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right)) !important;
        height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
        max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
        min-width: 0 !important;
        min-height: 0 !important;
        border-radius: 0 !important;
        resize: none !important;
    }

    /* MudBlazor dialogs: force fullscreen on mobile as well. */
    .mud-dialog-container {
        padding-top: env(safe-area-inset-top) !important;
        padding-right: env(safe-area-inset-right) !important;
        padding-bottom: env(safe-area-inset-bottom) !important;
        padding-left: env(safe-area-inset-left) !important;
    }

    .mud-dialog {
        width: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right)) !important;
        max-width: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right)) !important;
        height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
        max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }
}

@media (max-width: 960px) {
    .bid-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .bid-row > .product-card {
        margin-bottom: 0;
    }
}

@media (max-width: 600px) {
    .org-tab-button {
        gap: 0;
        min-height: 38px;
        padding: 0 4px;
    }

    .org-tab-button-label {
        display: none;
    }

    .org-tab-button .mud-icon-root {
        font-size: 1rem;
        margin: 0 !important;
    }

    .product-card-header .product-logo {
        height: 16px;
        max-width: min(160px, 54vw);
    }

    .product-card-body .field-row,
    .product-card-body-columns .field-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }

    .product-card-body .field-label,
    .product-card-body-columns .field-label {
        font-size: 0.6rem;
    }

    .spend-badge {
        font-size: 0.6rem;
    }

    .account-transaction-summary {
        gap: 6px;
    }

    .clients-filter-shell {
        padding: 10px !important;
        margin-bottom: 8px !important;
    }

    .clients-page-toolbar .mud-button-root {
        min-width: 36px;
        width: 36px;
        padding-left: 0;
        padding-right: 0;
    }

    .clients-toolbar-action-text {
        display: none;
    }

    .clients-filter-advanced-grid > .mud-grid-item,
    .org-comments-form-product,
    .org-comments-form-action {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .org-comments-form-action .mud-button-root {
        width: 100%;
    }

    /* Activity hidden in filter — shown in header toolbar */
    .clients-filter-mobile-hidden {
        display: none !important;
    }

    .clients-activity-header {
        display: flex;
        align-items: center;
        gap: 2px;
    }

    /* Products + Status hidden by default — shown when Advanced is expanded */
    .clients-filter-collapsible {
        display: none !important;
    }

    .clients-filter-expanded .clients-filter-collapsible {
        display: flex !important;
        flex: 0 0 50% !important;
        max-width: 50% !important;
        order: 10;
    }

    /* Force line break between search row and collapsible items */
    .clients-filter-grid::after {
        content: "" !important;
        order: 3;
        flex-basis: 100%;
        height: 0;
    }

    /* Search fills remaining space next to Advanced button */
    .clients-filter-search {
        flex: 1 1 0 !important;
        max-width: none !important;
        min-width: 0 !important;
        order: 1;
    }

    /* Advanced button: compact square icon, next to search */
    .clients-filter-advanced {
        flex: 0 0 auto !important;
        max-width: none !important;
        order: 2;
    }

    .clients-filter-advanced .mud-button-root {
        min-width: 36px !important;
        width: 36px !important;
        padding: 0 !important;
    }

    .clients-filter-advanced-text {
        display: none !important;
    }

    .clients-table .mud-table-cell {
        padding: 7px 5px;
    }

    /* Clients table — compact mobile rows instead of cards.
       Portrait columns: Organization, Subscriptions, Status, Contact, LastComment.
       Activity column conditionally prepended.
       Line 1: [Activity] Organization + Status.  Line 2: Products · Contact + LastComment. */
    .clients-table.mud-xs-table .mud-table-toolbar {
        padding: 4px 2px 4px;
        align-items: center;
        min-height: 0;
    }

    .clients-table.mud-xs-table .mud-menu {
        display: none;
    }

    .clients-table.mud-xs-table .mud-table-head {
        display: none !important;
    }

    .clients-table.mud-xs-table .mud-table-body {
        border-top: 0;
    }

    .clients-table.mud-xs-table .mud-table-row {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        padding: 8px 12px;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        border-bottom: 1px solid rgba(228, 232, 244, 0.08) !important;
        background: transparent !important;
        position: relative;
    }

    /* Force line break between line 1 (order ≤ 2) and line 2 (order ≥ 3) */
    .clients-table.mud-xs-table .mud-table-row::after {
        content: "" !important;
        order: 2;
        flex-basis: 100%;
        height: 0;
    }

    .clients-table.mud-xs-table .mud-table-cell {
        width: auto !important;
        display: block !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        text-align: left !important;
    }

    .clients-table.mud-xs-table .mud-table-cell::before {
        display: none !important;
        content: none !important;
        padding: 0 !important;
        width: 0 !important;
    }

    /* Line 2 — Activity badges (pinned bottom-right, absolute) */
    .clients-table.mud-xs-table .cl-activity {
        position: absolute;
        right: 16px;
        bottom: 8px;
    }

    .clients-table.mud-xs-table .cl-activity .activity-badge {
        margin: 0;
        height: 15px;
        font-size: 0.46rem;
        padding: 0 4px;
        gap: 2px;
        border-radius: 8px;
    }

    .clients-table.mud-xs-table .cl-activity .activity-badge .mud-icon-root {
        font-size: 10px !important;
    }

    /* Line 1 — Organization (fills row) */
    .clients-table.mud-xs-table .cl-org {
        order: 1;
        flex: 1 1 0;
        min-width: 0;
    }

    .clients-table.mud-xs-table .cl-org > div:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .clients-table.mud-xs-table .cl-org a {
        font-size: 0.84rem;
        font-weight: 700;
        line-height: 1.25;
    }

    .clients-table.mud-xs-table .cl-org .org-secondary-row,
    .clients-table.mud-xs-table .cl-org .org-type-pill {
        display: none;
    }

    /* Line 1 — Status chip (right-aligned) */
    .clients-table.mud-xs-table .cl-status {
        order: 2;
        flex: 0 0 auto;
        padding-left: 8px !important;
    }

    /* Line 2 — shared vertical alignment */
    .clients-table.mud-xs-table .cl-products,
    .clients-table.mud-xs-table .cl-contact {
        display: flex !important;
        align-items: center;
    }

    /* Line 2 — Product badges (content-sized, capped) */
    .clients-table.mud-xs-table .cl-products {
        order: 3;
        flex: 0 1 auto;
        max-width: 60%;
        overflow: hidden;
        margin-top: 2px;
    }

    .clients-table.mud-xs-table .cl-products .clients-table-products-cell {
        min-height: 0 !important;
        display: flex;
        align-items: center;
    }

    /* Line 2 — Contact (content-sized, truncates — does NOT grow so activity can flush-right) */
    .clients-table.mud-xs-table .cl-contact {
        order: 4;
        flex: 0 1 auto;
        max-width: 40%;
        min-width: 0;
        margin-top: 2px;
        margin-left: 8px;
        font-size: 0.72rem;
        color: var(--mud-palette-text-secondary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .clients-table.mud-xs-table .cl-contact a {
        color: var(--mud-palette-text-secondary);
    }

    /* Line 2 — Last Comment (right-aligned, truncated) */
    .clients-table.mud-xs-table .cl-comment {
        order: 5;
        flex: 1 1 0;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-top: 2px;
        margin-left: auto;
        text-align: right;
    }

    .clients-table.mud-xs-table .cl-comment .mud-typography-caption {
        font-size: 0.58rem;
        line-height: 1.35;
        color: var(--mud-palette-text-secondary);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .clients-table-products-cell .family-logo-small {
        height: 5px;
    }

    .clients-lifecycle-chip.mud-chip {
        font-size: 0.46rem;
        height: 15px;
    }

    .org-users-create-btn .org-users-action-text,
    .org-comments-add-text {
        display: none;
    }

    .org-users-grid .mud-table-cell:first-child {
        width: auto;
        white-space: normal;
    }

    .org-users-actions {
        flex-wrap: nowrap !important;
    }

    .org-users-create-btn,
    .org-comments-add-btn {
        min-width: 40px;
    }

    .org-comments-form-action {
        flex: 0 0 40px;
        max-width: 40px;
    }

    .org-comments-form-product {
        flex: 1 1 calc(100% - 48px);
        max-width: calc(100% - 48px);
    }
}

/* Desktop starts at 900px. Must use the same boundary as the mobile query (max-width: 900px) — a gap like 901px lets fractional widths during a browser resize (e.g. 900.5px) match
   NEITHER query, briefly un-hiding the mobile drawer. */
@media (min-width: 900px) {
    .papertrail-mobile-menu-btn {
        display: none !important;
    }

    .papertrail-mobile-drawer {
        display: none !important;
    }

    .papertrail-header-logo-slot {
        width: var(--mud-drawer-width-mini-left, 56px);
        flex: 0 0 var(--mud-drawer-width-mini-left, 56px);
        justify-content: flex-start;
        margin-left: -23px;
    }
}

/* ============================================================
   LicensesTab v2 — Account Overview row + Product strip rows
   ============================================================ */

.licenses-tab-v2 {
    --family-bid: #1976D2;
    --family-takeoff: #FF6D00;
    --family-estimation: #8CC140;
    --family-estimation-license: #689F38;
    --family-planswift: #00897B;
    --family-comworker: #2E7D32;
    --family-gextim: #6D4C41;
    --family-other: #757575;
    /* Fixed-width data columns so every strip row aligns column-for-column. Only the spend column flexes; the actions column is fixed so a row with 4 action buttons doesn't shift the columns of a row with 2. */
    --strip-cols: 5px 210px 116px 92px 200px 118px 126px minmax(110px, 1fr) 132px 32px;
    /* Shared content width cap — the products section and the account overview card both key off this so they line up and don't stretch needlessly on ultra-wide screens.  */
    --pt-content-max: 1500px;

    display: flex;
    flex-direction: column;
    gap: 14px;
    /* A little breathing room so the strip family-color bars and card shadows aren't flush against the edge — most noticeable in the modal window. */
    padding: 2px 4px;
}

/* The width cap only makes sense on the full page. Inside a modal window the container is already constrained, so let the card and section fill it. */
.draggable-window .licenses-tab-v2 {
    --pt-content-max: none;
}

/* ============================================================
   Account Overview card (top row)
   ============================================================ */
.ao-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
    border-left: 4px solid #F1C400;
    overflow: hidden;
    /* Same width cap as the products section so the two line up; the active-products band wraps within it rather than stretching the card. */
    max-width: var(--pt-content-max);
}

.ao-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}

.ao-title {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    min-width: 0;
}

.ao-title h2 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
}

.ao-create-quote-btn .mud-button-root,
.ao-create-quote-btn.mud-button-root {
    text-transform: none;
}

.ao-totals {
    display: flex;
    gap: 16px;
    align-items: stretch;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.ao-kpi {
    display: flex;
    flex-direction: column;
    padding: 2px 0 2px 14px;
    border-left: 1px solid rgba(0,0,0,0.08);
    min-width: 0;
}

.ao-kpi:first-child {
    border-left: 0;
    padding-left: 0;
}

.ao-kpi-label {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #607D8B;
}

.ao-kpi-value {
    font-size: 1.18rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    color: #1A2B3C;
    white-space: nowrap;
}

.ao-kpi-sub {
    font-size: 0.7rem;
    color: #607D8B;
    margin-top: 1px;
    white-space: nowrap;
}

.ao-kpi.big .ao-kpi-value {
    color: #2A5572;
    font-size: 1.32rem;
}

/* Product sub-label ("Web" / "Local" / "Licenses") shown next to the logo. */
.ao-tile-sub {
    font-size: 0.72rem;
    font-weight: 700;
    color: #607D8B;
    letter-spacing: 0.3px;
}

/* Bottom row: fields + donut. The donut column is wide enough to host the legend beside the chart instead of stacked underneath — vertical space is precious because a client
   can have 7-8 product rows below. */
.ao-bottom {
    display: grid;
    /* Donut column is wide so the full family legend (see .spend-donut-legend) fits in two rows below the chart without ever spilling to a third row. */
    grid-template-columns: minmax(0, 1fr) 460px;
    align-items: stretch;
}

.ao-bottom.no-donut {
    grid-template-columns: minmax(0, 1fr);
}

.ao-fields {
    padding: 10px 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ao-fields .field-row,
.drawer-main .field-row,
.drawer-side .field-row {
    display: flex;
    align-items: baseline;
    padding: 4px 0;
    font-size: 0.85rem;
    gap: 10px;
}

.ao-fields .field-label,
.drawer-main .field-label,
.drawer-side .field-label {
    color: #607D8B;
    flex: 0 0 150px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.drawer-side .field-label { flex-basis: 110px; }

.ao-fields .field-value,
.drawer-main .field-value,
.drawer-side .field-value {
    color: #1A2B3C;
    font-weight: 500;
    flex: 1;
    min-width: 0;
}

html.dark-mode .ao-fields .field-label,
html.dark-mode .drawer-main .field-label,
html.dark-mode .drawer-side .field-label { color: #8EA4B5; }
html.dark-mode .ao-fields .field-value,
html.dark-mode .drawer-main .field-value,
html.dark-mode .drawer-side .field-value { color: #E4E8F4; }

.ao-donut-wrap {
    border-left: 1px solid rgba(0,0,0,0.08);
    padding: 10px 14px 8px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 6px;
    min-width: 0;
}

.spend-donut-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}

.spend-donut-title {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #607D8B;
    white-space: nowrap;
}

html.dark-mode .spend-donut-title { color: #8EA4B5; }

.ao-donut-wrap .spend-donut-wrapper {
    width: 100%;
    margin: 0;
}

/* Period total, overlaid in the donut's hole. */
.spend-donut-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    pointer-events: none;
}
.spend-donut-center-label {
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #90A4AE;
}
.spend-donut-center-value {
    font-size: 1.05rem;
    font-weight: 800;
    color: #1A2B3C;
    font-variant-numeric: tabular-nums;
}
html.dark-mode .spend-donut-center-value { color: #E4E8F4; }

/* Full family legend below the donut. Plain flex-wrap: items fill the available
   width on one line and only wrap when they genuinely run out of room. The donut
   column is sized wide enough (see .ao-bottom) that the realistic worst case
   (~7 families) still fits in two rows. Each item stacks name over value so it
   stays narrow and more fit per line. */
.spend-donut-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    column-gap: 14px;
    row-gap: 4px;
    margin-top: 2px;
}
.spend-donut-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.spend-donut-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    flex-shrink: 0;
}
.spend-donut-legend-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}
.spend-donut-legend-name {
    font-size: 0.68rem;
    font-weight: 600;
    color: #607D8B;
    white-space: nowrap;
}
.spend-donut-legend-val {
    font-size: 0.72rem;
    font-weight: 700;
    color: #1A2B3C;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
html.dark-mode .spend-donut-legend-name { color: #8EA4B5; }
html.dark-mode .spend-donut-legend-val { color: #E4E8F4; }

/* Summary lines under the donut — pay-as-you-go and projected annual for the selected period (consolidated here from the old top-right KPIs / field row). */
.spend-summary {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.spend-summary-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.78rem;
}
.spend-summary-label {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: #607D8B;
}
.spend-summary-val {
    font-weight: 700;
    color: #1A2B3C;
    font-variant-numeric: tabular-nums;
}
html.dark-mode .spend-summary { border-top-color: rgba(228,232,244,0.10); }
html.dark-mode .spend-summary-label { color: #8EA4B5; }
html.dark-mode .spend-summary-val { color: #E4E8F4; }

/* Shown in place of the donut when the selected period has no spend — keeps the
   panel and its period toggle on screen so the user can switch back. */
.spend-donut-empty {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 128px;
    padding: 12px;
    text-align: center;
    font-size: 0.8rem;
    color: #90A4AE;
}
html.dark-mode .spend-donut-empty { color: #8EA4B5; }

/* ============================================================
   Products section
   ============================================================ */
.products-section {
    display: flex;
    flex-direction: column;
    gap: 5px;
    /* Don't stretch needlessly on ultra-wide screens. */
    max-width: var(--pt-content-max);
}

/* @key wrappers — kept out of the layout so the article inside remains the effective flex child. */
.products-section > div {
    display: contents;
}

.products-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 4px 2px;
    flex-wrap: wrap;
}

.products-header h3 {
    margin: 0;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #607D8B;
}

.products-header-meta {
    font-size: 0.78rem;
    color: #9E9E9E;
}

.products-header-spacer {
    flex: 1;
}

/* Sub-divider separating the active product rows from the inactive ones. */
.products-inactive-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 2px 1px;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #90A4AE;
}
.products-inactive-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(0,0,0,0.10);
}
html.dark-mode .products-inactive-divider { color: #6B8A9E; }
html.dark-mode .products-inactive-divider::after { background: rgba(228,232,244,0.12); }

.products-expand-btn.mud-button-root {
    text-transform: none;
    min-height: 28px;
    padding: 2px 8px;
    font-size: 0.78rem;
    font-weight: 600;
}

/* ============================================================
   STRIP ROW — single horizontal product row
   ============================================================ */
.product-strip {
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.06);
    overflow: hidden;
    border: 1px solid transparent;
    transition: border-color 120ms ease, opacity 120ms ease;
    position: relative;
}

.product-strip.open {
    border-color: rgba(0,0,0,0.08);
}

.product-strip.inactive {
    opacity: 0.72;
}

.product-strip.inactive:hover {
    opacity: 0.95;
}

/* Brief highlight flash when an Active Products band card jumps you to this strip row — makes the band → row relationship felt. */
.product-strip.strip-flash::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(241, 196, 0, 0.22);
    pointer-events: none;
    z-index: 5;
    animation: pt-strip-flash 1.1s ease-out forwards;
}
@keyframes pt-strip-flash {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}

.product-strip-row {
    position: relative;
    display: grid;
    grid-template-columns: var(--strip-cols);
    align-items: center;
    gap: 10px;
    padding: 0 8px 0 0;
    min-height: 56px;
}

.product-strip-toggle {
    position: absolute;
    inset: 0;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    z-index: 0;
}

.product-strip-row:hover .product-strip-toggle {
    background: rgba(42,85,114,0.04);
}

.product-strip > * {
    position: relative;
    z-index: 1;
}

/* Family color bar — absolutely positioned over the whole article so it spans both the row and the drawer when the strip is expanded. The grid's first 5px track is left empty
   as the slot it visually occupies. */
.product-strip-bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: var(--family-other);
    z-index: 4;
}

.product-strip.family-bid                .product-strip-bar { background: var(--family-bid); }
.product-strip.family-takeoff            .product-strip-bar { background: var(--family-takeoff); }
.product-strip.family-estimation         .product-strip-bar { background: var(--family-estimation); }
.product-strip.family-estimation-license .product-strip-bar { background: var(--family-estimation-license); }
.product-strip.family-comworker          .product-strip-bar { background: var(--family-comworker); }
.product-strip.family-planswift          .product-strip-bar { background: var(--family-planswift); }
.product-strip.family-gextim             .product-strip-bar { background: var(--family-gextim); }

.product-strip-head {
    grid-column: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 4px;
    min-width: 0;
    flex-wrap: wrap;
}

.product-strip-head .product-logo {
    display: block;
    height: 22px;
    width: auto;
    flex-shrink: 0;
    max-width: 110px;
    object-fit: contain;
}

.product-strip-sub {
    font-size: 0.82rem;
    font-weight: 700;
    color: #607D8B;
    letter-spacing: 0.2px;
}

.product-strip-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.85rem;
    min-width: 0;
    pointer-events: none;
}

.product-strip-cell strong {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: #1A2B3C;
    line-height: 1.2;
}

.product-strip-cell .mud-chip {
    width: max-content;
    pointer-events: auto;
}

.product-strip-cell .strong-num {
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.01em;
    color: #1A2B3C;
}

.product-strip-cell .inactive-pip {
    color: #D32F2F;
    font-weight: 600;
    font-size: 0.78rem;
}

/* Date cell highlighted when the product is active but will lapse (no auto-renew) — draws attention to the upcoming expiration. */
.product-strip-cell.cell-date-warning .meta-label { color: #E65100; }
.product-strip-cell.cell-date-warning strong { color: #E65100; font-weight: 700; }
html.dark-mode .product-strip-cell.cell-date-warning .meta-label,
html.dark-mode .product-strip-cell.cell-date-warning strong { color: #FFB74D; }


.product-strip-cell .muted-extra {
    color: #9E9E9E;
    font-weight: 500;
}

.meta-label {
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: #607D8B;
    line-height: 1.3;
}

.product-strip-actions {
    display: flex;
    gap: 0;
    align-items: center;
    position: relative;
    z-index: 2;
    justify-self: end;
}

.product-strip-actions .mud-icon-button {
    height: 30px;
    width: 30px;
}

.product-strip-caret-btn.mud-icon-button {
    height: 30px;
    width: 30px;
    position: relative;
    z-index: 2;
}

/* ---------- Drawer ---------- */
.product-strip-drawer {
    border-top: 1px solid rgba(0,0,0,0.08);
    background: rgba(42,85,114,0.025);
}

/* An expanded drawer should not repeat fields/actions already shown in the strip-row header. Those elements are marked `.drawer-dup` and hidden here — but shown again once the row
   collapses to the stacked card layout (<=1100px), where the header no longer displays those columns. */
.product-strip-drawer .drawer-dup { display: none; }
@media (max-width: 1100px) {
    /* .field-row, .header-actions and .license-product-section-header are all display:flex when visible. */
    .product-strip-drawer .drawer-dup { display: flex; }
}

.product-strip-drawer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
}

.product-strip-drawer-grid.no-side {
    grid-template-columns: minmax(0, 1fr);
}

.product-strip-drawer-grid:not(.no-side) .drawer-main {
    border-right: 1px solid rgba(0,0,0,0.08);
}

.drawer-main {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.drawer-side {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.drawer-side .side-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: #607D8B;
    font-weight: 600;
}

.drawer-side .side-header .side-period {
    margin-left: auto;
}

.drawer-side .field-row {
    padding: 3px 0;
}

.drawer-side .field-label {
    min-width: 110px;
}

.drawer-no-sub {
    padding: 12px 16px;
    color: #9E9E9E;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Trial-expired inline block inside the drawer */
.strip-trial-expired-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ============================================================
   Dark mode overrides for the new layout
   ============================================================ */
html.dark-mode .ao-card {
    background: #0E2F45;
    border-left-color: #F1C400;
}

html.dark-mode .ao-top { border-bottom-color: rgba(228,232,244,0.10); }
html.dark-mode .meta-label,
html.dark-mode .ao-kpi-label,
html.dark-mode .products-header h3 { color: #8EA4B5; }
html.dark-mode .ao-tile-sub { color: #8EA4B5; }
html.dark-mode .ao-kpi { border-left-color: rgba(228,232,244,0.10); }
html.dark-mode .ao-kpi-value,
html.dark-mode .product-strip-cell strong,
html.dark-mode .product-strip-cell .strong-num { color: #E4E8F4; }
html.dark-mode .ao-kpi.big .ao-kpi-value { color: #F1C400; }
html.dark-mode .ao-kpi-sub { color: #8EA4B5; }

html.dark-mode .ao-bottom { background: transparent; }
html.dark-mode .ao-donut-wrap { border-left-color: rgba(228,232,244,0.10); }

html.dark-mode .product-strip {
    background: #0E2F45;
}
html.dark-mode .product-strip.open { border-color: rgba(228,232,244,0.12); }
html.dark-mode .product-strip-row:hover .product-strip-toggle { background: rgba(241,196,0,0.05); }
html.dark-mode .product-strip-sub,
html.dark-mode .products-header-meta { color: #8EA4B5; }
html.dark-mode .product-strip-cell .muted-extra { color: #6B8A9E; }
html.dark-mode .product-strip-drawer {
    background: rgba(255,255,255,0.03);
    border-top-color: rgba(228,232,244,0.10);
}
html.dark-mode .product-strip-drawer-grid:not(.no-side) .drawer-main { border-right-color: rgba(228,232,244,0.10); }
html.dark-mode .drawer-side .side-header { color: #8EA4B5; }
html.dark-mode .drawer-no-sub { color: #8EA4B5; }

/* ============================================================
   Responsive: tablet / narrow desktop
   ============================================================ */
@media (max-width: 1280px) {
    .licenses-tab-v2 {
        /* Tighter fixed columns — still fixed so rows stay column-aligned. */
        --strip-cols: 5px 180px 108px 84px 178px 108px 112px minmax(96px, 1fr) 132px 32px;
    }
}

@media (max-width: 1100px) {
    .product-strip-row {
        grid-template-columns: 5px 1fr auto auto 30px;
        grid-template-rows: auto auto;
        row-gap: 4px;
        column-gap: 12px;
        padding: 8px 8px 8px 0;
        min-height: 0;
    }

    .product-strip-head {
        grid-column: 2;
        grid-row: 1;
    }

    .product-strip-actions {
        grid-column: 3;
        grid-row: 1;
        align-self: center;
    }

    .product-strip-caret-btn {
        grid-column: 5;
        grid-row: 1;
        align-self: center;
    }

    /* Tablet: keep only critical cells visible inline (status + spend);
       the rest is available via the drawer. */
    .product-strip-cell.cell-status {
        grid-column: 2;
        grid-row: 2;
    }
    .product-strip-cell.cell-spend {
        grid-column: 3 / span 2;
        grid-row: 2;
        text-align: right;
        flex-direction: row;
        align-items: baseline;
        gap: 6px;
        justify-self: end;
    }
    .product-strip-cell.cell-count,
    .product-strip-cell.cell-recurrence,
    .product-strip-cell.cell-date,
    .product-strip-cell.cell-autorenew {
        display: none;
    }

    .ao-bottom { grid-template-columns: minmax(0, 1fr); }
    .ao-donut-wrap { border-left: 0; border-top: 1px solid rgba(0,0,0,0.08); }
    html.dark-mode .ao-donut-wrap { border-top-color: rgba(228,232,244,0.10); }
}

/* ============================================================
   Mobile: stack everything
   ============================================================ */
@media (max-width: 720px) {
    .ao-fields { padding: 10px 12px; }
    .ao-donut-wrap { padding: 8px 12px; }

    .ao-top {
        grid-template-columns: minmax(0, 1fr);
        align-items: flex-start;
    }
    .ao-totals {
        justify-content: flex-start;
        width: 100%;
        flex-wrap: wrap;
    }

    .product-strip-row {
        grid-template-columns: 5px 1fr 30px;
        padding: 8px 8px 8px 0;
        row-gap: 4px;
        column-gap: 8px;
    }

    .product-strip-head {
        grid-column: 2;
        grid-row: 1;
        gap: 6px;
        flex-wrap: wrap;
    }

    .product-strip-actions {
        display: none;
    }

    .product-strip-caret-btn {
        grid-column: 3;
        grid-row: 1;
        align-self: start;
    }

    .product-strip-cell {
        flex-direction: row;
        align-items: baseline;
        gap: 6px;
        grid-column: 2 / span 2 !important;
        flex-wrap: wrap;
    }

    .product-strip-cell.cell-status { grid-row: 2; }
    .product-strip-cell.cell-count { grid-row: 3; }
    .product-strip-cell.cell-date { grid-row: 4; }
    .product-strip-cell.cell-autorenew { grid-row: 5; }
    .product-strip-cell.cell-recurrence { grid-row: 6; }
    .product-strip-cell.cell-spend { grid-row: 7; }

    .product-strip-cell.cell-count,
    .product-strip-cell.cell-recurrence,
    .product-strip-cell.cell-date,
    .product-strip-cell.cell-autorenew {
        display: flex;
    }

    .product-strip-cell:empty { display: none; }

    /* Mobile: align meta-label to the left, value to the right */
    .product-strip-cell .meta-label {
        flex: 0 0 auto;
        min-width: 88px;
    }

    .product-strip-drawer-grid {
        grid-template-columns: 1fr !important;
    }
    .product-strip-drawer-grid:not(.no-side) .drawer-main {
        border-right: 0;
        border-bottom: 1px solid rgba(0,0,0,0.08);
    }
    html.dark-mode .product-strip-drawer-grid:not(.no-side) .drawer-main {
        border-bottom-color: rgba(228,232,244,0.10);
    }
}

/* ====================================================================
   Active products row — a segmented band of the org's active products,
   shown at the top of the Account Overview card.
   ==================================================================== */
.apv-section-label {
    font-size: 0.62rem; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
    color: #607D8B; display: flex; align-items: baseline; gap: 8px;
}
.apv-section-hint {
    font-size: 0.65rem; font-weight: 500; letter-spacing: 0.3px; color: #9E9E9E; text-transform: none;
}
html.dark-mode .apv-section-label { color: #8EA4B5; }
html.dark-mode .apv-section-hint { color: #6B8A9E; }

.apv-band-wrap {
    padding: 10px 16px 12px; background: #FAFBFC;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    display: flex; flex-direction: column; gap: 8px;
}
/* Cards wrap to as many rows as needed — they keep a fixed readable width (so they don't stretch on ultra-wide screens) and flow onto a second row when the viewport can't fit them all. */
.apv-band {
    display: flex; flex-wrap: wrap; gap: 8px;
}
/* Lighter than the strip rows below — an at-a-glance summary + jump nav, not a second copy of the product list. */
.apv-seg {
    flex: 0 0 260px; min-width: 0; position: relative;
    display: flex; flex-direction: column; gap: 5px;
    padding: 9px 13px; text-decoration: none; color: inherit;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.10);
    border-top: 3px solid var(--fam);
    border-radius: 8px;
    transition: border-color 120ms ease, background 120ms ease;
}
.apv-seg:hover { border-color: var(--fam); background: rgba(42,85,114,0.03); }
.apv-seg.apv-inactive { opacity: 0.6; }
/* Head is a single line; the logo is capped so a wide wordmark (e.g. ESTIMATION) never pushes the sub-label onto a second line, which would make that card's body sit lower than its neighbours'. */
.apv-seg-head {
    display: flex; align-items: center; gap: 6px;
    min-height: 22px; flex-wrap: nowrap; overflow: hidden;
}
.apv-seg-head .product-logo { height: 18px; width: auto; object-fit: contain; max-width: 124px; flex-shrink: 0; }
/* Body grows to fill the middle so the foot is always bottom-aligned, even for cards with no count (e.g. BID). */
.apv-seg-body { flex: 1 1 auto; min-height: 22px; display: flex; align-items: baseline; gap: 5px; }
.apv-seg-num {
    font-size: 1.5rem; font-weight: 800; line-height: 1; letter-spacing: -0.02em;
    color: #1A2B3C; font-variant-numeric: tabular-nums;
}
.apv-seg-unit {
    font-size: 0.58rem; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: #607D8B;
}
/* Renewal phrase and spend share one line: phrase on the left (truncates if long), spend pinned to the right. */
.apv-seg-foot { display: flex; align-items: center; gap: 8px; min-height: 18px; }
.apv-seg-status { display: flex; align-items: center; gap: 5px; min-width: 0; flex: 1 1 auto; }
.apv-seg-status-text {
    font-size: 0.78rem; font-weight: 600; color: #455A64;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Expired products read in red so a lapsed product stands out in the band at a glance. */
.apv-seg-status-text.apv-seg-status-expired { color: #D32F2F; }
.apv-trial-badge {
    flex-shrink: 0;
    display: inline-flex; align-items: center;
    font-size: 0.55rem; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase;
    color: #fff; background: var(--fam); padding: 3px 5px; border-radius: 3px; line-height: 1.1;
}
html.dark-mode .apv-band-wrap { background: rgba(255,255,255,0.02); border-bottom-color: rgba(228,232,244,0.10); }
html.dark-mode .apv-seg { background: #0E2F45; border-color: rgba(228,232,244,0.10); border-top-color: var(--fam); }
html.dark-mode .apv-seg:hover { background: rgba(241,196,0,0.06); border-color: var(--fam); }
html.dark-mode .apv-seg-num { color: #E4E8F4; }
html.dark-mode .apv-seg-unit { color: #8EA4B5; }
html.dark-mode .apv-seg-status-text { color: #B0BEC5; }
html.dark-mode .apv-seg-status-text.apv-seg-status-expired { color: #EF5350; }

/* Narrow viewports: let each card span the full width of the band. */
@media (max-width: 720px) {
    .apv-seg { flex: 1 1 100%; }
}
/* Mobile portrait: the active-products band is hidden entirely — the full product list below covers the same ground without the horizontal pressure. */
@media (max-width: 600px) and (orientation: portrait) {
    .apv-band-wrap { display: none; }
}

/* Campaign manager panel: click a list to make it the assign target. */
.campaign-list-clickable {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    cursor: pointer;
    padding: 2px 0;
}
.mud-list-item.campaign-list-selected {
    background-color: var(--mud-palette-action-default-hover);
    border-left: 3px solid var(--mud-palette-primary);
}

/* Call campaign dashboard */
/* A PaperTrail override (value differs from the org's) — italic + help cursor, tooltip on the text. */
.cc-override { font-style: italic; cursor: help; }
/* Cells that act as links into the client modal. */
.cc-cell-link { cursor: pointer; }
/* Call Result + Demo Result autocompletes stacked in one /call-campaign column. */
.cc-result-stack { display: flex; flex-direction: column; gap: 4px; }
/* A deprecated Call/Demo Result value (kept only for already-imported entries). */
.cl-deprecated { opacity: 0.55; font-style: italic; }
/* Phone numbers render as tel: links but look like plain text until hovered. */
.cc-phone { color: inherit; text-decoration: none; cursor: pointer; }
.cc-phone:hover { text-decoration: underline; }
/* Last comment: a fixed-width column so the text wraps into up to 3 lines, then ellipsis. */
.cc-last-comment { width: 260px; }
.cc-comment-clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    white-space: normal;
}
/* Products column: cap width and let the badges wrap within it. */
.cc-products { max-width: 250px; }
.cc-products .product-family-badges { flex-wrap: wrap; }
/* Language code merged into the Contact cell. */
.cc-contact-line { display: flex; align-items: center; gap: 6px; }
.cc-lang {
    margin-left: auto; /* float to the right edge of the Contact cell, always aligned */
    font-size: 0.7rem;
    line-height: 1;
    padding: 2px 5px;
    border-radius: 4px;
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-secondary);
}
/* Compact numeric columns (e.g. Projets) hug their value. */
.cc-num { text-align: center; white-space: nowrap; }
/* TAKEOFF trial end: keep the date on one line; let the header wrap so the column is no wider than the date. */
.cc-trial { white-space: nowrap; }
.cc-trial-h { display: inline-block; max-width: 60px; white-space: normal; line-height: 1.15; }
/* Tighten inter-column spacing — ~1/3 of the default cell padding. */
.cc-grid .mud-table-cell { padding-left: 5px !important; padding-right: 5px !important; }
/* Relance: a relative label on top (click opens the calendar), the step arrows on one row beneath it. */
.cc-relance { display: inline-flex; flex-direction: column; align-items: stretch; gap: 2px; }
.cc-relance-label { display: inline-block; text-align: center; cursor: pointer; white-space: nowrap;
    padding: 1px 3px; border-radius: 4px; text-decoration: underline dotted; text-underline-offset: 2px; }
.cc-relance-label:hover { background: var(--mud-palette-action-default-hover); }
.cc-relance-overdue { color: var(--mud-palette-error); font-weight: 600; }
.cc-relance-steps { display: flex; justify-content: center; gap: 8px; }
/* The calendar popover / static calendar must be wide enough not to be cramped. */
.mud-picker-popover-paper .mud-picker-container { min-width: 290px; }
/* Gestion "matched / total" filter indicator. */
.cc-filter-count { font-weight: 600; white-space: nowrap; }

/* Grid row whose inline-edited Relance no longer matches the active Relance filter (kept visible until reload). */
.cc-grid tr.cc-row-unmatched { background: var(--mud-palette-action-disabled-background); }
.cc-grid tr.cc-row-unmatched td { opacity: 0.5; }

/* PT-56: call-campaign filter bar. The list picker sits far left; Keyword, Résultat d'appel & démo and
   Relance (à) stay on one responsive row to its right; the Filtres toggle + Refresh hug the right edge.
   The advanced panel (Produits, Statut, Sérieux, Timing, Tentatives, Relance de) drops below when opened.
   Each field is wrapped in a .cc-filter-cell div because MudSelect applies its own Class to an inner node,
   not the flex item — so the sizing must target these wrappers, and the control fills its cell. */
.cc-filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 12px; }
.cc-filter-bar > .cc-filter-cell { display: flex; }
.cc-filter-bar > .cc-filter-cell > * { width: 100%; }
/* The list picker, moved fully left and enlarged 25% (220px → 275px). */
.cc-filter-bar > .cc-cell-list { flex: 0 0 275px; }
.cc-filter-bar > .cc-cell-keyword { flex: 1 1 240px; min-width: 180px; max-width: 360px; }
.cc-filter-bar > .cc-cell-result { flex: 0 1 190px; min-width: 150px; }
.cc-filter-bar > .cc-cell-relance { flex: 0 1 170px; min-width: 150px; }
/* Dense filter inputs share the list picker's baseline height; kill the reserved helper-text gutter so the
   row lines up tightly. */
.cc-filter-bar .mud-input-helper-text { display: none; }
.cc-filter-actions { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.cc-advanced-panel { margin-top: -2px; }
/* Narrow screens: every field spans the full width; the actions keep to their own right-aligned row. */
@media (max-width: 720px) {
    .cc-filter-bar > .cc-cell-list,
    .cc-filter-bar > .cc-cell-keyword,
    .cc-filter-bar > .cc-cell-result,
    .cc-filter-bar > .cc-cell-relance { flex: 1 1 100%; }
    .cc-filter-actions { margin-left: 0; width: 100%; justify-content: flex-end; }
}

/* --- PT-58: call/demo result statistics window --- */
.ccs-root { display: flex; flex-direction: column; gap: 10px; padding: 12px 16px 16px; }
.ccs-filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.ccs-filter-row .mud-input-helper-text { display: none; }
.ccs-filter { flex: 0 1 210px; min-width: 170px; }
.ccs-filter-product { flex: 0 1 130px; min-width: 110px; }
.ccs-filter-date { flex: 0 1 150px; min-width: 130px; }
/* The comparison row is visually subordinate: label chip + slightly dimmed fields. */
.ccs-comp-row { padding-left: 0; }
.ccs-comp-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--mud-palette-text-secondary); flex: 0 0 auto; }
.ccs-period-nav { display: flex; align-items: center; gap: 2px; }
.ccs-period-caption { font-size: 0.78rem; color: var(--mud-palette-text-secondary); white-space: nowrap; }
.ccs-toggles { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.ccs-progress { margin: -4px 0; }
.ccs-sections { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.ccs-section { flex: 1 1 460px; min-width: 380px; overflow-x: auto; }
.ccs-section-title { font-weight: 600; margin-bottom: 4px; }
.ccs-table th { white-space: nowrap; }
.ccs-table .ccs-num { text-align: right; white-space: nowrap; }
.ccs-th-help { cursor: help; text-decoration: underline dotted; text-underline-offset: 3px; }
/* Category rows must read as headers, not siblings: heavier weight, stronger band, top rule —
   and value rows indent beneath them. */
.ccs-cat td { background: var(--mud-palette-background-grey); font-weight: 700; border-top: 2px solid var(--mud-palette-lines-default); }
.ccs-cat td:first-child { text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.06em; }
.ccs-table tbody tr:not(.ccs-cat) td:first-child { padding-left: 32px; }
.ccs-noresult td { color: var(--mud-palette-text-secondary); font-style: italic; }
.ccs-total td { font-weight: 600; border-top: 2px solid var(--mud-palette-lines-default); }
.ccs-delta { margin-left: 4px; font-size: 0.7rem; }
.ccs-delta-good { color: var(--mud-palette-success); }
.ccs-delta-bad { color: var(--mud-palette-error); }
.ccs-delta-neutral { color: var(--mud-palette-text-secondary); }
/* Narrow window / mobile: sections stack, filters span the row. */
@media (max-width: 900px) {
    .ccs-section { min-width: 100%; }
}
@media (max-width: 640px) {
    .ccs-filter, .ccs-filter-product, .ccs-filter-date { flex: 1 1 100%; }
    .ccs-toggles { margin-left: 0; width: 100%; justify-content: flex-end; }
}