/**
 * 後台響應式 - 檔案分布 Modal
 *
 * 由 admin-responsive.css 依原行序拆出；載入順序見 src/lib/assets.ts 的
 * ADMIN_STYLES，順序即 cascade 順序，不可調換。
 */

/* ==================== 檔案分布 Modal 手機版優化 ==================== */

/* 中等手機尺寸 (max-width: 48rem / 768px) */
@media (max-width: 48rem) {
    /* Modal 整體調整 */
    #fileDistributionModal .modal-content {
        max-height: 90vh;
        display: flex;
        flex-direction: column;
    }

    #fileDistributionModal .modal-body {
        flex: 1;
        overflow-y: auto;
        padding: 0.75rem;
    }

    /* 區塊標題優化 - 標題與大小同一行 */
    .file-distribution-section-header {
        padding: 0.625rem 0.75rem;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between;
        gap: 0.5rem;
    }

    .file-distribution-section-header h4 {
        font-size: 0.875rem;
        flex: 1;
        min-width: 0;
    }

    .file-distribution-total {
        font-size: 0.75rem;
        flex-shrink: 0;
    }

    .total-label {
        display: none;
    }

    .total-value {
        font-size: 0.875rem;
        font-weight: 700;
        background: linear-gradient(135deg, rgba(212, 165, 32, 0.15) 0%, rgba(184, 134, 11, 0.1) 100%);
        padding: 0.25rem 0.625rem;
        border-radius: 0.375rem;
        color: #d4a520;
    }

    .light-theme .total-value {
        background: linear-gradient(135deg, rgba(212, 165, 32, 0.12) 0%, rgba(184, 134, 11, 0.08) 100%);
        color: #8b6914;
    }

    /* 表格轉換為卡片式佈局 */
    .file-distribution-table {
        display: block;
    }

    .file-distribution-table thead {
        display: none;
    }

    .file-distribution-table tbody {
        display: flex;
        flex-direction: column;
        gap: 0.375rem;
        padding: 0.5rem;
    }

    .file-distribution-table tbody tr {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.625rem 0.75rem;
        background: rgba(255, 255, 255, 0.03);
        border-radius: 0.5rem;
        border: 1px solid rgba(255, 255, 255, 0.06);
        gap: 0.75rem;
    }

    .light-theme .file-distribution-table tbody tr {
        background: rgba(0, 0, 0, 0.02);
        border-color: rgba(0, 0, 0, 0.06);
    }

    .file-distribution-table tbody tr:hover {
        background: rgba(212, 165, 32, 0.08);
        border-color: rgba(212, 165, 32, 0.2);
    }

    .light-theme .file-distribution-table tbody tr:hover {
        background: rgba(212, 165, 32, 0.06);
        border-color: rgba(212, 165, 32, 0.15);
    }

    /* 檔案名稱欄位 */
    .file-distribution-table tbody tr td:first-child {
        flex: 1;
        min-width: 0;
        padding: 0;
        border: none;
    }

    .file-distribution-sections {
        grid-template-columns: 1fr;
    }

    .file-distribution-table tbody tr td:first-child .file-name {
        display: block;
        font-size: 0.6875rem;
        line-height: 1.4;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #f5c542;
    }

    .light-theme .file-distribution-table tbody tr td:first-child .file-name {
        color: #8b6914;
    }

    /* 檔案大小欄位 */
    .file-distribution-table tbody tr td:last-child {
        flex-shrink: 0;
        padding: 0;
        border: none;
        text-align: right;
        font-size: 0.8125rem;
        font-weight: 600;
        color: #d4a520;
        white-space: nowrap;
    }

    .light-theme .file-distribution-table tbody tr td:last-child {
        color: #8b6914;
    }

    /* 表格容器高度調整 */
    .file-distribution-table-container {
        max-height: 220px;
        border-radius: 0 0 0.5rem 0.5rem;
    }
}

/* 小型手機尺寸 (max-width: 30rem / 480px) */
@media (max-width: 30rem) {
    /* Modal 調整 */
    #fileDistributionModal .modal-body {
        padding: 0.5rem;
    }

    /* 區塊間距縮小 */
    .file-distribution-sections {
        gap: 1rem;
    }

    /* 區塊標題更緊湊 */
    .file-distribution-section-header {
        padding: 0.5rem 0.625rem;
    }

    .file-distribution-section-header h4 {
        font-size: 0.8125rem;
        gap: 0.375rem;
    }

    .file-distribution-section-header h4 i {
        font-size: 0.875rem;
    }

    .file-distribution-total {
        font-size: 0.6875rem;
    }

    .total-value {
        font-size: 0.8125rem;
        padding: 0.25rem 0.5rem;
    }

    /* 卡片式佈局細節優化 */
    .file-distribution-table tbody {
        padding: 0.375rem;
        gap: 0.25rem;
    }

    .file-distribution-table tbody tr {
        padding: 0.5rem 0.625rem;
        border-radius: 0.375rem;
    }

    .file-distribution-table tbody tr td:first-child .file-name {
        font-size: 0.625rem;
        line-height: 1.3;
    }

    .file-distribution-table tbody tr td:last-child {
        font-size: 0.75rem;
        min-width: 4rem;
    }

    /* 表格容器高度 */
    .file-distribution-table-container {
        max-height: 180px;
    }

    /* Modal Footer */
    #fileDistributionModal .modal-footer {
        padding: 0.625rem 0.75rem;
    }

    #fileDistributionModal .modal-footer .btn {
        font-size: 0.8125rem;
        padding: 0.625rem 1rem;
    }
}