/* 報表 NAV（桌面維持原樣） */
.report-nav{
    display:flex;
    flex-direction:column;
    gap:8px;
    width:100%;
}
.report-row{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:6px;
}
.report-group{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
}

/* 按鈕外觀（仿 camps） */
.btn-report{
    border:1px solid #334155;
    color:#e5e7eb;
    background:#111827;
    border-radius:8px;
    padding:8px 12px;
    cursor:pointer;
    white-space:nowrap;
    min-width:64px;
    font-size:14px;
}

.report-row[data-row="month"] .btn-report{
    width:64px;
    min-width:64px;
}

.btn-report.active{ background:#2563eb; color:#fff; border-color:#2563eb; }
.btn-report:disabled,
.btn-report.disabled{ opacity:.45; cursor:not-allowed; filter:grayscale(.1); }

/* 月份列按鈕略小 */
.report-row[data-row="month"] .btn-report{ padding:6px 10px; min-width:40px; }

/* 手機置底：固定三排，且每排單行橫向「等分滿版」 */
@media (max-width:1200px){
    .report-row[data-row="month"] .report-group{
        gap:2px;
    }
}

@media (max-width:900px){

    .report-row[data-row="month"] .btn-report{
        width:42px;
        min-width:42px;
    }

    .report-row[data-row="month"] .report-group{
        gap:1px;
    }

}

@media (max-width:600px){
    #reportsContent{ padding-bottom:120px; }

    .report-row{
        display:grid;
        width:100%;
        gap:6px;
        align-items:stretch;
    }

    .report-row[data-row="recent"] .report-group{
        grid-template-columns: repeat(2, 1fr);
        display:grid;
        width:100%;
        gap:6px;
    }

    .report-row[data-row="year"] .report-group{
        grid-template-columns: repeat(3, 1fr);
        display:grid;
        width:100%;
        gap:6px;
    }

    .report-row[data-row="month"] .report-group{
        display:grid;
        width:100%;
        grid-template-columns: repeat(13, 1fr);
        gap:4px;
    }

    .report-row[data-row="week"] .report-group{
        display:grid;
        width:100%;
        grid-template-columns: repeat(7, 1fr);
        gap:6px;
    }

    /* 讓每顆按鈕撐滿格子，不允許換行造成變成一顆一排 */
    .report-row .btn-report{
        width:100%;
        min-width:0;
        justify-content:center;
        padding:6px 6px;
        font-size:12.5px;
    }

    /* month 容器設為 grid：7 欄、2 列（由 auto-rows 決定列高） */
    .report-row[data-row="month"] .report-group{
        display: grid;
        grid-template-columns: repeat(7, 1fr); /* 每列 7 等分 */
        grid-auto-rows: 40px; /* 每列高度，可改成你要的 px 或 minmax(…) */
        gap: 6px;
        width: 100%;
    }

    /* 按鈕基本樣式（讓 grid 可以正確壓縮） */
    .report-row[data-row="month"] .btn-report{
        min-width: 0;            /* 必須，否則會撐爆格子 */
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-flex;    /* 讓 justify-content 等屬性可用 */
        align-items: center;
        justify-content: center;
        padding: 6px 8px;
        box-sizing: border-box;
    }

    /* ALL 按鈕＝第一個按鈕，佔據第 1 欄 且跨兩列（1 / 3） */
    .report-row[data-row="month"] .report-group .btn-report:nth-child(1){
        grid-column: 1 / 2; /* 在第一欄 */
        grid-row: 1 / 3;    /* 由第 1 列跨到第 3 列（等於佔兩列） */
        align-self: stretch; /* 讓按鈕延展到整個跨列高度 */
    }
}

/* 新增：報表內容也撐滿高度，讓頁腳貼底 */
.reports-content{
    flex: 1 0 auto;
    max-width: 1280px;
    margin: 200px auto 24px;
    padding: 0 16px;
}

/* 三排卡片：期間/非訂單數/訂單數 */
.report-card.simple.three-rows{
    background:#fff;
    border:1px solid var(--border);
    border-radius:16px;
    padding:28px;
    color:var(--text);
    box-shadow:0 2px 6px rgba(0,0,0,.06);
}

/* 每排為一個 grid，間距一致 */
.report-card.simple.three-rows .row{
    display:grid;
    gap:20px;
    margin-bottom:20px;
}

/* 第1排：統計期間獨立一欄置左 */
.report-card.simple.three-rows .row.period{
    grid-template-columns: 1fr;
    justify-items: center;    /* 水平置中 */
    text-align: center;       /* 內文字置中 */
}

/* 第2排：非訂單數（5 欄） */
.report-card.simple.three-rows .row.metrics{
    grid-template-columns: repeat(5, minmax(0,1fr));
}

/* 第3排：訂單數（5 欄） */
.report-card.simple.three-rows .row.orders{
    grid-template-columns: repeat(5, minmax(0,1fr));
}

/* 項目：標籤上、值下 */
.report-card.simple.three-rows .item{
    display:flex;
    flex-direction:column;
    gap:12px;
    padding:12px 8px;
    background:transparent;
    min-width: 0; /* 允許子元素壓縮 */
}
.report-card.simple.three-rows .k{
    color:var(--muted);
    font-size:16px;
}
.report-card.simple.three-rows .v{
    font-size: clamp(14px, 2.2vw, 28px); /* 過長時隨容器縮小 */
    font-weight:800;
    color:#111827;
    line-height:1.3;
    white-space: nowrap;         /* 不換行 */
    overflow: hidden;            /* 超出隱藏（配合縮小過程避免抖動） */
    text-overflow: clip;
    max-width: 100%;
    display: inline-block;
    transform-origin: left center;
}

/* 針對 period 的值：可置中縮放 */
.report-card.simple.three-rows .row.period .v{
    transform-origin: center center;
}

/* 警示 */
.report-card.simple.three-rows .warn{
    margin-top:12px;
    padding:12px 14px;
    border-radius:10px;
    background:#fff7ed;
    color:#9a3412;
    border:1px solid #fed7aa;
    font-size:16px;
}

/* 響應式欄數調整 */
@media (max-width:1200px){

    .reports-content{
        margin: 160px auto 24px;
    }

    .report-card.simple.three-rows .v{
        font-size: clamp(15px, 4vw, 22px);
    }
    .report-card.simple.three-rows .k{
        font-size:15px;
    }

    .report-card.simple.three-rows .row.metrics{
        grid-template-columns: repeat(4, minmax(0,1fr));
    }
    .report-card.simple.three-rows .row.orders{
        grid-template-columns: repeat(4, minmax(0,1fr));
    }
}
@media (max-width:600px){
    .reports-content{
        margin: 16px auto 24px;
    }
    .report-card.simple.three-rows{
        padding:10px;
    }
    .report-card.simple.three-rows .v{
        font-size: clamp(13px, 4vw, 22px);
    }
    .report-card.simple.three-rows .k{
        font-size:15px;
    }
    .report-card.simple.three-rows .row.metrics{
        grid-template-columns: repeat(3, minmax(0,1fr));
    }
    .report-card.simple.three-rows .row.orders{
        grid-template-columns: repeat(3, minmax(0,1fr));
    }
}