/* ==========================================================================
   AccService Manager – Design system
   ========================================================================== */

* {
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}

:root {
    --asm-header-height: 64px;
    --asm-primary: #0d9488;
    --asm-primary-dark: #0f766e;
    --asm-sidebar-bg: #f5f5f5;
    --asm-sidebar-border: #ebebeb;
    --asm-sidebar-text: #1a1a1a;
    --asm-sidebar-text-muted: #6b7280;
    --asm-sidebar-hover: rgba(13, 148, 136, 0.08);
    --asm-sidebar-active: rgba(13, 148, 136, 0.14);
    --asm-surface: #ffffff;
    --asm-border: #e5e7eb;
    --asm-text: #0f172a;
    --asm-text-muted: #64748b;
    --asm-radius: 12px;
    --asm-radius-sm: 8px;
    --asm-shadow: 0 1px 3px rgba(0,0,0,0.05);
    --asm-shadow-card: 0 2px 8px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
}

.mud-theme-dark {
    --asm-sidebar-bg: #1f2937;
    --asm-sidebar-border: #374151;
    --asm-sidebar-text: #f9fafb;
    --asm-sidebar-text-muted: #9ca3af;
    --asm-sidebar-hover: rgba(45, 212, 191, 0.1);
    --asm-sidebar-active: rgba(45, 212, 191, 0.18);
    --asm-surface: #111827;
    --asm-border: #374151;
    --asm-text: #f1f5f9;
    --asm-text-muted: #94a3b8;
    --asm-shadow: 0 1px 3px rgba(0,0,0,0.25);
    --asm-shadow-card: 0 2px 12px rgba(0,0,0,0.3);
}

/* --------------------------------------------------------------------------
   Layout – App shell (sidebar + main)
   Only .app-content scrolls; header and sidebar stay fixed.
   -------------------------------------------------------------------------- */

html, body {
    height: 100%;
    overflow: hidden;
}

.app-shell {
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
}

.app-shell.mud-layout {
    height: 100vh !important;
    min-height: 100vh !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: row !important;
}

/* Left sidebar: fixed width, does not scroll */
.mud-drawer.app-sidebar {
    position: relative !important;
    height: 100vh !important;
    max-height: 100vh !important;
    flex: 0 0 280px !important;
    min-width: 280px !important;
    overflow: hidden !important;
}

/* When drawer is closed: collapse sidebar, main content fills the viewport */
.app-shell.app-drawer-closed .mud-drawer.app-sidebar {
    flex: 0 0 0 !important;
    min-width: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
}

.app-shell.app-drawer-closed .mud-drawer.app-sidebar .mud-drawer-content {
    width: 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

.mud-drawer.app-sidebar .mud-drawer-content {
    background: var(--asm-sidebar-bg) !important;
    border-right: 1px solid var(--asm-sidebar-border) !important;
    box-shadow: none !important;
    width: 280px !important;
    min-width: 280px !important;
    height: 100% !important;
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
}

.app-sidebar-inner {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    width: 100%;
    box-sizing: border-box;
}

/* Sidebar header: logo on top */
/* Sidebar header: stays visible when nav scrolls (flex-shrink: 0) */
.app-sidebar-header {
    flex-shrink: 0;
    min-height: var(--asm-header-height);
    padding: 0.875rem 1.25rem;
    display: flex;
    align-items: center;
}

.app-sidebar-brand-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    min-width: 0;
    width: 100%;
    container-type: inline-size;
    container-name: sidebar-brand;
}

.app-sidebar-organization-name {
    color: var(--asm-primary);
    font-size: clamp(0.6875rem, 5.5cqi, 0.9375rem);
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    padding: 0.35rem 0.6rem;
    background: rgba(13, 148, 136, 0.18);
    border-radius: 8px;
    border-left: 3px solid var(--asm-primary);
    box-sizing: border-box;
}

.app-brand-sidebar {
    text-decoration: none;
}

.app-brand-sidebar:hover .app-logo-accent {
    color: var(--asm-primary-dark) !important;
}

.app-logo {
    font-weight: 700;
    font-size: 1.125rem;
    letter-spacing: -0.03em;
    white-space: nowrap;
}

.app-logo-accent {
    color: var(--asm-primary);
}

.app-logo-word {
    color: var(--asm-sidebar-text-muted);
}

.app-brand-sidebar .app-logo-accent {
    color: var(--asm-primary) !important;
}

.app-brand-sidebar .app-logo-word {
    color: var(--asm-sidebar-text) !important;
}

.app-brand-sidebar:hover .app-logo-word {
    color: var(--asm-sidebar-text) !important;
}

.app-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.app-logo-icon {
    height: 3.5rem;
    min-width: 3.5rem;
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
}

.app-brand-sidebar .app-logo-icon {
    height: 3.125rem;
    min-width: 3.125rem;
}

/* App bars: slightly larger mark than sidebar (icon only; text uses .app-logo rules) */
.app-topbar-logo .app-logo-icon,
.client-portal-appbar .app-logo-icon,
.legal-appbar .app-logo-icon {
    height: 3.75rem;
    min-width: 3.75rem;
}

/* Sidebar nav: menu below logo, same color and style as nav link */
.app-sidebar-nav {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 0.75rem 0.5rem;
}

.app-sidebar-nav-menu {
    padding: 0;
}

.app-sidebar .nav-menu-group-label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--asm-primary) !important;
}

.app-sidebar .mud-nav-menu .mud-nav-link,
.app-sidebar .mud-nav-link {
    color: var(--asm-sidebar-text) !important;
    background: transparent !important;
    border-radius: var(--asm-radius-sm);
    margin: 0 0.5rem 2px;
    padding: 0.625rem 1rem;
}

.app-sidebar .mud-nav-link:hover {
    background: var(--asm-sidebar-hover) !important;
    color: var(--asm-primary-dark) !important;
}

.app-sidebar .mud-nav-link.mud-nav-link-active,
.app-sidebar .mud-nav-link.active {
    background: var(--asm-sidebar-active) !important;
    color: var(--asm-primary-dark) !important;
}

.app-sidebar .mud-nav-link .mud-nav-link-icon {
    color: var(--asm-sidebar-text-muted) !important;
}

.app-sidebar .mud-nav-link:hover .mud-nav-link-icon,
.app-sidebar .mud-nav-link.mud-nav-link-active .mud-nav-link-icon {
    color: var(--asm-primary) !important;
}

.app-sidebar .mud-nav-group .mud-nav-group-title {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--asm-sidebar-text-muted) !important;
    padding: 0.5rem 1rem;
    min-height: auto;
}

.app-sidebar .mud-nav-group {
    margin-bottom: 0.25rem;
}

.app-sidebar .mud-nav-group-expand-icon {
    color: var(--asm-sidebar-text-muted) !important;
}

.app-sidebar .mud-divider {
    border-color: var(--asm-sidebar-border) !important;
}

/* User / login section at bottom of sidebar */
.app-sidebar-footer {
    padding: 0.75rem 1rem 1rem;
    border-top: 1px solid var(--asm-sidebar-border);
    flex-shrink: 0;
}

.app-sidebar-user {
    background: var(--asm-surface);
    border-radius: var(--asm-radius-sm);
    padding: 0.75rem;
    border: 1px solid var(--asm-sidebar-border);
}

.app-sidebar-user .mud-menu {
    display: block !important;
    width: 100% !important;
}

.app-sidebar-user .mud-card {
    border-radius: var(--asm-radius-sm);
    box-shadow: none !important;
}

.app-sidebar-user .mud-card-header {
    padding: 0 !important;
}

.app-sidebar-user .mud-card-header .mud-avatar {
    width: 40px !important;
    height: 40px !important;
    font-size: 0.875rem !important;
}

.app-sidebar-user .mud-card-header-content {
    padding: 0 0 0 0.75rem !important;
}

.app-sidebar-user .mud-typography-body2 {
    font-weight: 600;
    font-size: 0.9375rem;
}

.app-sidebar-user .mud-typography-caption {
    font-size: 0.75rem;
    color: var(--asm-sidebar-text-muted) !important;
}

.app-sidebar-user .mud-chip {
    width: 100%;
    justify-content: center;
    margin-bottom: 0.35rem;
}

.app-sidebar-user .mud-chip:last-child {
    margin-bottom: 0;
}

/* Left sidebar: ensure it starts at top with no gap (MudLayout can add padding) */
.mud-layout .mud-drawer {
    top: 0 !important;
    padding-top: 0 !important;
}

/* Top bar: slim, no heavy white block – hamburger, breadcrumb, language, user */
.app-topbar {
    height: var(--asm-header-height);
    min-height: var(--asm-header-height);
    display: flex;
    align-items: center;
    padding: 0 1rem;
    background: var(--asm-surface) !important;
    border-bottom: 1px solid var(--asm-border);
    flex-shrink: 0;
    box-sizing: border-box;
    overflow: hidden;
}

.app-topbar-menu {
    margin-right: 0.5rem;
}

/* Logo and org name in topbar when sidebar is closed (so they stay visible).
   Min-width must fit icon + full org name or the breadcrumb overlaps. */
.app-topbar-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-right: 0;
    padding-right: 0;
    container-type: inline-size;
    container-name: topbar-logo;
    flex-shrink: 1;
    min-width: 0;
    max-width: 360px;
    overflow: hidden;
}

@media (min-width: 768px) {
    .app-topbar-logo {
        flex-shrink: 0;
        min-width: 360px;
    }
}

/* Vertical divider between logo/org block and breadcrumb (only when sidebar is closed) */
.app-topbar-divider {
    width: 1px;
    height: 1.5rem;
    margin: 0 0.75rem;
    background: var(--asm-border);
    flex-shrink: 0;
    align-self: center;
}

.app-topbar-logo .app-brand {
    text-decoration: none;
}

.app-brand-icon-only {
    gap: 0;
}

.app-topbar-logo .app-logo {
    font-size: 1rem;
}

.app-topbar-organization-name {
    font-size: clamp(0.6875rem, 6cqi, 1rem);
    font-weight: 700;
    color: var(--asm-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 4.5rem;
    max-width: 280px;
    padding: 0.35rem 0.6rem;
    background: rgba(13, 148, 136, 0.12);
    border-radius: 8px;
    border-left: 3px solid var(--asm-primary);
    box-sizing: border-box;
    flex-shrink: 0;
}

.app-topbar-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.app-topbar-actions .trial-ends-header-link {
    color: var(--asm-text-muted);
    font-size: 0.875rem;
    white-space: nowrap;
}

.app-topbar-actions .trial-ends-header-link:hover {
    color: var(--asm-primary);
}

.app-topbar-actions .mud-icon-button {
    width: 40px !important;
    height: 40px !important;
    padding: 8px !important;
}

.app-topbar-actions .mud-icon-button .mud-icon-root {
    font-size: 1.25rem !important;
}

.app-breadcrumb {
    flex: 1 1 0%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    margin-left: 0;
}

/* MudBreadcrumbs root - allow shrinking so it doesn't overlap the logo */
.app-breadcrumb .mud-breadcrumbs,
.app-breadcrumb-list {
    display: flex;
    flex-wrap: nowrap;
    min-width: 0;
    overflow: hidden;
    max-width: 100%;
}

.app-breadcrumb-list {
    padding: 0;
}

.app-breadcrumb-list .mud-breadcrumb-item {
    font-size: 0.9375rem;
    color: var(--asm-text-muted);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-breadcrumb-list .mud-breadcrumb-item a {
    color: var(--asm-text);
    font-weight: 500;
    text-decoration: none;
}

.app-breadcrumb-list .mud-breadcrumb-item a:hover {
    color: var(--asm-primary);
}

.app-breadcrumb-list .mud-breadcrumb-separator {
    color: var(--asm-text-muted);
    margin: 0 0.35rem;
}

.app-topbar .mud-input-root {
    min-height: 40px;
}

.app-topbar-search-wrap {
    display: flex;
    align-items: center;
}

.app-topbar-search-wrap .app-topbar-search-toggle {
    width: 40px !important;
    height: 40px !important;
    padding: 8px !important;
}

.app-topbar-search-wrap .app-topbar-search-toggle .mud-icon-root {
    font-size: 1.25rem !important;
}

.app-topbar-search-wrap .app-topbar-search {
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transition: max-width 0.25s ease, opacity 0.2s ease;
}

.app-topbar-search-wrap.expanded .app-topbar-search {
    max-width: 220px;
    opacity: 1;
    pointer-events: auto;
}

.app-topbar-search {
    max-width: 220px;
}

.app-topbar-search .mud-input-slot {
    font-size: 0.875rem;
}

.app-topbar-actions .app-topbar-search .mud-input-root {
    min-height: 40px !important;
}

/* Main content area: flex column, only inner .app-content scrolls */
.app-main {
    background: var(--asm-surface) !important;
    height: 100vh;
    min-height: 0;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 0%;
    min-width: 0;
    overflow: hidden;
    padding-top: 0 !important;
}

/* MudLayout: main content sits flush next to drawer (no extra margin = no white gap) */
.mud-layout .mud-main-content {
    padding-top: 0 !important;
    flex: 1 1 0% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
}

/* MudBlazor adds margin via drawer container; remove it so no gap between sidebar and main */
.mud-drawer-container,
.mud-drawer-container .mud-main-content {
    margin-left: 0 !important;
}

/* Content wrapper: column so main scrolls and footer stays at bottom */
.app-content-wrap {
    display: flex;
    flex-direction: column;
    flex: 1 1 0%;
    min-height: 0;
    overflow: hidden;
    position: relative;
}

.app-main .app-content-wrap {
    flex: 1 1 0%;
    min-height: 0;
}

/* Only this main block scrolls; header and sidebar stay fixed */
.app-content {
    flex: 1 1 0%;
    min-width: 0;
    min-height: 0;
    overflow: auto;
    padding: 1rem 1.75rem 1.5rem;
    background: var(--asm-surface) !important;
}

/* Main layout footer: always visible at bottom of content area */
.app-footer {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    padding: 0.75rem 1.75rem;
    background: var(--asm-surface) !important;
    border-top: 1px solid var(--asm-border);
    font-size: 0.8125rem;
    color: var(--asm-text-muted);
}

.app-footer-link {
    color: var(--asm-text-muted);
    text-decoration: none;
}

.app-footer-link:hover {
    color: var(--asm-primary);
    text-decoration: underline;
}

.app-footer-sep {
    color: var(--asm-text-muted);
    user-select: none;
}

.app-footer-copyright {
    color: var(--asm-text-muted);
}

/* Right drawer: overlay, only visible when content is set */
.app-right-drawer {
    position: fixed;
    inset: 0;
    z-index: 1100;
    pointer-events: none;
}

.app-right-drawer.open {
    pointer-events: auto;
}

.app-right-drawer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.app-right-drawer.open .app-right-drawer-backdrop {
    opacity: 1;
}

.app-right-drawer-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 380px;
    max-width: 100%;
    background: var(--asm-sidebar-bg) !important;
    border-left: 1px solid var(--asm-sidebar-border);
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.25s ease;
}

.app-right-drawer.open .app-right-drawer-panel {
    transform: translateX(0);
}

.mud-theme-dark .app-right-drawer-panel {
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.35);
}

.app-right-drawer-header {
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0.5rem 0.5rem 0.5rem 1rem;
    border-bottom: 1px solid var(--asm-sidebar-border);
}

.app-right-drawer-close {
    color: var(--asm-sidebar-text-muted) !important;
}

.app-right-drawer-content {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 1rem 1.25rem;
}

/* --------------------------------------------------------------------------
   Page pattern – Hero (title + subtitle) and cards
   -------------------------------------------------------------------------- */

.page-section {
    padding: 0;
}

.page-hero {
    margin-bottom: 1.5rem;
    padding: 0 0 0.5rem 0;
    border: none;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
}

.page-hero .page-title {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--asm-text);
    margin-bottom: 0.25rem;
}

.page-hero .page-subtitle {
    font-size: 0.9375rem;
    color: var(--asm-text-muted);
    margin: 0;
}

.page-card {
    border-radius: var(--asm-radius);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--asm-border) !important;
    box-shadow: var(--asm-shadow-card) !important;
    background: var(--mud-palette-surface) !important;
}

/* Legacy alias */
.page-title {
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-bottom: 0.25rem;
}

.page-subtitle {
    font-size: 0.9375rem;
    opacity: 0.85;
}

/* --------------------------------------------------------------------------
   Legal layout (public pages: Privacy, Terms – no main app layout)
   -------------------------------------------------------------------------- */

.legal-shell {
    height: 100vh;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.legal-appbar {
    flex-shrink: 0;
    min-height: 56px;
    padding: 0 16px;
    background: var(--asm-surface) !important;
    border-bottom: 1px solid var(--asm-border);
    color: var(--asm-text);
    justify-content: center;
}

.legal-appbar-center {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
}

.legal-appbar .legal-back {
    margin-right: 4px;
}

.legal-main {
    flex: 1;
    min-height: 0;
    overflow: auto;
    background: var(--mud-palette-background, #f5f5f5);
    padding-top: 16px;
}

/* --------------------------------------------------------------------------
   Legal documents (Privacy, Terms of Service)
   -------------------------------------------------------------------------- */

.legal-doc .content-card {
    overflow: visible;
    margin-left: auto;
    margin-right: auto;
}

.legal-doc-header {
    padding: 1.5rem 1.5rem 0.5rem;
    border-bottom: 1px solid var(--asm-border);
    margin-bottom: 1rem;
    text-align: center;
}

.legal-doc-title {
    font-weight: 600;
    color: var(--asm-text);
    margin-bottom: 0.25rem;
}

.legal-doc-body {
    padding: 0 1.5rem 1.5rem;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.page-section.legal-doc {
    padding: 1.5rem 1rem 2rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

.legal-doc-intro {
    line-height: 1.65;
    color: var(--asm-text);
    margin-bottom: 1.5rem;
}

.legal-doc-section {
    margin-bottom: 1.5rem;
}

.legal-doc-section .legal-doc-heading {
    font-weight: 600;
    color: var(--asm-text);
    margin-bottom: 0.25rem;
}

.legal-doc-section .mud-typography-body1 {
    line-height: 1.65;
    color: var(--asm-text);
}

/* --------------------------------------------------------------------------
   List / Table template
   -------------------------------------------------------------------------- */

.content-card {
    border-radius: var(--asm-radius);
    border: 1px solid var(--asm-border) !important;
    box-shadow: var(--asm-shadow-card) !important;
    overflow: hidden;
    background: var(--mud-palette-surface) !important;
}

.client-view-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
}

.data-table .mud-table-container {
    border: none;
    /* Horizontal scroll on narrow viewports instead of MudBlazor's stacked card mode (which
       collapses each row into a label-value list and was hard to scan). Every MudTable in the
       app now opts out of card mode via Breakpoint="Breakpoint.None"; this rule guarantees
       the container scrolls horizontally when the table is wider than its parent. */
    overflow-x: auto;
}

/* Same horizontal-scroll guarantee for tables that don't carry the `.data-table` class
   (client portal lists, lookup dialogs, etc.). Scoped to the MudBlazor container only so we
   don't accidentally add scrollbars to unrelated `.mud-table-container` ancestors. */
.mud-table-container {
    overflow-x: auto;
}

.data-table .mud-table {
    box-shadow: none !important;
}

.data-table .mud-table-head .mud-table-row {
    background: var(--asm-surface) !important;
    border-bottom: 2px solid var(--asm-border);
}

.data-table .mud-table-head .mud-table-cell {
    font-weight: 600;
    font-size: 0.8125rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--asm-text-muted);
}

.data-table .mud-table-body .mud-table-row {
    transition: background 0.15s ease;
    cursor: pointer;
}

.data-table .mud-table-body .mud-table-row:hover {
    background: var(--asm-sidebar-hover) !important;
}

.data-table .mud-table-cell {
    padding: 0.875rem 16px;
    font-size: 0.9375rem;
}

.data-table .row-actions-cell {
    cursor: default;
}

.data-table .mud-table-toolbar {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--asm-border);
    min-height: 56px;
}

.data-table .mud-table-pagination {
    border-top: 1px solid var(--asm-border);
    padding: 0.5rem 1rem;
}

/* MudTabs: ensure tab panel content has breathing room.
   MudBlazor 9's PanelClass sometimes doesn't propagate reliably, so add a
   scoped fallback so content inside a .content-card-wrapped tab panel never
   sits flush against the card border. */
.content-card .mud-tabs .mud-tab-panel,
.content-card .mud-tabs .mud-tabs-panels > div,
.content-card .mud-tabs-panels > div {
    padding: 1rem;
}

/* Clients list: narrow status chips, pipeline gets width, compact secondary cells */
.data-table.clients-table .clients-th-nowrap {
    white-space: nowrap;
}

.data-table.clients-table .clients-th-first {
    min-width: 6.75rem;
}

.data-table.clients-table .clients-th-last {
    min-width: 7rem;
}

.data-table.clients-table .clients-th-business {
    min-width: 8.75rem;
}

.data-table.clients-table .clients-th-email {
    min-width: 9rem;
}

.data-table.clients-table .clients-th-status {
    width: 1%;
    min-width: 9.75rem;
}

.data-table.clients-table .clients-th-pipeline {
    min-width: 10rem;
}

.data-table.clients-table .clients-th-actions {
    width: 1%;
    white-space: nowrap;
}

.data-table.clients-table .clients-td-compact {
    font-size: 0.8125rem;
    line-height: 1.35;
}

.data-table.clients-table .clients-td-status {
    width: 1%;
    min-width: 9.75rem;
    vertical-align: top;
    padding-left: 10px;
    padding-right: 10px;
}

.data-table.clients-table .clients-td-pipeline {
    min-width: 10rem;
    vertical-align: top;
}

.data-table.clients-table .clients-td-actions {
    width: 1%;
    white-space: nowrap;
    vertical-align: top;
}

.data-table.clients-table .clients-status-stack {
    align-items: flex-start;
}

.data-table.clients-table .clients-status-text {
    font-weight: 600;
    line-height: 1.35;
    white-space: nowrap;
}

.data-table.clients-table .clients-pipeline-lines .mud-typography {
    line-height: 1.35;
}

/* --------------------------------------------------------------------------
   Account / Login layout
   -------------------------------------------------------------------------- */

/* Account layout: align with main app (app-topbar, app-content) */
/* Client upload link layout: no nav, no header – only the upload form */
.client-upload-layout {
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
}

.client-upload-layout.mud-layout {
    display: flex;
    flex-direction: column;
}

.client-upload-main {
    flex: 1;
    min-height: 0;
    background: var(--asm-surface) !important;
    display: flex;
    flex-direction: column;
    overflow: auto;
}

/* --------------------------------------------------------------------------
   Account / Login layout
   -------------------------------------------------------------------------- */

.account-shell {
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.account-shell-no-header .account-main {
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(180deg, var(--mud-palette-background, #f5f5f5) 0%, var(--mud-palette-surface, #fff) 100%) !important;
}

.account-appbar {
    height: var(--asm-header-height);
    min-height: var(--asm-header-height);
    padding: 0 1rem;
    background: var(--asm-surface) !important;
    border-bottom: 1px solid var(--asm-border);
    color: var(--asm-text);
}

.account-appbar .mud-icon-button {
    color: var(--asm-text-muted);
}

.account-main {
    flex: 1;
    min-height: 0;
    background: var(--asm-surface) !important;
    display: flex;
    flex-direction: column;
}

.account-content-wrap {
    flex: 1;
    min-height: 0;
    overflow: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem 1.75rem 3rem;
}

.account-content {
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.account-dialog-logo-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.account-dialog-logo {
    height: 4.5rem;
    min-width: 4.5rem;
    width: auto;
    object-fit: contain;
    display: block;
}

.account-dialog-organization-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--asm-primary);
    text-align: center;
    padding: 0.25rem 0.5rem;
    background: rgba(13, 148, 136, 0.12);
    border-radius: 6px;
    border-left: 3px solid var(--asm-primary);
    box-sizing: border-box;
    max-width: 100%;
}

.account-paper.form-card {
    width: 100%;
    padding: 1.5rem 1.75rem 1.25rem !important;
    border-radius: 16px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.08), 0 2px 12px rgba(0, 0, 0, 0.04);
    border: 1px solid var(--asm-border);
    background: var(--mud-palette-surface, #fff);
}

.account-footer-inside {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--asm-border);
    margin-bottom: 0;
}

.account-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.4rem 0.75rem;
    text-align: center;
}

.account-footer-link {
    font-size: 0.875rem;
    color: var(--asm-text-muted);
    text-decoration: none;
}

.account-footer-link:hover {
    color: var(--asm-primary);
    text-decoration: underline;
}

.account-footer-sep {
    margin: 0 0.5rem;
    color: var(--asm-text-muted);
}

/* Login form */
.login-form {
    padding: 0;
}

.login-header {
    margin-bottom: 1rem;
}

.login-title {
    font-weight: 600;
    color: var(--asm-text);
    margin-bottom: 0.25rem;
    letter-spacing: -0.01em;
}

.login-subtitle {
    color: var(--asm-text-muted);
    margin: 0;
}

.login-link {
    font-weight: 500;
    text-decoration: none;
}

.login-link:hover {
    text-decoration: underline;
}

.login-demo-panel {
    border: 1px solid var(--asm-border);
    border-radius: var(--asm-radius-sm);
    margin: 0.25rem 0 0.5rem;
}

.login-demo-panel .mud-expansion-panel {
    border: none !important;
}

.login-links {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin: 0.5rem 0;
}

.login-submit {
    margin-top: 0.25rem;
}

.login-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0.75rem 0 0.5rem;
}

.login-divider-line {
    flex: 1;
}

.login-divider-text {
    color: var(--asm-text-muted);
    text-transform: lowercase;
    font-size: 0.8125rem;
    white-space: nowrap;
}

.login-external {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.login-validation {
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    color: var(--mud-palette-error);
}

/* External login buttons: stacked, full width, consistent with app */
.account-content .external-login {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    padding: 0 1rem;
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: var(--asm-radius-sm);
    color: #fff !important;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    border: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.account-content .external-login:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.account-content .external-login-icon {
    width: 22px;
    height: 22px;
    margin-right: 10px;
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Form template
   -------------------------------------------------------------------------- */

.form-card {
    border-radius: var(--asm-radius);
    border: 1px solid var(--asm-border) !important;
    box-shadow: var(--asm-shadow-card) !important;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    background: var(--mud-palette-surface) !important;
}

.form-card .mud-input-control {
    margin-bottom: 0.25rem;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--asm-border);
}

/* --------------------------------------------------------------------------
   Dashboard / grid cards
   -------------------------------------------------------------------------- */

.dashboard-card {
    border-radius: var(--asm-radius);
    border: 1px solid var(--asm-border) !important;
    box-shadow: var(--asm-shadow-card) !important;
    padding: 1.25rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    background: var(--mud-palette-surface) !important;
}

.dashboard-card:hover {
    border-color: var(--asm-primary) !important;
    box-shadow: 0 4px 12px rgba(13, 148, 136, 0.12) !important;
}

.dashboard-card .mud-icon-root {
    opacity: 0.9;
}

/* Plan selection cards (subscription) */
.plan-card {
    border-radius: var(--asm-radius);
    border: 1px solid var(--asm-border) !important;
    box-shadow: var(--asm-shadow-card) !important;
    padding: 1.5rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--mud-palette-surface) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.plan-card:hover {
    border-color: var(--asm-primary) !important;
    box-shadow: 0 4px 12px rgba(13, 148, 136, 0.12) !important;
}

.plan-card.plan-card-featured {
    border-color: var(--asm-primary) !important;
    box-shadow: 0 4px 12px rgba(13, 148, 136, 0.15) !important;
}

.plan-card .plan-name {
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-bottom: 0.5rem;
}

.plan-card .plan-description {
    font-size: 0.9375rem;
    color: var(--asm-text-muted);
    margin-bottom: 1.25rem;
}

.plan-card .plan-features {
    flex: 1;
    margin-bottom: 1.5rem;
}

.trial-banner {
    border-radius: 0;
    margin-bottom: 0;
}

.dashboard-stat {
    min-width: 2rem;
    justify-content: center;
}

/* Home tile grid (xs=6 = 2-col on phones). Tighten padding + hide subtitle to keep
   each tile compact and tap-friendly on a 360px viewport. Subtitle reappears at sm+. */
@media (max-width: 599px) {
    .dashboard-card {
        padding: 0.875rem !important;
    }
    .dashboard-card .mud-card-content {
        padding: 0 !important;
    }
    .dashboard-card-subtitle {
        display: none;
    }
}

/* Dashboard insight page (greeting + KPIs + summary) */
.dashboard-insight .dashboard-hero {
    border-radius: var(--asm-radius);
    border: 1px solid var(--asm-border);
    background: linear-gradient(135deg, var(--mud-palette-surface) 0%, var(--mud-palette-background) 100%);
}

.dashboard-insight .dashboard-greeting {
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--asm-text);
}

/* Dashboard KPI stat cards (display-only, no link) */
.dashboard-insight .dashboard-kpi {
    border-radius: var(--asm-radius);
    border: 1px solid var(--asm-border) !important;
    background: var(--mud-palette-surface) !important;
    box-shadow: var(--asm-shadow-card) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.dashboard-insight .dashboard-kpi-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--asm-radius);
    background: rgba(13, 148, 136, 0.12);
    color: var(--asm-primary);
}

.mud-theme-dark .dashboard-insight .dashboard-kpi-icon-wrap {
    background: rgba(45, 212, 191, 0.15);
}

.dashboard-insight .dashboard-kpi-value {
    font-weight: 700;
    color: var(--asm-text);
    letter-spacing: -0.03em;
    line-height: 1.2;
}

.dashboard-insight .dashboard-summary-card {
    border-radius: var(--asm-radius);
    border: 1px solid var(--asm-border);
}

/* --------------------------------------------------------------------------
   Utility & overrides
   -------------------------------------------------------------------------- */

.full-width {
    width: 100%;
}

/* Validation */
.validation-message {
    color: #f44336;
    font-size: .8rem;
    margin: 3px 0 0;
    text-align: start;
    font-weight: 400;
    line-height: 1.66;
    letter-spacing: .03333em;
}

/* MudBlazor overrides */
.mud-snackbar-location-bottom-left {
    bottom: 50px !important;
}

.mud-snackbar-location-bottom-right {
    bottom: 50px !important;
}

.mud-progress-linear {
    margin: 0 !important;
}

/* App branding in header */
.app-brand {
    text-decoration: none;
    color: inherit;
}

.app-brand:hover {
    color: inherit;
    opacity: 0.9;
}

/* External Login Buttons */
.external-login {
    display: flex;
    align-items: center;
    margin-top: 5px;
    margin-bottom: 5px;
    height: 40px;
    padding: 0 16px;
    font-size: 16px;
    text-decoration: none;
    border-radius: 4px;
    color: #fff;
    transition: background-color 0.3s;
}

.external-login-icon {
    background-repeat: no-repeat;
    background-size: contain;
    width: 35px;
    height: 35px;
    margin-right: 8px;
}

.microsoft-external-login {
    background-color: #2F2F2F;
}

.microsoft-external-login-icon {
    background-image: url('../assets/icons/external-auth/auth-microsoft.png');
}

.google-external-login {
    background-color: #4285F4;
}

.google-external-login-icon {
    background-image: url('../assets/icons/external-auth/auth-google.png');
}

.twitter-external-login {
    background-color: #1DA1F2;
}

.twitter-external-login-icon {
    background-image: url('../assets/icons/external-auth/auth-twitter.png');
}

.linkedin-external-login {
    background-color: #0A66C2;
}

.linkedin-external-login-icon {
    background-image: url('../assets/icons/external-auth/auth-linkedin.png');
}

.facebook-external-login {
    background-color: #1877F2;
}

.facebook-external-login-icon {
    background-image: url('../assets/icons/external-auth/auth-facebook.png');
}

/* --------------------------------------------------------------------------
   Client portal – header + tabs, no nav menu
   -------------------------------------------------------------------------- */

.client-portal-layout .client-portal-main {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

.client-portal-appbar {
    flex-shrink: 0;
}

.client-portal-appbar-left {
    min-width: 0;
}

.client-portal-appbar-title {
    min-width: 0;
}

.client-portal-tenant-name {
    color: var(--mud-palette-text-secondary, rgba(0,0,0,0.6));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 240px;
}

.client-portal-client-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 240px;
}

.client-portal-appbar-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.client-portal-breadcrumb-wrap {
    flex-shrink: 0;
    padding: 8px 16px;
    background: var(--mud-palette-background, #f5f5f5);
    border-bottom: 1px solid var(--mud-palette-lines-default, rgba(0,0,0,0.12));
}

.client-portal-breadcrumb {
    padding: 0;
}

.client-portal-breadcrumb .mud-breadcrumb-item {
    font-size: 0.875rem;
}

.client-portal-tabs-wrap {
    flex-shrink: 0;
    border-radius: 0;
    background: var(--mud-palette-surface, #fff);
    border-bottom: 1px solid var(--mud-palette-lines-default, rgba(0,0,0,0.12));
}

.client-portal-tabs-wrap .mud-tabs {
    min-height: 48px;
}

.client-portal-tabs-wrap .mud-tabs-toolbar {
    min-height: 48px;
    padding: 0 8px;
}

.client-portal-tabs-wrap .mud-tabs-panels {
    display: none !important;
}

.client-portal-tab-panel-hidden {
    display: none !important;
}

.client-portal-content {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.client-portal-home {
    width: 100%;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.client-portal-home-cards {
    width: 100%;
}

.client-portal-home-cards .client-portal-dashboard-card {
    min-height: 120px;
}

.client-portal-dashboard-card {
    border-radius: var(--mud-default-borderradius, 8px);
    height: 100%;
}

/* Firm notification preferences matrix (settings) */
.notification-preferences-matrix-wrap {
    overflow-x: auto;
    border: 1px solid var(--asm-border);
    border-radius: var(--asm-radius);
    background: var(--mud-palette-surface);
}

.notification-preferences-matrix {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.notification-preferences-matrix th,
.notification-preferences-matrix td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--asm-border);
    vertical-align: middle;
}

.notification-preferences-matrix thead th {
    font-weight: 600;
    color: var(--asm-text-muted);
    background: var(--asm-surface);
    position: sticky;
    top: 0;
    z-index: 2;
}

.notification-preferences-matrix-sticky-col {
    position: sticky;
    left: 0;
    z-index: 3;
    background: var(--mud-palette-surface);
    min-width: 12rem;
    max-width: 16rem;
    box-shadow: 4px 0 8px -4px rgba(0, 0, 0, 0.08);
}

.notification-preferences-matrix-user-col {
    min-width: 6.5rem;
    max-width: 10rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}

.notification-preferences-matrix-check {
    text-align: center;
}

.notification-client-portal-toggles {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-width: 36rem;
}

/* --------------------------------------------------------------------------
   Phase 1 – Mobile shell responsiveness (<= 767px)
   Sidebar becomes a Temporary overlay drawer; topbar/right-drawer adapt.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
    /* Shell collapses to single column; sidebar is overlaid (Temporary variant) */
    .app-shell.mud-layout {
        flex-direction: column !important;
    }

    /* Temporary drawer overlay: override desktop 'position: relative / overflow: hidden'
       so MudBlazor's transform + overlay render correctly on mobile. */
    .app-shell-mobile .mud-drawer.app-sidebar {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        right: auto !important;
        z-index: 1301 !important;
        flex: 0 0 auto !important;
        min-width: 0 !important;
        width: min(85vw, 320px) !important;
        max-width: 85vw !important;
        height: 100vh !important;
        max-height: 100vh !important;
        overflow: visible !important;
    }

    .app-shell-mobile .mud-drawer.app-sidebar .mud-drawer-content {
        width: 100% !important;
        min-width: 0 !important;
        height: 100% !important;
        overflow: auto !important;
        pointer-events: auto !important;
    }

    /* MudBlazor backdrop must sit below the drawer, not above it */
    .app-shell-mobile .mud-drawer-overlay,
    .app-shell-mobile .mud-overlay-drawer {
        z-index: 1300 !important;
    }

    /* Undo desktop close-state collapse on mobile and slide the drawer off-screen
       via transform so it can animate back in when reopened. */
    .app-shell-mobile.app-drawer-closed .mud-drawer.app-sidebar {
        flex: 0 0 auto !important;
        min-width: 0 !important;
        width: min(85vw, 320px) !important;
        transform: translateX(-100%) !important;
        transition: transform 0.225s cubic-bezier(0, 0, 0.2, 1) !important;
        pointer-events: none !important;
    }
    .app-shell-mobile.app-drawer-closed .mud-drawer.app-sidebar .mud-drawer-content {
        width: 100% !important;
        min-width: 0 !important;
    }
    .app-shell-mobile:not(.app-drawer-closed) .mud-drawer.app-sidebar {
        transform: translateX(0) !important;
        transition: transform 0.225s cubic-bezier(0, 0, 0.2, 1) !important;
        pointer-events: auto !important;
    }

    /* Topbar: tighter padding, organization name hidden so breadcrumb has room */
    .app-topbar {
        padding: 0 0.5rem;
    }

    .app-topbar-organization-name {
        display: none;
    }

    .app-topbar-divider {
        display: none;
    }

    .app-topbar-logo {
        max-width: none;
        gap: 0.4rem;
        flex-shrink: 0 !important;
        min-width: 2.5rem !important;
        overflow: visible;
    }

    .app-topbar-logo .app-logo-icon {
        height: 2.5rem !important;
        min-width: 2.5rem !important;
        display: inline-block !important;
    }

    .app-topbar-actions {
        gap: 0.15rem;
    }

    .app-topbar-actions .mud-icon-button {
        width: 36px !important;
        height: 36px !important;
        padding: 6px !important;
    }

    .app-breadcrumb {
        display: none;
    }

    /* Content: tighter padding on phones to preserve horizontal real estate */
    .app-content {
        padding: 0.75rem 0.75rem 1rem;
    }

    .app-footer {
        padding: 0.5rem 0.75rem;
        font-size: 0.75rem;
        text-align: center;
    }

    /* Right drawer: full-width slide-in on phones */
    .app-right-drawer-panel {
        width: 100vw;
        max-width: 100vw;
    }
}

/* Tablet (768–1023): keep sidebar persistent but allow smaller padding */
@media (min-width: 768px) and (max-width: 1023px) {
    .app-content {
        padding: 0.875rem 1rem 1.25rem;
    }

    .app-breadcrumb-list .mud-breadcrumb-item {
        font-size: 0.8125rem;
    }
}

/* Touch target enforcement on coarse pointers (mobile/tablet) */
@media (pointer: coarse) {
    .mud-button-root,
    .mud-icon-button {
        min-height: 44px;
    }
}

/* Phase 3 – Tables: horizontal scroll on mobile for large data tables.
   ClientView tables keep MudBlazor's native card fallback (Breakpoint=Sm).
   Large tables (Invoices, Payments, Clients, etc.) use Breakpoint=None;
   the .mud-table-container scrolls horizontally when columns overflow. */
.mud-table .mud-table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 767px) {
    /* Page-level toolbars: allow wrap so search + filters + buttons stack nicely */
    .mud-table-toolbar {
        flex-wrap: wrap !important;
        gap: 0.5rem;
        height: auto !important;
        padding: 0.5rem !important;
    }

    /* Make table pagers more compact on phones */
    .mud-table-pagination-caption,
    .mud-table-pagination-select {
        font-size: 0.75rem;
    }

    /* Ensure native-layout tables keep a sensible min-width so columns don't squash */
    .mud-table .mud-table-root {
        min-width: 640px;
    }

    /* ClientView tabs: the Breakpoint=Sm card-stack layout already kicks in.
       Give stacked cells a touch more breathing room. */
    .mud-table-smalldevices-sortselect { padding: 0.5rem !important; }
}

/* Phase 4 – Dialogs and forms on mobile.
   Dialogs go full-screen on phones so forms have room; tighter padding. */
@media (max-width: 639px) {
    .mud-dialog-container .mud-dialog {
        max-width: 100vw !important;
        min-width: 100vw !important;
        width: 100vw !important;
        max-height: 100vh !important;
        height: 100vh !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    .mud-dialog-container .mud-dialog-content {
        padding: 0.75rem 0.875rem !important;
    }

    .mud-dialog-container .mud-dialog-title {
        padding: 0.75rem 0.875rem !important;
    }

    .mud-dialog-container .mud-dialog-actions {
        padding: 0.5rem 0.875rem !important;
        flex-wrap: wrap;
        gap: 0.4rem;
    }

    /* Date + time pickers: stack rather than crowd on small screens */
    .mud-dialog .mud-stack-row {
        flex-wrap: wrap;
    }
    .mud-dialog .mud-picker,
    .mud-dialog .mud-input-control {
        min-width: 0;
        flex: 1 1 100%;
    }

    /* MudSelect / MudTextField labels should never overflow their container */
    .mud-dialog .mud-input-label { max-width: 90%; }

    /* Snackbar: leave room for OS bottom bars on mobile */
    .mud-snackbar-location-bottom-right,
    .mud-snackbar-location-bottom-left {
        bottom: 1rem !important;
        right: 0.5rem !important;
        left: 0.5rem !important;
    }
}

/* Phase-4 audit pass: targeted mobile fixes for items found in the second review. */
@media (max-width: 767px) {
    /* Client portal appbar: shrink tenant/client name so action buttons stay on screen */
    .client-portal-tenant-name,
    .client-portal-client-name {
        max-width: 140px;
        font-size: 0.85rem;
    }
    .client-portal-appbar-actions { gap: 0.35rem; }
    .client-portal-breadcrumb-wrap { padding: 6px 10px; }

    /* ClientProfitability KPI strip: cards stretched to full width on phones (they currently have min-width 160-200px) */
    .page-section .mud-paper[style*="min-width"] { min-width: 0 !important; }

    /* ProfitabilityDashboard KPI cards sit 2-per-row via xs=6; keep comfortable padding */
    .prof-kpi-card { padding: 0.5rem !important; }
    .prof-kpi-value { font-size: 0.95rem !important; }
    .prof-kpi-label { font-size: 0.65rem !important; }

    /* ClientView: services dropdown menu and tax year input must not exceed viewport */
    .mud-menu-popover { max-width: calc(100vw - 16px) !important; }
    .mud-menu-popover .mud-paper { width: 100% !important; max-width: calc(100vw - 16px) !important; }

    /* ClientView right notes drawer: shrink to viewport on phones */
    .mud-drawer.mud-drawer-anchor-right { max-width: 92vw !important; width: 320px !important; }

    /* MudTabs generic: let tab strips scroll when they overflow */
    .mud-tabs:not(.mud-tabs-scrollable) .mud-tabs-toolbar { flex-wrap: wrap; }

    /* Page-level filter toolbars: let MudStack Row items wrap */
    .page-section .mud-toolbar { flex-wrap: wrap; height: auto !important; gap: 0.5rem; }

    /* Large page action buttons (full-text labels): allow labels to truncate gracefully */
    .mud-button-root { max-width: 100%; }
    .mud-button-root .mud-button-label { overflow: hidden; text-overflow: ellipsis; }
}

/* ClientView services-dropdown inline width overrides fail on phones; scope the fix. */
@media (max-width: 639px) {
    .checklist-link-card-inner .mud-stack-row { flex-wrap: wrap; }
}

/* =============================================================================
   Auth/onboarding two-column shell — Phase B redesign (2026-04-27)
   Replaces the single-column .account-* layout. Old classes are still present
   above for any pages not yet migrated; remove them once every auth page uses
   the new .auth-* classes.
   ============================================================================= */

.auth-shell {
    display: flex;
    /* body has `overflow: hidden` globally, so the shell needs a fixed (not min) height
       so that .auth-panel's `overflow-y: auto` actually engages when the form is tall.
       Without this, the wizard's step-1/2 forms could push the Continue button below
       the viewport on short screens with no way to reach it.
       Use dvh (dynamic viewport height) so iOS/Android browsers don't lock to a height
       that includes space hidden behind the dynamic address bar — `vh` fallback for
       browsers that don't support dvh yet. */
    height: 100vh;
    max-height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    background: var(--mud-palette-surface, #fff);
    color: var(--asm-text);
}

.auth-hero {
    /* 60% width on desktop. Gradient pulled from index.html app-loading splash so the
       brand experience is continuous from WASM-loading → login → app-shell. */
    flex: 0 0 60%;
    background: linear-gradient(160deg, #0f766e 0%, #134e4a 50%, #0f172a 100%);
    color: rgba(255, 255, 255, 0.95);
    padding: 4rem 4rem 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    position: relative;
}

.auth-hero-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 520px;
}

.auth-hero-brand {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

.auth-hero-logo {
    height: 2.75rem;
    width: auto;
    object-fit: contain;
}

.auth-hero-wordmark {
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: rgba(255, 255, 255, 0.9);
}

.auth-hero-title {
    font-size: 2.25rem;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: #fff;
    margin: 0;
}

.auth-hero-features {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9375rem;
}

.auth-hero-features li {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
}

.auth-hero-check {
    color: #5eead4;
    font-weight: 700;
    flex-shrink: 0;
    width: 1.125rem;
    text-align: center;
}

.auth-hero-footer {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.02em;
}

.auth-hero-footer-sep {
    margin: 0 0.4rem;
    opacity: 0.55;
}

.auth-hero-footer-attribution {
    /* Slightly dimmer than the domain so the host brand reads first. */
    opacity: 0.78;
}

.auth-hero-footer-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.32);
    padding-bottom: 1px;
    transition: color 120ms ease, border-color 120ms ease;
}

.auth-hero-footer-link:hover,
.auth-hero-footer-link:focus-visible {
    color: rgba(255, 255, 255, 0.95);
    border-color: rgba(255, 255, 255, 0.7);
}

.auth-hero-cta {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.auth-hero-cta-link {
    display: inline-block;
    padding: 0.75rem 1.25rem;
    background: rgba(255, 255, 255, 0.95);
    color: #0f766e !important;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 0.9375rem;
    letter-spacing: 0.01em;
    text-decoration: none !important;
    transition: transform 120ms ease, background 120ms ease;
}

.auth-hero-cta-link:hover {
    background: #ffffff;
    transform: translateY(-1px);
}

.auth-hero-cta-sub {
    margin: 0.5rem 0 0;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.7);
}

.auth-panel {
    /* 40% width on desktop. Form panel; centers content vertically with footer pinned.
       `min-height: 0` is required because flex items default to `min-height: auto` (==
       content height), which would cause the panel to grow to fit the form instead of
       capping at the shell's allocation and engaging its own overflow scroll. Without
       this, tall wizard steps push the Continue button below the viewport with no way
       to reach it on short screens. */
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 3rem 3rem 1.5rem;
    overflow-y: auto;
    background: var(--mud-palette-surface, #fff);
}

.auth-panel-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    /* `justify-content: center` clips the top of the form when content is taller than the
       panel — and you can't scroll up to reach it because flex centering doesn't play
       with overflow scroll. `margin: auto 0` (block-axis auto) gives the same vertical
       centering when there's room but lets the content sit at the natural top edge when
       it overflows, so .auth-panel's scroll picks up everything. */
    width: 100%;
    max-width: 420px;
    margin: auto;
    gap: 1rem;
}

/* Short screens (laptops with the dock/dock-extension visible, large browser chrome,
   long onboarding wizard steps with confirm-email + alert + 4 form fields): disable the
   block-axis auto-centering so the form flows from the top and the bottom buttons are
   always reachable via the panel scroll. */
@media (max-height: 800px) {
    .auth-panel-content {
        margin-top: 0;
        margin-bottom: 0;
    }
}

.auth-org-badge {
    align-self: flex-start;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--asm-primary);
    background: rgba(13, 148, 136, 0.1);
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    border-left: 3px solid var(--asm-primary);
    margin-bottom: 0.5rem;
    max-width: 100%;
}

.auth-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.4rem 0.625rem;
    padding-top: 1rem;
    margin-top: 1.5rem;
    border-top: 1px solid var(--asm-border);
    font-size: 0.8125rem;
    color: var(--asm-text-muted);
}

.auth-footer-link {
    color: var(--asm-text-muted);
    text-decoration: none;
}

.auth-footer-link:hover {
    color: var(--asm-primary);
    text-decoration: underline;
}

.auth-footer-sep {
    opacity: 0.4;
}

/* Mobile: hero collapses to a thin banner; form takes full width. <768px because
   that's where the 60/40 split starts feeling cramped on real devices. */
@media (max-width: 768px) {
    .auth-shell {
        flex-direction: column;
        /* Keep height/max-height dvh from the base rule so we cap at the actual visible
           viewport (excludes hidden browser chrome). A `min-height: 100vh` override
           here would force the shell taller than the visible area on mobile and break
           the panel scroll. */
    }
    .auth-hero {
        flex: 0 0 auto;
        padding: 1.5rem 1.5rem 1.25rem;
    }
    .auth-hero-content {
        max-width: 100%;
        gap: 0.5rem;
    }
    .auth-hero-title,
    .auth-hero-features,
    .auth-hero-cta,
    .auth-hero-footer {
        /* On mobile we keep just the brand chip; the marketing copy would push the form too far down.
           The trial-CTA also lives only on desktop — the form-subtitle "Don't have an account?
           Start a 7-day trial" link covers the same intent in the panel and is closer to thumb. */
        display: none;
    }
    .auth-panel {
        padding: 1.5rem 1.25rem 1rem;
        flex: 1;
    }
    .auth-panel-content {
        max-width: 100%;
        justify-content: flex-start;
        padding-top: 0.5rem;
    }
    .auth-footer {
        margin-top: 1rem;
    }
}

/* =============================================================================
   Auth form internals — used by every page nested inside AccountLayout.
   ============================================================================= */

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.auth-form-header {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 0.25rem;
}

.auth-form-title {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--asm-text);
    margin: 0;
}

.auth-form-subtitle {
    font-size: 0.9375rem;
    color: var(--asm-text-muted);
    line-height: 1.5;
    margin: 0;
}

.auth-form-actions {
    margin-top: 0.5rem;
}

.auth-form-secondary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: -0.125rem;
}

.auth-form-secondary-end {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.auth-link {
    color: var(--asm-primary);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
}

.auth-link:hover {
    text-decoration: underline;
}

.auth-validation {
    margin-top: 0.5rem;
    padding: 0.625rem 0.875rem;
    background: rgba(220, 38, 38, 0.06);
    border: 1px solid rgba(220, 38, 38, 0.2);
    border-radius: var(--asm-radius-sm);
    color: var(--mud-palette-error);
    font-size: 0.8125rem;
    line-height: 1.4;
}

/* MudBlazor renders ValidationSummary as a <ul> with class="validation-message".
   Hide the wrapper when there's nothing to show, and tighten its appearance. */
.auth-validation:empty {
    display: none;
}

.auth-validation ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.auth-info {
    margin-top: 0.5rem;
    padding: 0.75rem 0.875rem;
    background: rgba(13, 148, 136, 0.06);
    border: 1px solid rgba(13, 148, 136, 0.2);
    border-radius: var(--asm-radius-sm);
    color: var(--asm-text);
    font-size: 0.875rem;
    line-height: 1.5;
}

.auth-success {
    margin-top: 0.5rem;
    padding: 0.75rem 0.875rem;
    background: rgba(34, 197, 94, 0.08);
    border: 1px solid rgba(34, 197, 94, 0.25);
    border-radius: var(--asm-radius-sm);
    color: var(--asm-text);
    font-size: 0.875rem;
    line-height: 1.5;
}

.auth-demo-panel {
    border: 1px dashed var(--asm-border);
    border-radius: var(--asm-radius-sm);
    padding: 0.625rem 0.75rem;
    background: rgba(13, 148, 136, 0.03);
}

.auth-demo-panel-title {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    color: var(--asm-text-muted);
    margin-bottom: 0.5rem;
}

/* Wizard step indicator (used by /onboarding) — Phase C.E */
.auth-step-progress {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin: -0.25rem 0 0.25rem;
}

.auth-step-dot {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    background: var(--asm-border);
    transition: background 0.15s ease-out;
}

.auth-step-dot-active {
    background: var(--asm-primary);
}

.auth-step-label {
    margin-left: 0.5rem;
    font-size: 0.75rem;
    color: var(--asm-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}

/* Review rows on the final wizard step */
.auth-review-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.auth-review-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    color: var(--asm-text-muted);
    flex-shrink: 0;
}

.auth-review-value {
    font-size: 0.9375rem;
    color: var(--asm-text);
    text-align: right;
    word-break: break-word;
}

/* =============================================================================
   Mobile foundation (Phase 9a). Targets the main app shell — sidebar collapse,
   drawer-overlay variant, and AccountLayout responsiveness already work via
   MainLayout's IBrowserViewportObserver + the existing media block below. This
   section covers the topbar, content padding, footer, and tap-target minimums
   for everything that lives between sidebar and footer.

   Breakpoint: 768px — same as the auth-shell mobile cutoff above. Tablets and
   phones share these rules; on tablet they're slight density tweaks, on phone
   they reclaim space that would otherwise force horizontal scroll.
   ============================================================================= */
@media (max-width: 768px) {
    /* Tap targets: WCAG and Apple HIG both call for 44x44 minimum. Desktop keeps
       40px for visual density; mobile bumps so a thumb actually hits the button. */
    .app-topbar-actions .mud-icon-button {
        width: 44px !important;
        height: 44px !important;
    }
    .app-topbar-menu {
        width: 44px !important;
        height: 44px !important;
    }

    /* Topbar fits a single row on a 375px viewport. Drop the chrome that already
       has a more prominent home elsewhere:
         - Organization-name pill is also rendered in the sidebar header
         - Divider is purely decorative
         - Breadcrumb context is duplicated by every page's H1 page-title,
           and the inline breadcrumb often wraps awkwardly when only 2 segments
           visible. Hidden on mobile, restored on desktop. */
    .app-topbar-organization-name,
    .app-topbar-divider,
    .app-breadcrumb {
        display: none !important;
    }

    /* Tighten content padding so list rows / form fields actually have room.
       Desktop's 1.75rem horizontal eats ~28% of a 375px viewport. */
    .app-content {
        padding: 0.875rem 0.75rem 1rem;
    }

    /* Footer: keep Privacy / Terms tappable, drop the copyright string —
       it pushed the legal links onto a second line and isn't actionable. */
    .app-footer {
        padding: 0.625rem 0.75rem;
        gap: 0.4rem 0.75rem;
        font-size: 0.75rem;
    }
    .app-footer-copyright {
        display: none;
    }

    /* Right-drawer panel already self-limits to max-width: 100%; nothing else
       to do for it on small viewports. */
}