/* static/css/gantt/layout_responsive.css */

@media (max-width: 48rem) {
    .page {
        padding: 0.625rem 0.75rem 0.875rem;
        gap: 0.875rem;
    }

    .card,
    .sheet-tabs-card {
        padding: 0.625rem 0.75rem 0.5rem;
        border-radius: 1rem;
    }

    .toolbar,
    .sheet-tabs-toolbar {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.5rem;
        margin-bottom: 0.375rem;
    }

    .toolbar h2 {
        font-size: 1rem;
    }

    .view-buttons,
    .sheet-tabs {
        width: 100%;
    }

    .view-btn {
        padding: 0.5625rem 0.875rem;
        font-size: 0.875rem;
    }

    .sheet-tab-button,
    .sheet-tab-add-button,
    .sheet-tab-delete-button {
        font-size: 0.75rem;
        padding: 0.5rem 0.75rem;
    }

    .sheet-tab-add-button,
    .sheet-tab-delete-button {
        min-width: 2.25rem;
        font-size: 1rem;
    }

    .help-text {
        margin-top: 0.3125rem;
        font-size: 0.875rem;
    }

    .main-split,
    .main-split.show-both,
    .main-split.show-gantt-only,
    .main-split.show-pl-only {
        grid-template-columns: 1fr;
        border-left: none;
        border-right: none;
        padding-left: 0;
        padding-right: 0;
    }

    .pane-gantt,
    .pane-pl,
    .collapsed-pane-handle-left,
    .collapsed-pane-handle-right {
        grid-column: auto;
    }

    .main-split.show-gantt-only .pane-pl,
    .main-split.show-pl-only .pane-gantt {
        display: none;
    }

    .collapsed-pane-handle {
        margin-top: 0;
    }

    .pl-card {
        min-height: auto;
    }

    .pl-toggle {
        grid-template-columns: 1.5rem 1fr;
    }

    .pl-toggle-total {
        grid-column: 2;
        text-align: left;
    }

    .pl-profit-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .cf-point-card,
    .cf-point-empty-card {
        width: 16rem;
        min-width: 16rem;
    }

    /* 修正: 資金繰りは狭幅時に必ず2段表示にする */
    #cf-split.main-split.show-gantt-only .pane-gantt,
    #cf-split.main-split.show-gantt-only .pane-pl,
    #cf-split.main-split.show-pl-only .pane-gantt,
    #cf-split.main-split.show-pl-only .pane-pl,
    #cf-split.main-split.show-both .pane-gantt,
    #cf-split.main-split.show-both .pane-pl {
        display: flex !important;
    }

    #cf-split.main-split.show-gantt-only,
    #cf-split.main-split.show-pl-only,
    #cf-split.main-split.show-both {
        grid-template-columns: 1fr;
        border-left: none;
        border-right: none;
        padding-left: 0;
        padding-right: 0;
    }

    #cf-split .pane-gantt,
    #cf-split .pane-pl {
        grid-column: auto;
    }

    #cf-split .collapsed-pane-handle-left,
    #cf-split .collapsed-pane-handle-right {
        display: none !important;
    }
}