/* One fluid desktop shell at every viewport width. Print keeps its own layout. */
@media screen {
    html, body { width: 100%; min-width: 0; }
    .app {
        display: grid;
        grid-template-columns: clamp(92px, 22vw, 270px) minmax(0, 1fr);
        align-items: start;
        align-content: start;
        gap: 0;
        width: 100%;
        min-height: 100dvh;
    }
    .app .sidebar {
        position: sticky;
        top: 0;
        width: 100%;
        min-width: 0;
        height: 100dvh;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        visibility: visible;
        transform: none;
        transition: none;
    }
    .app .sidebar-brand {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        padding: clamp(12px, 2vw, 24px) 8px;
    }
    .app .sidebar-logo-frame { width: clamp(44px, 7vw, 74px); height: auto; aspect-ratio: 1; flex: none; }
    .app .sidebar-brand .brand-text { width: 100%; min-width: 0; align-items: center; text-align: center; }
    .app .sidebar-brand .brand-text strong { font-size: clamp(12px, 1.6vw, 19px); text-align: center; }
    .app .sidebar-brand .brand-text em { font-size: clamp(9px, 1vw, 12px); letter-spacing: .5px; }
    .app .navigation { display: flex; flex-direction: column; gap: 8px; padding: 10px clamp(5px, 1vw, 16px); overflow: visible; }
    .app .navigation .nav-link { width: 100%; min-width: 0; min-height: 44px; margin: 0; padding: 10px 6px; flex-direction: row; gap: 6px; }
    .app .navigation .nav-icon { flex: 0 0 18px; width: 18px; font-size: 16px; }
    .app .navigation .nav-label { min-width: 0; white-space: normal; overflow-wrap: normal; word-break: normal; font-size: clamp(11px, 1.2vw, 14px); text-align: left; }
    .app .main-content {
        display: flex;
        flex-direction: column;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        min-height: 100dvh;
        margin: 0;
    }
    .app .topbar { height: auto; min-height: 72px; padding: 12px clamp(8px, 2vw, 32px); flex-direction: row; flex-wrap: wrap; gap: 10px; }
    .app .topbar-heading { flex: 1 1 140px; min-width: 0; }
    .app .topbar h1 { font-size: clamp(18px, 2vw, 24px); }
    .app .topbar p { display: block; line-height: 1.5; }
    .app .content {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        flex: 1;
        margin-inline: auto;
        padding: clamp(8px, 2vw, 30px);
        container: workspace / inline-size;
    }
    .app :is(.report-page, .form-card, .table-card, .report-filter-card) { min-width: 0; max-width: 100%; }
    .app :is(.dashboard-grid, .case-status-summary, .report-cards, .financial-summary, .case-summary, .form-row) {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
        gap: clamp(10px, 1.5vw, 20px);
    }
    .app .dashboard-layout .dashboard-modules {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
        grid-auto-rows: minmax(190px, 1fr);
        flex: 1;
    }
    .app .dashboard-layout > .content { display: flex; flex-direction: column; }
    .app .dashboard-layout > .content > :not(.dashboard-modules) { flex-shrink: 0; }
    .app .dashboard-hero {
        display: grid;
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
        min-width: 0;
        max-width: 100%;
        min-height: 0;
        align-items: center;
    }
    .app .hero-gallery {
        width: calc(100% - 32px);
        max-width: 420px;
        min-width: 0;
        min-height: 0;
        aspect-ratio: 4 / 3;
        margin: 16px;
        justify-self: center;
    }
    .app .dashboard-layout .dashboard-modules .dashboard-card {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        min-height: 190px;
    }
    .app .dashboard-layout .dashboard-modules .card-link { margin-top: auto; padding-top: 16px; }
    .app .hero-copy { min-width: 0; padding: clamp(12px, 3vw, 40px); }
    .app .hero-copy h2 { font-size: clamp(24px, 3.5vw, 48px); overflow-wrap: anywhere; }
    .app :is(.page-header, .form-header, .table-header, .report-filter, .form-actions, .report-information, .balance-report-card) {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 12px;
        min-width: 0;
    }
    .app .report-filter .form-group { flex: 1 1 180px; width: auto; min-width: 0; max-width: 100%; }
    .app :is(input, select, textarea) { min-width: 0; max-width: 100%; }
    .app .table-wrapper { width: 100%; min-width: 0; max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }
    .app :is(.dashboard-card, .report-card, .summary-item) { min-width: 0; padding: clamp(12px, 2vw, 24px); }
    .app :is(.report-card > div, .balance-report-card > div:first-child) { min-width: 0; }
    .app :is(.report-card h3, .balance-report-card h2, .balance-formula strong) { overflow-wrap: anywhere; }
    .app :is(.balance-formula, .pagination, .pagination-links, .report-brand-header, .report-screen-heading) { flex-wrap: wrap; min-width: 0; }
    .app .pagination { padding: 12px; gap: 10px; }
    .app .pagination-links { max-width: 100%; }
    .app :is(.report-brand-header, .report-screen-heading) > * { min-width: 0; max-width: 100%; }
    .app :is(.report-filter, .form-actions) > button { min-height: 44px; max-width: 100%; white-space: normal; }
    .app .report-filter { align-items: flex-end; }
    .app .table-wrapper:focus-visible { outline: 3px solid #ad8c4b; outline-offset: 2px; }
    .app .profile-dropdown { width: min(280px, calc(100vw - 24px)); }
    body.auth-page { width: 100%; min-width: 0; min-height: 100dvh; padding: clamp(12px, 3vw, 40px); }
    body.auth-page .auth-card { width: 100%; max-width: 460px; min-width: 0; padding: clamp(18px, 4vw, 34px); }
    body.auth-page .auth-brand { flex-wrap: wrap; font-size: clamp(13px, 2vw, 17px); }
    body.auth-page .auth-heading h1 { font-size: clamp(28px, 5vw, 40px); }
    body.auth-page .auth-field input { min-width: 0; width: 100%; font-size: 16px; }
}

/* Use the full viewport for content and navigation on phones and tablets. */
@media screen and (max-width: 900px) {
    .app {
        grid-template-columns: minmax(0, 1fr);
    }

    .app .sidebar {
        position: static;
        height: auto;
        min-height: 0;
        overflow: visible;
    }

    .app .sidebar-brand {
        flex-direction: row;
        justify-content: center;
        padding: 14px 16px;
    }

    .app .sidebar-brand .brand-text {
        width: auto;
    }

    .app .sidebar-brand .brand-text strong {
        font-size: 18px;
    }

    .app .navigation {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
        padding: 12px;
    }

    .app .navigation .nav-link {
        width: auto;
        flex: 1 1 140px;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 6px;
        padding: 10px;
    }

    .app .navigation .nav-label {
        width: auto;
        flex: 1;
        font-size: 14px;
        line-height: 1.4;
        text-align: left;
        overflow-wrap: normal;
        word-break: normal;
    }

    .app .sidebar .nav-link:hover,
    .app .sidebar .nav-link:focus-visible,
    .app .sidebar .nav-link:hover .nav-label,
    .app .sidebar .nav-link:focus-visible .nav-label {
        transform: none;
    }

    .app .topbar {
        position: static;
        top: auto;
        z-index: auto;
        background: #ffffff;
    }
}

/* Adapt to usable workspace width, including when the sidebar consumes space. */
@media screen {
    @container workspace (max-width: 650px) {
        .app .dashboard-hero { grid-template-columns: minmax(0, 1fr); }
        .app .hero-gallery { width: min(320px, calc(100% - 32px)); }
        .app .dashboard-section-heading { flex-wrap: wrap; gap: 10px; }
        .app .report-brand-header { flex-wrap: wrap; }
        .app .balance-report-card { padding: 16px; }
    }
    @container workspace (min-width: 1000px) {
        .app .dashboard-layout .dashboard-modules { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }
}