:root,
html[data-theme="dark"],
html[data-theme="light"] {
    --mobile-page-gutter: clamp(0.75rem, 3.6vw, 1rem);
    --mobile-card-radius: 20px;
    --mobile-panel-radius: 24px;
    --mobile-surface-shadow: 0 12px 24px rgba(8, 16, 28, 0.12);
    --mobile-header-height: calc(3.4rem + env(safe-area-inset-top));
}

/* Global readability + touch comfort on small screens */
@media (max-width: 980px) {
    .topbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }

    html[data-theme="light"],
    html[data-theme="light"] body {
        background:
            linear-gradient(180deg, #e9eef7 0%, #eef3fb 58%, #f2f6fc 100%);
    }

    html[data-theme="dark"],
    html[data-theme="dark"] body {
        background:
            linear-gradient(180deg, #081320 0%, #0b1624 56%, #0d1a2a 100%);
    }

    html,
    body {
        overflow-x: clip;
    }

    .main-frame {
        padding: 0 0 calc(var(--safe-bottom) + 0.8rem);
    }

    .page-body {
        padding: 0 var(--mobile-page-gutter);
        gap: 0.9rem;
    }

    .topbar {
        position: sticky;
        top: 0;
        z-index: 70;
        min-height: var(--mobile-header-height);
        margin: 0 0 0.55rem;
        padding: calc(0.5rem + env(safe-area-inset-top)) var(--mobile-page-gutter) 0.55rem;
        border: 0;
        border-radius: 0;
        background: color-mix(in srgb, var(--bg-elevated) 72%, transparent);
        backdrop-filter: blur(12px);
        box-shadow: none;
    }

    .topbar-context {
        gap: 0.55rem;
        min-width: 0;
        width: 100%;
        justify-content: flex-start;
    }

    .topbar-mobile-brand {
        display: inline-flex;
        width: 2.4rem;
        height: 2.4rem;
        border-radius: 0.9rem;
        border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
        background: color-mix(in srgb, var(--panel-strong) 74%, transparent);
        box-shadow: 0 4px 10px rgba(8, 16, 28, 0.12);
        order: 0;
    }

    .topbar-mobile-brand__logo {
        width: 1.75rem;
        height: 1.75rem;
    }

    .topbar-toggle--mobile {
        display: inline-flex !important;
        order: 1;
    }

    .topbar-actions .topbar-toggle--mobile {
        display: none !important;
    }


    .topbar-workspace-pill {
        display: none;
    }

    .topbar-actions {
        margin-left: 0;
        width: auto;
        gap: 0.45rem;
        flex: 0 0 auto;
    }

    .topbar-actions .btn {
        min-height: 2.75rem;
    }

    .user-menu__panel {
        top: calc(var(--mobile-header-height) + 0.25rem);
        left: var(--mobile-page-gutter);
        right: var(--mobile-page-gutter);
        width: auto;
        max-width: none;
        border-radius: var(--mobile-card-radius);
    }

    .sidebar {
        width: min(90vw, 350px);
        padding: calc(0.95rem + env(safe-area-inset-top)) 0.9rem 1rem;
    }

    .brand-block {
        margin-bottom: 1rem;
    }

    .nav-group__trigger {
        padding-inline: 0.15rem;
    }

    .nav-group__items a,
    .nav-link-with-icon {
        min-height: 2.95rem;
        border-radius: 14px;
        padding: 0.58rem 0.8rem;
        margin-left: 0;
    }

    .hero-panel,
    .page-header-card,
    .panel-card,
    .listview-header,
    .listview-panel,
    .auth-card,
    .settings-card {
        border-radius: 18px;
        box-shadow: 0 6px 14px rgba(8, 16, 28, 0.06);
        border-color: color-mix(in srgb, var(--line) 88%, transparent);
    }

    .hero-panel,
    .page-header-card,
    .panel-card,
    .listview-header,
    .listview-panel__header,
    .listview-panel__content,
    .auth-card,
    .settings-card {
        padding-left: 0.95rem;
        padding-right: 0.95rem;
    }

    .listview-header {
        gap: 0.85rem;
        padding-top: 1rem;
        padding-bottom: 0.9rem;
    }

    .listview-header__title-group h1,
    .page-header-card h1,
    .family-hero h1,
    .dashboard-hero h2 {
        font-size: clamp(1.45rem, 6.6vw, 1.95rem);
        line-height: 1.05;
        letter-spacing: -0.03em;
        margin: 0.25rem 0 0;
    }

    .listview-header__copy p,
    .page-header-card p,
    .dashboard-hero p,
    .family-hero p {
        font-size: 0.88rem;
        line-height: 1.38;
        max-width: 34ch;
        margin: 0;
    }

    .hero-panel.dashboard-hero {
        padding-top: 0.82rem;
        padding-bottom: 0.78rem;
    }

    .hero-panel.dashboard-hero h2 {
        font-size: clamp(1.2rem, 5.6vw, 1.5rem);
        margin-top: 0.12rem;
    }

    .hero-panel.dashboard-hero p {
        font-size: 0.82rem;
        line-height: 1.33;
    }

    .hero-panel.dashboard-hero .eyebrow {
        font-size: 0.64rem;
    }

    .hero-panel.dashboard-hero .panel-header-actions .btn {
        min-height: 34px;
        padding: 0.32rem 0.62rem;
        font-size: 0.78rem;
    }

    .listview-toolbar {
        width: 100%;
        gap: 0.55rem;
    }

    .listview-toolbar__row {
        width: 100%;
        justify-content: stretch;
        gap: 0.5rem;
    }

    .listview-search,
    .listview-toolbar__primary,
    .listview-toolbar__secondary,
    .listview-toolbar__filter {
        width: 100%;
        min-height: 2.85rem;
        border-radius: 14px;
    }

    .listview-search {
        min-width: 0;
        padding: 0.75rem 0.9rem;
    }

    .listview-panel {
        overflow: hidden;
        background: color-mix(in srgb, var(--panel) 94%, transparent);
    }

    .listview-panel__header {
        padding-top: 0.95rem;
    }

    .listview-panel__header-block,
    .panel-header-actions,
    .entry-list-headline__meta {
        width: 100%;
        align-items: stretch;
        gap: 0.5rem;
    }

    .list-summary,
    .entry-list-summary,
    .entry-range-summary {
        min-height: 2.65rem;
        border-radius: 12px;
        padding: 0.52rem 0.75rem;
    }

    .kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.65rem;
    }

    .kpi-card {
        min-height: 7.45rem;
        padding: 0.85rem;
    }

    .kpi-card strong {
        font-size: 1.25rem;
        margin: 0.2rem 0;
    }

    .content-grid,
    .form-grid,
    .workspace-grid,
    .workspace-grid--wide,
    .form-grid--2,
    .filter-grid,
    .detail-grid,
    .loan-detail-kpis,
    .account-cashflow-card__metrics,
    .account-cashflow-card__details {
        grid-template-columns: 1fr;
        gap: 0.7rem;
    }

    .form-control,
    .form-select,
    .finance-input {
        min-height: 2.9rem;
        border-radius: 14px;
        font-size: 0.98rem;
    }

    .entry-field label,
    .stack-form label {
        font-size: 0.82rem;
        margin-bottom: 0.25rem;
    }

    .btn.btn-primary,
    .btn.btn-light,
    .btn.btn-ghost {
        min-height: 2.85rem;
        border-radius: 14px;
        padding: 0.68rem 0.9rem;
    }

    .row-actions {
        width: 100%;
        justify-content: flex-start;
        gap: 0.38rem;
    }

    .action-icon-button {
        min-height: 2.5rem;
        min-width: 2.5rem;
        border-radius: 12px;
        padding: 0.55rem 0.72rem;
    }

    .table-shell {
        overflow: visible;
    }

    /* Generic table-to-card conversion for all list modules */
    .data-table.listview-table {
        display: block;
        width: 100%;
    }

    .data-table.listview-table thead {
        display: none;
    }

    .data-table.listview-table tbody {
        display: grid;
        gap: 0.65rem;
    }

    .data-table.listview-table tr {
        display: grid;
        gap: 0.36rem;
        padding: 0.8rem;
        border-radius: 14px;
        border: 1px solid color-mix(in srgb, var(--line) 84%, transparent);
        background: color-mix(in srgb, var(--panel) 96%, transparent);
        box-shadow: 0 4px 12px rgba(8, 16, 28, 0.05);
    }

    .data-table.listview-table td {
        display: block;
        padding: 0;
        border: 0;
        font-size: 0.92rem;
        line-height: 1.34;
        color: var(--text);
    }

    .data-table.listview-table td strong {
        color: var(--text-strong);
    }

    .data-table.listview-table .actions-cell {
        margin-top: 0.18rem;
        text-align: left;
    }

    .data-table.listview-table .actions-cell .row-actions {
        justify-content: flex-start;
        width: 100%;
    }

    .entry-mobile-list {
        display: block;
    }

    .entry-mobile-card {
        border-radius: 14px;
        padding: 0.88rem;
    }

    .invoice-list-item,
    .detail-card,
    .workspace-card,
    .family-member-card,
    .entry-filter-totals__card,
    .budget-dashboard-card {
        border-radius: 14px;
    }

    .metric-row,
    .recent-list__item,
    .notification-inline {
        gap: 0.65rem;
        padding-top: 0.72rem;
        padding-bottom: 0.72rem;
        align-items: flex-start;
    }

    .metric-row strong,
    .recent-list__title,
    .notification-inline strong {
        line-height: 1.25;
    }

    .modal-shell,
    .filter-drawer {
        width: 100%;
        max-width: none;
        border-radius: 18px 18px 0 0;
        margin-top: auto;
        max-height: min(94dvh, 980px);
        border-left: 0;
        border-right: 0;
        border-bottom: 0;
    }

    .overlay-backdrop,
    .overlay-backdrop--drawer {
        align-items: flex-end;
        justify-content: stretch;
        padding: 0;
    }

    .modal-shell__header,
    .modal-shell__body,
    .modal-shell__footer,
    .filter-drawer__header,
    .filter-drawer__body,
    .filter-drawer__footer {
        padding-left: var(--mobile-page-gutter);
        padding-right: var(--mobile-page-gutter);
    }

    .modal-shell__header,
    .filter-drawer__header {
        position: sticky;
        top: 0;
        z-index: 2;
        background: color-mix(in srgb, var(--panel-strong) 94%, transparent);
        backdrop-filter: blur(12px);
    }

    .modal-shell__footer,
    .filter-drawer__footer {
        position: sticky;
        bottom: 0;
        z-index: 2;
        background: color-mix(in srgb, var(--panel-strong) 94%, transparent);
        backdrop-filter: blur(12px);
        padding-bottom: calc(0.85rem + env(safe-area-inset-bottom));
        gap: 0.55rem;
    }

    .modal-shell__footer .btn,
    .filter-drawer__footer .btn {
        flex: 1 1 0;
        justify-content: center;
    }

    .toast-stack {
        left: var(--mobile-page-gutter);
        right: var(--mobile-page-gutter);
        bottom: calc(var(--safe-bottom) + 0.2rem);
        top: auto;
        width: auto;
    }

    .toast-card {
        border-radius: 12px;
        padding: 0.82rem 0.84rem;
    }

    .workspace-page__toolbar,
    .workspace-page__search,
    .workspace-members__invite,
    .workspace-member-row,
    .workspace-card__actions,
    .family-editor__actions,
    .family-period-picker,
    .loan-list-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .workspace-page__toolbar .btn,
    .workspace-card__actions .btn,
    .family-editor__actions .btn,
    .loan-list-actions .btn,
    .entry-import-trigger {
        width: 100%;
        justify-content: center;
    }

    .dashboard-session-nav__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.55rem;
    }

    .dashboard-session-nav__item {
        border-radius: 14px;
        padding: 0.7rem;
    }

    .dashboard-session-nav--tabs .dashboard-session-nav__toggle {
        width: fit-content;
        margin-inline: 0;
        padding-inline: 0.72rem;
    }

    .dashboard-session-nav--tabs .dashboard-session-nav__list {
        display: none;
        flex-wrap: nowrap;
        gap: 0.34rem;
        overflow-x: auto;
        grid-template-columns: none;
    }

    .dashboard-session-nav--tabs.is-open .dashboard-session-nav__list {
        display: flex;
    }

    .dashboard-session-nav--tabs .dashboard-session-nav__item {
        min-width: 9.8rem;
        border-radius: 11px;
        padding: 0.44rem 0.58rem 0.46rem;
        border-color: color-mix(in srgb, var(--line-strong) 20%, transparent);
        background: color-mix(in srgb, var(--surface-soft) 64%, transparent);
        gap: 0.5rem;
    }

    .dashboard-session-nav--tabs .dashboard-session-nav__label {
        font-size: 0.84rem;
        font-weight: 800;
    }
}

@media (max-width: 640px) {
    .page-body {
        gap: 0.75rem;
        padding: 0 0.65rem;
    }

    .topbar {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 0.55rem !important;
        margin-bottom: 0.6rem;
    }

    .topbar-context {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        min-width: 0 !important;
        gap: 0.5rem !important;
        justify-content: flex-start !important;
    }

    .topbar-toggle--mobile {
        grid-column: auto !important;
        grid-row: auto !important;
        display: inline-flex !important;
    }

    .topbar-actions {
        grid-column: auto !important;
        grid-row: auto !important;
        justify-self: end !important;
    }

    .topbar-mobile-brand {
        display: inline-flex !important;
    }

    .listview-header__copy p,
    .page-header-card p,
    .panel-support-copy,
    .list-summary span,
    .table-meta {
        font-size: 0.82rem;
    }

    .listview-header .eyebrow,
    .page-header-card .eyebrow,
    .hero-panel .eyebrow,
    .listview-panel__header p {
        display: none;
    }

    .hero-panel,
    .page-header-card,
    .panel-card,
    .listview-header,
    .listview-panel,
    .auth-card,
    .settings-card {
        background: color-mix(in srgb, var(--panel) 96%, transparent) !important;
        border: 1px solid color-mix(in srgb, var(--line) 86%, transparent) !important;
        border-radius: 16px !important;
        box-shadow: 0 4px 12px rgba(8, 16, 28, 0.05) !important;
    }

    .listview-header__title-group h1,
    .page-header-card h1,
    .family-hero h1,
    .dashboard-hero h2 {
        font-size: clamp(1.3rem, 7vw, 1.75rem);
    }

    .kpi-grid,
    .dashboard-session-nav__list,
    .entry-filter-totals--mobile {
        grid-template-columns: 1fr;
    }

    .data-table.listview-table tr {
        padding: 0.76rem;
    }

    .action-icon-button {
        min-height: 2.4rem;
        min-width: 2.4rem;
        padding-inline: 0.62rem;
    }

    .modal-shell,
    .filter-drawer {
        border-radius: 20px 20px 0 0;
        max-height: 95dvh;
    }
}

@media (max-width: 768px) {
    .main-frame {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .page-body {
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .topbar {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}

@media (max-width: 900px) {
    .shell {
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }

    .shell:has(.sidebar:not(:empty)),
    .shell:not(:has(.sidebar)) {
        grid-template-columns: 1fr !important;
    }

    .shell .main-frame {
        width: 100% !important;
        max-width: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .shell .main-frame > .topbar,
    .shell .main-frame > .page-body,
    .shell .main-frame > .main-content-shell > .topbar,
    .shell .main-frame > .main-content-shell > .page-body {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .shell .main-frame > .topbar,
    .shell .main-frame > .main-content-shell > .topbar {
        padding-left: 0.65rem !important;
        padding-right: 0.65rem !important;
    }

    .shell .main-frame > .page-body,
    .shell .main-frame > .main-content-shell > .page-body {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .shell .main-frame > .page-body > .entry-mobile-hero,
    .shell .main-frame > .page-body > .listview-panel,
    .shell .main-frame > .main-content-shell > .page-body > .entry-mobile-hero,
    .shell .main-frame > .main-content-shell > .page-body > .listview-panel {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

@media (max-width: 420px) {
    .page-body {
        padding-inline: 0.62rem;
    }

    .topbar {
        padding-left: 0.62rem;
        padding-right: 0.62rem;
    }

    .listview-search,
    .btn.btn-primary,
    .btn.btn-light,
    .btn.btn-ghost {
        min-height: 2.72rem;
    }
}