/* =========================================================
   FUMIDESK — RESPONSIVE FOUNDATION
   Loaded last so every workspace shares the same breakpoints.
   ========================================================= */

html,
body {
    max-width: 100%;
}

body:not(.logged-out) {
    overflow-x: hidden;
}

body:not(.logged-out) :is(
    .header,
    .search-position,
    .fumidesk-workspace-toolbar,
    .fumidesk-toolbar-left,
    #template-controls,
    #area-navigation,
    main,
    main > section,
    #app-page-container,
    #template-container,
    .settings-page,
    .settings-subpage,
    .erabisheet-page,
    .fumi-notes-page,
    .fumi-notes-workspace,
    .fumi-notes-editor-card
) {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

body:not(.logged-out) :is(img, video, canvas, svg) {
    max-width: 100%;
}

body:not(.logged-out) :is(input, textarea, select) {
    min-width: 0;
    max-width: 100%;
}

/* Dialogs remain reachable on short phones and laptops. */
body:not(.logged-out) :is(
    .modal,
    .tutorial-dialog,
    .account-security-dialog,
    .template-export-modal,
    .admin-user-report-modal,
    .fumi-docs-dialog,
    .find-replace-dialog,
    .support-request-dialog
) {
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100dvh - 24px) !important;
    box-sizing: border-box !important;
    overflow: auto;
    overscroll-behavior: contain;
}

/* =========================================================
   ACCOUNT SIDEBAR — NEVER CLIP THE PROFILE OR FOOTER
   ========================================================= */

body:not(.logged-out) #account-menu[open] {
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: 100dvh !important;
}

body:not(.logged-out) #account-menu[open] .account-menu-panel {
    inset: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: 100dvh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scroll-padding-block: 14px;
}

body:not(.logged-out) #account-menu[open] .account-menu-panel > * {
    flex-shrink: 0;
}

body:not(.logged-out) #account-menu[open] .account-menu-panel .fumidesk-menu-close {
    position: sticky !important;
    top: 0 !important;
    right: auto !important;
    align-self: flex-end !important;
    flex: 0 0 24px !important;
    margin: 0 0 -24px auto !important;
    z-index: 120 !important;
}

/* A tablet does not have enough room to shrink the app beside the menu. */
@media (max-width: 1100px) {
    body:not(.logged-out).fumidesk-menu-open :is(
        .header,
        #template-controls,
        #split-view-controls,
        main,
        .site-footer
    ) {
        width: auto !important;
        max-width: none !important;
        margin-left: 0 !important;
    }
}

@media (max-width: 520px) {
    :root {
        --fumidesk-sidebar-width: min(92vw, 340px);
    }

    body:not(.logged-out) #account-menu[open] {
        width: var(--fumidesk-sidebar-width) !important;
    }
}

/* Compact vertical rhythm on ordinary laptop-height displays. */
@media (max-height: 900px) {
    body:not(.logged-out) #account-menu[open] .account-menu-panel {
        gap: 7px !important;
        padding: 13px 14px 12px !important;
    }

    body:not(.logged-out) #account-menu[open] .account-menu-profile {
        min-height: 38px;
        margin-top: 0 !important;
        padding: 0 34px 7px 0;
    }

    body:not(.logged-out) #account-menu[open] .account-menu-profile-avatar {
        width: 36px;
        height: 36px;
        min-width: 36px;
    }

    body:not(.logged-out) #account-menu[open] .v2-menu-pages {
        gap: 5px !important;
        padding-bottom: 7px;
    }

    body:not(.logged-out) #account-menu[open] .account-menu-panel button:not(.theme-choice):not(.fumidesk-menu-close) {
        min-height: 40px !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }

    body:not(.logged-out) #account-menu[open] .theme-segmented-picker {
        gap: 7px !important;
    }

    body:not(.logged-out) #account-menu[open] .theme-segmented {
        gap: 5px !important;
        padding: 4px !important;
    }

    body:not(.logged-out) #account-menu[open] .theme-choice {
        width: 31px !important;
        min-width: 31px !important;
        height: 31px !important;
        min-height: 31px !important;
    }

    body:not(.logged-out) #account-menu[open] .fumidesk-menu-footer {
        padding-top: 9px;
    }

    body:not(.logged-out) #account-menu[open] .fumidesk-menu-footer-logo {
        width: 112px;
        margin-bottom: 5px;
    }
}

@media (max-height: 720px) {
    body:not(.logged-out) #account-menu[open] .account-menu-panel {
        gap: 5px !important;
        padding-block: 9px !important;
    }

    body:not(.logged-out) #account-menu[open] .account-menu-panel button:not(.theme-choice):not(.fumidesk-menu-close) {
        min-height: 36px !important;
        padding-top: 6px !important;
        padding-bottom: 6px !important;
    }

    body:not(.logged-out) #account-menu[open] .fumidesk-menu-footer-logo {
        width: 92px;
    }

    body:not(.logged-out) #account-menu[open] .fumidesk-menu-footer-copyright {
        font-size: 9px;
        line-height: 1.25;
    }
}

/* =========================================================
   SHARED LAPTOP / TABLET LAYOUT
   ========================================================= */

@media (max-width: 1280px) {
    body:not(.logged-out) {
        padding: 20px;
    }

    body:not(.logged-out) :is(.search-position, #template-controls, main) {
        padding-inline: 18px !important;
    }

    .erabisheet-layout {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .fumi-notes-workspace {
        grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
    }
}

@media (max-width: 900px) {
    body:not(.logged-out) {
        padding: 15px;
    }

    body:not(.logged-out) :is(.search-position, #template-controls, main) {
        padding-inline: 10px !important;
    }

    body:not(.logged-out) .fumidesk-workspace-toolbar {
        align-items: stretch;
        flex-wrap: wrap;
        gap: 12px;
    }

    body:not(.logged-out) .fumidesk-toolbar-left {
        flex: 1 1 420px;
        width: 100%;
    }

    body:not(.logged-out) .fumidesk-toolbar-actions {
        margin-left: auto;
    }

    body:not(.logged-out) #template-controls {
        align-items: stretch !important;
        flex-wrap: wrap !important;
        gap: 12px !important;
        margin-top: 28px !important;
    }

    body:not(.logged-out) #area-navigation {
        flex: 1 1 100% !important;
        width: 100% !important;
    }

    body:not(.logged-out) #split-view-controls {
        margin-left: auto !important;
    }

    .card-grid,
    .help-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body:not(.logged-out) #template-container :is(
        .dashboard-template-grid,
        .dashboard-collection-grid,
        .library-category-template-grid,
        .search-results-grid
    ) {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .fumi-notes-workspace {
        min-height: 0;
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .fumi-notes-sidebar {
        max-height: 320px;
        overflow: auto;
        border-right: 0;
        border-bottom: 1px solid var(--ios-line, rgba(15, 23, 42, 0.12));
    }

    .settings-page-heading,
    .account-settings-section-heading {
        flex-wrap: wrap;
    }

    .settings-control-card,
    .account-settings-section,
    .app-page-card {
        max-width: 100%;
    }

    .support-inbox-workspace {
        min-width: 0;
        max-width: 100%;
    }
}

/* =========================================================
   PHONE LAYOUT
   ========================================================= */

@media (max-width: 700px) {
    body:not(.logged-out) {
        padding: 10px;
    }

    body:not(.logged-out) #logged-in-controls {
        top: 12px !important;
        left: 12px !important;
    }

    body:not(.logged-out) :is(.search-position, #template-controls, main) {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        padding-inline: 0 !important;
    }

    body:not(.logged-out) .fumidesk-workspace-page-title {
        margin-top: 54px;
        font-size: 22px;
    }

    body:not(.logged-out) .fumidesk-workspace-toolbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        width: 100%;
    }

    body:not(.logged-out) .fumidesk-toolbar-left {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 44px;
        width: 100%;
    }

    body:not(.logged-out) .fumidesk-toolbar-actions {
        display: flex;
        align-self: end;
        margin: 0;
    }

    body:not(.logged-out) #template-controls {
        flex-direction: column !important;
        margin-top: 18px !important;
    }

    body:not(.logged-out) #area-navigation {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 2px 2px 8px;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }

    body:not(.logged-out) #area-navigation > * {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }

    body:not(.logged-out) #split-view-controls,
    body:not(.logged-out) #split-view-button {
        width: 100% !important;
    }

    body:not(.logged-out) #template-container .card:not(.defendant-card):not(.library-list-card) {
        width: 100%;
        height: auto !important;
        min-height: 250px;
    }

    body:not(.logged-out) :is(.card-title, .card-title-actions, .dashboard-section-title, .library-category-page-heading) {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    body:not(.logged-out) :is(.card-actions, .template-actions, .library-list-actions) {
        max-width: 100%;
        flex-wrap: wrap;
    }

    .settings-page,
    .settings-subpage,
    .help-center-page.settings-subpage {
        padding: 14px 0 28px !important;
    }

    .settings-card {
        grid-template-columns: 36px minmax(0, 1fr) auto 16px;
        min-height: 78px;
        padding: 13px !important;
    }

    .settings-card > :is(.settings-card-badge, small):not(.settings-card-arrow) {
        max-width: 100%;
    }

    .settings-card-arrow {
        grid-column: 4;
    }

    .account-settings-section {
        padding: 15px;
    }

    .account-profile-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .account-security-row {
        grid-template-columns: 38px minmax(0, 1fr);
    }

    .account-security-row > :is(button, .account-security-status) {
        grid-column: 2;
        justify-self: stretch;
    }

    .account-settings-actions,
    .account-security-dialog-actions,
    .fumi-docs-dialog-actions {
        flex-wrap: wrap;
    }

    .account-settings-actions > button,
    .account-security-dialog-actions > button,
    .fumi-docs-dialog-actions > button {
        flex: 1 1 140px;
        min-width: 0;
    }

    .erabisheet-page,
    .fumi-notes-page {
        padding: 18px 0 32px !important;
    }

    .erabisheet-page-header,
    .fumi-notes-page-header {
        align-items: flex-start;
    }

    .erabisheet-saved-bar {
        align-items: stretch;
        flex-direction: column;
    }

    .erabisheet-saved-actions,
    .erabisheet-copy-actions,
    .erabisheet-selection-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .erabisheet-saved-actions > button,
    .erabisheet-copy-actions > button,
    .erabisheet-selection-actions > button {
        width: 100%;
        min-width: 0;
    }

    .fumi-notes-workspace {
        min-height: 0;
        grid-template-columns: minmax(0, 1fr);
    }

    .fumi-notes-sidebar {
        max-height: 300px;
        overflow: auto;
        border-right: 0;
        border-bottom: 1px solid var(--ios-line, rgba(15, 23, 42, 0.12));
    }

    .fumi-notes-editor-topline,
    .fumi-notes-editor-actions {
        align-items: stretch;
        flex-wrap: wrap;
    }

    .fumi-notes-editor-card {
        padding: 12px;
    }

    .fumi-notes-editor {
        min-height: 52dvh;
    }

    .fumi-docs-menubar,
    .fumi-notes-toolbar {
        width: 100%;
        min-width: 0;
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
    }

    .fumi-docs-menubar > *,
    .fumi-notes-toolbar > * {
        flex-shrink: 0;
    }

    .site-footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }
}

@media (max-width: 440px) {
    body:not(.logged-out) .fumidesk-workspace-toolbar {
        grid-template-columns: minmax(0, 1fr);
    }

    body:not(.logged-out) .fumidesk-toolbar-actions {
        justify-content: flex-end;
    }

    .erabisheet-page-header,
    .fumi-notes-page-title {
        gap: 8px;
    }

    .erabisheet-title-mark,
    .fumi-notes-page-icon {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
    }

    .erabisheet-page-header p:last-child,
    .fumi-notes-page-title > div > span {
        font-size: 12px;
    }

    .fumi-notes-page-header {
        flex-direction: column;
    }

    .fumi-notes-new {
        width: 100%;
    }

    .erabisheet-saved-actions,
    .erabisheet-copy-actions,
    .erabisheet-selection-actions {
        grid-template-columns: minmax(0, 1fr);
    }

    .settings-card {
        grid-template-columns: 32px minmax(0, 1fr) auto 16px;
        gap: 9px !important;
    }
}

/* Floating Companion must also fit when resized to a narrow window. */
@media (max-width: 520px) {
    .ft-shell,
    .fumi-notes-companion,
    .erabisheet-floating-panel {
        min-width: 0 !important;
        max-width: 100vw !important;
    }

    .ft-header,
    .ft-tabs,
    .ft-body {
        min-width: 0;
    }

    .fumi-notes-companion .fumi-notes-toolbar {
        overflow-x: auto;
        flex-wrap: nowrap;
    }
}