/* 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: #7B1FA2; }
.product-card-planswift { border-left-color: #00897B; }
.product-card-estimation-license { border-left-color: #9C27B0; }
.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: #7B1FA2; }
.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;
}

.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;
}

.org-tab-panel-shell {
    padding: 6px 0 0;
    overflow: hidden;
}

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

.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;
}

/* 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);
}

.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-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 0 0 250px;
    min-width: 0;
    overflow: hidden;
}

.spend-donut-wrapper {
    position: relative;
    width: 100%;
}

.spend-donut-toggle-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 40px;
    z-index: 1;
    pointer-events: none;
}

.spend-donut-toggle-overlay > * {
    pointer-events: auto;
}

.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 */
.draggable-window {
    position: fixed;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
    outline: 2px solid #2A5572;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-width: 300px;
    min-height: 200px;
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    resize: both;
}

/* 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;
}
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;
    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; outline-color: #FFC107; }
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;
}

/* 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-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-section {
        align-items: stretch;
    }

    .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=PO, 8=Subtotal, 9=Total, 10=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), PO(7), Subtotal(8) */
    .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),
    .org-invoices-grid.mud-xs-table .mud-table-cell:nth-child(8) {
        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(9) {
        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(10) {
        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);
    }
}

@media (min-width: 901px) {
    .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;
    }
}