@import '_content/Blazored.Modal/Blazored.Modal.bundle.scp.css';
@import '_content/Blazored.Toast/Blazored.Toast.bundle.scp.css';

/* /Components/DialogModal/BookUploadConfirmDialogModal.razor.rz.scp.css */
/* 容器 */
.buc-modal[b-ood12f0m0l] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 280px;
    max-width: 100%;
}

/* 標頭 */
.buc-header[b-ood12f0m0l] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.buc-title[b-ood12f0m0l] {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
}

.buc-badge[b-ood12f0m0l] {
    padding: 2px 8px;
    border-radius: 999px;
    background: #eef2ff;
    color: #3730a3;
    font-size: 12px;
    font-weight: 600;
}

/* 表格外框：限制高度可捲動、桌機橫向可捲動以免擠爆 */
.buc-table-wrap[b-ood12f0m0l] {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    max-height: min(60vh, 540px);
    overflow: auto;
    outline: none;
}

/* 表格本體 */
.buc-table[b-ood12f0m0l] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
}

    /* 表頭：黏在頂端 */
    .buc-table thead th[b-ood12f0m0l] {
        position: sticky;
        top: 0;
        z-index: 1;
        background: #fafafa;
        color: #111827;
        text-align: left;
        font-weight: 700;
        padding: 10px 12px;
        border-bottom: 1px solid #e5e7eb;
        white-space: nowrap;
    }

    /* 表身 */
    .buc-table tbody td[b-ood12f0m0l] {
        padding: 8px 12px;
        border-bottom: 1px solid #f3f4f6;
        vertical-align: top;
    }

    .buc-table tbody tr:nth-child(even) td[b-ood12f0m0l] {
        background: #fcfcff;
    }

    .buc-table tbody tr:hover td[b-ood12f0m0l] {
        background: #f8fafc;
    }

/* 置右 */
.buc-right[b-ood12f0m0l] {
    text-align: right;
}

/* 序號欄 */
.buc-index[b-ood12f0m0l] {
    color: #6b7280;
    width: 48px;
    white-space: nowrap;
}

/* 等寬字體：條碼 & ISBN */
.buc-mono[b-ood12f0m0l] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* 文字過長省略 */
.buc-ellipsis[b-ood12f0m0l] {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 空狀態 */
.buc-empty[b-ood12f0m0l] {
    padding: 18px 14px;
    border: 1px dashed #e5e7eb;
    border-radius: 10px;
    color: #6b7280;
    text-align: center;
}

/* 底部按鈕列 */
.buc-footer[b-ood12f0m0l] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 4px;
}

/* 按鈕 */
.buc-btn[b-ood12f0m0l] {
    appearance: none;
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 8px 14px;
    font-weight: 600;
    cursor: pointer;
    transition: filter .15s ease, transform .02s ease;
}

    .buc-btn:active[b-ood12f0m0l] {
        transform: translateY(1px);
    }

    .buc-btn:disabled[b-ood12f0m0l] {
        opacity: .5;
        cursor: not-allowed;
    }

.buc-btn-primary[b-ood12f0m0l] {
    background: #4f46e5;
    color: white;
}

    .buc-btn-primary:hover[b-ood12f0m0l] {
        filter: brightness(1.05);
    }

.buc-btn-secondary[b-ood12f0m0l] {
    background: #ffffff;
    color: #111827;
    border-color: #e5e7eb;
}

    .buc-btn-secondary:hover[b-ood12f0m0l] {
        filter: brightness(0.98);
    }

/* 小螢幕優化：讓某些欄位縮一點 */
@media (max-width: 640px) {
    .buc-ellipsis[b-ood12f0m0l] {
        max-width: 140px;
    }

    .buc-table thead th[b-ood12f0m0l],
    .buc-table tbody td[b-ood12f0m0l] {
        padding: 8px 10px;
    }
}

/* 既有樣式略…（沿用你前一版） */

/* 錯誤提示條 */
.buc-alert-error[b-ood12f0m0l] {
    padding: 10px 12px;
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #991b1b;
    border-radius: 10px;
    font-size: 14px;
}

/* 行/儲存格 反紅 */
.buc-row-dup td[b-ood12f0m0l] {
    background: #fff1f2; /* 淡紅底 */
}

.buc-dup[b-ood12f0m0l] {
    background: #fee2e2 !important;
    color: #991b1b;
    font-weight: 600;
}

/* 小紅標籤 */
.buc-chip-dup[b-ood12f0m0l] {
    display: inline-block;
    margin-left: 8px;
    padding: 0 6px;
    border-radius: 999px;
    background: #dc2626;
    color: #fff;
    font-size: 12px;
    line-height: 18px;
    vertical-align: middle;
}

/* 你既有的樣式沿用。以下為新增/延伸 */

.buc-err[b-ood12f0m0l] {
    background: #fff7ed !important; /* 橘淡底 */
    color: #9a3412;
    font-weight: 600;
}

.buc-chip-err[b-ood12f0m0l] {
    display: inline-block;
    margin-left: 8px;
    padding: 0 6px;
    border-radius: 999px;
    background: #f97316; /* 橘 */
    color: #fff;
    font-size: 12px;
    line-height: 18px;
    vertical-align: middle;
}

/* /Components/DialogModal/ImageClipboardModal.razor.rz.scp.css */
.icm-root[b-9acsfpkpkd] {
    outline: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: min(640px, 92vw);
}

.icm-header[b-9acsfpkpkd] {
    padding: 2px 2px 0;
}

.icm-title[b-9acsfpkpkd] {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: .3px;
}

.icm-sub[b-9acsfpkpkd] {
    font-size: 13px;
    opacity: .75;
    margin-top: 4px;
}

.icm-body[b-9acsfpkpkd] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.icm-paste-zone[b-9acsfpkpkd] {
    position: relative;
    border: 1px dashed rgba(0,0,0,.18);
    border-radius: 16px;
    background: rgba(255,255,255,.75);
    min-height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    user-select: none;
}

    .icm-paste-zone:focus-within[b-9acsfpkpkd],
    .icm-root:focus .icm-paste-zone[b-9acsfpkpkd] {
        border-color: rgba(37, 99, 235, .45);
        box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
    }

.icm-hint[b-9acsfpkpkd] {
    text-align: center;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.icm-hint-emoji[b-9acsfpkpkd] {
    font-size: 28px;
}

.icm-hint-text[b-9acsfpkpkd] {
    font-size: 14px;
    font-weight: 650;
}

.icm-hint-tip[b-9acsfpkpkd] {
    font-size: 12px;
    opacity: .7;
}

.icm-preview[b-9acsfpkpkd] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.01));
}

.icm-overlay[b-9acsfpkpkd] {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,.65);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
}

.icm-spinner[b-9acsfpkpkd] {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    border: 3px solid rgba(0,0,0,.12);
    border-top-color: rgba(37,99,235,.9);
    animation: icmspin-b-9acsfpkpkd 0.8s linear infinite;
}

@keyframes icmspin-b-9acsfpkpkd {
    to {
        transform: rotate(360deg);
    }
}

.icm-overlay-text[b-9acsfpkpkd] {
    font-size: 13px;
    opacity: .8;
}

.icm-error[b-9acsfpkpkd] {
    border: 1px solid rgba(220,38,38,.25);
    background: rgba(220,38,38,.06);
    color: #b91c1c;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 13px;
}

.icm-actions[b-9acsfpkpkd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 2px;
}

.icm-actions-right[b-9acsfpkpkd] {
    display: flex;
    gap: 10px;
    align-items: center;
}

.icm-btn[b-9acsfpkpkd] {
    border: 1px solid rgba(0,0,0,.10);
    background: rgba(255,255,255,.85);
    padding: 9px 14px;
    border-radius: 12px;
    font-size: 13px;
    cursor: pointer;
    transition: transform .06s ease, background-color .12s ease, border-color .12s ease, opacity .12s ease;
}

    .icm-btn:active[b-9acsfpkpkd] {
        transform: scale(.98);
    }

    .icm-btn:disabled[b-9acsfpkpkd] {
        opacity: .55;
        cursor: not-allowed;
    }

.icm-btn--primary[b-9acsfpkpkd] {
    background: rgba(37,99,235,.95);
    border-color: rgba(37,99,235,.95);
    color: #fff;
}

.icm-btn--ghost[b-9acsfpkpkd] {
    background: rgba(255,255,255,.65);
}
/* /Components/DialogModal/ImageViewerModal.razor.rz.scp.css */

.imagecontainer[b-aoux6a9udc] {
    position: relative;
    text-align: center;
    background-color: black;
}

.zoomed[b-aoux6a9udc] {
    transform: scale(1.8);
    cursor: zoom-out;
}

.closebtn[b-aoux6a9udc] {
    position: fixed;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    background-color: rgba(200, 200, 200);
    color: black;
    border: none;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 16px;
    border-radius: 5px;

}


img[b-aoux6a9udc] {
    max-height: 90vh;
    transition: transform 0.3s ease-in-out;
    cursor: zoom-in;
}

@media (max-width: 768px) {
    img[b-aoux6a9udc] {
        max-height: 80vh;
    }
}

.downloadbtn[b-aoux6a9udc] {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 9999;
    background-color: rgba(200, 200, 200, 0.8);
    color: black;
    border: none;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 14px;
    border-radius: 5px;
    transition: background-color 0.2s ease;
}

    .downloadbtn:hover[b-aoux6a9udc] {
        background-color: rgba(255, 255, 255, 1);
    }

.imagecontainer[b-aoux6a9udc] {
    background-image: linear-gradient(45deg, #e0e0e0 25%, transparent 75%), linear-gradient(-45deg, #e0e0e0 25%, transparent 75%), linear-gradient(45deg, transparent 25%, #e0e0e0 75%), linear-gradient(-45deg, transparent 75%, #e0e0e0 75%);
    background-size: 40px 40px;
    background-position: 0 0, 0 20px, 20px -20px, -20px 0px;
}
/* /Components/DialogModal/InfoQuestionModal.razor.rz.scp.css */
.btn-selected[b-kd7ox718er] {
    background-color: #17a2b8; /* Bootstrap info 顏色 */
    color: white;
    border-color: #17a2b8;
    box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.25);
}

    .btn-selected:hover[b-kd7ox718er] {
        background-color: #138496;
        border-color: #117a8b;
    }
/* /Components/DialogModal/PromptModal.razor.rz.scp.css */
/* ===== Root ===== */
.sheet[b-huh491gg7e] {
    width: min(520px, 92vw);
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 18px 60px rgba(0,0,0,.18);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sheet-big[b-huh491gg7e] {
    width: min(1000px);
}

.sheet-normal[b-huh491gg7e] {
    width: min(700px);
}

/* ===== Topbar ===== */
.topbar[b-huh491gg7e] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(15,23,42,.08);
    background: linear-gradient( 180deg, rgba(248,250,252,.95), rgba(255,255,255,1) );
}

.topbar-left[b-huh491gg7e],
.topbar-center[b-huh491gg7e],
.topbar-right[b-huh491gg7e] {
    display: flex;
    align-items: center;
}

.topbar-center[b-huh491gg7e] {
    justify-content: center;
}

.title[b-huh491gg7e] {
    margin: 0;
    font-size: 16px;
    /*font-weight: 700;*/
    font-weight: bolder;
    color: rgba(15,23,42,.9);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===== Icon Button (image upload) ===== */
.iconbtn[b-huh491gg7e] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid rgba(15,23,42,.12);
    background: rgba(148,163,184,.12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform .08s ease, box-shadow .12s ease, background .12s ease;
}

    .iconbtn img[b-huh491gg7e] {
        width: 18px;
        height: 18px;
        opacity: .85;
    }

    .iconbtn:hover[b-huh491gg7e] {
        background: rgba(148,163,184,.18);
        box-shadow: 0 6px 16px rgba(0,0,0,.12);
        transform: translateY(-1px);
    }

/* ===== Text button (Cancel) ===== */
.textbtn[b-huh491gg7e] {
    background: transparent;
    border: none;
    font-size: 14px;
    font-weight: 700;
    color: rgba(15,23,42,.65);
    cursor: pointer;
    padding: 6px 8px;
}

    .textbtn:hover[b-huh491gg7e] {
        color: rgba(15,23,42,.9);
    }

/* ===== Subtitle ===== */
.subtitle[b-huh491gg7e] {
    margin: 10px 16px 0;
    font-size: 13px;
    color: rgba(15,23,42,.6);
    line-height: 1.5;
}

/* ===== Body ===== */
.body[b-huh491gg7e] {
    padding: 14px 16px;
    flex: 1;
}

.inputarea[b-huh491gg7e] {
    width: 100%;
    min-height: 140px;
    resize: vertical;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(15,23,42,.14);
    background: rgba(255,255,255,.98);
    font-size: 14px;
    line-height: 1.6;
    color: rgba(15,23,42,.9);
    outline: none;
    transition: border-color .12s ease, box-shadow .12s ease;
}

    .inputarea[b-huh491gg7e]::placeholder {
        color: rgba(15,23,42,.45);
    }

    .inputarea:focus[b-huh491gg7e] {
        border-color: rgba(59,130,246,.55);
        box-shadow: 0 0 0 4px rgba(59,130,246,.15);
    }

/* ===== Footer ===== */
.footer[b-huh491gg7e] {
    padding: 14px 16px;
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid rgba(15,23,42,.08);
    background: linear-gradient( 0deg, rgba(248,250,252,.95), rgba(255,255,255,1) );
}

/* ===== Primary Button ===== */
.btn[b-huh491gg7e] {
    height: 38px;
    padding: 0 18px;
    border-radius: 999px;
    border: 1px solid rgba(15,23,42,.14);
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: transform .06s ease, box-shadow .12s ease, background .12s ease;
}

    .btn.primary[b-huh491gg7e] {
        background: rgba(59,130,246,.92);
        border-color: rgba(37,99,235,.95);
        color: #fff;
    }

        .btn.primary:hover[b-huh491gg7e] {
            box-shadow: 0 10px 26px rgba(59,130,246,.35);
            transform: translateY(-1px);
        }

/* ===== Hidden ===== */
.hidden[b-huh491gg7e] {
    display: none;
}

/* ===== Mobile ===== */
@media (max-width: 640px) {
    .sheet-big[b-huh491gg7e],
    .sheet-normal[b-huh491gg7e] {
        width: 100%;
    }

    .inputarea[b-huh491gg7e] {
        min-height: 120px;
    }
}
/* /Components/DialogModal/SelectDateAndTimeModal.razor.rz.scp.css */
/* 外層 */
.sdtm-wrap[b-4tq8g2ajgw] {
    padding: 12px 16px 16px;
    display: flex;
    justify-content: center;
}

.modal-title[b-4tq8g2ajgw] {
    margin: 0 16px 8px;
    font-size: 18px;
    font-weight: 800;
}

/* 卡片 */
.sdtm-card[b-4tq8g2ajgw] {
    width: 100%;
    max-width: 640px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    border: 1px solid #eef0f3;
    padding: 16px;
}

/* 欄位排列 */
.sdtm-grid[b-4tq8g2ajgw] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
}

@media (max-width: 560px) {
    .sdtm-grid[b-4tq8g2ajgw] {
        grid-template-columns: 1fr;
    }
}

.field[b-4tq8g2ajgw] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.label[b-4tq8g2ajgw] {
    font-size: 13px;
    color: #374151;
    font-weight: 700;
}

.date-input[b-4tq8g2ajgw],
.time-input[b-4tq8g2ajgw] {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    background: #fff;
    font-size: 14px;
    outline: none;
    transition: box-shadow .12s ease, border-color .12s ease;
}

    .date-input:focus[b-4tq8g2ajgw],
    .time-input:focus[b-4tq8g2ajgw] {
        border-color: #c6d0e2;
        box-shadow: 0 0 0 4px rgba(100,116,139,.15);
    }

.hint[b-4tq8g2ajgw] {
    font-size: 12px;
    color: #6b7280;
}

/* 快速範圍 */
.quick[b-4tq8g2ajgw] {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.chip[b-4tq8g2ajgw] {
    border: 1px solid #e5e7eb;
    background: #fafafa;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 12px;
    cursor: pointer;
    transition: transform .08s ease, box-shadow .08s ease;
}

    .chip:hover[b-4tq8g2ajgw] {
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(0,0,0,.08);
    }

/* 預覽 */
.preview[b-4tq8g2ajgw] {
    margin-top: 12px;
    border-top: 1px solid #f3f4f6;
    padding-top: 12px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px;
}

@media (max-width: 560px) {
    .preview[b-4tq8g2ajgw] {
        grid-template-columns: 1fr;
    }
}

.pv-item[b-4tq8g2ajgw] {
    display: flex;
    gap: 8px;
    align-items: baseline;
}

.pv-label[b-4tq8g2ajgw] {
    font-size: 12px;
    color: #6b7280;
    min-width: 44px;
}

.pv-value[b-4tq8g2ajgw] {
    font-weight: 700;
}

.error[b-4tq8g2ajgw] {
    grid-column: 1 / -1;
    color: #b91c1c;
    background: #fef2f2;
    border: 1px solid #fee2e2;
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 13px;
}

/* 動作列 */
.actions[b-4tq8g2ajgw] {
    margin-top: 16px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.btn[b-4tq8g2ajgw] {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    font-size: 14px;
    padding: 10px 14px;
    cursor: pointer;
    background: #fff;
}

    .btn.ghost[b-4tq8g2ajgw] {
        background: #f9fafb;
    }

    .btn.primary[b-4tq8g2ajgw] {
        background: #111827;
        color: #fff;
        border-color: #111827;
    }

    .btn:disabled[b-4tq8g2ajgw] {
        opacity: .5;
        cursor: not-allowed;
    }
/* /Components/DialogModal/SelectDateModal.razor.rz.scp.css */
.ds-container[b-46vb34nwcy] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 18px 20px 16px;
    min-width: 280px;
    max-width: 420px;
    box-sizing: border-box;
    background-color: rgba(255, 255, 255, 0.96);
    border-radius: 18px;
    border: 1px solid #ececec;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
}

/* 標題 */
.ds-title[b-46vb34nwcy] {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: #111827;
}

/* 內容區 */
.ds-body[b-46vb34nwcy] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ds-label[b-46vb34nwcy] {
    font-size: 13px;
    color: #3a3a3c;
    letter-spacing: 0.2px;
}

/* 日期輸入 */
.ds-input[b-46vb34nwcy] {
    appearance: none;
    height: 38px;
    padding: 0 10px;
    border-radius: 12px;
    border: 1px solid #dcdcdc;
    background-color: #f7f7f7;
    color: #111827;
    font-size: 14px;
    box-sizing: border-box;
    outline: none;
    transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}

    .ds-input:hover[b-46vb34nwcy] {
        background-color: #f3f3f3;
    }

    .ds-input:focus[b-46vb34nwcy] {
        background-color: #ffffff;
        border-color: #b9b9b9;
        box-shadow: 0 0 0 3px rgba(60, 60, 67, 0.12);
    }

/* 範圍提示 */
.ds-hint[b-46vb34nwcy] {
    font-size: 12px;
    color: #8e8e93;
}

/* 底部按鈕列 */
.ds-footer[b-46vb34nwcy] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 4px;
}

/* 按鈕 */
.ds-btn[b-46vb34nwcy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.2px;
    cursor: pointer;
    user-select: none;
    transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease, transform 80ms ease;
}

    .ds-btn:active[b-46vb34nwcy] {
        transform: scale(0.98);
    }

.ds-btn-primary[b-46vb34nwcy] {
    background-color: #2563eb;
    border-color: #1d4ed8;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.35);
}

    .ds-btn-primary:hover[b-46vb34nwcy] {
        background-color: #1d4ed8;
    }

.ds-btn-secondary[b-46vb34nwcy] {
    background-color: #ffffff;
    border-color: #d1d5db;
    color: #111827;
}

    .ds-btn-secondary:hover[b-46vb34nwcy] {
        background-color: #f3f4f6;
    }

.ds-btn:disabled[b-46vb34nwcy] {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
}

/* 窄螢幕小調整 */
@media (max-width: 400px) {
    .ds-container[b-46vb34nwcy] {
        padding-inline: 14px;
    }

    .ds-footer[b-46vb34nwcy] {
        justify-content: space-between;
    }
}
/* /Components/DialogModal/SelectMultiDatesModal.razor.rz.scp.css */
.mdm-modal[b-8jeqxxmvni] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 18px 14px;
    min-width: 320px;
    max-width: 520px;
    max-height: 80dvh;
    box-sizing: border-box;
    background-color: rgba(255, 255, 255, 0.96);
    border-radius: 18px;
    border: 1px solid #ececec;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
}

/* 標題 */
.mdm-title[b-8jeqxxmvni] {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: #111827;
}

/* 上半：基準日 + summary */
.mdm-header[b-8jeqxxmvni] {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
}

/* 基準日區塊 */
.mdm-base[b-8jeqxxmvni] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 180px;
}

.mdm-label[b-8jeqxxmvni] {
    font-size: 13px;
    color: #3a3a3c;
    letter-spacing: 0.2px;
}

.mdm-input[b-8jeqxxmvni] {
    appearance: none;
    height: 36px;
    padding: 0 10px;
    border-radius: 12px;
    border: 1px solid #dcdcdc;
    background-color: #f7f7f7;
    color: #111827;
    font-size: 14px;
    box-sizing: border-box;
    outline: none;
    transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}

    .mdm-input:hover[b-8jeqxxmvni] {
        background-color: #f3f3f3;
    }

    .mdm-input:focus[b-8jeqxxmvni] {
        background-color: #ffffff;
        border-color: #b9b9b9;
        box-shadow: 0 0 0 3px rgba(60, 60, 67, 0.12);
    }

.mdm-hint[b-8jeqxxmvni] {
    font-size: 12px;
    color: #8e8e93;
}

/* Summary 區塊 */
.mdm-summary[b-8jeqxxmvni] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-end;
    justify-content: center;
    flex: 1 0 auto;
    min-width: 160px;
}

.mdm-summary-line[b-8jeqxxmvni] {
    font-size: 13px;
    color: #3a3a3c;
}

.mdm-summary-count[b-8jeqxxmvni] {
    font-weight: 700;
    color: #111827;
}

.mdm-summary-weekend[b-8jeqxxmvni] {
    font-weight: 700;
    color: #e11d48; /* 紅色，週末數 */
}

/* 日期選擇網格：像月曆，一列 7 天，橫向排 */
.mdm-days-grid[b-8jeqxxmvni] {
    display: grid;
    grid-template-columns: repeat(7, minmax(56px, 1fr)); /* 7 欄：日~六 */
    gap: 6px;
    padding: 8px 4px 4px;
    border-radius: 12px;
    background-color: #f9fafb;
    box-sizing: border-box;
}

/* 單一天按鈕：吃滿 grid cell 寬度 */
.mdm-day[b-8jeqxxmvni] {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 100%; /* 吃滿一格 */
    height: 52px;
    padding: 4px 4px;
    border-radius: 12px;
    border: 1px solid transparent;
    background-color: #ffffff;
    cursor: pointer;
    box-sizing: border-box;
    font-size: 12px;
    transition: background-color 120ms ease, box-shadow 120ms ease, border-color 120ms ease, transform 80ms ease;
}

/* 平日 = 黑色，週末 = 灰色（維持原本設定） */
.mdm-day--weekday[b-8jeqxxmvni] {
    color: #111827;
}

.mdm-day--weekend[b-8jeqxxmvni] {
    color: #9ca3af;
}

.mdm-day:hover[b-8jeqxxmvni] {
    background-color: #f3f4f6;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.mdm-day--selected[b-8jeqxxmvni] {
    border-color: #2563eb;
    background-color: #e0ecff;
    box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.6);
}

    .mdm-day--selected .mdm-day-dow[b-8jeqxxmvni] {
        font-weight: 700;
    }

.mdm-day-date[b-8jeqxxmvni] {
    font-size: 13px;
    font-weight: 600;
}

.mdm-day-dow[b-8jeqxxmvni] {
    font-size: 11px;
    opacity: 0.9;
}

/* 手機時略縮卡片高度，不改 7 欄結構 */
@media (max-width: 480px) {
    .mdm-day[b-8jeqxxmvni] {
        height: 46px;
        padding: 3px 2px;
    }
}

/* 底部按鈕列 */
.mdm-footer[b-8jeqxxmvni] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 4px;
}

.mdm-btn[b-8jeqxxmvni] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.2px;
    cursor: pointer;
    user-select: none;
    transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease, transform 80ms ease;
}

    .mdm-btn:active[b-8jeqxxmvni] {
        transform: scale(0.98);
    }

.mdm-btn-primary[b-8jeqxxmvni] {
    background-color: #2563eb;
    border-color: #1d4ed8;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.35);
}

    .mdm-btn-primary:hover:not(:disabled)[b-8jeqxxmvni] {
        background-color: #1d4ed8;
    }

.mdm-btn-secondary[b-8jeqxxmvni] {
    background-color: #ffffff;
    border-color: #d1d5db;
    color: #111827;
}

    .mdm-btn-secondary:hover:not(:disabled)[b-8jeqxxmvni] {
        background-color: #f3f4f6;
    }

.mdm-btn:disabled[b-8jeqxxmvni] {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
}

/* RWD：窄螢幕時 Summary 拿到下一行 */
@media (max-width: 480px) {
    .mdm-header[b-8jeqxxmvni] {
        flex-direction: column;
        align-items: stretch;
    }

    .mdm-summary[b-8jeqxxmvni] {
        align-items: flex-start;
    }
}
/* /Components/DialogModal/SelectPhotoModal.razor.rz.scp.css */
.modal-container[b-gnasxvno8z] {
    display: grid;
    gap: 6px;
    padding: 0 20px;
    grid-template-columns: repeat(2, 1fr); /* 預設小尺寸，每排2張 */
}

.img-container[b-gnasxvno8z] {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s, border 0.2s;
    border: 6px solid #fff; /* 藍色邊框，可自行更換顏色 */
    cursor: pointer;
}

.img-content[b-gnasxvno8z] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.img-container:hover[b-gnasxvno8z] {
    transform: scale(1.05);
    border: 6px solid #007bff; /* 藍色邊框，可自行更換顏色 */
}

/* 大尺寸時每排6張 */
@media (min-width: 768px) {
    .modal-container[b-gnasxvno8z] {
        grid-template-columns: repeat(6, 1fr);
    }
}
/* /Components/DialogModal/SelectPhotosModal.razor.rz.scp.css */
.modal-container[b-9gxk0prqsk] {
    display: grid;
    gap: 6px;
    padding: 0 20px;
    grid-template-columns: repeat(var(--column-count, 2), 1fr); /* 小尺寸預設2，否則受變數控制 */
}

.img-container[b-9gxk0prqsk] {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    /*transition: transform 0.2s, border 0.1s;*/
    border: 6px solid #fff; /* 藍色邊框，可自行更換顏色 */
    cursor: pointer;
}

.img-content[b-9gxk0prqsk] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.selected-photo[b-9gxk0prqsk] {

    border: 6px solid #007bff; /* 藍色邊框，可自行更換顏色 */
}

/* 大尺寸時每排6張 */
@media (max-width: 767px) {
    .modal-container[b-9gxk0prqsk] {
        grid-template-columns: repeat(2, 1fr) !important; /* 小尺寸強制 2 張 */
    }

    .radio-group[b-9gxk0prqsk] {
        display: none;
    }
}
/* /Components/DialogModal/SelectStudentModal.razor.rz.scp.css */
/* ================================
   Select Student Modal (ssm)
   - Standalone CSS (no bootstrap)
   - Apple minimal
   - Large: modal 1200px, 6 cards/row
   - Small: modal 100%, 2 cards/row
   ================================ */

.ssm[b-12jqxf2z4x], .ssm *[b-12jqxf2z4x] {
    box-sizing: border-box;
}

/* 外層：在 modal 內維持合理寬度與捲動 */
.ssm[b-12jqxf2z4x] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    /* 小尺寸：100% */
    width: 100%;
    max-width: 100%;
    /* 內容可捲動（modal 內） */
    max-height: 80vh;
    overflow: auto;
    /* Apple-ish */
    background: #ffffff;
    border: 1px solid #eef2f7;
    border-radius: 18px;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.16);
    padding: 14px;
    color: #111827;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
}

    /* ===== Header（你 Razor 用 h5 + hover-box） ===== */
    .ssm > h5[b-12jqxf2z4x] {
        margin: 0;
        padding: 6px 4px 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        border-bottom: 1px solid #e5e7eb;
        font-size: 15px;
        font-weight: 650;
        letter-spacing: .01em;
    }

    .ssm .hover-box[b-12jqxf2z4x] {
        user-select: none;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 28px;
        min-width: 28px;
        padding: 0 10px;
        border-radius: 999px;
        border: 1px solid #e5e7eb;
        background: #fff;
        color: #374151;
        transition: background .15s ease, border-color .15s ease, transform .05s ease;
    }

        .ssm .hover-box:hover[b-12jqxf2z4x] {
            background: #f3f4f6;
            border-color: #d1d5db;
            transform: translateY(-0.5px);
        }

        .ssm .hover-box:active[b-12jqxf2z4x] {
            transform: translateY(0.5px);
        }

/* ===== Group ===== */
.group[b-12jqxf2z4x] {
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    overflow: clip;
    background: #fff;
}

    .group + .group[b-12jqxf2z4x] {
        margin-top: 6px;
    }

.group-head[b-12jqxf2z4x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: #f9fafb;
    border-bottom: 1px solid #eef0f3;
}

.group-title[b-12jqxf2z4x] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 650;
    min-width: 0;
}

    .group-title .dot[b-12jqxf2z4x] {
        width: 8px;
        height: 8px;
        border-radius: 9999px;
        background: #10b981;
        box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12);
    }

        .group-title .dot.warn[b-12jqxf2z4x] {
            background: #f59e0b;
            box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.14);
        }

    .group-title .name[b-12jqxf2z4x] {
        letter-spacing: .2px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .group-title .count[b-12jqxf2z4x] {
        color: #6b7280;
        font-weight: 550;
        white-space: nowrap;
    }

/* ===== Student list grid ===== */
.student-list[b-12jqxf2z4x] {
    list-style: none;
    margin: 0;
    padding: 10px;
    display: grid;
    gap: 10px 12px;
    /* 小尺寸：2 欄 */
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* ===== Student card ===== */
.student-row[b-12jqxf2z4x] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #eef0f3;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    user-select: none;
    transition: box-shadow .15s ease, transform .05s ease, border-color .15s ease, background-color .15s ease;
    min-width: 0;
}

    .student-row:hover[b-12jqxf2z4x] {
        border-color: #c7d2fe;
        background: #fbfbff;
        box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
        transform: translateY(-1px);
    }

    .student-row:active[b-12jqxf2z4x] {
        transform: translateY(0.5px);
    }

    /* 如果你未來加 checkbox，可用 */
    .student-row .chk[b-12jqxf2z4x] {
        width: 18px;
        height: 18px;
        accent-color: #2563eb;
        cursor: pointer;
    }

/* meta */
.meta[b-12jqxf2z4x] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

    .meta .line[b-12jqxf2z4x] {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
    }

    .meta .stu-name[b-12jqxf2z4x] {
        font-weight: 750;
        font-size: 14px;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .meta .sub[b-12jqxf2z4x] {
        font-size: 12px;
        color: #6b7280;
    }

/* badge (座號) */
.badge[b-12jqxf2z4x] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 22px;
    padding: 0 8px;
    font-size: 12px;
    font-weight: 800;
    border-radius: 9999px;
    background: #111827;
    color: #fff;
    letter-spacing: .25px;
}

/* ===== Footer sticky ===== */
.footer[b-12jqxf2z4x] {
    position: sticky;
    bottom: 8px;
    margin-inline: auto;
    width: clamp(280px, 72%, 680px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: rgba(250, 250, 250, 0.96);
    backdrop-filter: blur(8px);
    padding: 10px 12px;
    border-radius: 16px;
    border: 1px solid #eef0f3;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.10);
    z-index: 2;
    left: auto;
    transform: none;
}

    .footer .left[b-12jqxf2z4x] {
        font-size: 12px;
        color: #374151;
    }

    .footer .right[b-12jqxf2z4x] {
        display: flex;
        align-items: center;
        gap: 8px;
    }

/* Buttons */
.btn[b-12jqxf2z4x] {
    appearance: none;
    border: 1px solid #e5e7eb;
    background: #fff;
    padding: 8px 12px;
    border-radius: 999px;
    font-weight: 650;
    font-size: 13px;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, transform .05s ease;
}

    .btn:hover[b-12jqxf2z4x] {
        background: #f9fafb;
        border-color: #d1d5db;
        transform: translateY(-0.5px);
    }

    .btn:active[b-12jqxf2z4x] {
        transform: translateY(0.5px);
    }

    .btn.ghost[b-12jqxf2z4x] {
        background: transparent;
    }

/* ===== 大尺寸：modal 1200px + 6 欄 ===== */
@media (min-width: 1100px) {
    .ssm[b-12jqxf2z4x] {
        width: 1200px;
        max-width: 1200px;
        padding: 16px;
    }

    .student-list[b-12jqxf2z4x] {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 12px 12px;
    }
}

/* ===== 小尺寸：100% + 2 欄（你要的） ===== */
@media (max-width: 900px) {
    .ssm[b-12jqxf2z4x] {
        width: 100%;
        max-width: 100%;
        padding: 12px;
        border-radius: 16px;
    }

    .footer[b-12jqxf2z4x] {
        width: 100%;
    }
}
/* /Components/DialogModal/SelectStudentsModal.razor.rz.scp.css */
/* ====== Modal 區域通用 ====== */
.ssm[b-fo58dzlxew], .ssm *[b-fo58dzlxew] {
    box-sizing: border-box;

}

/* 外層：在 modal 內維持合理寬度與捲動 */
.ssm[b-fo58dzlxew] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    min-width: 560px; /* 需要的話可調小到 480 */
    max-width: 100%; /* ★ 取消 120px 的錯誤限制 */
    max-height: 80vh; /* 內容可捲動 */
    overflow: auto; /* 讓內部 group 控制捲動 */
    /*padding-bottom: 88px;*/
    padding: 1em;
}

.group[b-fo58dzlxew] {
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    overflow: clip;
    background: #fff;
}

    .group + .group[b-fo58dzlxew] {
        margin-top: 4px;
    }

.group-head[b-fo58dzlxew] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: #f9fafb;
    border-bottom: 1px solid #eef0f3;
}

.group-title[b-fo58dzlxew] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

    .group-title .dot[b-fo58dzlxew] {
        width: 8px;
        height: 8px;
        border-radius: 9999px;
        background: #10b981;
    }

        .group-title .dot.warn[b-fo58dzlxew] {
            background: #f59e0b;
        }

    .group-title .name[b-fo58dzlxew] {
        letter-spacing: .3px;
    }

    .group-title .count[b-fo58dzlxew] {
        color: #6b7280;
        font-weight: 500;
    }

.group-actions[b-fo58dzlxew] {
    display: flex;
    gap: 6px;
}

/* ====== 清單網格：大尺寸 4 欄 ====== */
.student-list[b-fo58dzlxew] {
    list-style: none;
    margin: 0;
    padding: 8px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* ★ 自動 1~4 欄 */
    gap: 10px 12px;
}

/* 中尺寸：3 欄 */
@media (min-width: 768px) {
    .student-list[b-fo58dzlxew] {
        grid-template-columns: repeat(3, minmax(200px, 1fr));
    }
}

/* 大尺寸：4 欄 */
@media (min-width: 1200px) {
    .student-list[b-fo58dzlxew] {
        grid-template-columns: repeat(4, minmax(220px, 1fr)); /* ★ 一排 4 個 */
    }
}

/* 無分組時也同樣吃上面的規則，故不再另設 .flat */

/* ====== 卡片（每個學生） ====== */
.student-row[b-fo58dzlxew] {
    display: grid;
    grid-template-columns: 24px 1fr; /* 勾選 + 內容 */
    align-items: center;
    gap: 8px;
    padding: 10px 10px;
    border: 1px solid #eef0f3;
    border-radius: 10px;
    cursor: pointer;
    user-select: none;
    transition: box-shadow .15s ease, transform .05s ease;
    background: #fff;
    min-width: 0; /* ★ 防止內容把格子撐爆 */
}

    .student-row:hover[b-fo58dzlxew] {
        box-shadow: 0 2px 10px rgba(0,0,0,.05);
    }

    .student-row:active[b-fo58dzlxew] {
        transform: translateY(1px);
    }

    .student-row .chk[b-fo58dzlxew] {
        width: 18px;
        height: 18px;
        accent-color: #2563eb;
        cursor: pointer;
    }

.meta[b-fo58dzlxew] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0; /* 允許內文截斷 */
}

    .meta .line[b-fo58dzlxew] {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
    }

    .meta .stu-name[b-fo58dzlxew] {
        font-weight: 800;
        font-size: 16px;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis; /* ★ 名字過長省略 */
    }
    /* 不顯示班級名（若仍有渲染） */
    .meta .sub[b-fo58dzlxew],
    .meta .class-name[b-fo58dzlxew],
    .meta .school[b-fo58dzlxew] {
        display: none !important;
    }

.badge[b-fo58dzlxew] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 22px;
    padding: 0 8px;
    font-size: 12px;
    border-radius: 9999px;
    background: #111827;
    color: #fff;
    letter-spacing: .3px;
}

/* ====== 底部操作列 ====== */
/* 置中且縮小的 sticky footer */
.footer[b-fo58dzlxew] {
    position: sticky;
    inset-inline: 0; /* 讓 margin: auto 可用於置中 */
    margin-inline: auto; /* ★ 水平置中 */
    width: clamp(260px, 72%, 640px); /* ★ 小螢幕不太小，大螢幕不超寬 */

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #fafafa;
    padding: .5em 1em;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
    z-index: 2;
    /* 重要：取消 left/transform，避免位移錯誤 */
    left: auto;
    transform: none;
}

    .footer .left[b-fo58dzlxew] {
        color: #374151;
    }

        .footer .left strong[b-fo58dzlxew] {
            margin: 0 2px;
        }

.btn[b-fo58dzlxew] {
    border: 1px solid #e5e7eb;
    background: #fff;
    padding: 8px 12px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

    .btn:hover[b-fo58dzlxew] {
        background: #f9fafb;
    }

    .btn:active[b-fo58dzlxew] {
        transform: translateY(1px);
    }

    .btn.ghost[b-fo58dzlxew] {
        background: transparent;
    }

    .btn.primary[b-fo58dzlxew] {
        border-color: #2563eb;
        background: #2563eb;
        color: #fff;
    }

        .btn.primary:hover[b-fo58dzlxew] {
            background: #1d4ed8;
            border-color: #1d4ed8;
        }

/* ====== 小尺寸收斂 ====== */
@media (max-width: 900px) {
    .ssm[b-fo58dzlxew] {
        min-width: 100%;
        max-width: 100%;
    }

    .footer[b-fo58dzlxew] {
        width: 100%;
    }
}
/* /Components/DialogModal/SelectTeachersModal.razor.rz.scp.css */
/* Apple 極簡風 */
.tm-wrap[b-0acqjv0vqw] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    min-width: 50vw;
    color: #111;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif;
}

.tm-header[b-0acqjv0vqw] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.tm-title[b-0acqjv0vqw] {
    margin: 0;
    font-weight: 600;
    font-size: 18px;
    letter-spacing: 0.2px;
}

.tm-hint[b-0acqjv0vqw] {
    color: #6b7280;
    font-size: 12px;
}

.tm-list[b-0acqjv0vqw] {
    max-height: 420px;
    overflow: auto;
    border: 1px solid #efeff4;
    border-radius: 14px;
    background: #fff;
    padding: 8px;
    outline: none;
}

.tm-empty[b-0acqjv0vqw] {
    padding: 24px;
    text-align: center;
    color: #666;
    font-size: 14px;
}

.tm-group + .tm-group[b-0acqjv0vqw] {
    margin-top: 12px;
}

.tm-group-title[b-0acqjv0vqw] {
    font-size: 12px;
    color: #8e8e93;
    padding: 6px 10px;
    font-weight: 500;
    /* 橫跨整列 */
    grid-column: 1 / -1;
}

.tm-items[b-0acqjv0vqw] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr; /* 預設單欄 */
    gap: 8px;
}

@media (min-width: 900px) {
    .tm-items[b-0acqjv0vqw] {
        grid-template-columns: 1fr 1fr 1fr; /* 大螢幕雙欄 */
    }
}

.tm-item[b-0acqjv0vqw] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease, box-shadow 0.15s ease;
    background: #fff;
}

    .tm-item:hover[b-0acqjv0vqw] {
        background: #f8f9fb;
    }

    .tm-item.is-selected[b-0acqjv0vqw] {
        background: #eef4ff;
        box-shadow: inset 0 0 0 1px #d6e2ff;
    }

.tm-check[b-0acqjv0vqw] {
    width: 16px;
    height: 16px;
    accent-color: #0a84ff; /* iOS 藍 */
}

.tm-meta[b-0acqjv0vqw] {
    display: flex;
    flex-direction: column;
}

.tm-name[b-0acqjv0vqw] {
    font-size: 14px;
    font-weight: 600;
    color: #111;
}

.tm-sub[b-0acqjv0vqw] {
    font-size: 12px;
    color: #6b7280;
}

.tm-footer[b-0acqjv0vqw] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 6px;
}

.tm-btn[b-0acqjv0vqw] {
    height: 34px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 14px;
    cursor: pointer;
    transition: transform 0.06s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

    .tm-btn:active[b-0acqjv0vqw] {
        transform: translateY(1px);
    }

.tm-btn-ghost[b-0acqjv0vqw] {
    background: #f2f2f7;
    color: #111;
}

    .tm-btn-ghost:hover[b-0acqjv0vqw] {
        background: #e9e9ef;
    }

.tm-btn-primary[b-0acqjv0vqw] {
    background: #0a84ff;
    color: #fff;
    box-shadow: 0 2px 6px rgba(10, 132, 255, 0.25);
}

    .tm-btn-primary:hover[b-0acqjv0vqw] {
        box-shadow: 0 4px 10px rgba(10, 132, 255, 0.25);
    }

    .tm-btn-primary:disabled[b-0acqjv0vqw] {
        background: #b0c9ff;
        box-shadow: none;
        cursor: not-allowed;
    }

@media (max-width: 560px) {
    .tm-wrap[b-0acqjv0vqw] {
        min-width: auto;
        padding: 12px;
    }

    .tm-list[b-0acqjv0vqw] {
        max-height: 360px;
    }
}
/* /Components/DialogModal/SelectTimeModal.razor.rz.scp.css */
/* 外層 */
.timem-wrap[b-tvnuwq4pax] {
    padding: 12px 16px 16px;
    display: flex;
    justify-content: center;

}

.timem-title[b-tvnuwq4pax] {
    margin: 0 16px 8px;
    font-size: 20px;
    font-weight: 800;
    min-width: 400px;
}

.timem-desc[b-tvnuwq4pax] {
    margin: 0 32px 0px;
    color: #666;
}

.timem-warning[b-tvnuwq4pax] {
    margin: 0 32px 0px;
    color: #b91c1c;
}
/* 卡片 */
.timem-card[b-tvnuwq4pax] {
    width: 100%;
    max-width: 480px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    border: 1px solid #eef0f3;
    padding: 16px;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Noto Sans TC", "PingFang TC", "Heiti TC", Arial, sans-serif;
    color: #0f172a;
}

/* 欄位 */
.field[b-tvnuwq4pax] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.label[b-tvnuwq4pax] {
    font-size: 13px;
    color: #374151;
    font-weight: 700;
}

.time-input[b-tvnuwq4pax] {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    background: #fff;
    font-size: 14px;
    outline: none;
    transition: box-shadow .12s ease, border-color .12s ease;
}

    .time-input:focus[b-tvnuwq4pax] {
        border-color: #c6d0e2;
        box-shadow: 0 0 0 4px rgba(100,116,139,.15);
    }

.hint[b-tvnuwq4pax] {
    font-size: 12px;
    color: #6b7280;
}

/* 預覽 */
.preview[b-tvnuwq4pax] {
    margin-top: 12px;
    border-top: 1px solid #f3f4f6;
    padding-top: 12px;
}

.pv-item[b-tvnuwq4pax] {
    display: flex;
    gap: 8px;
    align-items: baseline;
}

.pv-label[b-tvnuwq4pax] {
    font-size: 12px;
    color: #6b7280;
    min-width: 44px;
}

.pv-value[b-tvnuwq4pax] {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* 動作列 */
.actions[b-tvnuwq4pax] {
    margin-top: 16px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.btn[b-tvnuwq4pax] {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    font-size: 14px;
    padding: 10px 14px;
    cursor: pointer;
    background: #fff;
}

    .btn.ghost[b-tvnuwq4pax] {
        background: #f9fafb;
    }

    .btn.primary[b-tvnuwq4pax] {
        background: #111827;
        color: #fff;
        border-color: #111827;
    }

    .btn:disabled[b-tvnuwq4pax] {
        opacity: .5;
        cursor: not-allowed;
    }


@media (max-width: 600px) {
    .timem-title[b-tvnuwq4pax] {
        min-width: auto;
    }
}
/* /Components/OperateModal/SignSummaryModal.razor.rz.scp.css */
.student-sign-list[b-bz8x2jzmy3] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 1em;
}

.student-sign-item[b-bz8x2jzmy3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid #ddd;
    padding: 6px;
    border-radius: 6px;
    background: #fafafa;
}

    .student-sign-item img[b-bz8x2jzmy3] {
        max-width: 120px;
        max-height: 80px;
        object-fit: contain;
    }

.student-name[b-bz8x2jzmy3] {
    font-size: 0.9em;
    margin-bottom: 4px;
    color: #333;
}
/* /Components/OperateModal/StudentNameGenerateModal.razor.rz.scp.css */
body[b-leo0jqmj58] {
}
/* /Components/Parts/Accordion.razor.rz.scp.css */
.accordion-section[b-kl9e8dbb71] {
    border-bottom: 1px solid #eee;
    padding: 10px 0;
}

.accordion-title[b-kl9e8dbb71] {
    display: flex;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
}

.toggle-icon[b-kl9e8dbb71] {
    font-size: 20px;
}

.accordion-content[b-kl9e8dbb71] {
    overflow: hidden;
    transition: max-height 0.5s ease, padding 0.3s ease, opacity 0.3s ease;
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
}

    .accordion-content.expand[b-kl9e8dbb71] {
        max-height: 2000px; /* 寫大沒關係 */
        opacity: 1;
        padding-top: 10px;
        padding-bottom: 10px;
    }


/* /Components/Parts/ModalLoadingComponent.razor.rz.scp.css */
.cs-spinner[b-vlfnxt6rjy] {
    position: relative;
    width: 96px;
    height: 96px;
    margin: 0 auto;
}

/* 中間字：固定、不動畫 */
.cs-spinner-text[b-vlfnxt6rjy] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px;
    letter-spacing: 1px;
    color: #555;
    opacity: 0.8;
    white-space: nowrap;
    z-index: 2;
}

/* 外圈容器 */
.cs-spinner-ring[b-vlfnxt6rjy] {
    position: absolute;
    inset: 0;
}

/* 每一根 bar */
.cs-spinner-seg[b-vlfnxt6rjy] {
    position: absolute;
    top: 50%;
    left: 50%;
    /* 64x64 下的尺寸，稍微短一點讓中間留白 */
    width: 4px;
    height: 14px;
    margin: -7px -3px;
    border-radius: 999px;
    background-color: #555;
    opacity: 0.15;
    transform-origin: center center;
    animation: cs-spinner-fade-b-vlfnxt6rjy 1s linear infinite;
}

    /* 12 根，30° 一根，半徑加大到 26px */
    .cs-spinner-seg:nth-child(1)[b-vlfnxt6rjy] {
        transform: rotate(0deg) translate(0, -32px);
        animation-delay: -0.916s;
    }

    .cs-spinner-seg:nth-child(2)[b-vlfnxt6rjy] {
        transform: rotate(30deg) translate(0, -32px);
        animation-delay: -0.833s;
    }

    .cs-spinner-seg:nth-child(3)[b-vlfnxt6rjy] {
        transform: rotate(60deg) translate(0, -32px);
        animation-delay: -0.750s;
    }

    .cs-spinner-seg:nth-child(4)[b-vlfnxt6rjy] {
        transform: rotate(90deg) translate(0, -32px);
        animation-delay: -0.666s;
    }

    .cs-spinner-seg:nth-child(5)[b-vlfnxt6rjy] {
        transform: rotate(120deg) translate(0, -32px);
        animation-delay: -0.583s;
    }

    .cs-spinner-seg:nth-child(6)[b-vlfnxt6rjy] {
        transform: rotate(150deg) translate(0, -32px);
        animation-delay: -0.500s;
    }

    .cs-spinner-seg:nth-child(7)[b-vlfnxt6rjy] {
        transform: rotate(180deg) translate(0, -32px);
        animation-delay: -0.416s;
    }

    .cs-spinner-seg:nth-child(8)[b-vlfnxt6rjy] {
        transform: rotate(210deg) translate(0, -32px);
        animation-delay: -0.333s;
    }

    .cs-spinner-seg:nth-child(9)[b-vlfnxt6rjy] {
        transform: rotate(240deg) translate(0, -32px);
        animation-delay: -0.250s;
    }

    .cs-spinner-seg:nth-child(10)[b-vlfnxt6rjy] {
        transform: rotate(270deg) translate(0, -32px);
        animation-delay: -0.166s;
    }

    .cs-spinner-seg:nth-child(11)[b-vlfnxt6rjy] {
        transform: rotate(300deg) translate(0, -32px);
        animation-delay: -0.083s;
    }

    .cs-spinner-seg:nth-child(12)[b-vlfnxt6rjy] {
        transform: rotate(330deg) translate(0, -32px);
        animation-delay: 0s;
    }

/* 外圈 bar 漸淡動畫 */
@keyframes cs-spinner-fade-b-vlfnxt6rjy {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0.10;
    }
}
/* /Components/Parts/Pagination.razor.rz.scp.css */
.pagination[b-31rqwiz6t3] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5em;
    margin-top: 1.5em;
    flex-wrap: wrap;
}

.page-btn[b-31rqwiz6t3] {
    min-width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid #ccc;
    background-color: #fff;
    color: #333;
    cursor: pointer;
    border-radius: 4px;
    font-size: 1em;
    line-height: 32px;
    text-align: center;
    transition: all 0.2s;
}

    .page-btn:hover:not(:disabled)[b-31rqwiz6t3] {
        background-color: #f2f2f2;
        border-color: #999;
    }

    .page-btn:disabled[b-31rqwiz6t3] {
        color: #aaa;
        cursor: not-allowed;
        background-color: #f9f9f9;
    }

.page-info[b-31rqwiz6t3] {
    font-size: 0.9em;
    color: #555;
    padding: 0 0.5em;
}
/* /Components/Parts/SelectMultiStudentsComponent.razor.rz.scp.css */
.selectstudent-container[b-5sxm2g3lqz] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ========== Header / Ops ========== */
.ss-header[b-5sxm2g3lqz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap; /* RWD：自動換行 */
}

.ss-title h5[b-5sxm2g3lqz] {
    margin: 0;
    font-size: 15px;
    color: #333;
}

.ss-count[b-5sxm2g3lqz] {
    color: #2b6bf3;
    font-weight: 700;
}

/* 操作列（搜尋＋連結按鈕） */
.ss-ops[b-5sxm2g3lqz] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap; /* RWD */
}

.ss-input[b-5sxm2g3lqz] {
    border: 1px solid #cfcfcf;
    border-radius: 10px;
    padding: 8px 10px;
    min-width: 220px;
    outline: none;
}

    .ss-input:focus[b-5sxm2g3lqz] {
        border-color: #7aa7ff;
        box-shadow: 0 0 0 3px rgba(122,167,255,.18);
    }

/* 超連結風格按鈕 */
.link[b-5sxm2g3lqz] {
    background: transparent;
    border: none;
    color: #1f4bbf;
    font-size: 14px;
    padding: 6px 8px;
    border-radius: 8px;
    cursor: pointer;
}

    .link:hover[b-5sxm2g3lqz] {
        background: #eef3ff;
    }

/* ========== 區段標題與區隔 ========== */
.ss-section[b-5sxm2g3lqz] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .ss-section + .ss-section[b-5sxm2g3lqz] {
        margin-top: 6px;
    }

.ss-section-hd[b-5sxm2g3lqz] {
    font-size: 13px;
    font-weight: 700;
    color: #666;
    letter-spacing: .02em;
    padding: 2px 4px;
}

/* ========== 群組 Chips ========== */
.ss-groups[b-5sxm2g3lqz] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.chip[b-5sxm2g3lqz] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid #dcdcdc;
    border-radius: 999px;
    padding: 6px 10px;
    cursor: pointer;
    user-select: none;
}

    .chip:hover[b-5sxm2g3lqz] {
        background: #f4f6ff;
    }
    /* 依你的需求：不要按下去變藍，維持中性 */
    .chip.on[b-5sxm2g3lqz] {
        background: #fff;
        color: inherit;
        border-color: #dcdcdc;
    }

.chip-badge[b-5sxm2g3lqz] {
    font-size: 12px;
    opacity: .85;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(0,0,0,.08);
}

/* ========== 班級 details ========== */
details[b-5sxm2g3lqz] {
    border: 1px solid #efefef;
    border-radius: 10px;
    background: #f7f7f7;
    overflow: hidden;
}

    details + details[b-5sxm2g3lqz] {
        margin-top: 10px;
    }

summary[b-5sxm2g3lqz] {
    cursor: pointer;
    font-weight: 600;
    padding: 10px 12px;
    user-select: none;
    list-style: none; /* 隱藏內建箭頭 */
}

    summary[b-5sxm2g3lqz]::marker {
        content: "";
    }

    summary[b-5sxm2g3lqz]::before {
        content: "▸";
        display: inline-block;
        margin-right: 6px;
        transition: transform .18s ease;
    }

details[open] summary[b-5sxm2g3lqz]::before {
    transform: rotate(90deg);
}

.ss-list[b-5sxm2g3lqz] {
    padding: 10px 12px 12px 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    background: #fff;
}

.muted[b-5sxm2g3lqz] {
    color: #888;
}

/* ========== 自製 form-check ========== */
.form-check[b-5sxm2g3lqz] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    border-radius: 8px;
    transition: background-color .12s ease;
}

    .form-check:hover[b-5sxm2g3lqz] {
        background: #eef4ff;
    }

.form-check-inline[b-5sxm2g3lqz] {
    display: inline-flex;
}

.form-check-input[b-5sxm2g3lqz] {
    width: 18px;
    height: 18px;
    accent-color: #2b6bf3;
    cursor: pointer;
    margin: 0;
}

.form-check-label[b-5sxm2g3lqz] {
    cursor: pointer;
    font-size: 14px;
    color: #222;
    user-select: none;
    line-height: 1.1;
}

/* ========== RWD ========== */
@media (max-width: 960px) {
    .ss-input[b-5sxm2g3lqz] {
        min-width: 180px;
    }
}

@media (max-width: 720px) {
    .ss-header[b-5sxm2g3lqz] {
        align-items: flex-start;
    }

    .ss-title[b-5sxm2g3lqz] {
        width: 100%;
    }

    .ss-ops[b-5sxm2g3lqz] {
        width: 100%;
    }

    .ss-ops[b-5sxm2g3lqz] {
        justify-content: flex-start;
    }
}
/* /Components/Parts/SelectSingleStudentComponent.razor.rz.scp.css */
/* 容器 */
.sp-container[b-aeocllkfqw] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 每個班級群組 */
.sp-group[b-aeocllkfqw] {
    border: 1px solid #ececec;
    border-radius: 12px;
    background: #fafafa;
    overflow: hidden;
}

    .sp-group + .sp-group[b-aeocllkfqw] {
        margin-top: 2px;
    }

    .sp-group > summary[b-aeocllkfqw] {
        cursor: pointer;
        font-weight: 600;
        padding: 10px 12px;
        user-select: none;
        list-style: none; /* 隱藏預設箭頭 */
    }

        .sp-group > summary[b-aeocllkfqw]::marker {
            content: "";
        }

        .sp-group > summary[b-aeocllkfqw]::before {
            content: "▸";
            display: inline-block;
            margin-right: 6px;
            transition: transform .18s ease;
        }

    .sp-group[open] > summary[b-aeocllkfqw]::before {
        transform: rotate(90deg);
    }

.sp-count[b-aeocllkfqw] {
    color: #888;
    font-weight: 500;
    margin-left: 6px;
}

.sp-list[b-aeocllkfqw] {
    padding: 8px 12px 12px 12px;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* 學生列（可點/可鍵盤） */
.student-row[b-aeocllkfqw] {
    display: flex; /* 關鍵：讓描述可彈性壓縮 */
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid #e7e7e7;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease;
    outline: none;
}

    .student-row:hover[b-aeocllkfqw] {
        background: #f4f7ff;
        border-color: #cfdcff;
    }

    .student-row:focus-visible[b-aeocllkfqw] {
        border-color: #7aa7ff;
        box-shadow: 0 0 0 3px rgba(122,167,255,.18);
    }

/* 姓名固定顯示，不截斷 */
.student-name[b-aeocllkfqw] {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* 分隔點 */
.sep[b-aeocllkfqw] {
    flex: 0 0 auto;
    color: #b7b7b7;
}

/* 描述：單行省略 */
.student-desc[b-aeocllkfqw] {
    flex: 1 1 auto;
    min-width: 0; /* 關鍵：允許在 flex 內縮小觸發 ellipsis */
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* RWD */
@media (max-width: 640px) {
    .sp-list[b-aeocllkfqw] {
        gap: 8px;
    }

    .student-row[b-aeocllkfqw] {
        padding: 10px 12px;
    }
}
/* /Components/Parts/StudentAccordion.razor.rz.scp.css */
/* ---- 外層與工具列（原樣式，略有微調） ---- */
.acc-wrap[b-vsft9zfn1g] {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 8px 12px 16px;
    box-sizing: border-box
}

.acc-toolbar[b-vsft9zfn1g] {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 12px
}

.acc-search[b-vsft9zfn1g] {
    flex: 1 1 auto;
    padding: 10px 12px;
    border: 1px solid #d6d6d6;
    border-radius: 10px;
    outline: none;
    font-size: 14px;
    transition: box-shadow 120ms ease,border-color 120ms ease
}

    .acc-search:focus[b-vsft9zfn1g] {
        border-color: #8aa8ff;
        box-shadow: 0 0 0 3px rgba(138,168,255,.25)
    }

.acc-btn[b-vsft9zfn1g] {
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid #d6d6d6;
    background: #fff;
    cursor: pointer;
    font-size: 14px;
    transition: transform 80ms, box-shadow 120ms, background 120ms, border-color 120ms
}

    .acc-btn:hover[b-vsft9zfn1g] {
        background: #f7f7f7
    }

    .acc-btn:active[b-vsft9zfn1g] {
        transform: translateY(1px)
    }

    .acc-btn.ghost[b-vsft9zfn1g] {
        border-style: dashed
    }

.acc-empty[b-vsft9zfn1g] {
    padding: 20px;
    text-align: center;
    color: #777;
    font-size: 14px
}

/* ---- 區塊與標頭 ---- */
.acc-section[b-vsft9zfn1g] {
    border: 1px solid #e6e6e6;
    border-radius: 14px;
    margin-bottom: 10px;
    overflow: hidden;
    background: #fff
}

.acc-header[b-vsft9zfn1g] {
    margin: 0;
    background: linear-gradient(0deg,#fff,#fafafa)
}

.acc-toggle[b-vsft9zfn1g] {
    width: 100%;
    text-align: left;
    padding: 12px 16px;
    background: transparent;
    border: 0;
    display: grid;
    grid-template-columns: 20px 1fr auto;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 15px
}

    .acc-toggle:focus[b-vsft9zfn1g] {
        outline: none;
        border-radius: 14px 14px 0 0;
        box-shadow: inset 0 0 0 2px rgba(138,168,255,.55)
    }

.acc-title[b-vsft9zfn1g] {
    font-weight: 600;
    letter-spacing: .2px
}

.acc-badge[b-vsft9zfn1g] {
    display: inline-block;
    min-width: 28px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #eef2ff;
    color: #3445aa;
    text-align: center;
    font-size: 12px
}

.acc-caret[b-vsft9zfn1g] {
    width: 14px;
    height: 14px;
    display: inline-block;
    transform: rotate(-90deg);
    transition: transform 160ms ease;
    position: relative
}

    .acc-caret[b-vsft9zfn1g]::before, .acc-caret[b-vsft9zfn1g]::after {
        content: "";
        position: absolute;
        left: 5px;
        top: 2px;
        width: 2px;
        height: 10px;
        background: #444;
        border-radius: 1px
    }

    .acc-caret[b-vsft9zfn1g]::after {
        transform: rotate(90deg);
        transform-origin: center
    }

[aria-expanded="true"] .acc-caret[b-vsft9zfn1g] {
    transform: rotate(0deg)
}

/* ---- 內容區（避免抖動、細邊） ---- */
.acc-panel[b-vsft9zfn1g] {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 180ms ease;
    border-top: 1px solid #eee;
    background: #fff
}

    .acc-panel.open[b-vsft9zfn1g] {
        grid-template-rows: 1fr
    }

    .acc-panel > *[b-vsft9zfn1g] {
        overflow: hidden
    }

/* ---- 新：單列清單 / 一排一個 ---- */
.acc-list[b-vsft9zfn1g] {
    list-style: none;
    padding: 6px;
    margin: 0;
    display: block
}

    .acc-list > li + li[b-vsft9zfn1g] {
        margin-top: 6px
    }

/* 可點擊列：左 座號 / 中 名字 / 右 箭頭 */
.acc-row[b-vsft9zfn1g] {
    width: 100%;
    display: grid;
    grid-template-columns: 40px 1fr 20px;
    align-items: center;
    gap: 8px;
    min-height: 44px; /* 可點擊面積 >= 44px */
    padding: 8px 12px;
    border-radius: 12px;
    border: 1px solid #e2e2e2;
    background: #fcfcfc;
    cursor: pointer;
    text-align: left;
    transition: transform 80ms ease, box-shadow 120ms ease, background 120ms ease, border-color 120ms ease;
}

    .acc-row:hover[b-vsft9zfn1g] {
        background: #f4f7ff;
        border-color: #c9d2ff;
        box-shadow: 0 2px 10px rgba(52,69,170,.08)
    }

    .acc-row:active[b-vsft9zfn1g] {
        transform: translateY(1px)
    }

    .acc-row:focus[b-vsft9zfn1g] {
        outline: none;
        box-shadow: 0 0 0 3px rgba(138,168,255,.25)
    }

.row-numb[b-vsft9zfn1g] {
    width: 40px;
    height: 26px;
    line-height: 26px;
    border-radius: 8px;
    background: #f2f4ff;
    color: #3f4db8;
    text-align: center;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

    /* 沒有座號（=0）時隱藏方塊：你也可以改成顯示空白 */
    .row-numb:empty[b-vsft9zfn1g],
    .row-numb:is(:not(:empty)):has(:where())[b-vsft9zfn1g] {
    }
    /* keep rule to avoid minifiers removing previous line */
    .row-numb[b-vsft9zfn1g]::before {
        content: attr(data-empty)
    }
/* 兼容性填充，不影響 */

.row-name[b-vsft9zfn1g] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 15px;
    color: #222;
}

/* 箭頭符號在各語系皆可用 */
.row-arrow[b-vsft9zfn1g] {
    justify-self: end;
    font-size: 18px;
    line-height: 1;
    opacity: .35
}

/* ---- RWD：在小螢幕放大點，桌機維持精緻 ---- */
@media (max-width: 420px) {
    .acc-wrap[b-vsft9zfn1g] {
        padding: 6px 8px 12px
    }

    .acc-search[b-vsft9zfn1g] {
        font-size: 16px;
        padding: 12px 14px
    }

    .acc-row[b-vsft9zfn1g] {
        min-height: 48px;
        padding: 10px 12px;
        border-radius: 14px
    }

    .row-name[b-vsft9zfn1g] {
        font-size: 16px
    }
}

@media (min-width: 1100px) {
    .acc-wrap[b-vsft9zfn1g] {
        max-width: 1200px
    }
}

/* 保底：面板關閉時，不可點擊、不選取 */
.acc-panel:not(.open)[b-vsft9zfn1g] {
    pointer-events: none;
    user-select: none;
}

    /* 避免關閉時仍顯示 hover 效果 */
    .acc-panel:not(.open) .acc-row:hover[b-vsft9zfn1g] {
        background: #fcfcfc;
        border-color: #e2e2e2;
        box-shadow: none;
    }

/* /Components/Parts/SwitchComponent.razor.rz.scp.css */
.toggle-wrap[b-qu4lze7qvf] {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    min-width: max-content;
    gap: 10px;
    user-select: none;
}

.toggle-input[b-qu4lze7qvf] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-label[b-qu4lze7qvf] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    white-space: nowrap;
}

.toggle-desc[b-qu4lze7qvf] {
    font-size: 0.95rem;
    white-space: nowrap;
}

/* 軌道 */
.switch[b-qu4lze7qvf] {
    position: relative;
    width: 46px;
    height: 26px;
    border-radius: 999px;
    background: #cfd3d8;
    transition: background 0.18s ease;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}

/* 圓鈕 */
.switch-knob[b-qu4lze7qvf] {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,.22);
    transition: transform 0.18s ease;
}

/* 勾選樣式：注意相鄰兄弟選擇器 */
.toggle-input:checked + .toggle-label .switch[b-qu4lze7qvf] {
    background: #4f8cff;
}

.toggle-input:checked + .toggle-label .switch-knob[b-qu4lze7qvf] {
    transform: translateX(20px);
}

/* 鍵盤焦點 */
.toggle-input:focus-visible + .toggle-label .switch[b-qu4lze7qvf] {
    outline: 2px solid #8fb3ff;
    outline-offset: 2px;
}
/* /Components/Parts/TimeInputComponent.razor.rz.scp.css */
/* 只放這個 row 需要的樣式（與你原本一致） */
.sb-row[b-w5k7zd0nlo] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
}

.sb-label[b-w5k7zd0nlo] {
    font-size: 14px;
    color: #444;
    font-weight:bold;
    white-space: nowrap;
}

.sb-field[b-w5k7zd0nlo] {
    display: flex;
    align-items: center;
}

.sb-input[b-w5k7zd0nlo] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #d6d6d6;
    border-radius: 8px;
    outline: none;
    font-size: 14px;
    transition: border-color .15s ease;
}

    .sb-input:focus[b-w5k7zd0nlo] {
        border-color: #7aa7ff;
    }

.sb-btn[b-w5k7zd0nlo] {
    padding: 7px 12px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
}

.sb-btn-primary[b-w5k7zd0nlo] {
    background: #2d6cdf;
    color: #fff;
}

    .sb-btn-primary:hover[b-w5k7zd0nlo] {
        filter: brightness(0.95);
    }

@media (max-width: 600px) {
    .sb-row[b-w5k7zd0nlo] {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .sb-label[b-w5k7zd0nlo] {
        margin-bottom: -2px;
    }

    .sb-btn[b-w5k7zd0nlo] {
        width: fit-content;
        justify-self: end;
    }
}
/* /Components/Parts/TipsComponent.razor.rz.scp.css */
.tips-section[b-ldcqtuorfj] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 2px 12px;
    border-radius: 12px;
    background: #f5f5f7; /* Apple 淡灰底 */
}

.tips-icon[b-ldcqtuorfj] {
    width: 22px;
    height: 22px;
    object-fit: contain;
    opacity: 0.8; /* 不搶眼 */
}

.tips-content[b-ldcqtuorfj] {
    font-size: 13px;
    color: #6b7280; /* 柔灰 */
    letter-spacing: 0.2px;
}
/* /Components/Parts/TtsConfigPanel.razor.rz.scp.css */
.tts-panel[b-2l7oypgota] {
    border-radius: 16px;
    padding: 16px 18px;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
    max-width: 540px;
    font-size: 14px;
}

.tts-header[b-2l7oypgota] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.tts-title[b-2l7oypgota] {
    font-weight: 600;
    font-size: 15px;
    color: #111827;
}

.tts-field[b-2l7oypgota] {
    margin-bottom: 10px;
}

.tts-label[b-2l7oypgota] {
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    color: #6b7280;
}

.tts-textarea[b-2l7oypgota] {
    width: 100%;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    padding: 8px 10px;
    resize: vertical;
    min-height: 80px;
    font-size: 14px;
}

    .tts-textarea:focus[b-2l7oypgota] {
        outline: none;
        border-color: #2563eb;
        box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.1);
    }

.tts-select[b-2l7oypgota] {
    width: 100%;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    padding: 6px 10px;
    font-size: 14px;
    background-color: #fff;
}

.tts-voice-empty[b-2l7oypgota] {
    font-size: 12px;
    color: #f97316;
    background: #fff7ed;
    border-radius: 10px;
    padding: 8px 10px;
    line-height: 1.4;
}

.tts-sliders[b-2l7oypgota] {
    margin-top: 6px;
}

.tts-slider-row[b-2l7oypgota] {
    margin-bottom: 6px;
}

    .tts-slider-row input[type="range"][b-2l7oypgota] {
        width: 100%;
    }

.tts-actions[b-2l7oypgota] {
    margin-top: 8px;
    display: flex;
    gap: 8px;
}

.tts-btn[b-2l7oypgota] {
    appearance: none;
    border-radius: 999px;
    padding: 6px 14px;
    border: 1px solid #d1d5db;
    font-size: 13px;
    cursor: pointer;
    background: #fff;
    transition: background .15s, border-color .15s, transform .05s, opacity .15s;
}

    .tts-btn.primary[b-2l7oypgota] {
        background: #2563eb;
        border-color: #2563eb;
        color: #fff;
    }

    .tts-btn.ghost:hover[b-2l7oypgota] {
        background: #f9fafb;
    }

    .tts-btn:disabled[b-2l7oypgota] {
        opacity: 0.4;
        cursor: default;
    }

.tts-status[b-2l7oypgota] {
    margin-top: 6px;
    font-size: 12px;
    color: #6b7280;
}
/* /Components/Parts/UploadIndicator.razor.rz.scp.css */
.upload-indicator[b-zdc98uxnni] {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(50, 50, 50, 0.9);
    color: #fff;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 1rem;
    z-index: 2000;
    justify-content: center;
    align-items: center;
    min-width: 200px;
    text-align: center;
}

/* 大螢幕寬度 */
@media (min-width: 768px) {
    .upload-indicator[b-zdc98uxnni] {
        width: 400px;
    }
}

/* 小螢幕寬度 */
@media (max-width: 767px) {
    .upload-indicator[b-zdc98uxnni] {
        width: 100%;
        border-radius: 0;
        left: 0;
        transform: none;
    }
}

.upload-indicator .success[b-zdc98uxnni] {
    color: #4caf50;
    margin-right: 5px;
}

.upload-indicator .failed[b-zdc98uxnni] {
    color: #f44336;
    margin-right: 5px;
}
/* /Components/Parts/ZoomImage.razor.rz.scp.css */
/* 外層固定尺寸容器，由 Width/Height 決定 */
.zoom-image-container[b-9wrkxsikdw] {
    display: flex;
    justify-content: center;
    align-items: center;
    /* 會被 inline style width/height 覆蓋 */
    background: #2f2f2f; /* 深灰背景 */
    overflow: hidden;
    border-radius: 12px;
}

/* 內層 wrapper 保證以容器大小呈現 */
.zoom-image-wrapper[b-9wrkxsikdw] {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center; /* ⭐ 垂直置中 */
    background: #2f2f2f; /* 深灰背景（補到邊緣） */
}

/* 圖片：固定容器內等比縮放，不裁切 */
.zoom-image-img[b-9wrkxsikdw] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* ⭐ 縮放保持比例 */
    display: block;
    background: #2f2f2f; /* 深灰色 */
    border-radius: 12px;
}
/* /Layout/MainLayout.razor.rz.scp.css */
.page[b-qxr4xelilu] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-qxr4xelilu] {
    flex: 1;
}

.sidebar[b-qxr4xelilu] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-qxr4xelilu] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-qxr4xelilu]  a, .top-row[b-qxr4xelilu]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-qxr4xelilu]  a:hover, .top-row[b-qxr4xelilu]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-qxr4xelilu]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-qxr4xelilu] {
        justify-content: space-between;
    }

    .top-row[b-qxr4xelilu]  a, .top-row[b-qxr4xelilu]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-qxr4xelilu] {
        flex-direction: row;
    }

    .sidebar[b-qxr4xelilu] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-qxr4xelilu] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-qxr4xelilu]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-qxr4xelilu], article[b-qxr4xelilu] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}
/* /Layout/NavPageLayout.razor.rz.scp.css */
.ds-layout-container[b-0ug0q7kgcc] {
    display: flex;
    min-height: 100vh;
}

/* 行動端頂部欄 */
.ds-mobile-header[b-0ug0q7kgcc] {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: rgba(255, 255, 255, 0.95);
    /* backdrop-filter: blur(0px); */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    z-index: 1000;
    padding: 0 1rem;
    background: linear-gradient(145deg, #f5f7fa 0%, #e4e9f2 100%);
}

.ds-burger-menu[b-0ug0q7kgcc] {
    background: none;
    border: none;
    color: #37474F;
    font-size: 24px;
    padding: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    /* 移除任何可能的浮動或定位屬性 */
}

.ds-mobile-header-title[b-0ug0q7kgcc] {
    color: #2196F3;
    font-size: 20px;
    padding-left: 10px;
}

.ds-burger-menu:hover[b-0ug0q7kgcc] {
    color: #2196F3;
}

/* 導航容器 */
.ds-navcontainer[b-0ug0q7kgcc] {
    width: 280px;
    border-right: 1px solid #E0E0E0;
    height: 100vh;
    position: fixed;
    box-shadow: 0 4px 6px rgba(33, 150, 243, 0.1);
    background: linear-gradient(145deg, #f5f7fa 0%, #e4e9f2 100%);
    display: flex;
    flex-direction: column;
    overflow: auto;
}

.ds-header-title[b-0ug0q7kgcc] {
    color: #2196F3;
    font-size: 20px;
    text-align: left;
    padding: 10px 0 0 1em;
    text-align: center;
}

.ds-userinfo-card[b-0ug0q7kgcc] {
    padding: 12px 20px;
    font-size: 14px;
    background-color: white;
    margin-top: auto;
}

.ds-nav-list[b-0ug0q7kgcc] {
    list-style: none;
    padding: 0 0;
    margin: 0;
}

/* 導航項目樣式 */
.ds-nav-item[b-0ug0q7kgcc] {
    margin: 0.5rem 1rem;
    border-radius: 8px;
    overflow: hidden;
    background: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

    .ds-nav-item:hover[b-0ug0q7kgcc] {
        box-shadow: 0 4px 6px rgba(33, 150, 243, 0.1);
        transform: translateY(-1px);
    }

.ds-nav-item-main[b-0ug0q7kgcc] {
    padding: 12px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.ds-nav-title[b-0ug0q7kgcc] {
    color: #37474F;
    font-weight: 500;
}

.ds-submenu-indicator[b-0ug0q7kgcc] {
    font-size: 12px;
    color: #607D8B;
    transition: all 0.3s ease;
}

.ds-submenu-expanded .ds-submenu-indicator[b-0ug0q7kgcc] {
    transform: rotate(180deg);
}

/* 主連結樣式 */
.ds-main-link[b-0ug0q7kgcc] {
    padding: 12px 20px;
    display: block;
    text-decoration: none;
    color: #37474F;
    transition: all 0.5s ease;
    position: relative;
    overflow: hidden;
}

    .ds-main-link[b-0ug0q7kgcc]::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 3px;
        background: #2196F3;
        transform: scaleY(0);
        transition: all 0.3s ease;
    }

    .ds-main-link:hover[b-0ug0q7kgcc]::before {
        transform: scaleY(1);
    }

/* 子選單樣式 */
.ds-sub-links[b-0ug0q7kgcc] {
    display: none;
    background: rgba(255, 255, 255, 0.5);
    border-top: 1px solid #E0E0E0;
    max-height: 0;
}

.ds-submenu-expanded[b-0ug0q7kgcc] {
    display: block;
    animation: slideDown-b-0ug0q7kgcc .8s ease-out;
    max-height: 800px;
}

.ds-nav-link[b-0ug0q7kgcc] {
    padding: 10px 20px 10px 40px;
    display: block;
    text-decoration: none;
    color: #607D8B;
    transition: all 0.3s ease;
    position: relative;
}

    .ds-nav-link[b-0ug0q7kgcc]::before {
        content: '•';
        position: absolute;
        left: 25px;
        opacity: 0;
        transition: all 0.3s ease;
    }

    .ds-nav-link:hover[b-0ug0q7kgcc] {
        color: #2196F3;
        background: #E3F2FD;
    }

        .ds-nav-link:hover[b-0ug0q7kgcc]::before {
            opacity: 1;
        }

/* 內容區域 */
.ds-pagecontent[b-0ug0q7kgcc] {
    flex: 1;
    margin-left: 280px;
    position: relative;
    background: white;
    transition: margin-left 0.2s ease;
}

.nav-collapse .ds-pagecontent[b-0ug0q7kgcc] {
    margin-left: 36px; /* 跟你 ds-nav-collapsed 的寬度對齊 */
}

/* Loading 樣式 */
.ds-loading-overlay[b-0ug0q7kgcc] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    /* backdrop-filter: blur(10px); */
    display: flex;
    justify-content: center;
    align-items: center;
}

.ds-loading-spinner[b-0ug0q7kgcc] {
    width: 40px;
    height: 40px;
    border: 3px solid #E3F2FD;
    border-top: 3px solid #2196F3;
    border-radius: 50%;
    animation: spin-b-0ug0q7kgcc 1s linear infinite;
}

@keyframes spin-b-0ug0q7kgcc {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes slideDown-b-0ug0q7kgcc {
    from {
        opacity: 1;
        max-height: 0;
    }

    to {
        opacity: 1;
        max-height: 800px;
    }
}

/* 響應式設計 */
@media (max-width: 768px) {
    .ds-layout-container[b-0ug0q7kgcc] {
        flex-direction: column;
    }

    .ds-header-title[b-0ug0q7kgcc] {
        display: none;
    }

    .ds-mobile-header[b-0ug0q7kgcc] {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .ds-navcontainer[b-0ug0q7kgcc] {
        display: none;
        width: 100%;
        max-height: 70vh;
        overflow: auto;
        position: fixed;
        top: 60px;
        z-index: 999;
    }

    .ds-nav-list[b-0ug0q7kgcc] {
        padding: 1em;
    }

    .ds-pagecontent[b-0ug0q7kgcc] {
        margin: 60px 0rem 0rem 0rem;
    }

    .ds-nav-item[b-0ug0q7kgcc] {
        margin: 0.5rem;
    }

        .ds-nav-item:hover[b-0ug0q7kgcc] {
            box-shadow: none;
            transform: none;
        }
}

@media (min-width: 769px) {
    /* 互動效果 */
    .ds-nav-item-main:hover[b-0ug0q7kgcc], .ds-main-link:hover[b-0ug0q7kgcc] {
        background: #E3F2FD;
        color: #2196F3;
    }
}


/* 額外的動畫效果 */
.ds-nav-item[b-0ug0q7kgcc],
.ds-nav-link[b-0ug0q7kgcc],
.ds-main-link[b-0ug0q7kgcc] {
    position: relative;
    overflow: hidden;
}

    .ds-nav-item:hover[b-0ug0q7kgcc]::after,
    .ds-nav-link:hover[b-0ug0q7kgcc]::after,
    .ds-main-link:hover[b-0ug0q7kgcc]::after {
        left: 100%;
    }




@keyframes navfadein-b-0ug0q7kgcc {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}


@media print {
    .ds-pagecontent[b-0ug0q7kgcc] {
        margin: 0;
        padding: 0;
        box-shadow: none;
        background: white;
    }
}

/* 收合按鈕：桌機版才顯示 */
.ds-collapse-btn[b-0ug0q7kgcc] {
    margin-left: auto;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
    transition: background 0.15s ease, transform 0.06s ease;
    margin-right: 8px;
    margin-top: 8px;
}

    .ds-collapse-btn:hover[b-0ug0q7kgcc] {
        background: #f3f4f6;
        transform: translateY(-1px);
    }

.ds-nav-collapsed[b-0ug0q7kgcc] {
    width: 36px;
}

    .ds-nav-collapsed .ds-header-title[b-0ug0q7kgcc] {
        display: none;
    }

    .ds-nav-collapsed .ds-nav-item[b-0ug0q7kgcc] {
        display: none;
    }

.ds-nav-header[b-0ug0q7kgcc] {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.ds-nav-collapsed .ds-userinfo-card[b-0ug0q7kgcc] {
    display: none;
}
/* /Layout/TabContainer.razor.rz.scp.css */
.tab-page-right[b-g446hmx5k1] {
    display: flex;
    height: 100vh;
    position: relative;
    background-color: #ffffff;
}

.tab-content[b-g446hmx5k1] {
    flex: 1;
    overflow: auto;
}

.tab-inner[b-g446hmx5k1] {
    text-align: center;
}

.tab-bar-vertical-right[b-g446hmx5k1] {
    display: flex;
    flex-direction: column;
    width: 40px;
    background-color: #f0f0f0;
}

.tab-button-vertical[b-g446hmx5k1] {
    position: relative;
    padding: 10px;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #ccc;
    cursor: pointer;
    font-size: 16px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    text-align: center;
}

    /*    .tab-button-vertical:last-child {
        border-bottom: none;
    }*/

    .tab-button-vertical:hover[b-g446hmx5k1] {
        background-color: #e0e0e0;
    }

    .tab-button-vertical.active[b-g446hmx5k1] {
        background-color: #ffffff; /* 跟主區塊一致 */
        font-weight: bold;
        border-right: none;
        border-left: 1px solid #ccc;
        z-index: 2;
    }

    .tab-button-vertical .tab-overlay[b-g446hmx5k1] {
        position: absolute;
        bottom: 0;
        right: 100%; /* 貼齊 tab-content 右邊 */
        width: 1px;
        height: 100%;
        background-color: #ffffff; /* 遮掉主區塊那條線 */
        z-index: 3;
    }


@media (max-width: 768px) {
    .tab-page-right[b-g446hmx5k1] {
        flex-direction: column; /* 小尺寸改上下排列 */
        height: calc(100vh - 60px);
    }

    .tab-content[b-g446hmx5k1] {
        border-right: none; /* 小尺寸不要右邊線 */
        border-bottom: 1px solid #ccc; /* 改成下邊線 */
    }

    .tab-bar-vertical-right[b-g446hmx5k1] {
        flex-direction: row; /* 改成水平排 */
        width: 100%; /* 撐滿底部 */
        border-left: none; /* 不要左邊線 */
        border-top: 1px solid #ccc; /* 改成上邊線 */
    }

    .tab-button-vertical[b-g446hmx5k1] {
        writing-mode: horizontal-tb; /* 改成水平文字 */
        text-orientation: mixed;
        flex: 1;
        border-bottom: none; /* 移除下邊界線 */
        border-right: 1px solid #ccc; /* 改成右邊界線 */
    }

        .tab-button-vertical:last-child[b-g446hmx5k1] {
            border-right: none; /* 最後一個不要右邊線 */
        }

        .tab-button-vertical.active[b-g446hmx5k1] {
            border-left: none; /* 小尺寸不用左線 */
            border-top: 2px solid #007bff; /* 用上線標示 active */
            background-color: #ffffff;
            font-weight: bold;
        }

        .tab-button-vertical .tab-overlay[b-g446hmx5k1] {
            display: none; /* 小尺寸不需要遮擋線 */
        }
}
/* /Pages/Pages_Attendance/ChargeRuleModal.razor.rz.scp.css */
body[b-60nq61fc4g] {
}
/* /Pages/Pages_Attendance/StudentAttendanceDetailModal.razor.rz.scp.css */
/* ====== Modal layout ====== */
.attd-modal[b-jumy8ei65h] {
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    gap: 12px;
    max-height: 80vh;
    min-width: 50vw;
    overflow: hidden;
}

/* ====== Header ====== */
.attd-header .title[b-jumy8ei65h] {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: .5em;
}

    .attd-header .title .class[b-jumy8ei65h] {
        opacity: .85;
    }

    .attd-header .title .sep[b-jumy8ei65h] {
        opacity: .35;
    }

    .attd-header .title .name[b-jumy8ei65h] {
        letter-spacing: .5px;
    }

.attd-header .sub[b-jumy8ei65h] {
    margin-top: 4px;
    font-size: .9rem;
    color: #6b7280;
}

    .attd-header .sub .dot[b-jumy8ei65h] {
        margin: 0 .5em;
        opacity: .5;
    }

/* ====== Summary cards ====== */
.attd-summary[b-jumy8ei65h] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}

    .attd-summary .card[b-jumy8ei65h] {
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        padding: 10px 12px;
        background: #fafafa;
    }

    .attd-summary .label[b-jumy8ei65h] {
        font-size: .8rem;
        color: #6b7280;
        margin-bottom: 6px;
    }

    .attd-summary .value[b-jumy8ei65h] {
        font-size: 1.2rem;
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 6px;
    }

/* chips in summary */
.chip[b-jumy8ei65h] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: .75rem;
    margin-left: 6px;
    border: 1px solid #e5e7eb;
    background: #fff;
}

    .chip.all[b-jumy8ei65h] {
        background: #eef6ff;
        border-color: #cfe5ff;
    }

    .chip.part[b-jumy8ei65h] {
        background: #fef6e7;
        border-color: #f8e0b8;
    }

    .chip.continus[b-jumy8ei65h] {
        background: #fdecec;
        border-color: #f5bcbc;
    }

/* ====== List rows ====== */
.attd-list[b-jumy8ei65h] {
    overflow-y: auto; /* 垂直捲動 */
    overflow-x: hidden; /* 禁止水平捲動 */
    padding-right: 4px;
}

.row[b-jumy8ei65h] {
    display: grid;
    grid-template-columns: 140px 1fr max-content;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,.03);
    margin-bottom: 10px;
    min-height: 60px;
}

.date-col .date[b-jumy8ei65h] {
    font-weight: 700;
}

.date-col .dow[b-jumy8ei65h] {
    font-size: .8rem;
    color: #6b7280;
}

/* time column */
.time-col[b-jumy8ei65h] {
    display: grid;
    grid-auto-rows: minmax(20px, auto);
    grid-template-columns: 140px 1fr; /* k / v */
    gap: 8px 16px;
    white-space: nowrap;
}

    .time-col.only-status[b-jumy8ei65h] {
        display: flex;
        align-items: center;
        gap: 8px;
    }

/* key-value */
.kv[b-jumy8ei65h] {
    display: contents;
}

    .kv .k[b-jumy8ei65h] {
        color: #6b7280;
        font-size: .9rem;
    }

    .kv .v[b-jumy8ei65h] {
        font-weight: 600;
        letter-spacing: .3px;
    }

/* right status badges */
.status-col[b-jumy8ei65h] {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    white-space: nowrap;
}

/* badges */
.badge[b-jumy8ei65h] {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: .8rem;
    border: 1px solid transparent;
    white-space: nowrap;
    line-height: 1;
    word-break: keep-all;
}

    .badge.none[b-jumy8ei65h] {
        background: #f3f4f6;
        border-color: #e5e7eb;
        color: #374151;
    }

    .badge.leave[b-jumy8ei65h] {
        background: #f0f9ff;
        border-color: #bae6fd;
        color: #0369a1;
    }

        .badge.leave.strong[b-jumy8ei65h] {
            background: #e6f2ff;
            border-color: #b6dbff;
            color: #035aa6;
        }

    .badge.ot[b-jumy8ei65h] {
        background: #fff7ed;
        border-color: #fed7aa;
        color: #9a3412;
    }

    .badge.charge[b-jumy8ei65h] {
        background: #f0fdf4;
        border-color: #bbf7d0;
        color: #166534;
    }

    .badge.isev[b-jumy8ei65h] {
        background: #fff1f2; /* very light pink */
        border-color: #fecdd3; /* light pink border */
        color: #9f1239; /* deep rose text */
    }

/* ====== Footer ====== */
.attd-footer[b-jumy8ei65h] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 6px;
}

.btn[b-jumy8ei65h] {
    appearance: none;
    border: 1px solid #e5e7eb;
    background: #fff;
    padding: 8px 14px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
}

    .btn:hover[b-jumy8ei65h] {
        background: #f8fafc;
    }

    .btn.ghost[b-jumy8ei65h] {
        color: #374151;
    }

/* ====== RWD ====== */
@media (max-width: 900px) {
    .attd-summary[b-jumy8ei65h] {
        grid-template-columns: repeat(2, 1fr);
    }

    .row[b-jumy8ei65h] {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .status-col[b-jumy8ei65h] {
        justify-self: start;
    }

    .time-col[b-jumy8ei65h] {
        grid-template-columns: 120px 1fr;
    }
}

@media (max-width: 520px) {
    .attd-summary[b-jumy8ei65h] {
        grid-template-columns: 1fr 1fr;
    }

    .time-col[b-jumy8ei65h] {
        grid-template-columns: 100px 1fr;
    }
}

/* ====== Print toggle（父元件只負責顯示/隱藏） ====== */
.onlyprint[b-jumy8ei65h] {
    display: none;
}

@media print {
    .noprint[b-jumy8ei65h] {
        display: none !important;
    }

    .onlyprint[b-jumy8ei65h] {
        display: block !important;
    }
}
/* /Pages/Pages_Attendance/StudentAttendanceEditPage.razor.rz.scp.css */
/* 字體與基礎色調（Apple 極簡感） */
.ea-page[b-9b89w8js7v] {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Noto Sans TC", "PingFang TC", "Heiti TC", Arial, sans-serif;
    color: #0a0a0a;
    padding: 12px 16px 24px;
    margin: 0 auto;
}

/* 頂部列：黏頂、投影很輕 */
.ea-header[b-9b89w8js7v] {
    position: sticky;
    top: 0;
    z-index: 5;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: center;
    background: #ffffffcc;
    backdrop-filter: saturate(180%) blur(16px);
    padding: 12px 16px;
    border: 1px solid #e5e5ea;
    border-radius: 14px;
    box-shadow: 0 1px 0 rgba(0,0,0,0.03);
}

.ea-header-left[b-9b89w8js7v] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ea-header-right[b-9b89w8js7v] {
    display: flex;
    justify-content: flex-end;
}

.ea-label[b-9b89w8js7v] {
    font-size: 14px;
    color: #3a3a3c;
}

.ea-date[b-9b89w8js7v] {
    appearance: none;
    -webkit-appearance: none;
    font-size: 14px;
    padding: 8px 10px;
    border: 1px solid #e5e5ea;
    border-radius: 10px;
    background: #fff;
    color: #111;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
    min-width: 200px;
}

    .ea-date:focus[b-9b89w8js7v] {
        border-color: #b2b7ff;
        box-shadow: 0 0 0 3px rgba(60,130,255,.12);
    }

/* Summary chips */
.ea-summary[b-9b89w8js7v] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.ea-chip[b-9b89w8js7v] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    font-size: 13px;
    line-height: 1;
    background: #f2f2f7;
    color: #1c1c1e;
    border: 1px solid #e5e5ea;
    border-radius: 999px;
}

    .ea-chip strong[b-9b89w8js7v] {
        font-weight: 600;
    }

.ea-chip-blue[b-9b89w8js7v] {
    background: #eef3ff;
    color: #0a3bcc;
    border-color: #dfe7ff;
}

.ea-chip-amber[b-9b89w8js7v] {
    background: #fff7ec;
    color: #8a4b00;
    border-color: #ffe7c2;
}

/* 主要內容 */
.ea-main[b-9b89w8js7v] {
    margin-top: 14px;
    display: grid;
    gap: 14px;
}

/* 班級容器 */
.ea-class[b-9b89w8js7v] {
    background: #fff;
    border: 1px solid #e5e5ea;
    border-radius: 16px;
    box-shadow: 0 1px 0 rgba(0,0,0,0.03);
    padding: 12px;
}

.ea-class-head[b-9b89w8js7v] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 4px 12px;
    border-bottom: 1px solid #f0f0f5;
}

.ea-class-name[b-9b89w8js7v] {
    font-size: 16px;
    font-weight: 600;
    color: #1c1c1e;
}

/* ===========================
   瀑布式（Masonry）關鍵設定
   =========================== */
/* 用 columns 建立瀑布欄，卡片高度互不影響 */
.ea-students[b-9b89w8js7v] {
    column-count: 4; /* 預設 4 欄 */
    column-gap: 12px; /* 欄距 */
    padding: 12px 4px 4px;
}

/* 斷點：4 → 3 → 2 → 1 欄 */
@media (max-width: 1280px) {
    .ea-students[b-9b89w8js7v] {
        column-count: 3;
    }
}

@media (max-width: 920px) {
    .ea-students[b-9b89w8js7v] {
        column-count: 2;
    }
}

@media (max-width: 600px) {
    .ea-students[b-9b89w8js7v] {
        column-count: 1;
    }
}

/* 每張卡片需避免被切斷，並以 inline-block 塞進 columns */
.ea-stu[b-9b89w8js7v] {
    display: flex; /* 讓卡片進入 columns 流 */
    width: 100%; /* 滿欄寬 */
    break-inside: avoid; /* 關鍵：避免分裂 */
    -webkit-column-break-inside: avoid;
    background: #fcfcfd;
    border: 1px solid #ececf0;
    border-radius: 14px;
    padding: 10px 12px;
    margin: 0 0 12px 0; /* 卡片之間的縱向間距由 margin 控制 */
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
    gap: 4px;
    flex-wrap: wrap;
    cursor: pointer;
}

    .ea-stu:hover[b-9b89w8js7v] {
        transform: translateY(-1px);
        box-shadow: 0 2px 12px rgba(0,0,0,0.05);
        border-color: #e5e5ea;
    }

/* 學生標頭 */
.ea-stu-top[b-9b89w8js7v] {
    display: grid;
    grid-template-columns: 40px 1fr;
    align-items: center;
    gap: 8px;
}

.ea-stu-id[b-9b89w8js7v] {
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: #3a3a3c;
    background: #f2f2f7;
    border: 1px solid #e5e5ea;
    border-radius: 10px;
    padding: 6px 6px;
    text-align: center;
}

.ea-stu-name[b-9b89w8js7v] {
    font-size: 15px;
    font-weight: 600;
    color: #111;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 狀態列（刷退/請假/無） */
.ea-stu-status[b-9b89w8js7v] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

/* 標籤 badge */
.ea-badge[b-9b89w8js7v] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    font-size: 13px;
    line-height: 1;
    border-radius: 999px;
    border: 1px solid #e5e5ea;
    background: #f5f5f7;
    color: #1c1c1e;
    user-select: none;
}

.ea-badge-blue[b-9b89w8js7v] {
    background: #eef3ff;
    color: #0a3bcc;
    border-color: #dfe7ff;
}

.ea-badge-amber[b-9b89w8js7v] {
    background: #fff7ec;
    color: #8a4b00;
    border-color: #ffe7c2;
}

.ea-badge-muted[b-9b89w8js7v] {
    background: #f2f2f7;
    color: #636366;
    border-color: #e5e5ea;
}

.ea-badge-red[b-9b89w8js7v] {
    background: #fff2f2;
    color: #b00020;
    border-color: #ffdad6;
}

/* 捲動與容器 spacing 調校 */
.ea-main[b-9b89w8js7v] {
    overflow: visible;
}

/* 多筆刷退紀錄區塊 */
.mutiple-records-section[b-9b89w8js7v] {
    margin-top: 24px;
    padding: 16px;
    background: #fff7f8; /* 🌸淡粉底色 */
    border: 1px solid #f5d9dd; /* 淺粉邊線 */
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}

/* 每位學生區塊 */
.mutiple-student[b-9b89w8js7v] {
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f5;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

    .mutiple-student:last-child[b-9b89w8js7v] {
        border-bottom: none;
    }

/* 學生姓名標頭 */
.mutiple-student-header[b-9b89w8js7v] {
    font-size: 15px;
    font-weight: 600;
    color: #1c1c1e;
    margin: auto 0;
}

/* 每筆刷退紀錄的 chip */
.mutiple-student-chip[b-9b89w8js7v] {
    align-items: center;
    gap: 8px;
    background: #f2f2f7;
    border: 1px solid #e5e5ea;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 13px;
    line-height: 1;
    margin: 0 6px 6px 0;
    color: #1c1c1e;
    transition: background .15s ease, border-color .15s ease;
    cursor: pointer;
    margin: auto 0;
}

    /* 最新紀錄 chip 樣式 */
    .mutiple-student-chip.latest[b-9b89w8js7v] {
        background: #eef3ff;
        border-color: #cddcff;
        box-shadow: 0 0 0 2px rgba(60,130,255,0.08);
        position: relative;
    }

/* 最新標籤 */
.latest-tag[b-9b89w8js7v] {
    background: #007aff;
    color: #fff !important;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 6px;
    margin-left: 6px;   
}

    .mutiple-student-chip:hover[b-9b89w8js7v] {
        background: #eef3ff;
        border-color: #dfe7ff;
    }

    /* 老師 / 家長 樣式細節（可選） */
    .mutiple-student-chip span:first-child[b-9b89w8js7v] {
        font-weight: 500;
        color: #3a3a3c;
    }

    .mutiple-student-chip span:last-child[b-9b89w8js7v] {
        font-family: "SF Mono", monospace;
        font-size: 13px;
        color: #555;
    }

/* 在最上層頁面中排版 */
.mutiple-records-section h4[b-9b89w8js7v] {
    font-size: 16px;
    margin-bottom: 12px;
    color: #111;
    font-weight: 600;
}

/* 多筆刷退紀錄 - 區塊標題 */
.mutiple-records-section-header[b-9b89w8js7v] {
    font-size: 16px;
    font-weight: 600;
    color: #1c1c1e;
    padding-bottom: 10px;
    margin-bottom: 12px;
    border-bottom: 1px solid #e5e5ea;
    display: flex;
    align-items: center;
    gap: 8px;
}

    /* 標題左側圓點（可選，Apple感的輕指示） */
    .mutiple-records-section-header[b-9b89w8js7v]::before {
        content: "";
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #007aff; /* iOS 藍 */
        opacity: 0.8;
    }
/* /Pages/Pages_Attendance/StudentAttendancePage.razor.rz.scp.css */
/* 兩欄佈局：左 300px / 右自適應 */
.attendance-layout[b-oquoek9cur] {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 16px;
    padding: 12px 12px 24px;
    color: #111;
    background: #fff;
}

/* 左側固定欄（sticky） */
.sidebar[b-oquoek9cur] {
    position: sticky;
    top: 12px;
    align-self: start;
    display: grid;
    gap: 12px;
    height: fit-content;
}

/* 工具列卡片 */
.toolbar[b-oquoek9cur] {
    border: 1px solid #e6e6e6;
    background: #fafafa;
    border-radius: 14px;
    padding: 12px;
    display: grid;
    gap: 12px;
}

.field[b-oquoek9cur] {
    display: grid;
    gap: 6px;
}

    .field label[b-oquoek9cur] {
        font-size: 12px;
        color: #666;
    }

.date-range[b-oquoek9cur] {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    border: 1px solid #ddd;
    background: #fff;
    padding: 6px 10px;
    border-radius: 10px;
}

.date[b-oquoek9cur] {
    border: none;
    outline: none;
    background: transparent;
    font-size: 14px;
}

.sep[b-oquoek9cur] {
    color: #999;
    font-size: 12px;
}

.text[b-oquoek9cur], .select[b-oquoek9cur] {
    height: 36px;
    padding: 0 10px;
    font-size: 14px;
    border: 1px solid #ddd;
    border-radius: 10px;
    background: #fff;
    color: #111;
}

/* 操作區卡片（其餘按鈕） */
.actions[b-oquoek9cur] {
    border: 1px solid #e6e6e6;
    background: #fff;
    border-radius: 14px;
    padding: 12px;
    display: grid;
    gap: 8px;
}

/* 按鈕 */
.btn[b-oquoek9cur] {
    appearance: none;
    cursor: pointer;
    border-radius: 12px;
    border: 1px solid #d9d9d9;
    background: #fff;
    color: #111;
    padding: 8px 14px;
    font-size: 14px;
    transition: box-shadow .2s ease, transform .02s ease, background .15s ease, border-color .15s ease;
    width: 100%;
}

    .btn:hover[b-oquoek9cur] {
        border-color: #c8c8c8;
        background: #fcfcfc;
    }

    .btn:active[b-oquoek9cur] {
        transform: translateY(1px);
    }

    .btn.primary[b-oquoek9cur] {
        background: #111;
        color: #fff;
        border-color: #111;
    }

        .btn.primary:hover[b-oquoek9cur] {
            background: #000;
            border-color: #000;
        }

    .btn.ghost[b-oquoek9cur] {
        background: #fff;
        border-color: #dcdcdc;
        color: #111;
    }

    .btn.secondary[b-oquoek9cur] {
        background: #fff;
        border-color: #dcdcdc;
        color: #111;
    }

.w-full[b-oquoek9cur] {
    width: 100%;
}

.mt8[b-oquoek9cur] {
    margin-top: 8px;
}

/* 右側內容 */
.content[b-oquoek9cur] {
    display: grid;
    gap: 16px;
}

/* 統計列 */
.stats[b-oquoek9cur] {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr 1fr;
    gap: 12px;
}

.stat[b-oquoek9cur] {
    background: #ffffff;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 10px 12px;
}

.stat-k[b-oquoek9cur] {
    font-size: 12px;
    color: #6b6b6b;
    margin-bottom: 4px;
}

.stat-v[b-oquoek9cur] {
    font-weight: 700;
    color: #111;
}

/* 卡片（班級分組容器） */
.card[b-oquoek9cur] {
    border: 1px solid #e6e6e6;
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
}

.card-head[b-oquoek9cur] {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    border-bottom: 1px solid #efefef;
    background: #fafafa;
}

.title[b-oquoek9cur] {
    font-weight: 700;
}

.meta[b-oquoek9cur] {
    color: #666;
    font-size: 13px;
    display: inline-flex;
    gap: 8px;
    align-items: center;
}

    .meta .dot[b-oquoek9cur] {
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: #bbb;
        display: inline-block;
    }

.head-actions[b-oquoek9cur] {
    display: inline-flex;
    gap: 8px;
    align-items: center;
}

/* 表格（每班） */
.table-wrap[b-oquoek9cur] {
    overflow: auto;
}

.tbl[b-oquoek9cur] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

    .tbl thead th[b-oquoek9cur] {
        position: sticky;
        top: 0;
        background: #f7f7f7;
        color: #333;
        font-weight: 600;
        font-size: 13px;
        text-align: center;
        padding: 10px 8px;
        border-bottom: 1px solid #e6e6e6;
        z-index: 1;
    }

    .tbl tbody td[b-oquoek9cur] {
        font-size: 14px;
        color: #111;
        padding: 10px 8px;
        border-bottom: 1px solid #f1f1f1;
        text-align: center;
        vertical-align: middle;
        background: #fff;
    }

    .tbl tbody tr:hover td[b-oquoek9cur] {
        background: #fbfbfb;
    }

.t-left[b-oquoek9cur] {
    text-align: left;
    display: flex;
    gap: 8px;
    padding-left: 8px;
}

.t-right[b-oquoek9cur] {
    text-align: right;
}

.name[b-oquoek9cur] {
    font-weight: 700;
}

.sub[b-oquoek9cur] {
    font-size: 12px;
    color: #6d6d6d;
    margin-top: 2px;
}

/* 標籤（單色） */
.pill[b-oquoek9cur] {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 12px;
    line-height: 1;
    border: 1px solid #ddd;
    color: #333;
    background: #f7f7f7;
    white-space: nowrap;
}

    .pill.light[b-oquoek9cur] {
        background: #fff;
        color: #777;
        border-color: #e5e5e5;
    }

    .pill.dark[b-oquoek9cur] {
        background: #111;
        color: #fff;
        border-color: #111;
    }

/* 空狀態 & Debug */
.empty[b-oquoek9cur] {
    padding: 40px 16px;
    text-align: center;
    color: #666;
}

.empty-title[b-oquoek9cur] {
    font-weight: 700;
    color: #111;
    margin-bottom: 6px;
}

.empty-text[b-oquoek9cur] {
    font-size: 14px;
}

.debug[b-oquoek9cur] {
    margin-top: 8px;
    border: 1px dashed #e6e6e6;
    border-radius: 12px;
    padding: 10px 12px;
    background: #fcfcfc;
    color: #444;
}

    .debug > summary[b-oquoek9cur] {
        cursor: pointer;
        color: #666;
        font-size: 14px;
        margin-bottom: 6px;
    }

    .debug .grid[b-oquoek9cur] {
        display: grid;
        grid-template-columns: repeat(3, minmax(0,1fr));
        gap: 6px 12px;
        font-size: 12px;
    }

/* RWD：窄螢幕單欄 */
@media (max-width: 1000px) {
    .attendance-layout[b-oquoek9cur] {
        grid-template-columns: 1fr;
    }

    .sidebar[b-oquoek9cur] {
        position: static;
    }

    .stats[b-oquoek9cur] {
        grid-template-columns: repeat(3, minmax(0,1fr));
    }
}

@media (max-width: 720px) {
    .stats[b-oquoek9cur] {
        grid-template-columns: 1fr;
    }
}

/* 連續請假達門檻的醒目標記（黑白灰 Apple 風） */
.mark[b-oquoek9cur] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: #111;
    color: #fff;
    border: 1px solid #111;
    font-weight: 700;
    line-height: 1.2;
}

.msp-container[b-oquoek9cur] {
    display: block;
    padding: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
}

.msp-row[b-oquoek9cur] {
    display: flex;
    gap: 16px;
    align-items: end;
    flex-wrap: wrap;
}

.msp-col[b-oquoek9cur] {
    flex: 1 1 220px;
    min-width: 220px;
}

.msp-label[b-oquoek9cur] {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    margin-bottom: 6px;
    color: #1f2937; /* 深色字體 */
}

.msp-select[b-oquoek9cur] {
    width: 100%;
    padding: 8px 10px;
    font-size: 14px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    outline: none;
    background: #fff;
}

    .msp-select:focus[b-oquoek9cur] {
        border-color: #3b82f6; /* 帶藍色 */
        box-shadow: 0 0 0 3px rgba(59,130,246,.15);
    }

.msp-checkbox[b-oquoek9cur] {
    display: flex;
    align-items: center;
    justify-content:end;
    gap: 8px;
}

.msp-check[b-oquoek9cur] {
    width: 18px;
    height: 18px;
    accent-color: #3b82f6; /* 帶藍色 */
}

.msp-checklabel[b-oquoek9cur] {
    font-size: 14px;
    color: #1f2937;
    user-select: none;
}
/* /Pages/Pages_Attendance/StudentAttendancePlanPage.razor.rz.scp.css */
.sap-page[b-f6rzuz0ojs] {
    height: calc(100vh - 96px);
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 16px;
    padding: 12px;
    box-sizing: border-box;
    min-height: 0;
}

@media (max-width: 1024px) {
    .sap-page[b-f6rzuz0ojs] {
        grid-template-columns: 1fr;
    }
}

.sap-controls[b-f6rzuz0ojs] {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: auto;
}

.field-row[b-f6rzuz0ojs] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .field-row > label[b-f6rzuz0ojs] {
        font-size: 14px;
        color: #374151;
    }

.date-range[b-f6rzuz0ojs] {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .date-range input[type="date"][b-f6rzuz0ojs] {
        appearance: none;
        border: 1px solid #d1d5db;
        border-radius: 10px;
        padding: 8px 10px;
        font-size: 14px;
        line-height: 1.2;
    }

.sep[b-f6rzuz0ojs] {
    color: #9ca3af;
}

.btn-row[b-f6rzuz0ojs] {
    display: flex;
    gap: 8px;
}

.btn[b-f6rzuz0ojs] {
    border: 1px solid #d1d5db;
    background: #f9fafb;
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 14px;
    cursor: pointer;
}

    .btn.primary[b-f6rzuz0ojs] {
        background: #111827;
        color: #fff;
        border-color: #111827;
    }

    .btn:hover[b-f6rzuz0ojs] {
        filter: brightness(0.96);
    }

.stats[b-f6rzuz0ojs] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.stat[b-f6rzuz0ojs] {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 10px;
    background: #fff;
}

.stat-k[b-f6rzuz0ojs] {
    font-size: 12px;
    color: #6b7280;
}

.stat-v[b-f6rzuz0ojs] {
    font-size: 20px;
    font-weight: 700;
}

.stat.warn[b-f6rzuz0ojs] {
    border-color: #fecaca;
    background: #fff7f7;
}

.legend[b-f6rzuz0ojs] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.chip[b-f6rzuz0ojs] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    border: 1px solid #e5e7eb;
}

    .chip.ok[b-f6rzuz0ojs] {
        background: #f0fdf4;
        border-color: #bbf7d0;
    }

    .chip.err[b-f6rzuz0ojs] {
        background: #fef2f2;
        border-color: #fecaca;
    }

.note[b-f6rzuz0ojs] {
    color: #6b7280;
    font-size: 12px;
    margin-left: 4px;
}

.special-section[b-f6rzuz0ojs] {
    margin-top: 6px;
}

.special-title[b-f6rzuz0ojs] {
    font-size: 13px;
    color: #374151;
    margin-bottom: 6px;
}

.special-list[b-f6rzuz0ojs] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.special-item[b-f6rzuz0ojs] {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .special-item .dt[b-f6rzuz0ojs] {
        width: 96px;
        font-variant-numeric: tabular-nums;
        color: #111827;
    }

    .special-item .ttl[b-f6rzuz0ojs] {
        color: #374151;
    }

.tag[b-f6rzuz0ojs] {
    font-size: 11px;
    padding: 1px 6px;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
}

    .tag.holiday[b-f6rzuz0ojs] {
        background: #fff1f2;
        border-color: #fecdd3;
    }

    .tag.working[b-f6rzuz0ojs] {
        background: #f0f9ff;
        border-color: #bae6fd;
    }

.empty[b-f6rzuz0ojs] {
    color: #9ca3af;
    font-size: 14px;
    padding: 6px 0;
}

.sap-results[b-f6rzuz0ojs] {
    overflow: auto;
    padding-right: 4px;
}

.class-card[b-f6rzuz0ojs] {
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 12px;
    background: #fff;
    margin-bottom: 12px;
}

.class-head[b-f6rzuz0ojs] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 10px;
}

.class-title[b-f6rzuz0ojs] {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
}

.class-sub[b-f6rzuz0ojs] {
    font-size: 12px;
    color: #6b7280;
}

.stu-grid[b-f6rzuz0ojs] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

@media (max-width: 1440px) {
    .stu-grid[b-f6rzuz0ojs] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1024px) {
    .stu-grid[b-f6rzuz0ojs] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .stu-grid[b-f6rzuz0ojs] {
        grid-template-columns: 1fr;
    }
}

.stu-item[b-f6rzuz0ojs] {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 10px;
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 8px;
}

    .stu-item.ok[b-f6rzuz0ojs] {
        background: #f9fafb;
    }

    .stu-item.err[b-f6rzuz0ojs] {
        background: #fff7f7;
        border-color: #fecaca;
    }

.stu-name[b-f6rzuz0ojs] {
    font-weight: 600;
    color: #111827;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stu-qty[b-f6rzuz0ojs] {
    font-variant-numeric: tabular-nums;
    color: #374151;
}

.stu-chip[b-f6rzuz0ojs] {
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
}

    .stu-chip.ok[b-f6rzuz0ojs] {
        background: #f0fdf4;
        border-color: #bbf7d0;
    }

    .stu-chip.err[b-f6rzuz0ojs] {
        background: #fef2f2;
        border-color: #fecaca;
    }
/* /Pages/Pages_Attendance/StudentAttendancePlanSetModal.razor.rz.scp.css */
.modal-wrap[b-58z59slnh2] {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    /*padding: 16px;*/
    box-sizing: border-box;
}

.modal-card[b-58z59slnh2] {
    width: 100%;
    max-width: 960px; /* modal 內的預設寬度 */
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    overflow: hidden;
}

.modal-head[b-58z59slnh2] {
    padding: 16px 20px 8px 20px;
    border-bottom: 1px solid #eef0f3;
    display: flex;
    justify-content:space-between;
}

    .modal-head .title[b-58z59slnh2] {
        font-size: 18px;
        font-weight: 700;
        line-height: 1.4;
    }

    .modal-head .sub[b-58z59slnh2] {
        margin-top: 4px;
        color: #6b7280;
        font-size: 13px;
    }

/* --- 總覽：每段 chip --- */
.overview[b-58z59slnh2] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid #f3f4f6;
}

.chip[b-58z59slnh2] {
    display: grid;
    grid-template-rows: auto auto auto;
    gap: 4px;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fafafa;
    transition: transform .1s ease, box-shadow .1s ease;
}

    .chip:hover[b-58z59slnh2] {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0,0,0,.06);
    }

.chip-time[b-58z59slnh2] {
    font-weight: 700;
    font-size: 16px;
}

.chip-range[b-58z59slnh2] {
    font-size: 12px;
    color: #6b7280;
}

.chip-meta[b-58z59slnh2] {
    font-size: 12px;
    color: #374151;
}

/* --- 明細：依 SetTime 分群 --- */
.group-list[b-58z59slnh2] {
    padding: 8px 20px 20px 20px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.time-section[b-58z59slnh2] {
    border: 1px solid #eef0f3;
    border-radius: 12px;
}

.time-section-head[b-58z59slnh2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid #f3f4f6;
    background: #fcfcfd;
}

.time-badge[b-58z59slnh2] {
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    font-size: 12px;
    font-weight: 700;
}

.time-count[b-58z59slnh2] {
    font-size: 12px;
    color: #6b7280;
}

.segments[b-58z59slnh2] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 12px;
}

@media (max-width: 720px) {
    .segments[b-58z59slnh2] {
        grid-template-columns: 1fr;
    }
}

.segment-card[b-58z59slnh2] {
    border: 1px solid #eef0f3;
    border-radius: 10px;
    background: #fff;
    padding: 10px 12px;
}

.seg-line[b-58z59slnh2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding-bottom: 8px;
    border-bottom: 1px dashed #e5e7eb;
}

.seg-range[b-58z59slnh2] {
    font-weight: 600;
}

    .seg-range .seg-date[b-58z59slnh2] {
        letter-spacing: .3px;
    }

.seg-sep[b-58z59slnh2] {
    margin: 0 6px;
    color: #9ca3af;
}

.seg-meta[b-58z59slnh2] {
    font-size: 12px;
    color: #6b7280;
    white-space: nowrap;
}

.seg-days[b-58z59slnh2] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 8px;
}

.day-pill[b-58z59slnh2] {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 6px 8px;
    border-radius: 999px;
    background: #f3f4f6;
    font-size: 12px;
    color: #111827;
}

    .day-pill .dd[b-58z59slnh2] {
        font-weight: 800;
    }

    .day-pill .dow[b-58z59slnh2] {
        font-size: 11px;
        color: #6b7280;
    }

.empty[b-58z59slnh2] {
    padding: 24px;
    text-align: center;
    color: #6b7280;
}
/* /Pages/Pages_Attendance/StudentAttendancePrintAllModal.razor.rz.scp.css */
/* ========== Toolbar（不列印） ========== */
.toolbar[b-jj1las8mvm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    min-width: 50vw;
}

    .toolbar .actions[b-jj1las8mvm] {
        display: flex;
        gap: 8px;
    }

/* ========== 勾選清單（不列印） ========== */
/* 外層改為直向堆疊，避免左右捲動 */
.picklist[b-jj1las8mvm] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 8px 8px 20px;
    max-height: 55vh;
    overflow-y: auto; /* 垂直捲動 */
    overflow-x: hidden; /* 禁止水平捲動 */
}

/* 每個班級群組 */
.class-group[b-jj1las8mvm] {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 10px;
    background: #fafafa;
}

/* 群組標題列與操作 */
.class-header[b-jj1las8mvm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

    .class-header .title[b-jj1las8mvm] {
        display: flex;
        align-items: baseline;
        gap: 8px;
    }

    .class-header .meta[b-jj1las8mvm] {
        color: #6b7280;
        font-size: 12px;
    }

    .class-header .actions[b-jj1las8mvm] {
        display: flex;
        gap: 8px;
    }

/* 班級內學生勾選區：自適應欄數 */
.class-pickgrid[b-jj1las8mvm] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px 12px;
}

@media (max-width: 640px) {
    .class-pickgrid[b-jj1las8mvm] {
        grid-template-columns: 1fr;
    }
}

/* 單一學生的勾選項目 */
.pick[b-jj1las8mvm] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
}

    .pick input[type="checkbox"][b-jj1las8mvm] {
        width: 16px;
        height: 16px;
    }

    .pick .name[b-jj1las8mvm] {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

/* ========== 按鈕（通用、簡潔） ========== */
button[b-jj1las8mvm] {
    appearance: none;
    border: 1px solid #d1d5db;
    background: #f9fafb;
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
}

    button:hover[b-jj1las8mvm] {
        background: #f3f4f6;
    }

    button:active[b-jj1las8mvm] {
        background: #e5e7eb;
    }

    button:disabled[b-jj1las8mvm] {
        opacity: .5;
        cursor: not-allowed;
    }

/* ========== 列印顯示/隱藏控制 ========== */
/* 預設不顯示列印區 */
.print-area[b-jj1las8mvm] {
    display: none;
}

/* 只有列印時顯示 print-area；隱藏帶 .noprint 的元素 */
@media print {
    .noprint[b-jj1las8mvm] {
        display: none !important;
    }

    .onlyprint[b-jj1las8mvm],
    .print-area[b-jj1las8mvm] {
        display: block !important;
    }
}
/* /Pages/Pages_Attendance/StudentAttendancePrintComponent.razor.rz.scp.css */
/* ===================== 基本設定（螢幕預設隱藏） ===================== */
.print-area[b-gikf57eedp] {
    display: none;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, 'Noto Sans TC', 'Microsoft JhengHei', Arial, sans-serif;
    line-height: 1.45;
}

    /* 可選：在螢幕預覽（非列印）時顯示 */
    .print-area.preview[b-gikf57eedp] {
        display: block;
    }

/* ===================== 列印設定 ===================== */
@media print {
    /* 紙張與邊界（可視超頁狀況把 10mm 再調小到 8mm） */
    @page {
        size: A4 portrait;
        margin: 10mm;
    }

    .print-area[b-gikf57eedp] {
        display: block !important;
        color: #000;
        font-size: 11px;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        /* 一位學生一頁 */
        page-break-after: always;
        break-after: page;
        /* 避免本區被切斷 */
        page-break-inside: avoid;
        break-inside: avoid;
    }
        /* 避免最後一位學生後面多空白頁 */
        .print-area:last-child[b-gikf57eedp] {
            page-break-after: auto;
            break-after: auto;
        }

        /* 標題、區間 */
        .print-area .print-header[b-gikf57eedp] {
            margin: 0 0 4px 0;
            display: flex;
            justify-content: space-between;
        }

    .print-header .header-title[b-gikf57eedp] {
        font-size: 16px;
        font-weight: 600;
        letter-spacing: 0.2px;
        display: flex;
        gap: 4px;
    }

    .print-header .range[b-gikf57eedp] {
        font-size: 12px;
        margin-top: auto;
    }

    /* 表格（緊湊） */
    .print-table[b-gikf57eedp] {
        width: 100%;
        border-collapse: collapse;
        table-layout: fixed; /* 欄寬穩定 */
        margin: 6px 0 8px 0; /* 縮小上下間距 */
        font-size: 11px;
    }

        .print-table th[b-gikf57eedp],
        .print-table td[b-gikf57eedp] {
            border: 1px solid #000;
            padding: 2px 3px; /* 壓縮 padding */
            text-align: left;
            vertical-align: top;
            word-break: break-word;
        }

        .print-table th[b-gikf57eedp] {
            background: #eee; /* 灰底表頭 */
            font-weight: 800;
        }
        /* 表頭在每頁重複顯示 */
        .print-table thead[b-gikf57eedp] {
            display: table-header-group;
        }

        .print-table tfoot[b-gikf57eedp] {
            display: table-footer-group;
        }
        /* 避免列內分頁 */
        .print-table tr[b-gikf57eedp],
        .print-table td[b-gikf57eedp],
        .print-table th[b-gikf57eedp] {
            page-break-inside: avoid;
            break-inside: avoid;
        }

    /* ===================== Summary（緊湊左右兩欄） ===================== */
    .print-summary.ps-compact[b-gikf57eedp] {
        margin-top: 12px;
        border: 1px solid #000;
        border-radius: 4px;
        padding: 6px; /* 縮小 padding */
        background: none; /* 移除底色 */
        font-size: 12px;
        page-break-inside: avoid; /* 避免切斷 */
        break-inside: avoid;
    }

    .ps-columns[b-gikf57eedp] {
        display: grid;
        grid-template-columns: 1fr; /* 左右兩欄 */
        gap: 6px 10px; /* 緊湊欄間距 */
    }

    .ps-col[b-gikf57eedp] {
        min-width: 0;
    }

    .ps-title[b-gikf57eedp] {
        font-weight: 800;
        margin: 0 0 2px 0;
        font-size: 13px;
        letter-spacing: .2px;
    }

    .ps-grid[b-gikf57eedp] {
        display: grid;
        grid-template-columns: 80px 1fr; /* key / value */
        gap: 3px 6px; /* 緊湊格線間距 */
        align-items: start;
    }

    .ps-k[b-gikf57eedp] {
        color: #000;
        font-weight: 700;
    }

    .ps-v[b-gikf57eedp] {
        word-break: break-word;
    }

    .ps-sub[b-gikf57eedp],
    .ps-note[b-gikf57eedp] {
        color: #888;
        margin-left: 4px;
    }

    .ps-chip[b-gikf57eedp] {
        display: inline-block;
        margin-left: 6px;
        padding: 0 5px;
        border-radius: 999px;
        font-size: 10px;
        line-height: 16px;
        font-weight: 700;
        border: 1px solid #000;
        background: none;
    }

    /* 上月承接清單（若有顯示） */
    .prev-title[b-gikf57eedp] {
        font-size: 11px;
        font-weight: 800;
        margin: 4px 0 2px 0;
    }

    .prev-list[b-gikf57eedp] {
        margin: 0;
        padding-left: 16px;
        font-size: 11px;
    }

        .prev-list li[b-gikf57eedp] {
            line-height: 1.4;
        }

    /* 連結在列印時一律黑色、無底線（若有） */
    a[b-gikf57eedp], a:visited[b-gikf57eedp] {
        color: #000;
        text-decoration: none;
    }
}

/* =====================（選擇性）螢幕預覽時的精簡樣式 ===================== */
.print-area.preview h2[b-gikf57eedp] {
    font-size: 16px;
    margin-bottom: 4px;
}

.print-area.preview .range[b-gikf57eedp] {
    font-size: 12px;
    margin-bottom: 6px;
}

.print-area.preview .print-summary.ps-compact[b-gikf57eedp] {
    border: 1px solid #e5e7eb;
    background: #fafafa;
}

.print-area.preview .ps-k[b-gikf57eedp] {
    color: #6b7280;
}

.print-area.preview .ps-sub[b-gikf57eedp],
.print-area.preview .ps-note[b-gikf57eedp] {
    color: #6b7280;
}

.print-area.preview .ps-chip[b-gikf57eedp] {
    border: 1px solid #e5e7eb;
    background: #fff;
}

.summary-grid[b-gikf57eedp] {
}

.summary-card[b-gikf57eedp] {
    border: 1px solid #e5e7eb;
    background: #fafafa;
    border-radius: 6px;
    padding: 6px;
}

.summary-card-body[b-gikf57eedp] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

    .summary-card-body div[b-gikf57eedp] {
        display: grid;
        grid-template-columns: 60px 1fr; /* key / value */
        gap: 3px 6px; /* 緊湊格線間距 */
        align-items: start;
    }

.col-title[b-gikf57eedp] {
    color: #000;
    font-weight: 700;
}

.col-content[b-gikf57eedp] {
    word-break: break-word;
}
/* /Pages/Pages_Audit/ArticleHistoryPage.razor.rz.scp.css */
/* ===== ArticleHistory – standalone CSS ===== */

/* 版面骨架 */
.page-container[b-gnhqv1qqki] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

/* 左側清單 */
.list-section[b-gnhqv1qqki] {
    flex: 0 0 300px;
    padding: .5rem;
    border-right: 1px solid #ddd;
    background: #fafafa;
    max-height: 100vh;
    overflow: auto;
}

.article-card[b-gnhqv1qqki] {
    padding: .5rem;
    border-radius: 6px;
    cursor: pointer;
}

    .article-card:hover[b-gnhqv1qqki] {
        background: #f0f0f0;
    }

/* 右側內容（列印區） */
.content-area[b-gnhqv1qqki] {
    flex: 1;
    padding: 1rem;
    max-height: 100vh;
    overflow: auto;
}

/* 常用工具 */
.w-100[b-gnhqv1qqki] {
    width: 100%;
}

.mb-3[b-gnhqv1qqki] {
    margin-bottom: 1rem;
}

.p-3[b-gnhqv1qqki] {
    padding: 1rem;
}

.d-flex[b-gnhqv1qqki] {
    display: flex;
}

.justify-content-center[b-gnhqv1qqki] {
    justify-content: center;
}

.gap-3[b-gnhqv1qqki] {
    gap: 1rem;
}

.me-3[b-gnhqv1qqki] {
    margin-right: 1rem;
}

.me-2[b-gnhqv1qqki] {
    margin-right: .5rem;
}

.ms-4[b-gnhqv1qqki] {
    margin-left: 1.5rem;
}

.px-2[b-gnhqv1qqki] {
    padding-left: .5rem;
    padding-right: .5rem;
}

.img-fluid[b-gnhqv1qqki] {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
}

.btn[b-gnhqv1qqki] {
    display: inline-block;
    padding: .4rem .8rem;
    border-radius: 4px;
    text-decoration: none;
    font-size: .9rem;
}

.btn-secondary[b-gnhqv1qqki] {
    background: #666;
    color: #fff;
}

    .btn-secondary:hover[b-gnhqv1qqki] {
        background: #444;
    }

.alert[b-gnhqv1qqki] {
    padding: 1rem;
    border-radius: .5rem;
}

.alert-primary[b-gnhqv1qqki] {
    background: #eaf2ff;
    border: 1px solid #bcd0ff;
    color: #1a3c8a;
}

.fw-bold[b-gnhqv1qqki] {
    font-weight: 700;
}

.text-center[b-gnhqv1qqki] {
    text-align: center;
}



.pointer[b-gnhqv1qqki] {
    cursor: pointer;
}

.hunderline[b-gnhqv1qqki] {
    text-decoration: underline;
}

/* 表格（螢幕） */
.custom-table[b-gnhqv1qqki] {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
    font-size: .9rem;
}

    .custom-table th[b-gnhqv1qqki], .custom-table td[b-gnhqv1qqki] {
        border: 1px solid #ccc;
        padding: .5rem;
        text-align: center;
    }

    .custom-table th[b-gnhqv1qqki] {
        background: #f7f7f7;
        font-weight: 700;
    }

.row-unread[b-gnhqv1qqki] {
    background: #fff7f7;
}

/* 狀態色 */
.text-read[b-gnhqv1qqki] {
    color: #16a34a;
    font-weight: 500;
}

.text-unread[b-gnhqv1qqki] {
    color: #dc2626;
}

.text-success[b-gnhqv1qqki] {
    color: #0f6a2f;
}

.text-danger[b-gnhqv1qqki] {
    color: #b00000;
}

.bg-success[b-gnhqv1qqki] {
    background-color: #16a34a;
}

.bg-opacity-25[b-gnhqv1qqki] {
    opacity: .25;
}

/* 手機 RWD（只在螢幕生效，避免影響列印） */
@media screen and (max-width: 768px) {
    .page-container[b-gnhqv1qqki] {
        flex-direction: column;
    }

    .list-section[b-gnhqv1qqki] {
        flex: none;
        max-height: 220px;
        border-right: none;
        border-bottom: 1px solid #ddd;
    }

    .custom-table th[b-gnhqv1qqki], .custom-table td[b-gnhqv1qqki] {
        font-size: .8rem;
        padding: .3rem;
    }

    .mobile-read-status[b-gnhqv1qqki] {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .mobile-info[b-gnhqv1qqki] {
        display: block;
        font-size: .85rem;
    }
}

/* ===== 列印設定 ===== */
@page {
    size: A4 portrait;
    margin: 12mm;
}

@media print {
    /* 單欄排版；隱藏左欄與按鈕 */
    .page-container[b-gnhqv1qqki] {
        display: block !important;
        padding: 0 !important;
        gap: 0 !important;
    }

    .list-section[b-gnhqv1qqki], .btn[b-gnhqv1qqki] {
        display: none !important;
    }

    /* 解除列印區高度/捲動（僅針對容器，不動 table 元素） */
    html[b-gnhqv1qqki], body[b-gnhqv1qqki], .content-area[b-gnhqv1qqki], #printArea[b-gnhqv1qqki] {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
        /* 清掉列印區子孫若有 inline height/overflow/vh 設定 */
        #printArea [style*="height"][b-gnhqv1qqki],
        #printArea [style*="max-height"][b-gnhqv1qqki],
        #printArea [style*="overflow"][b-gnhqv1qqki],
        #printArea [style*="vh"][b-gnhqv1qqki] {
            height: auto !important;
            max-height: none !important;
            overflow: visible !important;
        }

    /* 表格：強制使用正常表格顯示，避免被其他規則改成 block */
    table[b-gnhqv1qqki] {
        display: table !important;
        width: 100% !important;
        border-collapse: collapse !important;
        table-layout: auto !important;
        page-break-inside: auto;
    }

    thead[b-gnhqv1qqki] {
        display: table-header-group !important;
    }

    tbody[b-gnhqv1qqki] {
        display: table-row-group !important;
    }

    tfoot[b-gnhqv1qqki] {
        display: table-footer-group !important;
    }

    tr[b-gnhqv1qqki] {
        display: table-row !important;
        page-break-inside: avoid !important;
    }

    th[b-gnhqv1qqki], td[b-gnhqv1qqki] {
        display: table-cell !important;
        padding: 8px !important;
        border: 1px solid #bbb !important;
        font-size: 14px !important;
        vertical-align: middle !important;
    }

    .custom-table th[b-gnhqv1qqki] {
        background: #efefef !important;
        font-weight: 700 !important;
    }

    /* 讓家長狀態在同一列並排 */
    .mobile-read-status[b-gnhqv1qqki] {
        display: inline-flex !important;
        flex-direction: row !important;
        gap: 1rem !important;
    }

    .mobile-info[b-gnhqv1qqki] {
        display: table-cell !important;
    }

    /* 非表格的 flex 容器改成 block，避免夾住內容高度 */
    .d-flex[b-gnhqv1qqki] {
        display: block !important;
    }

    /* 圖片/提示不切頁，色彩保留 */
    img[b-gnhqv1qqki] {
        page-break-inside: avoid !important;
        max-width: 100% !important;
        height: auto !important;
    }

    .alert[b-gnhqv1qqki] {
        page-break-inside: avoid !important;
    }

    body[b-gnhqv1qqki] {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* 文字對比 */
    .text-unread[b-gnhqv1qqki] {
        color: #b00000 !important;
    }

    .text-read[b-gnhqv1qqki] {
        color: #0f6a2f !important;
    }
}

/* 手動換頁用（需要時在元素上加 .page-break） */
.page-break[b-gnhqv1qqki] {
    break-after: page;
}
/* /Pages/Pages_Audit/BoardHistoryPage.razor.rz.scp.css */
/* 頁面容器 */
.page-container[b-4z4a98wyqc] {
    max-width: 1200px;
    margin: 0px auto;
    font-family: Arial, sans-serif;
    color: #000;
    flex-direction: column;
}

/* 學生區塊 */
.student-board[b-4z4a98wyqc] {
    margin-bottom: 15px;
}

.student-header[b-4z4a98wyqc] {
    font-size: 18px;
    font-weight: bold;
    /*padding: 8px;*/
    /*border-radius: 5px;*/
    text-align: center;
    padding-top: 8px;
}

/* 留言板塊 */
.board-card[b-4z4a98wyqc] {
    border: 1px solid #ccc;
    margin: 8px 0;
    padding: 8px;
    border-radius: 5px;
    background: #fff;
}

.board0-area[b-4z4a98wyqc] {
    padding: 8px;
    border-bottom: 1px solid #ddd;
}

.board0-header[b-4z4a98wyqc] {
    font-weight: bold;
    margin-bottom: 5px;
}

.board0-content[b-4z4a98wyqc] {
    font-size: 14px;
    color: #444;
}

/* 子留言區域 */
.subboard-area[b-4z4a98wyqc] {
    margin-top: 8px;
    padding-left: 10px;
    border-left: 2px solid #ccc;
}

.subboard-content[b-4z4a98wyqc] {
    padding: 5px;
    margin-bottom: 5px;
    /*background: #f2f2f2;*/
    border-radius: 5px;
    /*white-space: pre-wrap;*/
}

.subboard-header[b-4z4a98wyqc] {
    font-weight: bold;
    font-size: 14px;
    color: #000;
}

.subbaord-content[b-4z4a98wyqc] {
    font-size: 13px;
    color: #444;
}
/* /Pages/Pages_Audit/LeaveHistoryPage.razor.rz.scp.css */
/* 頁面容器 */
.page-container[b-4z0pke5iaz] {
    max-width: 800px;
    margin: 0px auto;
    font-family: Arial, sans-serif;
    color: #000;
}

/* 學生區塊 */
.student-board[b-4z0pke5iaz] {
    margin-bottom: 15px;
}

.student-header[b-4z0pke5iaz] {
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    padding-top: 8px;
}

.leave-list[b-4z0pke5iaz] {
}

.leave-content[b-4z0pke5iaz] {
    border: 1px solid #ccc;
    margin: 8px 0;
    padding: 8px;
    border-radius: 5px;
    background: #fff;
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

.content-left[b-4z0pke5iaz] {
    flex-grow: 1;
}

.content-right[b-4z0pke5iaz] {
    flex-shrink: 0;
    align-self: end;
}
/* /Pages/Pages_Audit/MedicineHistoryPage.razor.rz.scp.css */
/* Page container */
.page-container[b-grtv6km4vt] {
    margin: 20px;
    padding: 10px;
    font-family: Arial, sans-serif;
}

/* Date section */
.date-section[b-grtv6km4vt] {
    margin-bottom: 20px;
}

/* Date header */
.date-header[b-grtv6km4vt] {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    gap: 1.5em;
}

/* Medicine card */
.med-card[b-grtv6km4vt] {
    background-color: #fff;
    margin-bottom: 15px;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

/* Medicine card header */
.med-card-header[b-grtv6km4vt] {
    display: flex;
    gap: 1em;
    font-weight: bold;
    font-size: 16px;
}

/* Medicine card body */
.med-card-body[b-grtv6km4vt] {
    padding: 0 8px;
}

/* Medicine item */
.med-item[b-grtv6km4vt] {
    display: flex;
    gap: 1em;
    padding: 5px 0;
}

/* Medicine description */
.med-desc[b-grtv6km4vt] {
    font-size: 14px;
}

/* Medicine remark */
.med-remark[b-grtv6km4vt] {
    font-size: 14px;
    color: #333;
}

.med-nofeed[b-grtv6km4vt] {
    color: red;
}
/* /Pages/Pages_Audit/NoticeHistoryPage.razor.rz.scp.css */
/* ========== Apple Minimal Style: noticehistory (no bootstrap, no :root) ========== */
/* 基本色與字型（.razor.css 只影響本元件作用域） */
:host[b-i96prf7eyj] {
    --nh-radius-lg: 16px;
    --nh-radius-md: 12px;
    --nh-radius-sm: 10px;
    --nh-gray-1: #fafafa;
    --nh-gray-2: #f9f9fb;
    --nh-gray-3: #f2f2f7;
    --nh-gray-4: #e5e5ea;
    --nh-gray-5: #d1d1d6;
    --nh-text-1: #111;
    --nh-text-2: #1c1c1e;
    --nh-text-3: #3a3a3c;
    --nh-blue: #0a84ff;
    --nh-blue-2: #0a7af0;
    --nh-red: #ff3b30;
    --nh-green: #34c759;
}

:host[b-i96prf7eyj], *[b-i96prf7eyj] {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Noto Sans TC", Arial, "PingFang TC", "Heiti TC", "Microsoft JhengHei", sans-serif;
    color: var(--nh-text-1);
    line-height: 1.5;
}

/* 工具類 */
.nh-text-primary[b-i96prf7eyj] {
    color: var(--nh-blue);
}

.nh-text-danger[b-i96prf7eyj] {
    color: var(--nh-red);
}

.nh-text-read[b-i96prf7eyj] {
    color: var(--nh-green);
}

.nh-text-unread[b-i96prf7eyj] {
    color: var(--nh-red);
}

.nh-w-100[b-i96prf7eyj] {
    width: 100%;
}

.nh-mb-2[b-i96prf7eyj] {
    margin-bottom: .5rem;
}

.nh-mb-3[b-i96prf7eyj] {
    margin-bottom: 1rem;
}

.nh-mt-3[b-i96prf7eyj] {
    margin-top: 1rem;
}

.nh-me-2[b-i96prf7eyj] {
    margin-right: .5rem;
}

.nh-ms-3[b-i96prf7eyj] {
    margin-left: .75rem;
}

.nh-gap-3[b-i96prf7eyj] {
    gap: 1rem;
}

.nh-flex[b-i96prf7eyj] {
    display: flex;
}

.nh-justify-between[b-i96prf7eyj] {
    justify-content: space-between;
}

.nh-justify-center[b-i96prf7eyj] {
    justify-content: center;
}

/* 版面 */
.nh-container[b-i96prf7eyj] {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 1.25rem;
    margin: 0 auto;
    background: var(--nh-gray-1);
}

.nh-list[b-i96prf7eyj] {
    background: #fff;
    border: 1px solid var(--nh-gray-4);
    border-radius: var(--nh-radius-lg);
    padding: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
    height: 100vh;
    overflow: auto;
}

.nh-content[b-i96prf7eyj] {
    background: #fff;
    border: 1px solid var(--nh-gray-4);
    border-radius: var(--nh-radius-lg);
    padding: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
    height: 100vh;
    overflow: auto;
}

/* 通知卡片 */
.nh-card[b-i96prf7eyj] {
    border: 1px solid var(--nh-gray-4) !important;
    border-radius: var(--nh-radius-md);
    padding: 10px 12px;
    background: #fff;
    transition: transform .06s ease, box-shadow .12s ease, border-color .12s ease;
    cursor: pointer;
}

    .nh-card:hover[b-i96prf7eyj] {
        transform: translateY(-1px);
        border-color: var(--nh-gray-5) !important;
        box-shadow: 0 2px 8px rgba(0,0,0,.08);
    }

/* 類型徽章 */
.nh-badge[b-i96prf7eyj] {
    font-size: 12px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--nh-gray-3);
    color: var(--nh-text-3);
}

/* 兩行截斷 */
.nh-two-line[b-i96prf7eyj] {
    margin-top: 4px;
    font-size: 14px;
    color: var(--nh-text-2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Alert */
.nh-alert[b-i96prf7eyj] {
    padding: 10px 12px;
    border-radius: var(--nh-radius-md);
    border: 1px solid var(--nh-gray-4);
    background: var(--nh-gray-2);
    color: var(--nh-text-2);
}

.nh-alert-primary[b-i96prf7eyj] {
    border-color: #cfe8ff;
    background: #f2f8ff;
    color: var(--nh-blue);
}

/* 攜帶物品清單 */
.nh-bring-list[b-i96prf7eyj] {
    margin: 8px 0 16px;
    padding-left: 1.25rem;
}

    .nh-bring-list li[b-i96prf7eyj] {
        margin: 4px 0;
    }

/* 圖片 */
.nh-photo-grid[b-i96prf7eyj] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
    margin: 8px 0 16px;
}

    .nh-img-fluid[b-i96prf7eyj], .nh-photo-grid img[b-i96prf7eyj] {
        max-width: 100%;
        height: auto;
        display: block;
        border-radius: var(--nh-radius-sm);
        border: 1px solid var(--nh-gray-4);
    }

/* 讀取彙總表格 */
.nh-table[b-i96prf7eyj] {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 14px;
    border: 1px solid var(--nh-gray-4);
    border-radius: var(--nh-radius-md);
    overflow: hidden;
}

    .nh-table thead th[b-i96prf7eyj] {
        background: #f9f9fb;
        color: var(--nh-text-3);
        font-weight: 600;
        text-align: left;
        padding: 10px 12px;
        border-bottom: 1px solid #ececee;
    }

    .nh-table tbody td[b-i96prf7eyj] {
        padding: 10px 12px;
        border-bottom: 1px solid #f0f0f0;
        vertical-align: top;
    }

    .nh-table tbody tr:last-child td[b-i96prf7eyj] {
        border-bottom: none;
    }

.nh-table-unread .is-unread[b-i96prf7eyj] {
    background: #fff5f6;
}

.nh-mobile-info[b-i96prf7eyj] {
    font-weight: 600;
    color: var(--nh-text-2);
}

.nh-mobile-read span[b-i96prf7eyj] {
    font-size: 13px;
}


.nh-photo-anchor[b-i96prf7eyj] {
    display: inline-block;
    border-radius: var(--nh-radius-sm);
    overflow: hidden;
    border: 1px solid var(--nh-gray-4);
    transition: transform .06s ease, box-shadow .12s ease;
}

    .nh-photo-anchor:hover[b-i96prf7eyj] {
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(0,0,0,.08);
    }

.nh-photo-sm[b-i96prf7eyj] {
    max-width: 180px;
    height: auto;
    display: block;
}

/* 按鈕（自製） */
.nh-btn[b-i96prf7eyj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 14px;
    font-weight: 600;
    font-size: 14px;
    border-radius: 10px;
    border: 1px solid var(--nh-gray-4);
    background: #fff;
    color: var(--nh-text-1);
    cursor: pointer;
    transition: transform .06s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
    user-select: none;
}

    .nh-btn:hover[b-i96prf7eyj] {
        transform: translateY(-1px);
        box-shadow: 0 2px 10px rgba(0,0,0,.08);
        border-color: var(--nh-gray-5);
    }

    .nh-btn:active[b-i96prf7eyj] {
        transform: translateY(0);
        box-shadow: none;
    }

.nh-btn-primary[b-i96prf7eyj] {
    background: var(--nh-blue);
    border-color: var(--nh-blue);
    color: #fff;
}

    .nh-btn-primary:hover[b-i96prf7eyj] {
        background: var(--nh-blue-2);
        border-color: var(--nh-blue-2);
    }

/* 標題 */
h6[b-i96prf7eyj] {
    font-size: 14px;
    color: var(--nh-text-3);
    margin: 6px 0 8px;
}

/* RWD */
@media (max-width: 900px) {
    .nh-container[b-i96prf7eyj] {
        grid-template-columns: 1fr;
        padding: 10px;
    }

    .nh-list[b-i96prf7eyj] {
        height: auto;
        max-height: 45vh;
    }

    .nh-mobile-read[b-i96prf7eyj] {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
}

/* 列印（只列印右側內容） */
@media print {
    .nh-list[b-i96prf7eyj] {
        display: none !important;
    }

    .nh-container[b-i96prf7eyj] {
        display: block;
        padding: 0;
        background: #fff;
    }

    .nh-content[b-i96prf7eyj] {
        border: none;
        box-shadow: none;
        padding: 0;
    }

    .nh-btn[b-i96prf7eyj], .nh-card[b-i96prf7eyj] {
        display: none !important;
    }

    .nh-table[b-i96prf7eyj] {
        border: 1px solid #000;
    }

        .nh-table thead th[b-i96prf7eyj], .nh-table tbody td[b-i96prf7eyj] {
            border-bottom: 1px solid #000;
        }

    .nh-photo-grid img[b-i96prf7eyj], .nh-img-fluid[b-i96prf7eyj] {
        page-break-inside: avoid;
    }
}

/* ===== 你的 ArticleType class 可用以下色票（依你的回傳值加在 nh-badge 後） ===== */
/* 例：class="nh-badge notice" / "nh-badge event" */
.nh-badge.notice[b-i96prf7eyj] {
    background: #e7f2ff;
    color: var(--nh-blue);
}

.nh-badge.event[b-i96prf7eyj] {
    background: #eafaf0;
    color: var(--nh-green);
}

.nh-badge.warning[b-i96prf7eyj] {
    background: #fff1f2;
    color: var(--nh-red);
}

.nh-badge.general[b-i96prf7eyj] {
    background: var(--nh-gray-3);
    color: var(--nh-text-3);
}

.message-card[b-i96prf7eyj] {
    border: 1px solid #eee;
    margin-bottom: 1em;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
    padding: 1em;
}
/* /Pages/Pages_Audit/StudentAttendanceHistoryPage.razor.rz.scp.css */
/* ===== 版面 ===== */
.page-container[b-pfhdvck0j4] {
    height: calc(100vh - 0px);
    display: grid;
    grid-template-columns: 346px 1fr;
    grid-template-areas: "students detail";
    gap: 16px;
    padding: 12px;
    box-sizing: border-box;
    min-height: 0;
}

.students-section[b-pfhdvck0j4] {
    grid-area: students;
    display: flex;
    flex-direction: column;
    min-height: 0;
    border: 1px solid #e4e7ec;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}

.students-body[b-pfhdvck0j4] {
    overflow: auto;
    padding: 8px;
}

/* 右側 */
.detail-section[b-pfhdvck0j4] {
    grid-area: detail;
    display: flex;
    flex-direction: column;
    min-height: 0;
    border: 1px solid #e4e7ec;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}

/* 無選擇提示 */
/* 右側未選學生的提示外觀 */
.placeholder[b-pfhdvck0j4] {
    margin: 16px;
    height: calc(100% - 32px);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed #dbe2ea;
    border-radius: 12px;
    background: #f8fafc; /* 背景色 */
    color: #64748b; /* 文字色 */
    font-size: 16px;
}


/* ===== 置頂資訊 ===== */
.student-card[b-pfhdvck0j4] {
    position: sticky;
    top: 0;
    z-index: 3;
    padding: 14px 16px;
    border-bottom: 1px solid #eef0f3;
    background: #fff;
}

    .student-card .stu-name[b-pfhdvck0j4] {
        font-size: 20px;
        font-weight: 700;
        line-height: 1.2;
    }

    .student-card .stu-class[b-pfhdvck0j4] {
        color: #667085;
        margin-top: 2px;
    }

/* 彙總條 */
.summary-strip[b-pfhdvck0j4] {
    position: sticky;
    top: 61px; /* student-card 高度(大約) */
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
    padding: 10px 16px;
    border-bottom: 1px solid #eef0f3;
    background: #fafafa;
}

.sum-item[b-pfhdvck0j4] {
    padding: 8px 10px;
    border: 1px solid #e4e7ec;
    border-radius: 10px;
    background: #fff;
    text-align: center;
}

.sum-key[b-pfhdvck0j4] {
    font-size: 12px;
    color: #667085;
}

.sum-val[b-pfhdvck0j4] {
    font-size: 18px;
    font-weight: 700;
    margin-top: 2px;
}

/* 工具列 */
.detail-toolbar[b-pfhdvck0j4] {
    position: sticky;
    top: 126px; /* student-card + summary-strip 高度(大約) */
    z-index: 1;
    display: flex;
    gap: 12px;
    align-items: end;
    padding: 10px 16px;
    border-bottom: 1px solid #eef0f3;
    background: #fff;
    flex-wrap: wrap;
}

.tool[b-pfhdvck0j4] {
    display: grid;
    gap: 6px;
}

.tool-label[b-pfhdvck0j4] {
    font-size: 12px;
    color: #667085;
}

.tool-input[b-pfhdvck0j4] {
    height: 36px;
    padding: 6px 10px;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    outline: none;
}

    .tool-input:focus[b-pfhdvck0j4] {
        border-color: #84caff;
        box-shadow: 0 0 0 3px rgba(132, 202, 255, 0.35);
    }

.tool-actions[b-pfhdvck0j4] {
    margin-left: auto;
    display: flex;
    gap: 8px;
    align-items: center;
}

.btn[b-pfhdvck0j4] {
    height: 36px;
    padding: 0 12px;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
}

    .btn:hover[b-pfhdvck0j4] {
        background: #f3f4f6;
    }

    .btn.ghost[b-pfhdvck0j4] {
        background: transparent;
    }

/* 無資料 */
.no-data[b-pfhdvck0j4] {
    padding: 24px 16px;
    color: #667085;
}

/* ===== 月份導覽 + 清單 ===== */
.month-layout[b-pfhdvck0j4] {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 0;
}

/* 導覽 */
.month-nav[b-pfhdvck0j4] {
    position: sticky;
    top: 172px; /* 置頂鏈 */
    align-self: start;
    height: calc(100vh - 172px - 24px);
    overflow: auto;
    border-right: 1px solid #eef0f3;
    background: #fff;
    padding: 12px 8px;
}

    .month-nav ul[b-pfhdvck0j4] {
        list-style: none;
        margin: 0;
        padding: 0;
    }

.month-link[b-pfhdvck0j4] {
    display: block;
    padding: 8px 10px;
    border-radius: 8px;
    color: #344054;
    text-decoration: none;
}

    .month-link:hover[b-pfhdvck0j4] {
        background: #f2f4f7;
    }

.mono[b-pfhdvck0j4] {
    color: #98a2b3;
    margin-left: 4px;
}

/* 清單 */
.month-list[b-pfhdvck0j4] {
    overflow: auto;
    padding: 12px 8px 24px 8px;
}

/* 月份區塊 */
.month-section[b-pfhdvck0j4] {
    border: 1px solid #e4e7ec;
    border-radius: 12px;
    margin-bottom: 12px;
    overflow: hidden;
    background: #fff;
}

.month-header[b-pfhdvck0j4] {
    margin: 0;
    border-bottom: 1px solid #eef0f3;
}

.month-toggle[b-pfhdvck0j4] {
    width: 100%;
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    cursor: pointer;
    background: #fff;
    border: 0;
    text-align: left;
}

    .month-toggle:hover[b-pfhdvck0j4] {
        background: #f9fafb;
    }

.caret[b-pfhdvck0j4]::before {
    content: "▸";
    display: inline-block;
    transition: transform .15s ease;
    color: #98a2b3;
}

.month-panel.open ~ .month-header .caret[b-pfhdvck0j4]::before,
.month-toggle[aria-expanded="true"] .caret[b-pfhdvck0j4]::before {
    transform: rotate(90deg);
    color: #667085;
}

.m-title[b-pfhdvck0j4] {
    font-weight: 700;
    color: #0f172a;
}

.m-badges[b-pfhdvck0j4] {
    display: inline-flex;
    gap: 6px;
    align-items: center;
}

.badge[b-pfhdvck0j4] {
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 999px;
    border: 1px solid #e4e7ec;
    background: #fff;
    color: #475467;
}

    .badge.green[b-pfhdvck0j4] {
        border-color: #c7f2c4;
        background: #f0fff0;
        color: #2e7d32;
    }

    .badge.blue[b-pfhdvck0j4] {
        border-color: #cfe8ff;
        background: #f5fbff;
        color: #1d4ed8;
    }

    .badge.gray[b-pfhdvck0j4] {
        border-color: #e5e7eb;
        background: #f9fafb;
        color: #6b7280;
    }

/* 面板內容 */
.month-panel[b-pfhdvck0j4] {
    display: none;
}

    .month-panel.open[b-pfhdvck0j4] {
        display: block;
    }

.record-list[b-pfhdvck0j4] {
    list-style: none;
    margin: 0;
    padding: 8px;
}

.record-row[b-pfhdvck0j4] {
    display: grid;
    grid-template-columns: 130px 80px 1fr 1fr;
    gap: 8px;
    align-items: center;
    padding: 10px 8px;
    border-radius: 10px;
}

    .record-row + .record-row[b-pfhdvck0j4] {
        margin-top: 4px;
    }

    .record-row:hover[b-pfhdvck0j4] {
        background: #f8fafc;
    }

.col.date[b-pfhdvck0j4] {
    color: #0f172a;
    font-weight: 600;
}

.col.time[b-pfhdvck0j4] {
    color: #334155;
}

.col.type[b-pfhdvck0j4] {
    color: #475569;
}

.col.note[b-pfhdvck0j4] {
    color: #aaa;
    text-align: right;
    font-size: 12px;
}

/* ===== RWD ===== */
@media (max-width: 1200px) {
    .page-container[b-pfhdvck0j4] {
        grid-template-columns: 300px 1fr;
    }

    .summary-strip[b-pfhdvck0j4] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .month-layout[b-pfhdvck0j4] {
        grid-template-columns: 180px 1fr;
    }
}

@media (max-width: 900px) {
    .page-container[b-pfhdvck0j4] {
        grid-template-columns: 1fr;
        grid-template-areas:
            "students"
            "detail";
        height: auto;
    }

    .students-section[b-pfhdvck0j4] {
        max-height: 40vh;
    }

    .summary-strip[b-pfhdvck0j4] {
        top: 56px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .detail-toolbar[b-pfhdvck0j4] {
        top: 112px;
    }

    .month-layout[b-pfhdvck0j4] {
        grid-template-columns: 1fr;
    }

    .month-nav[b-pfhdvck0j4] {
        position: static;
        height: auto;
        border-right: 0;
        padding: 8px 12px;
        overflow: auto;
        white-space: nowrap;
    }

        .month-nav ul[b-pfhdvck0j4] {
            display: flex;
            gap: 8px;
        }

    .month-link[b-pfhdvck0j4] {
        display: inline-block;
    }

    .record-row[b-pfhdvck0j4] {
        grid-template-columns: 110px 70px 1fr;
        padding: 10px 6px;
    }
}
/* /Pages/Pages_CheckOut/CheckOutContent.razor.rz.scp.css */
/* 右側主容器 */
.right-body[b-wxqo6slh1a] {
    /*min-height: 100%;*/
    display: flex;
    flex-direction: column;
    padding: 12px 14px;
    background: #f9fafb;
    border-left: 1px solid #e5e7eb;
}

/* Idle 畫面 */
.idle-panel[b-wxqo6slh1a] {
    margin: auto;
    text-align: center;
    max-width: 360px;
    padding: 24px 20px;
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.16);
}

.idle-title[b-wxqo6slh1a] {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #111827;
}

.idle-text[b-wxqo6slh1a] {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 20px;
    line-height: 1.5;
}

.exec-btn-large[b-wxqo6slh1a] {
    padding: 10px 24px;
    font-size: 15px;
    border-radius: 999px;
}

/* 共用按鈕樣式（非 Bootstrap） */
.btn-primary[b-wxqo6slh1a] {
    appearance: none;
    border: 1px solid #0f766e;
    background: linear-gradient(135deg, #0ea5e9, #0f766e);
    color: #ffffff;
    padding: 8px 18px;
    border-radius: 12px;
    font-size: 14px;
    cursor: pointer;
    font-weight: 500;
    box-shadow: 0 8px 18px rgba(14, 148, 136, 0.3);
    transition: transform 0.06s ease, box-shadow 0.12s ease, opacity 0.15s ease;
}

    .btn-primary:hover[b-wxqo6slh1a] {
        transform: translateY(-1px);
        box-shadow: 0 12px 28px rgba(14, 148, 136, 0.4);
        opacity: 0.95;
    }

    .btn-primary:active[b-wxqo6slh1a] {
        transform: translateY(0);
        box-shadow: 0 4px 12px rgba(14, 148, 136, 0.25);
    }

/* 滾動區域 */
.right-scroll[b-wxqo6slh1a] {
    flex: 1 1 auto;
    /*overflow-y: auto;*/
    padding-right: 4px;
}

/* 卡片基礎樣式 */
.card[b-wxqo6slh1a] {
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    padding: 10px 12px;
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
}

/* 清單、紀錄區塊 */
.record-wrap[b-wxqo6slh1a],
.reservation-wrap[b-wxqo6slh1a] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.schedule-item[b-wxqo6slh1a] {
    /* 若要額外顏色可在這裡加 */
}

.schedule-header-row[b-wxqo6slh1a] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

.schedule-main[b-wxqo6slh1a] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.schedule-time[b-wxqo6slh1a] {
    font-size: 14px;
    color: #9ca3af;
    white-space: nowrap;
}

.schedule-desc[b-wxqo6slh1a] {
    font-size: 14px;
    color: #111827;
}

.schedule-name[b-wxqo6slh1a] {
    font-size: 14px;
    color: #4b5563;
}

.duplicate-tag[b-wxqo6slh1a] {
    margin-top: 4px;
    font-size: 13px;
    color: #b91c1c;
}

/* 播報歷史 */
.history-item[b-wxqo6slh1a] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.history-header[b-wxqo6slh1a] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
}

.history-time[b-wxqo6slh1a] {
    font-weight: 500;
    color: #111827;
}

.history-label[b-wxqo6slh1a] {
    font-size: 14px;
    color: #6b7280;
}

.history-row[b-wxqo6slh1a] {
    display: flex;
    font-size: 14px;
    gap: 6px;
}

.history-row-label[b-wxqo6slh1a] {
    min-width: 32px;
    font-weight: 500;
    color: #4b5563;
}

.history-reservation[b-wxqo6slh1a] {
    color: #2563eb;
}

.history-instant[b-wxqo6slh1a] {
    color: #0f766e;
}

.history-gohome[b-wxqo6slh1a] {
    color: #dc2626;
}

/* 在校清單 */
.section-title[b-wxqo6slh1a] {
    font-size: 15px;
    font-weight: 600;
    margin: 8px 0 10px 0;
    color: #111827;
}

.cp-grid[b-wxqo6slh1a] {
    display: grid;
}

.cp-grid-gap-2[b-wxqo6slh1a] {
    gap: 8px;
}

.cla-wrap[b-wxqo6slh1a] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 0;
}

.cla-title[b-wxqo6slh1a] {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 500;
    color: #111827;
}

.cla-divider[b-wxqo6slh1a] {
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 6px;
}

.student-wrap[b-wxqo6slh1a] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.student-card[b-wxqo6slh1a] {
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 14px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    color: #111827;
    display:flex;
    justify-content:space-between;
    flex-direction: row;
}

.home-card[b-wxqo6slh1a] {
    color: #aaa;
}

.leave-card[b-wxqo6slh1a] {
    background-color: rgba(248, 113, 113, 0.10);
}

/* Status 區 */
.status-wrap[b-wxqo6slh1a] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.status-grid[b-wxqo6slh1a] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .status-grid .cla-title[b-wxqo6slh1a] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 4px 10px 6px;
        border-radius: 999px;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 0.02em;
        margin-bottom: 6px;
    }

        /* 讓括號描述字變小一點、貼著標題右側 */
        .status-grid .cla-title .cp-text-muted[b-wxqo6slh1a] {
            font-size: 12px;
            margin-left: 8px;
            opacity: 0.9;
        }

/* 第 1 欄：即將播報（紅系） */
.status-wrap .status-grid:nth-child(1) .cla-title[b-wxqo6slh1a] {
    background: rgba(248, 113, 113, 0.10); /* 淡紅底 */
    color: #b91c1c; /* 深紅字 */
}

/* 第 2 欄：預約（藍系） */
.status-wrap .status-grid:nth-child(2) .cla-title[b-wxqo6slh1a] {
    background: rgba(96, 165, 250, 0.10); /* 淡藍底 */
    color: #1d4ed8; /* 藍字 */
}

/* 第 3 欄：刷退（綠系） */
.status-wrap .status-grid:nth-child(3) .cla-title[b-wxqo6slh1a] {
    background: rgba(52, 211, 153, 0.12); /* 淡綠底 */
    color: #047857; /* 綠字 */
}

/* 第 4 欄：呼叫（灰系） */
.status-wrap .status-grid:nth-child(4) .cla-title[b-wxqo6slh1a] {
    background: rgba(156, 163, 175, 0.15); /* 淡灰底 */
    color: #374151; /* 深灰字 */
}


/* 共用文字樣式：取代 text-xxx */
.cp-text-muted[b-wxqo6slh1a] {
    color: #6b7280;
}

.cp-text-good[b-wxqo6slh1a] {
    color: #16a34a;
}

.cp-text-info[b-wxqo6slh1a] {
    color: #2563eb;
}

.cp-text-danger[b-wxqo6slh1a] {
    color: #dc2626;
}

/* 共用間距 & flex：取代 ms-2/ms-3/d-flex/flex-wrap/gap-3 */
.cp-ml-2[b-wxqo6slh1a] {
    margin-left: 0.5rem;
}

.cp-ml-3[b-wxqo6slh1a] {
    margin-left: 0.75rem;
}

.cp-gap-3[b-wxqo6slh1a] {
    gap: 0.75rem;
}

.cp-flex[b-wxqo6slh1a] {
    display: flex;
}

.cp-flex-wrap[b-wxqo6slh1a] {
    flex-wrap: wrap;
}

/* 空狀態 */
.empty-text[b-wxqo6slh1a] {
    font-size: 14px;
    color: #9ca3af;
    text-align: center;
    padding: 16px 0;
}

/* RWD：窄螢幕時 status 改為兩欄 / 單欄 */
@media (max-width: 1024px) {
    .status-wrap[b-wxqo6slh1a] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .right-body[b-wxqo6slh1a] {
        padding: 10px;
    }

    .status-wrap[b-wxqo6slh1a] {
        grid-template-columns: 1fr;
    }
}

/* 黑 → 紅 漸層警示色系 */
.cp-red0[b-wxqo6slh1a] {
    color: #111111; /* 黑 */
}

.cp-red1[b-wxqo6slh1a] {
    color: #7f1d1d; /* 深紅 #1 */
}

.cp-red2[b-wxqo6slh1a] {
    color: #b91c1c; /* 紅色 #2 */
}

.cp-red3[b-wxqo6slh1a] {
    color: #dc2626; /* 亮紅 #3 */
}

.cp-red4[b-wxqo6slh1a] {
    color: #ef4444; /* 最亮 #4 */
    font-weight: 600;
    animation: blink-b-wxqo6slh1a 1.0s ease-in-out infinite alternate;
}

@keyframes blink-b-wxqo6slh1a {
    0% {
        color: #ef4444;
    }
    /* 亮紅 */
    100% {
        color: #ff0000;
    }
    /* 純正紅 */
}

/* 最外層 - 水平置中，限制最大寬度 */
.qr-container[b-wxqo6slh1a] {
    width: 100%;
    max-width: 400px; /* 最大 300px */
    margin: 0 auto; /* ⭐ 水平置中 */

    aspect-ratio: 1 / 1; /* 正方形 */
    display: flex;
    justify-content: center; /* ⭐ 圖片置中 */
    align-items: center; /* ⭐ 圖片置中 */
    overflow: hidden; /* 超出裁切 */

    background: #fafafa; /* 可調，防止空白時塌陷 */
    border-radius: 12px; /* 可調 */
}

/* 圖片本體 */
.qr-img[b-wxqo6slh1a] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* ⭐ 不變形、完整顯示 */
    object-position: center; /* ⭐ 置中 */
}
/* /Pages/Pages_CheckOut/CheckOutPage.razor.rz.scp.css */
/* 整體 layout：左 400px，右側自適應 */
.checkout-layout[b-nvf2ey5d6x] {
    display: flex;
    flex-direction: row;
    height: 100vh; /* 視情況調整，預留 NavPageLayout 高度 */
    gap: 0;
}

/* 左側設定 + 學生選單 */
.checkout-left[b-nvf2ey5d6x] {
    flex: 0 0 400px;
    max-width: 400px;
    min-width: 360px;
    border-right: 1px solid #e5e7eb;
    padding: 16px 18px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: #f9fafb;
    overflow: auto;
}

/* 右側廣播區 */
.checkout-right[b-nvf2ey5d6x] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 16px 20px;
    box-sizing: border-box;
    background: #ffffff;
}

/* 左側 Config 區塊 */
.config-section[b-nvf2ey5d6x] {
    padding: 12px 14px;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
    border: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.config-header[b-nvf2ey5d6x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.config-title[b-nvf2ey5d6x] {
    font-size: 15px;
    font-weight: 600;
    color: #111827;
}

/* 左側學生清單區塊 */
.student-section[b-nvf2ey5d6x] {
    flex: 1 1 auto;
    padding: 12px 14px;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
    border: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.student-section-header[b-nvf2ey5d6x] {
    margin-bottom: 4px;
}

.student-section-title[b-nvf2ey5d6x] {
    font-size: 15px;
    font-weight: 600;
    color: #111827;
}

.student-section-sub[b-nvf2ey5d6x] {
    font-size: 12px;
    color: #6b7280;
}

/* 右側 header 區域：標題 + 執行按鈕 + tabs */
.right-header[b-nvf2ey5d6x] {
    padding-bottom: 10px;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 10px;
}

.right-header-top[b-nvf2ey5d6x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    gap: 16px;
}

.right-title[b-nvf2ey5d6x] {
    font-size: 18px;
    font-weight: 600;
    color: #111827;
}

/* Tabs */
.tab-bar[b-nvf2ey5d6x] {
    display: inline-flex;
    gap: 6px;
    padding: 4px;
    border-radius: 999px;
    background: #f3f4f6;
}



.tab-btn[b-nvf2ey5d6x] {
    border: none;
    outline: none;
    background: transparent;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 13px;
    color: #6b7280;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, transform 0.05s ease;
}

    .tab-btn:hover[b-nvf2ey5d6x] {
        background: #e5e7eb;
        color: #111827;
    }

    .tab-btn.active[b-nvf2ey5d6x] {
        background: #111827;
        color: #f9fafb;
        transform: translateY(-0.5px);
    }

/* 右側 body / scroll 區 */
.right-body[b-nvf2ey5d6x] {
    flex: 1 1 auto;
    min-height: 0;
    margin-top: 10px;
    display: flex;
}

.right-scroll[b-nvf2ey5d6x] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-right: 4px;
}

/* Idle 狀態區塊 */
.idle-panel[b-nvf2ey5d6x] {
    margin: auto;
    text-align: center;
    max-width: 420px;
}

.idle-title[b-nvf2ey5d6x] {
    font-size: 20px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 8px;
}

.idle-text[b-nvf2ey5d6x] {
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 16px;
}

/* 卡片基礎樣式（Apple-like） */
.card[b-nvf2ey5d6x] {
    padding: 10px 12px;
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
    margin-bottom: 8px;
    transition: transform 0.08s ease, box-shadow 0.1s ease, background 0.1s ease;
}

    .card:hover[b-nvf2ey5d6x] {
        transform: translateY(-1px);
        box-shadow: 0 14px 40px rgba(15, 23, 42, 0.06);
        background: #fdfdfd;
    }

/* 廣播排程 item */
.schedule-item[b-nvf2ey5d6x] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.schedule-header-row[b-nvf2ey5d6x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.schedule-main[b-nvf2ey5d6x] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.schedule-desc[b-nvf2ey5d6x] {
    font-size: 13px;
    font-weight: 500;
    color: #374151;
}

.schedule-name[b-nvf2ey5d6x] {
    font-size: 13px;
    color: #4b5563;
}

.schedule-time[b-nvf2ey5d6x] {
    font-size: 12px;
    color: #9ca3af;
    white-space: nowrap;
}

/* 重複預約標籤 */
.duplicate-tag[b-nvf2ey5d6x] {
    margin-top: 4px;
    font-size: 11px;
    color: #b91c1c;
}

/* 播報歷史卡片 */
.history-item[b-nvf2ey5d6x] {
    background: #f5f8ff;
    border-color: #d1ddff;
}

.history-header[b-nvf2ey5d6x] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 4px;
}

.history-time[b-nvf2ey5d6x] {
    font-size: 13px;
    font-weight: 600;
    color: #1f2933;
}

.history-label[b-nvf2ey5d6x] {
    font-size: 12px;
    color: #6b7280;
}

.history-row[b-nvf2ey5d6x] {
    display: flex;
    gap: 6px;
    font-size: 13px;
    margin-top: 2px;
    flex-wrap: wrap;
}

.history-row-label[b-nvf2ey5d6x] {
    font-weight: 500;
    color: #4b5563;
}

.history-reservation[b-nvf2ey5d6x] {
    color: #166534;
}

.history-instant[b-nvf2ey5d6x] {
    color: #1d4ed8;
}

.history-gohome[b-nvf2ey5d6x] {
    color: #b91c1c;
}

/* 在校 / 預約標題 */
.section-title[b-nvf2ey5d6x] {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    margin: 4px 0 10px 2px;
}

/* 在校清單 student cards */
.student-wrap[b-nvf2ey5d6x] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.student-card[b-nvf2ey5d6x] {
    padding: 8px 10px;
    border-radius: 14px;
    min-width: 140px;
}

.student-name[b-nvf2ey5d6x] {
    font-size: 14px;
    font-weight: 500;
    color: #111827;
}

/* 空資料提示 */
.empty-text[b-nvf2ey5d6x] {
    margin-top: 40px;
    text-align: center;
    font-size: 15px;
    color: #9ca3af;
}

/* Apple-like buttons */
.btn-primary[b-nvf2ey5d6x] {
    border: none;
    outline: none;
    border-radius: 999px;
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 500;
    background: linear-gradient(135deg, #0f172a, #1f2937);
    color: #f9fafb;
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.35);
    transition: transform 0.08s ease, box-shadow 0.1s ease, background 0.1s ease, opacity 0.1s ease;
}

    .btn-primary:hover[b-nvf2ey5d6x] {
        transform: translateY(-1px);
        box-shadow: 0 14px 40px rgba(15, 23, 42, 0.5);
        opacity: 0.96;
    }

    .btn-primary:active[b-nvf2ey5d6x] {
        transform: translateY(0);
        box-shadow: 0 6px 18px rgba(15, 23, 42, 0.35);
        opacity: 0.9;
    }

.exec-btn[b-nvf2ey5d6x] {
    min-width: 110px;
    text-align: center;
}

.exec-btn-large[b-nvf2ey5d6x] {
    margin-top: 4px;
    min-width: 140px;
}

/* 淺色 ghost button (TTS 試聽按鈕) */
.btn-ghost[b-nvf2ey5d6x] {
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    color: #111827;
    font-size: 12px;
    padding: 4px 10px;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, transform 0.05s ease;
}

    .btn-ghost:hover[b-nvf2ey5d6x] {
        background: #f3f4f6;
        border-color: #d1d5db;
        transform: translateY(-0.5px);
    }

.btn-tts[b-nvf2ey5d6x] {
    white-space: nowrap;
}





/* ====== Read Config 區塊（家長預約 / 老師呼叫 / 學生刷退） ====== */

.read-config-section[b-nvf2ey5d6x] {
    margin-top: 12px;
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.read-config-card[b-nvf2ey5d6x] {
    padding: 10px 12px;
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.read-config-title[b-nvf2ey5d6x] {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 2px;
}

.read-config-row[b-nvf2ey5d6x] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 4px;
}

.read-config-label[b-nvf2ey5d6x] {
    font-size: 12px;
    color: #6b7280;
}

.read-config-input[b-nvf2ey5d6x] {
    border-radius: 10px;
    border: 1px solid #d1d5db;
    padding: 6px 8px;
    font-size: 13px;
    outline: none;
    background: #f9fafb;
    transition: border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

    .read-config-input:focus[b-nvf2ey5d6x] {
        border-color: #111827;
        background: #ffffff;
        box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08);
    }

/* checkbox 列 */
.read-config-checkbox[b-nvf2ey5d6x] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #374151;
    cursor: pointer;
    user-select: none;
}

    .read-config-checkbox input[type="checkbox"][b-nvf2ey5d6x] {
        width: 14px;
        height: 14px;
        border-radius: 4px;
        border: 1px solid #d1d5db;
        cursor: pointer;
    }


.right-section[b-nvf2ey5d6x] {
    overflow-y: auto;
}

.right-header[b-nvf2ey5d6x] {
    display: flex;
    justify-content: space-between;
    padding-bottom: 10px;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.right-header-top[b-nvf2ey5d6x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.right-title[b-nvf2ey5d6x] {
    font-size: 18px;
    font-weight: 600;
    color: #111827;
}

.btn-primary[b-nvf2ey5d6x] {
    border: none;
    outline: none;
    border-radius: 999px;
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 500;
    background: linear-gradient(135deg, #0f172a, #1f2937);
    color: #f9fafb;
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.35);
    transition: transform 0.08s ease, box-shadow 0.1s ease, background 0.1s ease, opacity 0.1s ease;
}

    .btn-primary:hover[b-nvf2ey5d6x] {
        transform: translateY(-1px);
        box-shadow: 0 14px 40px rgba(15, 23, 42, 0.5);
        opacity: 0.96;
    }

    .btn-primary:active[b-nvf2ey5d6x] {
        transform: translateY(0);
        box-shadow: 0 6px 18px rgba(15, 23, 42, 0.35);
        opacity: 0.9;
    }

.exec-btn[b-nvf2ey5d6x] {
    min-width: 110px;
    text-align: center;
}

.exec-btn-large[b-nvf2ey5d6x] {
    margin-top: 4px;
    min-width: 140px;
}


@media (max-width: 768px) {
    .tab-bar[b-nvf2ey5d6x] {
        gap: 2px;
        margin-bottom: 8px;
    }
}

/* /Pages/Pages_Config/BookConfigPage.razor.rz.scp.css */
body[b-pf5cqbq0q8] {
}
/* /Pages/Pages_Config/CheckOutCodePrinter.razor.rz.scp.css */
/* ===== A4 /checkoutcode Print — Cheer ===== */

/* Page */
.ckout-page[b-82jyxmv2mi] {
    width: 210mm;
    min-height: 297mm;
    margin: 0 auto;
    padding: 14mm;
    box-sizing: border-box;
    display: grid;
    grid-template-rows: auto 1fr auto;
    align-items: start;
    justify-items: center;
    row-gap: 10mm;
    background: #fff;
    color: #111;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    position: relative;
}

    /* 可選：柔和水印背景點陣（不影響 QR 掃描；要關就註解這段） */
    .ckout-page[b-82jyxmv2mi]::before {
        content: "";
        position: absolute;
        inset: 18mm 18mm 18mm 18mm;
        background-image: radial-gradient(#eaeaea 0.6mm, transparent 0.6mm);
        background-size: 6mm 6mm;
        opacity: .45;
        z-index: 0;
        pointer-events: none;
    }

/* Title */
.ckout-title[b-82jyxmv2mi] {
    font-size: 26pt;
    font-weight: 800;
    letter-spacing: .5px;
    text-align: center;
    line-height: 1.25;
    margin: 0;
    position: relative;
    z-index: 1;
}

    /* Title underline (decoration) */
    .ckout-title[b-82jyxmv2mi]::after {
        content: "";
        display: block;
        width: 42mm;
        height: 0;
        margin: 6mm auto 0;
        border-top: 0.6mm solid #1f2937; /* slate-800 */
        border-bottom: 0.2mm solid #cbd5e1; /* slate-300 */
    }

/* QR block */
.ckout-qr[b-82jyxmv2mi] {
    display: grid;
    place-items: center;
    padding: 8mm;
    background: #fff;
    border: 0.3mm solid #e5e7eb;
    border-radius: 3mm;
    box-shadow: 0 2mm 6mm rgba(0,0,0,.06);
    position: relative;
    z-index: 1;
}

    /* Corner accents (裝飾，不侵入靜區) */
    .ckout-qr[b-82jyxmv2mi]::before,
    .ckout-qr[b-82jyxmv2mi]::after {
        content: "";
        position: absolute;
        width: 10mm;
        height: 10mm;
        border: 0.6mm solid #111;
        opacity: .8;
    }

    .ckout-qr[b-82jyxmv2mi]::before { /* 左上角 */
        left: 2.5mm;
        top: 2.5mm;
        border-right: none;
        border-bottom: none;
        border-radius: 1mm 0 0 0;
    }

    .ckout-qr[b-82jyxmv2mi]::after { /* 右下角 */
        right: 2.5mm;
        bottom: 2.5mm;
        border-left: none;
        border-top: none;
        border-radius: 0 0 1mm 0;
    }

    /* QR image */
    .ckout-qr img[b-82jyxmv2mi] {
        display: block;
        width: 150mm; /* 列印邊長 ≈ 15cm */
        max-width: 100%;
        height: auto;
        image-rendering: pixelated;
        -ms-interpolation-mode: nearest-neighbor;
    }

/* Logo / hint area */
.logo-area[b-82jyxmv2mi] {
    display: grid;
    justify-items: center;
    row-gap: 4mm;
    background: rgba(255,255,255,.85);
    padding: 6mm 10mm;
    border-radius: 3mm;
    border: 0.2mm dashed #cbd5e1;
    position: relative;
    z-index: 1;
}

    .logo-area[b-82jyxmv2mi]::before,
    .logo-area[b-82jyxmv2mi]::after {
        content: "";
        position: absolute;
        left: 8mm;
        right: 8mm;
        height: 0;
        border-top: 0.2mm solid #e5e7eb;
    }

    .logo-area[b-82jyxmv2mi]::before {
        top: 0;
    }

    .logo-area[b-82jyxmv2mi]::after {
        bottom: 0;
    }

.ckout-hint[b-82jyxmv2mi] {
    font-size: 13pt;
    text-align: center;
    line-height: 1.6;
    letter-spacing: .2px;
    color: #334155; /* slate-700 */
    margin: 0;
}

/* Print */
@page {
    size: A4 portrait;
    margin: 0;
}

@media print {
    html[b-82jyxmv2mi], body[b-82jyxmv2mi] {
        width: 210mm;
        height: 297mm;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff;
    }

    .ckout-page[b-82jyxmv2mi] {
        width: 210mm !important;
        min-height: 297mm !important;
        padding: 14mm !important;
        page-break-inside: avoid;
    }

    .ckout-qr img[b-82jyxmv2mi] {
        width: 150mm !important;
        height: auto !important;
    }
    /* 可在列印時稍微降低水印透明度 */
    .ckout-page[b-82jyxmv2mi]::before {
        opacity: .35;
    }
}

/* Screen fallback */
@media screen and (max-width: 960px) {
    .ckout-page[b-82jyxmv2mi] {
        width: 100%;
        padding: 20px;
    }

    .ckout-qr img[b-82jyxmv2mi] {
        width: min(80vw, 150mm);
    }
}
/* /Pages/Pages_Config/FreshmanConfigPage.razor.rz.scp.css */
.form-config-container[b-gjamc2ezis] {
    display: flex;
    gap: 2rem;
    padding: 1rem;
    height: 100vh;
    box-sizing: border-box;
}

.config-left[b-gjamc2ezis] {
    width: 40%;
    border-right: 1px solid #ccc;
    padding-right: 1rem;
    overflow-y: auto;
}

.config-right[b-gjamc2ezis] {
    width: 60%;
    padding-left: 1rem;
    display: flex;
    flex-direction: column;
}

.config-scroll-wrapper[b-gjamc2ezis] {
    flex: 1;
    overflow-y: auto;
    margin-top: 0.5rem;
    border: 1px solid #eee;
    padding: 0.5rem;
    border-radius: 6px;
    background-color: #fafafa;
}

.group-section[b-gjamc2ezis] {
    margin-bottom: 1.5rem;
}

/* group title 保持置頂一列 */
.group-title[b-gjamc2ezis] {
    font-weight: bold;
    margin-bottom: 0.5rem;
    color: #444;
    border-bottom: 1px solid #ccc;
    text-align:center;
}

/* 這裡才是控制 field 排列的地方 */
.group-items[b-gjamc2ezis] {
    display: grid;
    grid-template-columns: 1fr; /* 預設手機為單排 */
    gap: 0.3rem 1rem;
}

/* 大螢幕改為兩排 */
@media (min-width: 992px) {
    .group-items[b-gjamc2ezis] {
        grid-template-columns: repeat(2, 1fr);
    }
}

.field-basic[b-gjamc2ezis] {
    color: #888;
    padding: 0.3rem 0;
}

.field-enabled[b-gjamc2ezis] {
    color: #007bff;
    font-weight: 600;
    padding: 0.3rem 0;
}

.field-description[b-gjamc2ezis] {
    font-size: 0.85rem;
    color: #888;
    margin-left: 0.5rem;
}

.field-enabled-description[b-gjamc2ezis] {
    color: #007bff;
    font-size: 0.85rem;
    margin-left: 0.5rem;
}

.field-type-description[b-gjamc2ezis] {
    color: #888;
    font-size: 0.85rem;
    margin-left: 0.5rem;
}

/* ✅ RWD：當寬度小於 768px 時，改為上下排列 */
@media (max-width: 768px) {
    .form-config-container[b-gjamc2ezis] {
        flex-direction: column;
        height: auto;
        gap: 3em;
    }

    .config-left[b-gjamc2ezis],
    .config-right[b-gjamc2ezis] {
        width: 100%;
        padding-right: 0;
        padding-left: 0;
    }

}
/* /Pages/Pages_Config/LifeRecordConfigPage.razor.rz.scp.css */
/* 只作用於本頁容器，無 :root、無 Bootstrap 相依 */
.lrc-page[b-ayyzsvfnt0] {
    /* 可改色系：若不想用變數，直接把下面 var() 展開成實色即可 */
    --bg: #ffffff;
    --card: #f8fafc;
    --line: #e5e7eb;
    --text: #111827;
    --muted: #6b7280;
    --accent: #2d6cdf;
    --ok: #0f766e;
    --ok-bg: #e8f7f1;
    --warn: #b45309;
    --danger: #b91c1c;
    --danger-bg: #fee2e2;
    color: var(--text);
    padding: 16px;
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 16px;
}

/* 面板（左側） */
.lrc-panel[b-ayyzsvfnt0] {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 14px;
}

.lrc-panel__header[b-ayyzsvfnt0] {
    font-weight: 700;
    margin-bottom: 10px;
}

/* 欄位 */
.lrc-field[b-ayyzsvfnt0] {
    margin-bottom: 12px;
}

.lrc-field--row[b-ayyzsvfnt0] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: center;
}

.lrc-label[b-ayyzsvfnt0] {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    color: var(--muted);
}

.lrc-input[b-ayyzsvfnt0] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 14px;
    outline: none;
}

    .lrc-input:focus[b-ayyzsvfnt0] {
        border-color: #93c5fd;
        box-shadow: 0 0 0 2px rgba(147,197,253,.35);
    }

/* 分隔線 */
.lrc-divider[b-ayyzsvfnt0] {
    height: 1px;
    background: var(--line);
    margin: 10px 0 12px;
}

/* 動作 */
.lrc-actions[b-ayyzsvfnt0] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px;
}

/* 右側清單 */
.lrc-list[b-ayyzsvfnt0] {
    display: grid;
    gap: 12px;
}

/* 卡片 */
.lrc-card[b-ayyzsvfnt0] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: start;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px;
}

.lrc-card__main[b-ayyzsvfnt0] {
    min-width: 0;
}

.lrc-card__side[b-ayyzsvfnt0] {
    display: flex;
    align-items: start;
    gap: 8px;
}

/* 標題列 */
.lrc-title[b-ayyzsvfnt0] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.lrc-type[b-ayyzsvfnt0] {
    font-weight: 700;
}

.lrc-badge[b-ayyzsvfnt0] {
    padding: 2px 8px;
    border-radius: 999px;
    background: #eef2ff;
    color: var(--accent);
    border: 1px solid #dbe3ff;
    font-size: 12px;
    line-height: 18px;
}

/* 次資訊 */
.lrc-meta[b-ayyzsvfnt0] {
    margin-top: 6px;
    color: var(--muted);
    font-size: 13px;
}

.lrc-sep[b-ayyzsvfnt0] {
    margin: 0 6px;
    color: var(--muted);
}

/* 標籤列（選項） */
.lrc-tags[b-ayyzsvfnt0] {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.lrc-tag[b-ayyzsvfnt0] {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: #fff;
    font-size: 12px;
}

/* 小徽章 */
.lrc-chip[b-ayyzsvfnt0] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--line);
    font-size: 12px;
    color: var(--muted);
    background: #f3f4f6;
}

.lrc-chip--muted[b-ayyzsvfnt0] {
    background: #f3f4f6;
}

/* 超連結風格按鈕 */
.linkish[b-ayyzsvfnt0] {
    appearance: none;
    background: transparent;
    border: none;
    padding: 0;
    color: var(--accent);
    cursor: pointer;
}

    .linkish:hover[b-ayyzsvfnt0] {
        text-decoration: underline;
    }

/* 按鈕 */
.btn[b-ayyzsvfnt0] {
    appearance: none;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--text);
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 14px;
    cursor: pointer;
    transition: filter .15s ease, transform .05s ease;
}

    .btn:hover[b-ayyzsvfnt0] {
        filter: brightness(1.03);
    }

    .btn:active[b-ayyzsvfnt0] {
        transform: translateY(1px);
    }

    .btn:disabled[b-ayyzsvfnt0] {
        opacity: .6;
        cursor: not-allowed;
    }

.btn--primary[b-ayyzsvfnt0] {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.btn--secondary[b-ayyzsvfnt0] {
    background: #eef2ff;
    color: var(--accent);
    border-color: #dbe3ff;
}

.btn--danger[b-ayyzsvfnt0] {
    background: var(--danger-bg);
    color: var(--danger);
    border-color: #fecaca;
}

.btn--ghost[b-ayyzsvfnt0] {
    background: transparent;
    color: var(--muted);
}

.btn--sm[b-ayyzsvfnt0] {
    padding: 6px 10px;
    font-size: 13px;
}

.btn--block[b-ayyzsvfnt0] {
    width: 100%;
}

/* RWD */
@media (max-width: 960px) {
    .lrc-page[b-ayyzsvfnt0] {
        grid-template-columns: 1fr;
    }

    .lrc-panel[b-ayyzsvfnt0] {
        order: -1;
    }
}
/* /Pages/Pages_Config/SchoolConfigComponent_School.razor.rz.scp.css */
/* 獨立樣式（scoped） */
.sb-form[b-79kl8xdmdc] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.sb-row[b-79kl8xdmdc] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
}

.sb-label[b-79kl8xdmdc] {
    font-size: 14px;
    font-weight: bold;
    color: #444;
    white-space: nowrap;
}

.sb-field[b-79kl8xdmdc] {
    display: flex;
    align-items: center;
}

.sb-input[b-79kl8xdmdc] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #d6d6d6;
    border-radius: 8px;
    outline: none;
    font-size: 14px;
    transition: border-color .15s ease;
}

    .sb-input:focus[b-79kl8xdmdc] {
        border-color: #7aa7ff;
    }

.sb-btn[b-79kl8xdmdc] {
    padding: 7px 12px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
}

.sb-btn-primary[b-79kl8xdmdc] {
    background: #2d6cdf;
    color: #fff;
}

    .sb-btn-primary:hover[b-79kl8xdmdc] {
        filter: brightness(0.95);
    }

/* 小螢幕調整 */
@media (max-width: 600px) {
    .sb-row[b-79kl8xdmdc] {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .sb-label[b-79kl8xdmdc] {
        margin-bottom: -2px;
    }

    .sb-btn[b-79kl8xdmdc] {
        width: fit-content;
        justify-self: end;
    }
}
/* /Pages/Pages_Config/SchoolConfigPage.razor.rz.scp.css */
/* 頁面外框 */
.sc-page[b-jqoz11er3s] {
    padding: 16px;
}

/* 垂直堆疊：上中下 */
.sc-stack[b-jqoz11er3s] {
    display: grid;
    gap: 16px;
}

.top-section[b-jqoz11er3s] {
    display: grid;
    grid-template-columns: 2fr 1fr;
}

.function-panel[b-jqoz11er3s] {
    padding: 12px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    display: grid;
    gap: 12px;
}
/* 開關列：可換行、間距舒適，避免文字被擠直排 */
.sc-togglebar[b-jqoz11er3s] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
}

/* 區塊網格：手機 1 欄、桌機 2 欄 */
.sc-sections-grid[b-jqoz11er3s] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 920px) {
    .sc-sections-grid[b-jqoz11er3s] {
        grid-template-columns: 1fr 1fr;
    }
}

/* 卡片樣式（避免與任何框架衝突，使用 sc- 前綴） */
.sc-card[b-jqoz11er3s] {
    border: 1px solid #e4e7ec;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

/* 卡片標題區 */
.sc-card-header[b-jqoz11er3s] {
    background: #f6f8fb;
    color: #222;
    padding: 10px 14px;
    font-weight: 600;
    font-size: 15px;
    border-bottom: 1px solid #e4e7ec;
}

/* 卡片內容 */
.sc-card-body[b-jqoz11er3s] {
    padding: 12px;
}

/* 內容清單：每個子設定之間留間距 */
.sc-list[b-jqoz11er3s] {
    display: grid;
    gap: 12px;
}

/* 讓你的 SwitchComponent 保持水平排列、不被擠壓 */
.toggle-wrap[b-jqoz11er3s] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    min-width: max-content;
}

.toggle-label[b-jqoz11er3s], .toggle-desc[b-jqoz11er3s] {
    white-space: nowrap;
}

/* 讓每個卡片依內容高度就好，不被同排的另一張卡片撐高 */
.sc-sections-grid[b-jqoz11er3s] {
    align-items: start; /* 關鍵：不要 stretch */
}

    /* 再保險，個別卡片也指定不拉伸 */
    .sc-sections-grid > .sc-card[b-jqoz11er3s] {
        align-self: start;
    }

    /* Masonry 版：改用多欄 */
    .sc-sections-grid.sc-masonry[b-jqoz11er3s] {
        display: block; /* 取消 grid */
        column-count: 2; /* 桌機兩欄 */
        column-gap: 16px;
    }

        /* 卡片在多欄中要避免被拆分，並用 margin 取代 grid gap */
        .sc-sections-grid.sc-masonry > .sc-card[b-jqoz11er3s] {
            display: inline-block;
            width: 100%;
            break-inside: avoid;
            margin: 0 0 16px;
        }

/* 小螢幕單欄 */
@media (max-width: 920px) {
    .sc-sections-grid.sc-masonry[b-jqoz11er3s] {
        column-count: 1;
    }

    .top-section[b-jqoz11er3s] {
        grid-template-columns: 1fr;
    }

}
/* /Pages/Pages_Config/SchoolConfig_Bool.razor.rz.scp.css */
.toggle-wrap[b-xh51pp3h1k] {
    display: flex;
    align-items: center;
    justify-content:space-between;
    gap: 10px;
    user-select: none;
}

.toggle-input[b-xh51pp3h1k] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-label[b-xh51pp3h1k] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.toggle-desc[b-xh51pp3h1k] {
    font-size: 0.95rem;
}

/* 軌道 */
.switch[b-xh51pp3h1k] {
    position: relative;
    width: 46px;
    height: 26px;
    border-radius: 999px;
    background: #cfd3d8;
    transition: background 0.18s ease;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}

/* 圓鈕 */
.switch-knob[b-xh51pp3h1k] {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,.22);
    transition: transform 0.18s ease;
    margin-left:auto;
}

/* 勾選樣式 */
.toggle-input:checked + .toggle-label .switch[b-xh51pp3h1k] {
    background: #4f8cff;
}

.toggle-input:checked + .toggle-label .switch-knob[b-xh51pp3h1k] {
    transform: translateX(20px);
}

/* 鍵盤焦點 */
.toggle-input:focus-visible + .toggle-label .switch[b-xh51pp3h1k] {
    outline: 2px solid #8fb3ff;
    outline-offset: 2px;
}
/* /Pages/Pages_Config/SchoolConfig_Json.razor.rz.scp.css */
/* 外框 */
.kv-wrap[b-4muadwvjrq] {
    margin: 1em 0;
    font-family: sans-serif;
}

/* 標籤 */
.kv-label[b-4muadwvjrq] {
    display: block;
    font-weight: bold;
    margin-bottom: 0.5em;
}

/* TextArea Block */
.kv-block[b-4muadwvjrq] {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

/* 輸入欄 */
.kv-input[b-4muadwvjrq] {
    flex: 1;
    padding: 8px 10px;
    border: 1px solid #d6d6d6;
    border-radius: 8px;
    outline: none;
    font-size: 14px;
    font-family: monospace;
    transition: border-color .15s ease;
}

    .kv-input:focus[b-4muadwvjrq] {
        border-color: #7aa7ff;
    }

/* 按鈕 */
.kv-btn[b-4muadwvjrq] {
    background: #2d6cdf;
    color: white;
    border: none;
    padding: 0.5em 1em;
    border-radius: 6px;
    font-size: 0.9em;
    cursor: pointer;
    transition: background 0.2s ease;
}

    .kv-btn:hover:not(:disabled)[b-4muadwvjrq] {
        background: #005fa3;
    }

    .kv-btn:disabled[b-4muadwvjrq] {
        background: #aaa;
        cursor: not-allowed;
    }

/* 確保 textarea 不會太小 */
.kv-input[b-4muadwvjrq] {
    min-height: 120px;
}

.kv-hint[b-4muadwvjrq] {
    color: #aaa;
    font-weight:normal;
}
/* /Pages/Pages_Config/SchoolConfig_OtCharge.razor.rz.scp.css */
/* 外層 */
.cr-wrap[b-o53ufvgi41] {
    display: grid;
    gap: 24px;
}

/* 區塊（標題 + 內容） */
.cr-block[b-o53ufvgi41] {
    display: grid;
    gap: 10px;
}

/* 標題與附註 */
.cr-title[b-o53ufvgi41] {
    font-weight: 600;
    font-size: 15px;
    color: #222;
}

.cr-note[b-o53ufvgi41] {
    font-weight: 400;
    color: #777;
    margin-left: 6px;
}

/* 一列輸入（模擬 input-group，不用 bootstrap） */
.cr-row[b-o53ufvgi41] {
    display: grid;
    grid-template-columns: auto 120px auto auto 140px;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    background: #fff;
}

.cr-time-row[b-o53ufvgi41] {
    grid-template-columns: auto 160px auto; /* 標籤 | time |（可能的按鈕） */
}

/* 標籤小膠囊 */
.cr-chip[b-o53ufvgi41] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    min-width: 34px;
    border-radius: 999px;
    background: #f1f3f6;
    color: #333;
    font-size: 14px;
    white-space: nowrap;
}

/* 輸入框 */
.cr-input[b-o53ufvgi41] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #d6d6d6;
    border-radius: 8px;
    outline: none;
    font-size: 14px;
    transition: border-color .15s ease;
}

    .cr-input:focus[b-o53ufvgi41] {
        border-color: #7aa7ff;
    }

/* 按鈕 */
.cr-actions[b-o53ufvgi41] {
    display: flex;
    justify-content: flex-end;
    margin-top: 6px;
}

.cr-btn[b-o53ufvgi41] {
    padding: 7px 12px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
}

.cr-btn-primary[b-o53ufvgi41] {
    background: #2d6cdf;
    color: #fff;
}

    .cr-btn-primary:hover[b-o53ufvgi41] {
        filter: brightness(0.95);
    }

/* RWD：小螢幕單欄 */
@media (max-width: 680px) {
    .cr-row[b-o53ufvgi41] {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .cr-time-row[b-o53ufvgi41] {
        grid-template-columns: 1fr;
    }

    .cr-actions[b-o53ufvgi41] {
        justify-content: flex-start;
    }
}
/* /Pages/Pages_Config/SchoolConfig_Text.razor.rz.scp.css */
/* 外框 */
.kv-wrap[b-e1vyrnmqd2] {
    margin: 0;
    font-family: sans-serif;
}

/* 標籤 */
.kv-label[b-e1vyrnmqd2] {
    display: block;
    font-weight: bold;
    margin-bottom: 0.5em;
}

/* Input Row */
.kv-row[b-e1vyrnmqd2] {
    display: flex;
    align-items: center;
    gap: 0.5em;
}

/* TextArea Block */
.kv-block[b-e1vyrnmqd2] {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

/* 輸入欄 */
.kv-input[b-e1vyrnmqd2] {
    flex:1;
    padding: 8px 10px;
    border: 1px solid #d6d6d6;
    border-radius: 8px;
    outline: none;
    font-size: 14px;
    transition: border-color .15s ease;
}

    .kv-input:focus[b-e1vyrnmqd2] {
        border-color: #7aa7ff;
    }

/* 按鈕 */
.kv-btn[b-e1vyrnmqd2] {
    background: #2d6cdf;
    color: white;
    border: none;
    padding: 0.5em 1em;
    border-radius: 6px;
    font-size: 0.9em;
    cursor: pointer;
    transition: background 0.2s ease;
}

    .kv-btn:hover:not(:disabled)[b-e1vyrnmqd2] {
        background: #005fa3;
    }

    .kv-btn:disabled[b-e1vyrnmqd2] {
        background: #aaa;
        cursor: not-allowed;
    }

/* 行為：若 input 太小，確保按鈕不會擠壞 */
.kv-row .kv-input[b-e1vyrnmqd2] {
    min-width: 0;
}
/* /Pages/Pages_Doc/DocPage.razor.rz.scp.css */
/* Apple 簡約風：無 Bootstrap、無 :root、獨立樣式 */

.doc-root[b-mtas9nesek] {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "PingFang TC", "Microsoft JhengHei", "Helvetica Neue", Arial, sans-serif;
    color: #111;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding: 16px;
    margin: 0 auto;
}

.doc-section + .doc-section[b-mtas9nesek] {
    margin-top: 20px;
}

.group-title[b-mtas9nesek] {
    margin: 0 0 10px 2px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: #0f0f0f;
}

/* 卡片網格 */
.doc-grid[b-mtas9nesek] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

@media (min-width: 640px) {
    .doc-grid[b-mtas9nesek] {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

@media (min-width: 1024px) {
    .doc-grid[b-mtas9nesek] {
        grid-template-columns: repeat(4, 1fr);
        gap: 18px;
    }
}

/* 卡片樣式 */
.doc-card[b-mtas9nesek] {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(17, 17, 17, 0.04);
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background-color 160ms ease, opacity 160ms ease;
    will-change: transform;
}

    /* 可點擊 */
    .doc-card.interactive[b-mtas9nesek] {
        cursor: pointer;
    }

        .doc-card.interactive:hover[b-mtas9nesek] {
            transform: translateY(-2px);
            box-shadow: 0 6px 18px rgba(17, 17, 17, 0.08);
            border-color: #d9d9d9;
        }

        .doc-card.interactive:active[b-mtas9nesek] {
            transform: translateY(0);
            box-shadow: 0 3px 10px rgba(17, 17, 17, 0.06);
        }

    /* 停用（type == null） */
    .doc-card.disabled[b-mtas9nesek] {
        cursor: not-allowed;
        opacity: 0.6;
    }

    /* 焦點環（鍵盤可達性） */
    .doc-card.interactive:focus[b-mtas9nesek],
    .doc-card.interactive:focus-visible[b-mtas9nesek] {
        outline: none;
        box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.28), 0 6px 18px rgba(17, 17, 17, 0.08);
        border-color: #c7e1ff;
    }

/* 圖示 */
.icon[b-mtas9nesek] {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #f5f6f7;
    display: grid;
    place-items: center;
}

    .icon svg[b-mtas9nesek] {
        width: 22px;
        height: 22px;
        fill: none;
        stroke: #3a3a3a;
        stroke-width: 1.6;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

/* 文字內容 */
.body[b-mtas9nesek] {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.title[b-mtas9nesek] {
    margin: 0;
    font-size: 16px;
    line-height: 1.25;
    font-weight: 600;
    letter-spacing: 0.2px;
    color: #111;
}

.desc[b-mtas9nesek] {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: #6d6d6d;
    text-wrap: pretty;
}

/* 右側箭頭 */
.chev[b-mtas9nesek] {
    margin-left: auto;
    align-self: center;
    font-size: 22px;
    line-height: 1;
    color: #b2b2b2;
    transition: transform 160ms ease, color 160ms ease;
}

.doc-card.interactive:hover .chev[b-mtas9nesek] {
    transform: translateX(2px);
    color: #8d8d8d;
}

/* 深色模式 */
@media (prefers-color-scheme: dark) {
    .doc-root[b-mtas9nesek] {
        color: #f5f5f7;
    }

    .group-title[b-mtas9nesek] {
        color: #fff;
    }

    .doc-card[b-mtas9nesek] {
        background: #1c1c1e;
        border-color: #2a2a2d;
        box-shadow: 0 1px 2px rgba(0,0,0,0.3);
    }

        .doc-card.interactive:hover[b-mtas9nesek] {
            border-color: #3a3a3d;
            box-shadow: 0 10px 22px rgba(0,0,0,0.35);
        }

    .icon[b-mtas9nesek] {
        background: #2a2a2d;
    }

        .icon svg[b-mtas9nesek] {
            stroke: #e5e5e7;
        }

    .title[b-mtas9nesek] {
        color: #fff;
    }

    .desc[b-mtas9nesek] {
        color: #c9c9cb;
    }

    .chev[b-mtas9nesek] {
        color: #8e8e93;
    }
}

/* 降低動效 */
@media (prefers-reduced-motion: reduce) {
    .doc-card[b-mtas9nesek],
    .chev[b-mtas9nesek] {
        transition: none;
    }
}
/* /Pages/Pages_Doc/DocumentationModal/AnnounceDocModal.razor.rz.scp.css */
/* Modal 根容器（再包一層以避免干擾其他 doc） */
/*.doc-modal-root.announce-doc-root {
    width: min(1200px, 100vw - 32px);
    max-height: min(90vh, 900px);
    display: flex;
    flex-direction: column;
    padding: 16px 20px;
    box-sizing: border-box;
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18);
    font-size: 14px;
}*/

/* 頂部標題列 */
/*.doc-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 10px;
}

.doc-modal-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #111827;
}

.doc-modal-subtitle {
    margin: 4px 0 0;
    color: #6b7280;
    font-size: 13px;
}

.doc-close-btn {
    appearance: none;
    border: 1px solid #d1d5db;
    background: #f9fafb;
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s, transform 0.05s, box-shadow 0.15s;
}

    .doc-close-btn:hover {
        background: #e5e7eb;
        box-shadow: 0 2px 6px rgba(0,0,0,0.08);
        transform: translateY(-1px);
    }*/

/* 內文區：左邊索引 + 右邊內容 */
/*.doc-modal-body {
    display: flex;
    gap: 16px;
    margin-top: 12px;
    overflow: hidden;
    min-height: 0;
}*/

/* 左側索引 */
/*.doc-side-nav {
    flex: 0 0 220px;
    max-width: 230px;
    padding-right: 8px;
    border-right: 1px solid #e5e7eb;
    font-size: 13px;
}

.doc-side-title {
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
}

.doc-side-nav ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.doc-side-nav li + li {
    margin-top: 4px;
}

.doc-side-nav a {
    display: inline-block;
    color: #2563eb;
    text-decoration: none;
    padding: 3px 0;
}

    .doc-side-nav a:hover {
        text-decoration: underline;
    }*/

/* 右側內容 */
/*.doc-main {
    flex: 1 1 auto;
    overflow-y: auto;
    padding-left: 8px;
    padding-right: 4px;
}

.doc-block + .doc-block {
    margin-top: 18px;
    padding-top: 10px;
    border-top: 1px dashed #e5e7eb;
}

.doc-block h3 {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 700;
    color: #111827;
}

.doc-block h4 {
    margin: 10px 0 4px;
    font-size: 14px;
    font-weight: 600;
    color: #111827;
}

.doc-block p {
    margin: 4px 0 8px;
    color: #4b5563;
}

.doc-block ul {
    margin: 4px 0 8px 18px;
    padding-left: 0;
    color: #4b5563;
}*/

/* RWD：寬度較小時，索引改成置頂 */
/*@media (max-width: 900px) {
    .doc-modal-body {
        flex-direction: column;
    }

    .doc-side-nav {
        flex: 0 0 auto;
        max-width: 100%;
        border-right: none;
        border-bottom: 1px solid #e5e7eb;
        padding-bottom: 8px;
        margin-bottom: 4px;
        display: flex;
        flex-wrap: wrap;
        gap: 6px 10px;
        align-items: center;
    }

        .doc-side-nav ul {
            display: flex;
            flex-wrap: wrap;
            gap: 4px 10px;
        }

        .doc-side-nav li {
            margin-top: 0;
        }
}

.doc-nav-link {
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: #2563eb;
    cursor: pointer;
    text-align: left;
}

    .doc-nav-link:hover {
        text-decoration: underline;
    }*/
/* /Pages/Pages_Doc/DocumentationModal/AttendanceDocModal.razor.rz.scp.css */
/* 版面容器 */
.page-container[b-kfaf3h1abe] {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "PingFang TC", "Microsoft JhengHei", "Helvetica Neue", Arial, sans-serif;
    color: #111;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    max-width: 920px;
    padding: 16px;
    margin: 0 auto 48px auto;
}

/* 頁首 */
.page-header[b-kfaf3h1abe] {
    margin-bottom: 16px;
}

.page-title[b-kfaf3h1abe] {
    margin: 0 0 6px 0;
    font-size: 22px;
    line-height: 1.3;
    font-weight: 700;
}

.page-subtitle[b-kfaf3h1abe] {
    margin: 0;
    font-size: 14px;
    color: #444;
}

/* 卡片 */
.card[b-kfaf3h1abe] {
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02);
    margin-bottom: 16px;
    overflow: hidden;
}

.card-header[b-kfaf3h1abe] {
    padding: 12px 14px;
    border-bottom: 1px solid #eee;
    background: #fafafa;
}

.card-title[b-kfaf3h1abe] {
    margin: 0;
    font-size: 16px;
    line-height: 1.3;
    font-weight: 700;
}

.card-body[b-kfaf3h1abe] {
    padding: 12px 14px;
}

/* 文字與列表 */
.desc[b-kfaf3h1abe] {
    margin: 0 0 10px 0;
    color: #333;
    line-height: 1.7;
}

.formula[b-kfaf3h1abe] {
    display: inline-block;
    margin-top: 2px;
    padding: 2px 6px;
    border-radius: 6px;
    background: #f6f8ff;
    border: 1px solid #e1e6ff;
    font-size: 12px;
}

.ul[b-kfaf3h1abe],
.ol[b-kfaf3h1abe] {
    margin: 0 0 8px 18px;
    padding: 0;
    line-height: 1.8;
}

    .ul li[b-kfaf3h1abe],
    .ol li[b-kfaf3h1abe] {
        margin: 4px 0;
    }

/* 托育類型項目 */
.item[b-kfaf3h1abe] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
}

.item-desc[b-kfaf3h1abe] {
    color: #333;
}

/* 標籤（badge） */
.badge[b-kfaf3h1abe] {
    display: inline-block;
    border: 1px solid #ddd;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    line-height: 18px;
    font-weight: 600;
    white-space: nowrap;
    color: #000;
}

    .badge.free[b-kfaf3h1abe] {
        background: #f2f6ff;
        border-color: #cfe0ff;
    }

    .badge.flex[b-kfaf3h1abe] {
        background: #fff7e8;
        border-color: #f5deb3;
    }

    .badge.fixed[b-kfaf3h1abe] {
        background: #f4fff2;
        border-color: #cfeecb;
    }

/* 連結與動作列 */
.action-row[b-kfaf3h1abe] {
    margin-top: 8px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.btn[b-kfaf3h1abe] {
    display: inline-block;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid #dcdcdc;
    background: #f9f9f9;
    text-decoration: none;
    font-size: 14px;
    line-height: 1;
    transition: transform 0.05s ease-in-out, background 0.15s;
}

    .btn:hover[b-kfaf3h1abe] {
        background: #f1f1f1;
    }

    .btn:active[b-kfaf3h1abe] {
        transform: scale(0.98);
    }

.link[b-kfaf3h1abe] {
    display: inline-block;
    font-size: 14px;
    text-decoration: none;
    padding: 0 2px;
    border-bottom: 1px dashed #aaa;
}

    .link:hover[b-kfaf3h1abe] {
        border-bottom-color: #666;
    }

.inline-link[b-kfaf3h1abe] {
    text-decoration: none;
    border-bottom: 1px dashed #aaa;
}

    .inline-link:hover[b-kfaf3h1abe] {
        border-bottom-color: #666;
    }

/* 等寬數字 */
.mono[b-kfaf3h1abe] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

/* RWD */
@media (max-width: 640px) {
    .page-container[b-kfaf3h1abe] {
        padding: 12px;
    }

    .page-title[b-kfaf3h1abe] {
        font-size: 20px;
    }

    .card-title[b-kfaf3h1abe] {
        font-size: 15px;
    }

    .btn[b-kfaf3h1abe] {
        padding: 7px 10px;
        font-size: 13px;
    }
}
/* /Pages/Pages_Doc/DocumentationModal/AuthorModal.razor.rz.scp.css */
/* 只補 AuthorModal 專用：避免 bootstrap，且不要橫向 scroll */

/* 取消任何 overflow-x 的可能 */
.author-doc-root[b-o4j8pc6fe4],
.author-doc-root .doc-main[b-o4j8pc6fe4],
.author-doc-root .doc-block[b-o4j8pc6fe4] {
    overflow-x: hidden;
}

    /* 清單 table：允許換行，避免撐出 X 捲動 */
    .author-doc-root .author-list-table[b-o4j8pc6fe4],
    .author-doc-root .author-basic-table[b-o4j8pc6fe4] {
        table-layout: fixed; /* 固定布局，避免內容把表格撐爆 */
        width: 100%;
    }

        .author-doc-root .author-list-table th[b-o4j8pc6fe4],
        .author-doc-root .author-list-table td[b-o4j8pc6fe4],
        .author-doc-root .author-basic-table th[b-o4j8pc6fe4],
        .author-doc-root .author-basic-table td[b-o4j8pc6fe4] {
            white-space: normal; /* 允許換行 */
            word-break: break-word; /* 中文/英文都可斷行 */
            overflow-wrap: anywhere;
            vertical-align: top;
        }

    /* 功能欄：行距舒服一點 */
    .author-doc-root .author-cell-func[b-o4j8pc6fe4] {
        line-height: 1.55;
        color: #374151;
    }

    /* 分段線（對應你原表的區塊感） */
    .author-doc-root .author-row-sep td[b-o4j8pc6fe4] {
        border-top: 2px solid #eef2f7;
    }

/* 類型標籤 */
.author-tag[b-o4j8pc6fe4] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    line-height: 1.5;
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #e5e7eb;
}

.author-tag--fill[b-o4j8pc6fe4] {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1d4ed8;
}

.author-tag--other[b-o4j8pc6fe4] {
    background: #ecfeff;
    border-color: #a5f3fc;
    color: #155e75;
}

/* 權限類別 pill */
.author-pill[b-o4j8pc6fe4] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    line-height: 1.5;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    color: #374151;
}

.author-pill--cat[b-o4j8pc6fe4] {
    background: #f3f4f6;
    border-color: #e5e7eb;
    color: #374151;
}

/* chip（角色顯示） */
.author-chip[b-o4j8pc6fe4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    line-height: 1.5;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    color: #374151;
}

.author-chip--col[b-o4j8pc6fe4] {
    background: #f3f4f6;
    color: #374151;
}

.author-chip--mix[b-o4j8pc6fe4] {
    background: #eef2ff;
    border-color: #e0e7ff;
    color: #4338ca;
}

.author-chip--admin[b-o4j8pc6fe4] {
    background: #fee2e2;
    border-color: #fecaca;
    color: #991b1b;
}

.author-chip--class[b-o4j8pc6fe4] {
    background: #dcfce7;
    border-color: #bbf7d0;
    color: #166534;
}

/* 小螢幕：欄寬更緊（仍不出現 X 捲動） */
@media (max-width: 768px) {
    .author-doc-root .author-list-table th:nth-child(1)[b-o4j8pc6fe4],
    .author-doc-root .author-list-table td:nth-child(1)[b-o4j8pc6fe4] {
        width: 110px !important;
    }

    .author-doc-root .author-list-table th:nth-child(3)[b-o4j8pc6fe4],
    .author-doc-root .author-list-table td:nth-child(3)[b-o4j8pc6fe4] {
        width: 140px !important;
    }
}
/* /Pages/Pages_Doc/DocumentationModal/BoardOwnershipDocModal.razor.rz.scp.css */
/* 版面容器 */
.page-container[b-l4se47xi2t] {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", "PingFang TC", "Microsoft JhengHei", "Helvetica Neue", Arial, sans-serif;
    color: #111;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    max-width: 920px;
    padding: 16px;
    margin: 0 auto 48px auto;
}

/* 頁首 */
.page-header[b-l4se47xi2t] {
    margin-bottom: 18px;
}

.page-title[b-l4se47xi2t] {
    margin: 0 0 6px 0;
    font-size: 22px;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: .2px;
    color: #0f0f0f;
}

.page-subtitle[b-l4se47xi2t] {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #666;
}

/* 卡片 */
.card[b-l4se47xi2t] {
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(17,17,17,.04);
    padding: 16px 18px;
    transition: box-shadow 160ms ease, border-color 160ms ease;
}

    .card + .card[b-l4se47xi2t] {
        margin-top: 14px;
    }

    .card:hover[b-l4se47xi2t] {
        border-color: #dcdcdc;
        box-shadow: 0 6px 18px rgba(17,17,17,.08);
    }

.card-head[b-l4se47xi2t] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.card-title[b-l4se47xi2t] {
    margin: 0;
    font-size: 16px;
    line-height: 1.25;
    font-weight: 700;
    color: #111;
}

.card-desc[b-l4se47xi2t] {
    margin: 0 0 12px 0;
    font-size: 14px;
    line-height: 1.6;
    color: #555;
}

/* 動作列 */
.action-row[b-l4se47xi2t] {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

/* 主要動作：連結按鈕 */
.linkbtn[b-l4se47xi2t] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 36px;
    padding: 0 14px;
    background: #0a84ff; /* macOS/iOS 藍 */
    color: #fff;
    border: 1px solid #0a7aec;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: .2px;
    transition: background-color 140ms ease, box-shadow 140ms ease, transform 70ms ease;
}

    .linkbtn:hover[b-l4se47xi2t] {
        background: #0b7cf0;
    }

    .linkbtn:active[b-l4se47xi2t] {
        transform: translateY(1px);
    }

    .linkbtn:focus[b-l4se47xi2t],
    .linkbtn:focus-visible[b-l4se47xi2t] {
        outline: none;
        box-shadow: 0 0 0 3px rgba(0,113,227,.28);
    }

/* 內文連結 */
.textlink[b-l4se47xi2t] {
    color: #0a84ff;
    text-decoration: none;
    border-bottom: 1px solid rgba(10,132,255,.35);
    transition: color 120ms ease, border-color 120ms ease;
}

    .textlink:hover[b-l4se47xi2t] {
        color: #096fe0;
        border-color: rgba(9,111,224,.5);
    }

/* 注意清單 */
.notes[b-l4se47xi2t] {
    margin: 6px 0 0 0;
    padding: 0 0 0 18px;
    font-size: 14px;
    line-height: 1.7;
    color: #333;
}

    .notes li[b-l4se47xi2t] {
        margin: 6px 0;
    }

    .notes strong[b-l4se47xi2t] {
        font-weight: 700;
    }

/* 深色模式（自動） */
@media (prefers-color-scheme: dark) {
    .page-container[b-l4se47xi2t] {
        color: #f5f5f7;
    }

    .page-title[b-l4se47xi2t] {
        color: #fff;
    }

    .page-subtitle[b-l4se47xi2t] {
        color: #c9c9cb;
    }

    .card[b-l4se47xi2t] {
        background: #1c1c1e;
        border-color: #2a2a2d;
        box-shadow: 0 1px 2px rgba(0,0,0,.35);
    }

        .card:hover[b-l4se47xi2t] {
            border-color: #3a3a3d;
            box-shadow: 0 10px 22px rgba(0,0,0,.35);
        }

    .card-title[b-l4se47xi2t] {
        color: #fff;
    }

    .card-desc[b-l4se47xi2t] {
        color: #c9c9cb;
    }

    .linkbtn[b-l4se47xi2t] {
        background: #0a84ff;
        border-color: #0a84ff;
        color: #fff;
    }

    .textlink[b-l4se47xi2t] {
        color: #81b9ff;
        border-color: rgba(129,185,255,.45);
    }

        .textlink:hover[b-l4se47xi2t] {
            color: #b3d6ff;
            border-color: rgba(179,214,255,.6);
        }

    .notes[b-l4se47xi2t] {
        color: #ddd;
    }
}

/* 降低動效（使用者偏好） */
@media (prefers-reduced-motion: reduce) {
    .card[b-l4se47xi2t],
    .linkbtn[b-l4se47xi2t] {
        transition: none;
    }
}

.link[b-l4se47xi2t] {
    display: inline-block;
    font-size: 14px;
    text-decoration: none;
    padding: 0 2px;
    border-bottom: 1px dashed #aaa;
}
/* /Pages/Pages_Doc/DocumentationModal/BookDocModal.razor.rz.scp.css */
/* 容器與排版 */
.exdoc[b-6190yj4tk2] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 16px 16px 20px;
    color: #0f172a; /* 深字色 */
    line-height: 1.6;
    font-size: 15px;
}

/* Header */
.exdoc__title[b-6190yj4tk2] {
    margin: 0 0 4px 0;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 0.2px;
}

.exdoc__subtitle[b-6190yj4tk2] {
    margin: 0;
    color: #475569;
}

/* 卡片 */
.exdoc__card[b-6190yj4tk2] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px 14px 16px;
}

.exdoc__section-title[b-6190yj4tk2] {
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 700;
}

/* 文字與清單 */
.exdoc__text[b-6190yj4tk2] {
    margin: 0 0 8px 0;
    color: #334155;
}

.exdoc__list[b-6190yj4tk2] {
    margin: 8px 0 0 18px;
    padding: 0;
}

    .exdoc__list li[b-6190yj4tk2] {
        margin: 4px 0;
    }

.exdoc__ol[b-6190yj4tk2] {
    margin: 8px 0 0 18px;
    padding: 0;
}

    .exdoc__ol li[b-6190yj4tk2] {
        margin: 6px 0;
    }

/* 行內 code */
.exdoc__code-inline[b-6190yj4tk2] {
    display: inline-block;
    padding: 0 6px;
    border-radius: 6px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    font-family: ui-monospace, Menlo, Consolas, "Courier New", monospace;
    font-size: 13px;
    color: #0f172a;
}

/* 區塊 code */
.exdoc__code[b-6190yj4tk2] {
    margin: 8px 0 0 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: #0b1020;
    color: #e2e8f0;
    font-family: ui-monospace, Menlo, Consolas, "Courier New", monospace;
    font-size: 13px;
    overflow: auto;
}

/* 標示（必填、徽章） */
.exdoc__req[b-6190yj4tk2] {
    display: inline-block;
    padding: 0 6px;
    background: #fee2e2;
    color: #b91c1c;
    border-radius: 999px;
    font-size: 12px;
    line-height: 18px;
    vertical-align: middle;
}

.exdoc__badge[b-6190yj4tk2] {
    display: inline-block;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 12px;
    line-height: 18px;
    vertical-align: middle;
}

.exdoc__badge--error[b-6190yj4tk2] {
    background: #dc2626;
    color: #fff;
}

.exdoc__badge--warn[b-6190yj4tk2] {
    background: #f97316;
    color: #fff;
}

/* 小貼士／警示 */
.exdoc__tip[b-6190yj4tk2] {
    border: 1px solid;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 14px;
}

    .exdoc__tip + .exdoc__tip[b-6190yj4tk2] {
        margin-top: 8px;
    }

.exdoc__tip--info[b-6190yj4tk2] {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1e40af;
}

.exdoc__tip--warn[b-6190yj4tk2] {
    background: #fff7ed;
    border-color: #fed7aa;
    color: #9a3412;
}

/* 兩欄小區塊：桌機並排、手機直排 */
.exdoc__grid[b-6190yj4tk2] {
    display: grid;
    gap: 8px;
}

@media (min-width: 860px) {
    .exdoc__grid[b-6190yj4tk2] {
        grid-template-columns: 1fr 1fr;
    }
}

/* 範例區塊 */
.exdoc__example[b-6190yj4tk2] {
    margin-top: 10px;
}

.exdoc__example-head[b-6190yj4tk2] {
    font-weight: 700;
    font-size: 14px;
    color: #334155;
}

/* 操作列與按鈕 */
.exdoc__actions[b-6190yj4tk2] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.exdoc__btn[b-6190yj4tk2] {
    appearance: none;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #0f172a;
    padding: 8px 14px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: filter .15s ease, transform .02s ease;
}

    .exdoc__btn:hover[b-6190yj4tk2] {
        filter: brightness(0.98);
    }

    .exdoc__btn:active[b-6190yj4tk2] {
        transform: translateY(1px);
    }

    .exdoc__btn:disabled[b-6190yj4tk2] {
        cursor: not-allowed;
        opacity: .6;
    }

.exdoc__btn--primary[b-6190yj4tk2] {
    background: #4f46e5;
    color: #fff;
    border-color: #4338ca;
}

.exdoc__note[b-6190yj4tk2] {
    color: #64748b;
    font-size: 13px;
}

/* 頁尾 */
.exdoc__footer[b-6190yj4tk2] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* RWD 微調 */
@media (max-width: 520px) {
    .exdoc[b-6190yj4tk2] {
        padding: 12px;
        font-size: 14px;
    }

    .exdoc__title[b-6190yj4tk2] {
        font-size: 20px;
    }

    .exdoc__card[b-6190yj4tk2] {
        padding: 12px;
    }
}
/* /Pages/Pages_Doc/DocumentationModal/CheckOutDocModal.razor.rz.scp.css */


/* 針對放學預約說明的小調整 */

.checkout-doc .doc-modal-title[b-b1m2xuvtwp] {
    letter-spacing: 0.02em;
}

/* 關鍵字強調 */
.checkout-doc .co-key[b-b1m2xuvtwp] {
    font-weight: 600;
    color: #0f766e;
}

/* 讓列表之間稍微鬆一點 */
.checkout-doc .doc-block ul li + li[b-b1m2xuvtwp],
.checkout-doc .doc-block ol li + li[b-b1m2xuvtwp] {
    margin-top: 3px;
}
/* /Pages/Pages_Doc/DocumentationModal/LeaveDocModal.razor.rz.scp.css */
/* /Pages/Pages_Doc/DocumentationModal/LifeRecordDocModal.razor.rz.scp.css */
/* ==== 通用 Doc Modal 外框 ==== */
/*.doc-modal-root {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 20px 24px 24px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 16px;
}*/

/* 只給生活記錄一點點區別（可選） */
/*.liferecord-doc-root .doc-modal-title {
    letter-spacing: .03em;
}*/

/* ==== Header 區域 ==== */
/*.doc-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e5e7eb;
}

.doc-modal-title {
    font-size: 20px;
    font-weight: 600;
    color: #111827;
    margin: 0 0 4px;
}

.doc-modal-subtitle {
    margin: 0;
    font-size: 14px;
    color: #6b7280;
    line-height: 1.5;
}*/

/* 關閉按鈕 */
/*.doc-close-btn {
    appearance: none;
    border: 1px solid #d1d5db;
    background: #f9fafb;
    color: #111827;
    font-size: 13px;
    padding: 6px 12px;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s ease, border-color .15s ease, transform .05s ease;
}

    .doc-close-btn:hover {
        background: #f3f4f6;
        border-color: #cbd5f5;
        transform: translateY(-0.5px);
    }*/

/* ==== Body：左側索引 + 右側內容 ==== */
/*.doc-modal-body {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 20px;
    align-items: flex-start;
    margin-top: 4px;
}*/

/* 左側快速導覽 */
/*.doc-side-nav {
    position: sticky;
    top: 0;
    align-self: flex-start;
    padding-top: 4px;
}

.doc-side-title {
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 8px;
}

.doc-side-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.doc-nav-link {
    width: 100%;
    text-align: left;
    padding: 6px 10px;
    border-radius: 999px;
    border: none;
    background: transparent;
    font-size: 13px;
    color: #374151;
    cursor: pointer;
    transition: background .12s ease, color .12s ease, transform .05s ease;
}

    .doc-nav-link:hover {
        background: #f3f4f6;
        color: #111827;
        transform: translateY(-0.5px);
    }

    .doc-nav-link:focus-visible {
        outline: 2px solid #2563eb;
        outline-offset: 2px;
    }*/

/* 右側內容主體 */
/*.doc-main {
    max-height: 70vh;*/ /* 讓內容可以在 modal 裡卷動 */
    /*overflow: auto;
    padding-right: 4px;
}*/

/* 每一個章節 block */
/*.doc-block {
    padding: 14px 0;
    border-bottom: 1px solid #f3f4f6;
}

    .doc-block:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    .doc-block h3 {
        font-size: 16px;
        font-weight: 600;
        color: #111827;
        margin: 0 0 6px;
    }

    .doc-block h4 {
        font-size: 14px;
        font-weight: 600;
        color: #1f2933;
        margin: 10px 0 4px;
    }

    .doc-block p {
        font-size: 14px;
        color: #4b5563;
        line-height: 1.6;
        margin: 4px 0 8px;
    }

    .doc-block ul,
    .doc-block ol {
        font-size: 14px;
        color: #4b5563;
        padding-left: 1.2rem;
        margin: 4px 0 8px;
    }

    .doc-block li + li {
        margin-top: 2px;
    }*/

    /* code 樣式（如果之後有用） */
    /*.doc-block code {
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        font-size: 12px;
        background: #f3f4f6;
        padding: 1px 4px;
        border-radius: 4px;
    }*/

    /* 區塊引用（用在說明範例） */
    /*.doc-block blockquote {
        margin: 6px 0 10px;
        padding: 8px 10px;
        border-left: 3px solid #e5e7eb;
        background: #f9fafb;
        border-radius: 6px;
        font-size: 13px;
        color: #4b5563;
    }*/

/* 警示 / 提醒區塊：特別用在「家長不會在這日期前看到」 */
/*.doc-warning {
    margin-top: 6px;
    padding: 8px 10px;
    border-radius: 8px;
    background: #fef3c7;
    color: #92400e;
    font-size: 13px;
    border: 1px solid #fcd34d;
}*/

/* ==== RWD：小螢幕下改成上下排列 ==== */
/*@media (max-width: 900px) {
    .doc-modal-root {
        padding: 16px 12px 20px;
    }

    .doc-modal-body {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .doc-side-nav {
        position: static;
        padding-top: 0;
        border-bottom: 1px solid #e5e7eb;
        padding-bottom: 8px;
        margin-bottom: 4px;
        overflow-x: auto;
    }

        .doc-side-nav ul {
            flex-direction: row;
            flex-wrap: nowrap;
            gap: 6px;
        }

    .doc-nav-link {
        white-space: nowrap;
        padding-inline: 10px;
        font-size: 12px;
    }

    .doc-main {
        max-height: none;
        padding-right: 0;
    }
}

@media (max-width: 600px) {
    .doc-modal-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .doc-close-btn {
        align-self: flex-end;
    }
}*/
/* /Pages/Pages_Doc/DocumentationModal/MenuDocModal.razor.rz.scp.css */
/* MenuDocModal 專用微調：沿用 doc.css，必要時才補 */
.menu-doc-root .doc-modal-title[b-cwf7ioepda] {
    letter-spacing: 0.01em;
}

.menu-doc-root .doc-modal-subtitle code[b-cwf7ioepda] {
    font-weight: 600;
}

/* 讓 badge 在標題列更一致 */
.menu-doc-root .doc-badge[b-cwf7ioepda],
.menu-doc-root .doc-tag[b-cwf7ioepda] {
    transform: translateY(-0.5px);
}

/* 行動端：表格更好捲動 */
@media (max-width: 768px) {
    .menu-doc-root .doc-table[b-cwf7ioepda] {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}
/* /Pages/Pages_Doc/DocumentationModal/NoticeDocModal.razor.rz.scp.css */
/* === 通用 doc modal 外框 === */
/*.doc-modal-root.notice-doc-root {
    width: min(1200px, 100vw - 32px);
    max-height: min(90vh, 900px);
    display: flex;
    flex-direction: column;
    padding: 16px 20px;
    box-sizing: border-box;
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18);
    font-size: 14px;
}

.doc-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 10px;
}

.doc-modal-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #111827;
}

.doc-modal-subtitle {
    margin: 4px 0 0;
    color: #6b7280;
    font-size: 13px;
}

.doc-close-btn {
    appearance: none;
    border: 1px solid #d1d5db;
    background: #f9fafb;
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s, transform 0.05s, box-shadow 0.15s;
}

    .doc-close-btn:hover {
        background: #e5e7eb;
        box-shadow: 0 2px 6px rgba(0,0,0,0.08);
        transform: translateY(-1px);
    }*/

/* 內部：左側索引 + 右側內容 */
/*.doc-modal-body {
    display: flex;
    gap: 16px;
    margin-top: 12px;
    overflow: hidden;
    min-height: 0;
}*/

/* 左側索引 */
/*.doc-side-nav {
    flex: 0 0 220px;
    max-width: 230px;
    padding-right: 8px;
    border-right: 1px solid #e5e7eb;
    font-size: 13px;
}

.doc-side-title {
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
}

.doc-side-nav ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.doc-side-nav li + li {
    margin-top: 4px;
}

.doc-nav-link {
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: #2563eb;
    cursor: pointer;
    text-align: left;
}

    .doc-nav-link:hover {
        text-decoration: underline;
    }*/

/* 右側內容 */
/*.doc-main {
    flex: 1 1 auto;
    overflow-y: auto;
    padding-left: 8px;
    padding-right: 4px;
}

.doc-block + .doc-block {
    margin-top: 18px;
    padding-top: 10px;
    border-top: 1px dashed #e5e7eb;
}

.doc-block h3 {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 700;
    color: #111827;
}

.doc-block h4 {
    margin: 10px 0 4px;
    font-size: 14px;
    font-weight: 600;
    color: #111827;
}

.doc-block p {
    margin: 4px 0 8px;
    color: #4b5563;
}

.doc-block ul,
.doc-block ol {
    margin: 4px 0 8px 18px;
    padding-left: 0;
    color: #4b5563;
}*/

/* RWD：窄螢幕改成上下排 */
/*@media (max-width: 900px) {
    .doc-modal-body {
        flex-direction: column;
    }

    .doc-side-nav {
        flex: 0 0 auto;
        max-width: 100%;
        border-right: none;
        border-bottom: 1px solid #e5e7eb;
        padding-bottom: 8px;
        margin-bottom: 4px;
        display: flex;
        flex-wrap: wrap;
        gap: 6px 10px;
        align-items: center;
    }

        .doc-side-nav ul {
            display: flex;
            flex-wrap: wrap;
            gap: 4px 10px;
        }

        .doc-side-nav li {
            margin-top: 0;
        }
}*/
/* /Pages/Pages_Doc/DocumentationModal/ReservationWinAppDocModal.razor.rz.scp.css */
/* 作用範圍鎖在 .reserve-app-doc，避免汙染其他頁面 */
.reserve-app-doc[b-kitrbpintn] {
    --c-bg: #ffffff;
    --c-text: #1f2328;
    --c-muted: #6b7280;
    --c-border: #e5e7eb;
    --c-primary: #2563eb;
    --c-primary-press: #1d4ed8;
    --radius-xl: 16px;
    --radius-lg: 12px;
    --radius-md: 10px;
    --shadow: 0 6px 24px rgba(0,0,0,.06);
    --space-1: 6px;
    --space-2: 10px;
    --space-3: 14px;
    --space-4: 18px;
    --space-6: 24px;
    --space-8: 32px;
    color: var(--c-text);
    max-width: 1200px;
}

.reserve-app-doc .hero[b-kitrbpintn] {
    padding: var(--space-8) var(--space-6) var(--space-6);
    background: linear-gradient(180deg, #f8fafc, #ffffff);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow);
    margin-bottom: var(--space-8);
}

    .reserve-app-doc .hero-title[b-kitrbpintn] {
        margin: 0 0 var(--space-2);
        font-size: clamp(20px, 2.2vw, 28px);
        font-weight: 700;
        letter-spacing: .3px;
    }

    .reserve-app-doc .hero-sub[b-kitrbpintn] {
        margin: 0;
        color: var(--c-muted);
        font-size: 14px;
    }

    .reserve-app-doc .panel[b-kitrbpintn] {
        background: var(--c-bg);
        border: 1px solid var(--c-border);
        border-radius: var(--radius-lg);
        padding: var(--space-6);
        box-shadow: var(--shadow);
        margin-bottom: var(--space-8);
    }

    .reserve-app-doc .panel-title[b-kitrbpintn] {
        margin: 0 0 var(--space-3);
        font-size: 18px;
        font-weight: 700;
    }

    .reserve-app-doc .panel-body[b-kitrbpintn] {
        line-height: 1.7;
    }

    .reserve-app-doc .mb-8[b-kitrbpintn] {
        margin-bottom: var(--space-8);
    }

    /* 兩欄網格（桌機）、手機自動堆疊 */
    .reserve-app-doc .grid-2[b-kitrbpintn] {
        display: grid;
        gap: var(--space-6);
    }

@media (min-width: 900px) {
    .reserve-app-doc .grid-2[b-kitrbpintn] {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }
}

.reserve-app-doc .list[b-kitrbpintn] {
    padding-left: 1.2em;
    margin: 0;
}

    .reserve-app-doc .list li[b-kitrbpintn] {
        margin: 0 0 var(--space-2);
    }

    /* 以兩欄清單呈現（會自動換行） */
    .reserve-app-doc .list.cols-2[b-kitrbpintn] {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--space-2) var(--space-6);
        padding-left: 0;
        list-style: none;
    }

@media (min-width: 700px) {
    .reserve-app-doc .list.cols-2[b-kitrbpintn] {
        grid-template-columns: 1fr 1fr;
    }
}

.reserve-app-doc .list.cols-2 li[b-kitrbpintn]::before {
    content: "• ";
    color: var(--c-muted);
}

/* 按鈕 */
.reserve-app-doc .btn[b-kitrbpintn] {
    display: inline-block;
    padding: 10px 16px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    transition: transform .06s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
    outline: none;
}

    .reserve-app-doc .btn:focus-visible[b-kitrbpintn] {
        box-shadow: 0 0 0 3px rgba(37,99,235,.25);
    }

    .reserve-app-doc .btn:active[b-kitrbpintn] {
        transform: translateY(1px);
    }

.reserve-app-doc .btn-primary[b-kitrbpintn] {
    background: var(--c-primary);
    color: #fff;
}

    .reserve-app-doc .btn-primary:hover[b-kitrbpintn] {
        background: var(--c-primary-press);
    }

/* 圖片縮圖畫廊 */
.reserve-app-doc .gallery[b-kitrbpintn] {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
}

@media (min-width: 680px) {
    .reserve-app-doc .gallery[b-kitrbpintn] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1080px) {
    .reserve-app-doc .gallery[b-kitrbpintn] {
        grid-template-columns: repeat(3, 1fr);
    }
}

.reserve-app-doc .thumb[b-kitrbpintn] {
    margin: 0;
    background: #f9fafb;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease;
}

    .reserve-app-doc .thumb:hover[b-kitrbpintn],
    .reserve-app-doc .thumb:focus-within[b-kitrbpintn] {
        border-color: #d1d5db;
        box-shadow: 0 10px 28px rgba(0,0,0,.08);
        transform: translateY(-2px);
    }

    .reserve-app-doc .thumb img[b-kitrbpintn] {
        display: block;
        width: 100%;
        height: auto;
        object-fit: cover;
        aspect-ratio: 16 / 9; /* 維持一致比例；小螢幕也會自適應 */
    }

    .reserve-app-doc .thumb figcaption[b-kitrbpintn] {
        padding: var(--space-3) var(--space-4);
        font-size: 13px;
        color: var(--c-muted);
        background: #fff;
        line-height: 1.6;
    }

    /* 可點擊的可及性狀態 */
    .reserve-app-doc .thumb[role="button"][b-kitrbpintn] {
        cursor: pointer;
    }

        .reserve-app-doc .thumb[role="button"]:focus-visible[b-kitrbpintn] {
            outline: 3px solid rgba(37,99,235,.35);
            outline-offset: 2px;
        }
/* /Pages/Pages_Doc/DocumentationModal/ScheduleDocModal.razor.rz.scp.css */
/* ScheduleDocModal 特有：讓重點提醒更醒目一點（不影響其他 DocModal） */
.schedule-doc-root .doc-warning[b-jwkx5dh5f9] {
    margin-top: 8px;
}

    .schedule-doc-root .doc-warning strong[b-jwkx5dh5f9] {
        font-weight: 700;
    }
/* /Pages/Pages_Doc/DocumentationModal/StudentDocModal.razor.rz.scp.css */
/* StudentDoc.razor.css */

/* 只在學生清單說明使用的小強調樣式 */
.doc-block .sd-keyword[b-o4ymbrzfl4] {
    font-weight: 600;
    color: #111827;
}

.doc-block .sd-flow-pill[b-o4ymbrzfl4] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    background: #e5f3ff;
    color: #1d4ed8;
    margin-right: 4px;
}

/* 讓 FAQ 區塊的問題行距稍微寬一點 */
#sd-faq h4[b-o4ymbrzfl4] {
    margin-top: 10px;
}
/* /Pages/Pages_Doc/DocumentationModal/SurveyDocModal.razor.rz.scp.css */
body[b-rdwdlz3pcu] {
}
/* /Pages/Pages_Event/CurrentMenuModal.razor.rz.scp.css */
/* 整體容器：已在 modal 內，只做內部排版 */
.menu-modal[b-c2th2gzsk9] {
    padding: 0px 4px 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    color: #111827;
    width: 800px;
}

/* 無資料提示 ---------------------------------------- */

.menu-modal-empty[b-c2th2gzsk9] {
    padding: 32px 12px 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: rgba(60, 60, 67, 0.7);
}

.menu-empty-icon[b-c2th2gzsk9] {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: rgba(118, 118, 128, 0.12);
    position: relative;
    margin-bottom: 4px;
}

.menu-empty-text[b-c2th2gzsk9] {
    font-size: 14px;
}

/* 卡片容器 ------------------------------------------ */

.menu-modal-container[b-c2th2gzsk9] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 8px;
    padding-top: 0;
}

/* 單日卡片 ------------------------------------------ */

.menu-card[b-c2th2gzsk9] {
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.08);
    padding: 10px 14px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* 卡片 header：日期 + 星期 -------------------------- */

.menu-card-header[b-c2th2gzsk9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(60, 60, 67, 0.12);
    margin-bottom: 4px;
}

.menu-date[b-c2th2gzsk9] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 6px;
}

.menu-date__day[b-c2th2gzsk9] {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.menu-date__week[b-c2th2gzsk9] {
    font-size: 14px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(118, 118, 128, 0.12);
    color: rgba(60, 60, 67, 0.8);
}

/* 內文區 -------------------------------------------- */

.menu-card-body[b-c2th2gzsk9] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 2px;
}

.menu-row[b-c2th2gzsk9] {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 6px;
    font-size: 14px;
    line-height: 1.5;
    padding: 3px 0;
}

.menu-row__label[b-c2th2gzsk9] {
    color: rgba(60, 60, 67, 0.8);
    font-weight: 500;
}

.menu-row__value[b-c2th2gzsk9] {
    color: #111827;
    word-break: break-word;
}

/* 小螢幕調整 ---------------------------------------- */

@media (max-width: 640px) {
    .menu-modal[b-c2th2gzsk9] {
        padding-inline: 0;
        width: 100%;
    }

    .menu-card[b-c2th2gzsk9] {
        border-radius: 14px;
        padding-inline: 10px;
    }

    .menu-row[b-c2th2gzsk9] {
        grid-template-columns: 52px minmax(0, 1fr);
    }
}
/* /Pages/Pages_Event/CurrentScheduleModal.razor.rz.scp.css */
/* 外層 modal 包裝 */
.sch-modal[b-hkopx2azc7] {
    display: flex;
    flex-direction: column;
    min-width: 400px;
    max-width: 720px;
    box-sizing: border-box;
}

/* 空狀態 */
.sch-modal-empty[b-hkopx2azc7] {
    flex: 1;
    padding: 24px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #999;
}

.sch-empty-icon[b-hkopx2azc7] {
    width: 32px;
    height: 32px;
    margin-bottom: 8px;
    border-radius: 999px;
    border: 1px solid rgba(180, 180, 180, 0.5);
    box-sizing: border-box;
}

.sch-empty-text[b-hkopx2azc7] {
    font-size: 15px;
}

/* 有資料時內容容器 */
.sch-modal-container[b-hkopx2azc7] {
    margin-top: 4px;
    padding: 8px 4px 4px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

/* 每筆行事曆卡片 */
.sch-card[b-hkopx2azc7] {
    padding: 10px 12px 9px;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.04), 0 0 0 0.5px rgba(0, 0, 0, 0.03);
    border: 1px solid #f0f0f5;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* 第一列：日期 + 標籤們 */
.row1[b-hkopx2azc7] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 2px;
}

/* 日期 */
.col-dt[b-hkopx2azc7] {
    font-size: 16px;
    font-weight: 600;
    color: #222;
    white-space: nowrap;
}

/* 標籤區 */
.col-type[b-hkopx2azc7] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px;
}

/* 標籤共用底 */
.sch-label[b-hkopx2azc7] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}

/* 假日：紅系 */
.sch-holiday[b-hkopx2azc7] {
    background: #ffe1e3;
    color: #c43737;
}

/* 補課：藍系 */
.sch-schoolday[b-hkopx2azc7] {
    background: #e4f0ff;
    color: #245fbd;
}

/* 重點：橘系 */
.sch-important[b-hkopx2azc7] {
    background: #ffe8d2;
    color: #c55b18;
}

/* 類型：中性灰 */
.sch-type[b-hkopx2azc7] {
    background: #f2f2f5;
    color: #555;
}

/* 第二列：說明文字 */
.row2[b-hkopx2azc7] {
    margin-top: 2px;
    font-size: 15px;
    line-height: 1.6;
    color: #555;
    white-space: pre-wrap;
    word-break: break-word;
}

/* 窄螢幕細微調整 */
@media (max-width: 480px) {
    .sch-modal[b-hkopx2azc7] {
        max-width: 100%;
    }

    .sch-card[b-hkopx2azc7] {
        padding: 9px 10px 8px;
        border-radius: 14px;
    }

    .row1[b-hkopx2azc7] {
        flex-direction: column;
        align-items: flex-start;
    }

    .col-type[b-hkopx2azc7] {
        justify-content: flex-start;
    }
}
/* /Pages/Pages_Event/HealthRecordPage.razor.rz.scp.css */
/* ========== 外層版面：三區獨立捲動 ========== */

/* 依你頁面上方還有 Navbar/Tab 的高度，調整下列 96px */
.page-container[b-gicva9m3bo] {
    height: calc(100vh - 96px); /* 讓子區塊能各自 overflow:auto */
    display: grid;
    grid-template-columns: 320px 320px 1fr;
    grid-template-areas: "students list detail";
    gap: 16px;
    padding: 12px;
    box-sizing: border-box;
    min-height: 0; /* 讓 grid 子項能縮到 0，避免捲動失效 */
}

/* 外框：卡片式工具列 */
.lr-toolbar[b-gicva9m3bo] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 6px rgba(0,0,0,.04);
    margin-bottom: 12px;
}

/* 左側：日期 + 摘要（自動壓縮） */
.lt-left[b-gicva9m3bo] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0; /* 讓摘要可省略顯示 */
}

/* 日期輸入寬度固定一點 */
.lr-toolbar .form-control.date[b-gicva9m3bo] {
    max-width: 180px;
}

/* 摘要：單行省略 */
.lt-summary[b-gicva9m3bo] {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #6b7280;
    font-size: .95rem;
}

/* 右側按鈕 */
.lt-right .btn[b-gicva9m3bo] {
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 600;
}

.btn.btn-primary:disabled[b-gicva9m3bo] {
    background: #9ca3af;
    border-color: #9ca3af;
    cursor: not-allowed;
    opacity: .9;
}

/* 手機直向：堆疊佈局 */
@media (max-width: 640px) {
    .lr-toolbar[b-gicva9m3bo] {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .lt-left[b-gicva9m3bo] {
        gap: 8px;
    }

    .lr-toolbar .form-control.date[b-gicva9m3bo] {
        max-width: 100%;
        width: 100%;
    }

    .lt-right .btn[b-gicva9m3bo] {
        width: 100%;
    }
}

/* 聚焦強調（選配） */
.lr-toolbar .form-control.date:focus[b-gicva9m3bo] {
    border-color: #93c5fd;
    box-shadow: 0 0 0 3px rgba(59,130,246,.15);
}


/* 中斷點：兩欄 */
@media (max-width: 1200px) {
    .page-container[b-gicva9m3bo] {
        grid-template-columns: 300px 1fr;
        grid-template-areas:
            "students list"
            "students detail";
    }
}

/* 小螢幕：直向 */
@media (max-width: 900px) {
    .page-container[b-gicva9m3bo] {
        grid-template-columns: 1fr;
        grid-template-areas:
            "students"
            "list"
            "detail";
        height: auto; /* 手機頁高常變動，讓它依內容撐高 */
    }
}

.students-section[b-gicva9m3bo] {
    grid-area: students;
    min-width: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.list-section[b-gicva9m3bo] {
    grid-area: list;
    min-width: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.detail-section[b-gicva9m3bo] {
    grid-area: detail;
    min-width: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/* ========== 中區：紀錄清單 ========== */
.student-header[b-gicva9m3bo] {
    position: sticky;
    top: 0;
    z-index: 1;
    background: linear-gradient(180deg,#fff 70%, rgba(255,255,255,0));
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #eee;
    padding: 8px 0;
    margin-bottom: 8px;
}

.student-title[b-gicva9m3bo] {
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

.student-meta[b-gicva9m3bo] {
    text-align: right;
    font-size: 14px;
    color: #666;
}

.measure-count[b-gicva9m3bo] {
    font-weight: 500;
}

.student-birth[b-gicva9m3bo] {
    font-style: italic;
    font-size: 13px;
}

.measures-list-area[b-gicva9m3bo] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.measure-item[b-gicva9m3bo] {
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 10px 14px;
    background: #fafafa;
    transition: box-shadow .15s, background .15s;
}

    .measure-item:hover[b-gicva9m3bo] {
        background: #f5f8ff;
        box-shadow: 0 2px 8px rgba(0,0,0,.08);
    }

.measure-head[b-gicva9m3bo] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
}

.measure-type[b-gicva9m3bo] {
    font-weight: 600;
    color: #3445aa;
}

.measure-date[b-gicva9m3bo] {
    font-size: 13px;
    color: #888;
}

.measure-body span[b-gicva9m3bo] {
    display: inline-block;
    margin-right: 8px;
    font-size: 14px;
}

/* ========== 右區：輸入卡片 ========== */
.detail-grid[b-gicva9m3bo] {
    display: grid;
    /*grid-template-columns: repeat(2, minmax(260px,1fr));*/
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

@media (max-width: 1200px) {
    .detail-grid[b-gicva9m3bo] {
        grid-template-columns: 1fr;
    }
}

.detail-card[b-gicva9m3bo] {
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
    /*overflow: hidden;*/
}

.detail-card__header[b-gicva9m3bo] {
    padding: 10px 14px;
    background: linear-gradient(0deg,#fff,#fafafa);
    border-bottom: 1px solid #eef0f3;
    border-radius: 15px 15px 0 0;
}

.detail-card__title[b-gicva9m3bo] {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #2a2f3a;
}

.detail-card__body[b-gicva9m3bo] {
    padding: 12px 14px;
    display: grid;
    gap: 12px;
}

/* 欄位群組 */
.field[b-gicva9m3bo] {
    display: grid;
    gap: 6px;
}

.field__label[b-gicva9m3bo] {
    font-size: 13px;
    color: #4b5563;
}

.field__subtitle[b-gicva9m3bo] {
    font-size: 13px;
    color: #6b7280;
}

/* Input/Select + 單位 */
.field__group[b-gicva9m3bo] {
    display: grid;
    grid-template-columns: minmax(0,1fr) max-content;
    gap: 8px;
    align-items: center;
    min-width: 0;
}

.field__input[b-gicva9m3bo], .field__textarea[b-gicva9m3bo], .field__select[b-gicva9m3bo] {
    width: 100%;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    background: #fff;
    font-size: 14px;
    outline: none;
    transition: border-color .12s, box-shadow .12s, background .12s;
    box-sizing: border-box;
}

.field__textarea[b-gicva9m3bo] {
    resize: vertical;
    min-height: 70px;
}

    .field__input:focus[b-gicva9m3bo], .field__textarea:focus[b-gicva9m3bo], .field__select:focus[b-gicva9m3bo] {
        border-color: #8aa8ff;
        box-shadow: 0 0 0 3px rgba(138,168,255,.25);
    }

.field__unit[b-gicva9m3bo] {
    padding: 10px 12px;
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    font-size: 13px;
    color: #374151;
    white-space: nowrap;
}

/* select 外觀箭頭 */
.field__select[b-gicva9m3bo] {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, #6b7280 50%), linear-gradient(135deg, #6b7280 50%, transparent 50%), linear-gradient(to right, #fff, #fff);
    background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%, 100% 0;
    background-size: 6px 6px, 6px 6px, 2.5rem 100%;
    background-repeat: no-repeat;
}

/* number UX */
.field__input[b-gicva9m3bo]::-webkit-outer-spin-button,
.field__input[b-gicva9m3bo]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.field__input[type="number"][b-gicva9m3bo] {
    -moz-appearance: textfield;
}

/* 小螢幕觸控友善 */
@media (max-width: 420px) {
    .detail-card__title[b-gicva9m3bo] {
        font-size: 17px;
    }

    .field__input[b-gicva9m3bo], .field__textarea[b-gicva9m3bo], .field__select[b-gicva9m3bo], .field__unit[b-gicva9m3bo] {
        padding: 12px 14px;
        font-size: 16px;
    }
}

/* 1) 讓整個容器高度貼住視窗，避免多算高度造成大白邊 */
.page-container[b-gicva9m3bo] {
    height: 100dvh; /* 取代原本 calc(100vh - 96px) */
    min-height: 0; /* 允許子項縮到 0，捲動才會生效 */
    padding-bottom: 0;
}

/* 2) 三個區塊改用 flex 直向填滿高度，內層才好切滾動 */
.students-section[b-gicva9m3bo],
.list-section[b-gicva9m3bo],
.detail-section[b-gicva9m3bo] {
    display: flex;
    flex-direction: column;
    min-height: 0; /* 很重要：避免被內容撐住產生底部空白 */
    overflow: hidden; /* 外層不滾動，交給內層滾動 */
}

/* 3) 內層真正滾動的身體區塊 */
/* 左側欄本身填滿高度，外層不捲動 */
.students-section[b-gicva9m3bo] {
    display: flex;
    flex-direction: column;
    min-height: 0; /* 讓子層願意縮，避免被撐爆 */
    overflow: hidden; /* 捲動交給 .students-body */
}

/* 真正捲動的容器 */
.students-body[b-gicva9m3bo] {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-gutter: stable; /* 保留滾動槽空間，避免跳動 */
}

    /* 可選：讓捲軸更清楚（WebKit） */
    .students-body[b-gicva9m3bo]::-webkit-scrollbar {
        width: 10px;
    }

    .students-body[b-gicva9m3bo]::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 8px;
    }

    .students-body[b-gicva9m3bo]::-webkit-scrollbar-track {
        background: transparent;
    }


/* 中欄：標頭 sticky，其餘列表當滾動主體 */
.student-header[b-gicva9m3bo] {
    position: sticky;
    top: 0;
    z-index: 1;
}

.measures-list-area[b-gicva9m3bo] {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding-bottom: 8px; /* 留一點底部緩衝即可 */
}

/* 右欄：卡片網格作為滾動主體 */
.detail-grid[b-gicva9m3bo] {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding-bottom: 8px; /* 底部緩衝 */
}

/* 4) 去掉清單/卡片最後一個項目的多餘外距，避免視覺上的大白邊 */
:where(.measures-list-area, .detail-grid) > *:last-child[b-gicva9m3bo] {
    margin-bottom: 0;
}

/* 5) 手機直向時回到自動高度（避免 100vh 在手機瀏覽器產生多餘空白） */
@media (max-width: 900px) {
    .page-container[b-gicva9m3bo] {
        height: auto;
    }
}
/* /Pages/Pages_Event/LostCard.razor.rz.scp.css */
/* Components/LostCard.razor.css */

.lost-card[b-6e9i4vnzkg] {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
    padding: 10px;
    border-radius: 18px;
    background: #f9fafb;
    transition: transform 0.08s ease, box-shadow 0.16s ease, background-color 0.16s ease;
    cursor: pointer;
    box-sizing: border-box;
    outline: none;
}

    .lost-card:hover[b-6e9i4vnzkg] {
        background: #ffffff;
        transform: translateY(-1px);
        box-shadow: 0 14px 36px rgba(15, 23, 42, 0.12);
    }

    .lost-card:focus-visible[b-6e9i4vnzkg] {
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.20), 0 14px 36px rgba(15, 23, 42, 0.12);
    }

.card-left[b-6e9i4vnzkg] {
    width: 72px;
    flex-shrink: 0;
    border-radius: 16px;
    overflow: hidden;
    background: #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lost-img[b-6e9i4vnzkg] {
    width: 100%;
    height: 72px;
    object-fit: cover;
    display: block;
}

.card-right[b-6e9i4vnzkg] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.lost-status-waitreturn[b-6e9i4vnzkg],
.lost-status-finish[b-6e9i4vnzkg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}

.lost-status-waitreturn[b-6e9i4vnzkg] {
    background: #fef3c7;
    color: #92400e;
}

.lost-status-finish[b-6e9i4vnzkg] {
    background: #ecfdf3;
    color: #166534;
}

    .lost-status-waitreturn span:first-child[b-6e9i4vnzkg],
    .lost-status-finish span:first-child[b-6e9i4vnzkg] {
        font-weight: 600;
    }

    .lost-status-waitreturn span:last-child[b-6e9i4vnzkg],
    .lost-status-finish span:last-child[b-6e9i4vnzkg] {
        font-size: 14px;
        opacity: 0.8;
    }

.lost-area[b-6e9i4vnzkg] {
    margin-top: 4px;
    font-size: 14px;
    color: #6b7280;
}

.lost-content[b-6e9i4vnzkg] {
    margin-top: 2px;
    font-size: 14px;
    color: #29f;
    line-height: 1.5;
    word-break: break-word;
}
/* /Pages/Pages_Event/LostModal.razor.rz.scp.css */
/* Reset & Base Style */
.lost-modal[b-3llv307po6] {
    padding: 1em;
    color: #1d1d1f;
    background-color: #fff;
    /* 確保在 Modal 內有適當寬度，若 Modal 本身有設寬度則可移除 */
    width: 600px;
    max-width: 100%;
    box-sizing: border-box;
}

/* Image Area：變成正方形容器 */
.lost-img-area[b-3llv307po6] {
    width: 100%;
    aspect-ratio: 1 / 1; /* 正方形 */
    max-height: 300px; /* 最高 300px，避免太高 */
    background-color: #f5f5f7;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 20px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 圖片維持比例，必要時留白 */
.lost-img[b-3llv307po6] {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain; /* 不裁切、不變形，留空白 */
    transition: transform 0.3s ease;
    cursor: zoom-in;
}

    .lost-img:hover[b-3llv307po6] {
        transform: scale(1.02);
    }

/* Info Section */
.lost-info[b-3llv307po6] {
    padding: 0 4px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.lost-info-row[b-3llv307po6] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: 12px;
}

.lost-area-label[b-3llv307po6] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #86868b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.lost-area[b-3llv307po6] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1d1d1f;
}

.lost-desc[b-3llv307po6] {
    font-size: 1rem;
    line-height: 1.5;
    color: #424245;
    background-color: #f5f5f7;
    padding: 12px;
    border-radius: 8px;
    min-height: 60px;
}

/* Status Section */
.lost-status[b-3llv307po6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    font-size: 0.95rem;
    font-weight: 500;
}

/* Status Indicators (Badge Style) */
.status-badge[b-3llv307po6] {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

.status-pending[b-3llv307po6] {
    background-color: #fff4ce;
    color: #9a6e03;
}

.status-return[b-3llv307po6] {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    justify-content: space-between;
    background-color: #e3f2fd;
    color: #007aff;
    padding: 8px 12px;
    border-radius: 10px;
}

.status-done[b-3llv307po6] {
    background-color: #e4e4e4;
    color: #86868b;
}

/* Footer Actions */
.lost-footer[b-3llv307po6] {
    margin-top: 24px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid #e5e5e5;
}

/* Button Styles (Apple Style) */
button[b-3llv307po6] {
    border: none;
    outline: none;
    cursor: pointer;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 500;
    transition: all 0.2s ease;
    font-family: inherit;
}

/* Primary Action (Return) */
.btn-return[b-3llv307po6] {
    background-color: #007aff;
    color: white;
    padding: 6px 16px;
    font-size: 0.85rem;
    border-radius: 16px;
    box-shadow: 0 2px 4px rgba(0, 122, 255, 0.2);
}

    .btn-return:hover[b-3llv307po6] {
        background-color: #0062cc;
    }

.btn-reannounce[b-3llv307po6] {
    background-color: #ff3b30;
    color: white;
    padding: 6px 16px;
    font-size: 1rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 122, 255, 0.2);
}

    .btn-reannounce:hover[b-3llv307po6] {
        background-color: #fff2f1;
        color: #ff3b30;
        border: 1px solid #ff3b30;
    }
/* Destructive Action (Delete) */
.btn-delete[b-3llv307po6] {
    background-color: transparent;
    color: #ff3b30;
    border: 1px solid rgba(255, 59, 48, 0.2);
}

    .btn-delete:hover[b-3llv307po6] {
        background-color: #fff2f1;
        border-color: #ff3b30;
    }

/* Neutral Action (Finish/Close) */
.btn-finish[b-3llv307po6] {
    background-color: #f2f2f7;
    color: #1d1d1f;
}

    .btn-finish:hover[b-3llv307po6] {
        background-color: #e5e5ea;
    }

/* Utility */
.text-label[b-3llv307po6] {
    color: #1d1d1f;
    font-weight: 600;
    margin: auto 0;
}

@media (max-width: 960px) {
    .lost-modal[b-3llv307po6] {
        width: 100%;
    }
}
/* /Pages/Pages_Event/LostPage.razor.rz.scp.css */
/* =========================
   Layout (左右兩欄)
========================= */
.page-container[b-azei720ts3] {
    display: flex;
    gap: 18px;
    padding: 16px 20px 24px;
    margin: 0 auto;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

/* =========================
   Left Section (新增失物招領)
========================= */
.left-section[b-azei720ts3] {
    width: 400px;
    min-width: 320px;
    border-radius: 20px;
    padding: 16px 16px 18px;
    box-sizing: border-box;
    background: linear-gradient(145deg, #f9fafb, #ffffff);
    border: 1px solid #e5e7eb;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.04);
    position: sticky;
    top: 12px;
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

    /* 目前先顯示淡淡 placeholder（之後你有內容再改） */
    .left-section[b-azei720ts3]::before {
        content: "新增失物招領";
        display: block;
        font-size: 13px;
        color: #9ca3af;
    }

/* 上方預覽圖片區 */
.img-grid[b-azei720ts3] {
    width: 100%;
    border-radius: 16px;
    background: #f3f4f6;
    padding: 8px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
}

.input-img[b-azei720ts3] {
    max-width: 100%;
    max-height: 220px;
    border-radius: 14px;
    object-fit: cover;
    display: block;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.22);
}

/* 選擇照片按鈕（用 label 當按鈕） */
.btn-selectimg[b-azei720ts3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    margin-top: 4px;
    border-radius: 999px;
    border: 1px solid #d1d5db;
    background: #ffffff;
    font-size: 13px;
    color: #111827;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.06s ease, box-shadow 0.15s ease;
}

    .btn-selectimg:hover[b-azei720ts3] {
        background: #f9fafb;
        border-color: #cbd5e1;
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
        transform: translateY(-1px);
    }

    .btn-selectimg:active[b-azei720ts3] {
        transform: translateY(0);
        box-shadow: 0 4px 12px rgba(15, 23, 42, 0.16);
    }

/* 公告區域 / 物品描述 區塊 */
.select-area[b-azei720ts3],
.input-area[b-azei720ts3] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* label 標題 */
.input-label[b-azei720ts3] {
    font-size: 12px;
    font-weight: 500;
    color: #6b7280;
    letter-spacing: 0.02em;
}

/* 下拉選單與輸入框：Apple 風格 */
.select[b-azei720ts3],
.input-desc[b-azei720ts3] {
    width: 100%;
    box-sizing: border-box;
    border-radius: 12px;
    border: 1px solid #d1d5db;
    padding: 8px 10px;
    font-size: 14px;
    color: #111827;
    background-color: #ffffff;
    outline: none;
    transition: border-color 0.14s ease, box-shadow 0.14s ease, background-color 0.14s ease;
    appearance: none;
}

/* 讓 select 有一點內建箭頭空間 */
.select[b-azei720ts3] {
    padding-right: 26px;
}

    .select:focus[b-azei720ts3],
    .input-desc:focus[b-azei720ts3] {
        border-color: #2563eb;
        box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.25);
        background-color: #ffffff;
    }

/* 送出按鈕 */
.btn-create[b-azei720ts3] {
    margin-top: 6px;
    width: 100%;
    border: none;
    border-radius: 999px;
    padding: 9px 14px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #ffffff;
    cursor: pointer;
    box-shadow: 0 16px 30px rgba(37, 99, 235, 0.35);
    transition: background 0.16s ease, box-shadow 0.16s ease, transform 0.06s ease, opacity 0.16s ease;
}

    .btn-create:hover[b-azei720ts3] {
        background: linear-gradient(135deg, #1d4ed8, #1e40af);
        box-shadow: 0 20px 40px rgba(37, 99, 235, 0.4);
        transform: translateY(-1px);
    }

    .btn-create:active[b-azei720ts3] {
        transform: translateY(0);
        box-shadow: 0 10px 24px rgba(37, 99, 235, 0.45);
    }

    .btn-create:disabled[b-azei720ts3] {
        opacity: 0.6;
        cursor: default;
        box-shadow: none;
    }

/* =========================
   Right Section (清單)
========================= */
.right-section[b-azei720ts3] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* 每一個 group 區塊 */
.group-section[b-azei720ts3] {
    background: #ffffff;
    border-radius: 22px;
    padding: 14px 16px 12px;
    box-shadow: 0 22px 50px rgba(15, 23, 42, 0.08);
    border: 1px solid #edf1f7;
}

/* 區塊標題 */
.lbl-title[b-azei720ts3] {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    padding-bottom: 6px;
    margin-bottom: 8px;
    border-bottom: 1px solid #f1f3f6;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 0.02em;
}

    .lbl-title[b-azei720ts3]::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background: #0ea5e9;
    }

/* 內容：卡片排列（預設 3 欄） */
.group-content[b-azei720ts3] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 4px;
}

/* =========================
   Card (如果你已抽成 LostCard component，這段就移到 LostCard.razor.css)
========================= */
.lost-card[b-azei720ts3] {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
    padding: 10px;
    border-radius: 18px;
    background: #f9fafb;
    transition: transform 0.08s ease, box-shadow 0.16s ease, background-color 0.16s ease;
    cursor: pointer;
    box-sizing: border-box;
}

    .lost-card:hover[b-azei720ts3] {
        background: #ffffff;
        transform: translateY(-1px);
        box-shadow: 0 14px 36px rgba(15, 23, 42, 0.12);
    }

.card-left[b-azei720ts3] {
    width: 72px;
    flex-shrink: 0;
    border-radius: 16px;
    overflow: hidden;
    background: #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lost-img[b-azei720ts3] {
    width: 100%;
    height: 72px;
    object-fit: cover;
    display: block;
}

.card-right[b-azei720ts3] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.lost-status-waitreturn[b-azei720ts3],
.lost-status-finish[b-azei720ts3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}

.lost-status-waitreturn[b-azei720ts3] {
    background: #fef3c7;
    color: #92400e;
}

.lost-status-finish[b-azei720ts3] {
    background: #ecfdf3;
    color: #166534;
}

    .lost-status-waitreturn span:first-child[b-azei720ts3],
    .lost-status-finish span:first-child[b-azei720ts3] {
        font-weight: 600;
    }

    .lost-status-waitreturn span:last-child[b-azei720ts3],
    .lost-status-finish span:last-child[b-azei720ts3] {
        font-size: 14px;
        opacity: 0.8;
    }

.lost-area[b-azei720ts3] {
    margin-top: 4px;
    font-size: 14px;
    color: #6b7280;
}

.lost-content[b-azei720ts3] {
    margin-top: 2px;
    font-size: 14px;
    color: #29f;
    line-height: 1.5;
    word-break: break-word;
}

/* =========================
   RWD
========================= */

/* <= 1200：仍 3 欄（可留著當保險） */
@media (max-width: 1200px) {
    .group-content[b-azei720ts3] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* <= 960：改成上下排列 + group-content 2 欄 */
@media (max-width: 960px) {
    .page-container[b-azei720ts3] {
        flex-direction: column;
        padding: 12px 12px 20px;
    }

    .left-section[b-azei720ts3] {
        width: 100%;
        min-width: 0;
        position: static;
        order: 1;
    }

    .right-section[b-azei720ts3] {
        order: 2;
    }

    .group-content[b-azei720ts3] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lost-card[b-azei720ts3] {
        border-radius: 16px;
    }
}

/* <= 640：1 欄 */
@media (max-width: 640px) {
    .group-content[b-azei720ts3] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Pages_Event/MenuFormModal.razor.rz.scp.css */
.mf-wrap[b-u1sdo13aj9] {
    width: min(640px);
    border-radius: 18px;
    background: rgba(255,255,255,0.92);
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 22px 60px rgba(0,0,0,0.18);
    overflow: hidden;
}

.mf-head[b-u1sdo13aj9] {
    padding: 16px 16px 12px 16px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    background: linear-gradient(to bottom, rgba(0,0,0,0.02), rgba(0,0,0,0));
}

.mf-title[b-u1sdo13aj9] {
    font-size: 16px;
    font-weight: 750;
    letter-spacing: 0.2px;
    color: rgba(0,0,0,0.86);
}

.mf-sub[b-u1sdo13aj9] {
    margin-top: 4px;
    font-size: 12px;
    font-weight: 700;
    color: rgba(0,0,0,0.50);
}

.mf-body[b-u1sdo13aj9] {
    padding: 14px 16px 16px 16px;
}

.mf-grid[b-u1sdo13aj9] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.mf-field[b-u1sdo13aj9] {
    display: grid;
    gap: 6px;
}

.mf-field--full[b-u1sdo13aj9] {
    margin-top: 12px;
}

.mf-label[b-u1sdo13aj9] {
    font-size: 12px;
    font-weight: 700;
    color: rgba(0,0,0,0.60);
}

.mf-hint[b-u1sdo13aj9] {
    font-size: 12px;
    color: rgba(0,0,0,0.45);
}

.mf-input[b-u1sdo13aj9] {
    height: 40px;
    padding: 0 12px;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.12);
    background: rgba(255,255,255,0.95);
    outline: none;
    font-size: 14px;
    color: rgba(0,0,0,0.85);
}

    .mf-input:focus[b-u1sdo13aj9] {
        border-color: rgba(0,0,0,0.22);
        box-shadow: 0 0 0 4px rgba(0,0,0,0.06);
    }

.mf-readonly[b-u1sdo13aj9] {
    height: 40px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.10);
    background: rgba(0,0,0,0.03);
    color: rgba(0,0,0,0.78);
    font-size: 14px;
    font-weight: 750;
}

.mf-textarea[b-u1sdo13aj9] {
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,0.12);
    background: rgba(255,255,255,0.95);
    outline: none;
    font-size: 14px;
    line-height: 1.6;
    color: rgba(0,0,0,0.85);
    resize: vertical;
    min-height: 120px;
}

    .mf-textarea:focus[b-u1sdo13aj9] {
        border-color: rgba(0,0,0,0.22);
        box-shadow: 0 0 0 4px rgba(0,0,0,0.06);
    }

.mf-error[b-u1sdo13aj9] {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(220, 38, 38, 0.18);
    background: rgba(220, 38, 38, 0.06);
    color: rgba(160, 20, 20, 0.92);
    font-size: 13px;
    font-weight: 650;
}

.mf-foot[b-u1sdo13aj9] {
    padding: 12px 16px 14px 16px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    border-top: 1px solid rgba(0,0,0,0.06);
    background: rgba(255,255,255,0.86);
}

.mf-foot-left[b-u1sdo13aj9],
.mf-foot-right[b-u1sdo13aj9] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mf-btn[b-u1sdo13aj9] {
    height: 38px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.12);
    background: white;
    cursor: pointer;
    font-size: 13px;
    font-weight: 750;
    letter-spacing: 0.2px;
    transition: transform 0.06s ease, box-shadow 0.2s ease, background 0.2s ease, opacity 0.2s ease;
    user-select: none;
}

    .mf-btn:active[b-u1sdo13aj9] {
        transform: translateY(1px);
    }

    .mf-btn:disabled[b-u1sdo13aj9] {
        opacity: 0.55;
        cursor: not-allowed;
        transform: none;
    }

.mf-btn-primary[b-u1sdo13aj9] {
    background: rgba(0,0,0,0.92);
    color: white;
    box-shadow: 0 10px 22px rgba(0,0,0,0.18);
}

    .mf-btn-primary:hover:not(:disabled)[b-u1sdo13aj9] {
        box-shadow: 0 12px 28px rgba(0,0,0,0.22);
    }

.mf-btn-ghost[b-u1sdo13aj9] {
    background: transparent;
    border-color: rgba(0,0,0,0.10);
}

    .mf-btn-ghost:hover:not(:disabled)[b-u1sdo13aj9] {
        background: rgba(0,0,0,0.04);
    }

.mf-btn-danger[b-u1sdo13aj9] {
    border-color: rgba(220, 38, 38, 0.25);
    background: rgba(220, 38, 38, 0.08);
    color: rgba(160, 20, 20, 0.92);
}

    .mf-btn-danger:hover:not(:disabled)[b-u1sdo13aj9] {
        background: rgba(220, 38, 38, 0.12);
    }

@media (max-width: 520px) {
    .mf-wrap[b-u1sdo13aj9] {
        width: 100%;
    }

        .mf-grid[b-u1sdo13aj9] {
        grid-template-columns: 1fr;
    }
}

.mf-select[b-u1sdo13aj9] {
    height: 40px;
    padding: 0 12px;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.12);
    background: rgba(255,255,255,0.95);
    outline: none;
    font-size: 14px;
    color: rgba(0,0,0,0.85);
    appearance: none;
}

    .mf-select:focus[b-u1sdo13aj9] {
        border-color: rgba(0,0,0,0.22);
        box-shadow: 0 0 0 4px rgba(0,0,0,0.06);
    }
/* /Pages/Pages_Event/MenuListConfirmModal.razor.rz.scp.css */
.mlc-wrap[b-xbgd0d1hy4] {
    width: min(1100px, calc(100vw - 28px));
    border-radius: 18px;
    background: rgba(255,255,255,0.92);
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 22px 60px rgba(0,0,0,0.18);
    overflow: hidden;
}

.mlc-head[b-xbgd0d1hy4] {
    padding: 16px 16px 12px 16px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    background: linear-gradient(to bottom, rgba(0,0,0,0.02), rgba(0,0,0,0));
}

.mlc-title[b-xbgd0d1hy4] {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.2px;
    color: rgba(0,0,0,0.86);
}

.mlc-sub[b-xbgd0d1hy4] {
    margin-top: 4px;
    font-size: 12px;
    font-weight: 700;
    color: rgba(0,0,0,0.50);
}

.mlc-body[b-xbgd0d1hy4] {
    padding: 12px 16px 16px 16px;
    max-height: min(66vh, 780px);
    overflow: auto;
}

.mlc-table[b-xbgd0d1hy4] {
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,0.08);
    overflow: hidden;
    background: rgba(255,255,255,0.92);
}

.mlc-row[b-xbgd0d1hy4] {
    display: grid;
    grid-template-columns: 150px 52px 1fr 1fr 1fr;
    gap: 10px;
    padding: 10px;
    align-items: start;
    border-top: 1px solid rgba(0,0,0,0.06);
}

    .mlc-row:first-child[b-xbgd0d1hy4] {
        border-top: 0;
    }

.mlc-row-head[b-xbgd0d1hy4] {
    background: rgba(0,0,0,0.03);
    border-top: 0;
    padding-top: 12px;
    padding-bottom: 12px;
}

    .mlc-row-head .mlc-col[b-xbgd0d1hy4] {
        font-size: 12px;
        font-weight: 900;
        color: rgba(0,0,0,0.55);
    }

.mlc-col[b-xbgd0d1hy4] {
    display: grid;
    gap: 6px;
}

.mlc-week[b-xbgd0d1hy4] {
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.10);
    background: rgba(0,0,0,0.03);
    color: rgba(0,0,0,0.78);
    font-size: 13px;
    font-weight: 900;
}

.mlc-input[b-xbgd0d1hy4] {
    height: 38px;
    padding: 0 10px;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.12);
    background: rgba(255,255,255,0.95);
    outline: none;
    font-size: 13px;
    font-weight: 750;
    color: rgba(0,0,0,0.82);
}

.mlc-textarea[b-xbgd0d1hy4] {
    padding: 10px 10px;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.12);
    background: rgba(255,255,255,0.95);
    outline: none;
    font-size: 13px;
    line-height: 1.55;
    color: rgba(0,0,0,0.84);
    resize: vertical;
    min-height: 58px;
}

    .mlc-input:focus[b-xbgd0d1hy4],
    .mlc-textarea:focus[b-xbgd0d1hy4] {
        border-color: rgba(0,0,0,0.22);
        box-shadow: 0 0 0 4px rgba(0,0,0,0.06);
    }

.mlc-error[b-xbgd0d1hy4] {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(220, 38, 38, 0.18);
    background: rgba(220, 38, 38, 0.06);
    color: rgba(160, 20, 20, 0.92);
    font-size: 13px;
    font-weight: 750;
}

.mlc-foot[b-xbgd0d1hy4] {
    padding: 12px 16px 14px 16px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    border-top: 1px solid rgba(0,0,0,0.06);
    background: rgba(255,255,255,0.86);
}

.mlc-btn[b-xbgd0d1hy4] {
    height: 38px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.12);
    background: white;
    cursor: pointer;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.2px;
    transition: transform 0.06s ease, box-shadow 0.2s ease, background 0.2s ease, opacity 0.2s ease;
    user-select: none;
}

    .mlc-btn:active[b-xbgd0d1hy4] {
        transform: translateY(1px);
    }

.mlc-btn-primary[b-xbgd0d1hy4] {
    background: rgba(0,0,0,0.92);
    color: white;
    box-shadow: 0 10px 22px rgba(0,0,0,0.18);
}

    .mlc-btn-primary:hover:not(:disabled)[b-xbgd0d1hy4] {
        box-shadow: 0 12px 28px rgba(0,0,0,0.22);
    }

.mlc-btn-ghost[b-xbgd0d1hy4] {
    background: transparent;
    border-color: rgba(0,0,0,0.10);
}

    .mlc-btn-ghost:hover:not(:disabled)[b-xbgd0d1hy4] {
        background: rgba(0,0,0,0.04);
    }

@media (max-width: 980px) {
    .mlc-row[b-xbgd0d1hy4] {
        grid-template-columns: 150px 52px 1fr;
    }

    .mlc-row-head[b-xbgd0d1hy4] {
        display: none;
    }

    .mlc-week[b-xbgd0d1hy4] {
        justify-content: center;
    }
}
/* /Pages/Pages_Event/MenuPage.razor.rz.scp.css */
.mn-page[b-wpmiu45v1r] {
    padding: 18px 18px 26px 18px;
    max-width: 100%;
    margin: 0 auto;
}

.mn-topbar[b-wpmiu45v1r] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.mn-topbar-left[b-wpmiu45v1r] {
    display: flex;
    gap: 14px;
}

.mn-title[b-wpmiu45v1r] {
    font-size: 20px;
    font-weight: 650;
    letter-spacing: 0.2px;
    align-items: center;
}

.mn-subtitle[b-wpmiu45v1r] {
    margin-top: 3px;
    font-size: 12px;
    color: rgba(0,0,0,0.55);
}

.mn-topbar-right[b-wpmiu45v1r] {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

/* panel */
.mn-panel[b-wpmiu45v1r] {
    background: rgba(255,255,255,0.86);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
    backdrop-filter: blur(10px);
}

.mn-panel-row[b-wpmiu45v1r] {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 12px;
}

.mn-field[b-wpmiu45v1r] {
    display: grid;
    gap: 6px;
    min-width: 180px;
}

.mn-label[b-wpmiu45v1r] {
    font-size: 12px;
    color: rgba(0,0,0,0.6);
}

.mn-input[b-wpmiu45v1r] {
    height: 38px;
    padding: 0 12px;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.12);
    background: rgba(255,255,255,0.9);
    outline: none;
    font-size: 14px;
}

    .mn-input:focus[b-wpmiu45v1r] {
        border-color: rgba(0,0,0,0.22);
        box-shadow: 0 0 0 4px rgba(0,0,0,0.06);
    }

.mn-divider[b-wpmiu45v1r] {
    width: 1px;
    height: 38px;
    background: rgba(0,0,0,0.10);
    margin: 0 2px;
}

.mn-meta[b-wpmiu45v1r] {
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 12px;
    color: rgba(0,0,0,0.6);
    flex-wrap: wrap;
}

.mn-meta-item[b-wpmiu45v1r] {
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(0,0,0,0.04);
    border: 1px solid rgba(0,0,0,0.06);
}

/* buttons */
.mn-btn[b-wpmiu45v1r] {
    height: 38px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.12);
    background: white;
    cursor: pointer;
    font-size: 13px;
    font-weight: 650;
    letter-spacing: 0.2px;
    transition: transform 0.06s ease, box-shadow 0.2s ease, background 0.2s ease, opacity 0.2s ease;
    user-select: none;
}

    .mn-btn:active[b-wpmiu45v1r] {
        transform: translateY(1px);
    }

    .mn-btn:disabled[b-wpmiu45v1r] {
        opacity: 0.5;
        cursor: not-allowed;
        transform: none;
    }

.mn-btn-primary[b-wpmiu45v1r] {
    background: rgba(0,0,0,0.92);
    color: white;
    box-shadow: 0 10px 22px rgba(0,0,0,0.18);
}

.mn-btn-soft[b-wpmiu45v1r] {
    background: rgba(0,0,0,0.04);
}

    .mn-btn-soft:hover:not(:disabled)[b-wpmiu45v1r] {
        background: rgba(0,0,0,0.06);
    }

.mn-btn-ghost[b-wpmiu45v1r] {
    background: transparent;
    border-color: rgba(0,0,0,0.10);
}

    .mn-btn-ghost:hover:not(:disabled)[b-wpmiu45v1r] {
        background: rgba(0,0,0,0.04);
    }

/* hide file picker */
.mn-file[b-wpmiu45v1r] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* table */
.mn-content[b-wpmiu45v1r] {
    margin-top: 14px;
}

.mn-grid[b-wpmiu45v1r] {
    width: 100%;
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,0.08);
    background: rgba(255,255,255,0.9);
    box-shadow: 0 10px 26px rgba(0,0,0,0.06);
    overflow: hidden;
}

.mn-grid-head[b-wpmiu45v1r] {
    display: grid;
    grid-template-columns: 220px 1fr 1fr 1fr;
    background: linear-gradient(to bottom, rgba(0,0,0,0.03), rgba(0,0,0,0));
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

.mn-hd[b-wpmiu45v1r] {
    padding: 12px 12px;
    font-size: 12px;
    font-weight: 750;
    color: rgba(0,0,0,0.65);
    letter-spacing: 0.2px;
}

.mn-hd-date[b-wpmiu45v1r] {
    padding-left: 14px;
}

.mn-row[b-wpmiu45v1r] {
    display: grid;
    grid-template-columns: 220px 1fr 1fr 1fr;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

    .mn-row:last-child[b-wpmiu45v1r] {
        border-bottom: none;
    }

.mn-cell[b-wpmiu45v1r] {
    padding: 12px 12px;
}

.mn-date[b-wpmiu45v1r] {
    padding-left: 14px;
}

.mn-date-top[b-wpmiu45v1r] {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.mn-date-text[b-wpmiu45v1r] {
    font-size: 13px;
    font-weight: 750;
    color: rgba(0,0,0,0.82);
}

.mn-week[b-wpmiu45v1r] {
    font-size: 12px;
    font-weight: 750;
    color: rgba(0,0,0,0.45);
}

.mn-badge[b-wpmiu45v1r] {
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 750;
    border: 1px solid rgba(0,0,0,0.08);
    background: rgba(0,0,0,0.03);
    color: rgba(0,0,0,0.62);
}

.mn-row--weekend[b-wpmiu45v1r] {
    background: rgba(255, 245, 235, 0.55);
}

.mn-row--holiday[b-wpmiu45v1r] {
    background: rgba(255, 235, 235, 0.55);
}

/* meal cell + hover edit */
.mn-meal[b-wpmiu45v1r] {
    position: relative;
    border-radius: 14px;
    padding: 10px 10px;
    background: rgba(0,0,0,0.03);
    border: 1px solid rgba(0,0,0,0.05);
    /*min-height: 52px;*/
    cursor: pointer;
}

.mn-meal-text[b-wpmiu45v1r] {
    font-size: 13px;
    line-height: 1.55;
    color: rgba(0,0,0,0.85);
    white-space: pre-wrap;
    word-break: break-word;
    padding-right: 34px; /* 讓右上角 edit 不蓋到文字 */
}

.mn-meal-text--empty[b-wpmiu45v1r] {
    color: rgba(0,0,0,0.35);
}

.mn-editbtn[b-wpmiu45v1r] {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,0.10);
    background: rgba(255,255,255,0.92);
    cursor: pointer;
    font-size: 13px;
    font-weight: 850;
    line-height: 1;
    opacity: 0;
    transform: translateY(-2px);
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease, background 0.18s ease;
}

/* hover 出現 */
.mn-meal:hover[b-wpmiu45v1r] {
    opacity: 1;
    transform: translateY(1);
    pointer-events: auto;
    background: rgba(0,0,0,0.04);
}

.mn-editbtn:hover[b-wpmiu45v1r] {
    background: rgba(0,0,0,0.04);
}

.mn-editbtn:active[b-wpmiu45v1r] {
    transform: translateY(1px);
}

/* loading overlay */
.mn-loading[b-wpmiu45v1r] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
}

.mn-loading-card[b-wpmiu45v1r] {
    width: 220px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.92);
    box-shadow: 0 20px 50px rgba(0,0,0,0.20);
    padding: 16px;
    display: grid;
    gap: 10px;
    justify-items: center;
}

.mn-loading-text[b-wpmiu45v1r] {
    font-size: 13px;
    color: rgba(0,0,0,0.65);
    font-weight: 650;
}

.mn-spinner[b-wpmiu45v1r] {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    border: 3px solid rgba(0,0,0,0.12);
    border-top-color: rgba(0,0,0,0.55);
    animation: mnspin-b-wpmiu45v1r 0.9s linear infinite;
}

@keyframes mnspin-b-wpmiu45v1r {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 960px) {
    .mn-grid-head[b-wpmiu45v1r], .mn-row[b-wpmiu45v1r] {
        grid-template-columns: 200px 1fr 1fr 1fr;
    }
}

@media (max-width: 780px) {
    .mn-grid-head[b-wpmiu45v1r] {
        display: none;
    }

    .mn-row[b-wpmiu45v1r] {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 10px 12px 14px 12px;
    }

    .mn-cell[b-wpmiu45v1r] {
        padding: 0;
    }

    .mn-date[b-wpmiu45v1r] {
        padding-left: 0;
        border-bottom: 1px solid rgba(0,0,0,0.06);
        padding-bottom: 10px;
    }
}

.mn-quick[b-wpmiu45v1r] {
    display: flex;
    gap: 10px;
    align-items: center;
}
/* /Pages/Pages_Event/MenuUploadPage.razor.rz.scp.css */
.paste-zone[b-cbpu8gsyul] {
    position: relative;
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    padding: 24px;
    min-height: 180px;
    background: #f8fafc;
    text-align: center;
}

    .paste-zone:focus[b-cbpu8gsyul] {
        outline: none;
        border-color: #2563eb;
        background: #eef3ff;
    }

.preview-img[b-cbpu8gsyul] {
    max-width: 100%;
    margin-top: 12px;
    border-radius: 10px;
}

.actions[b-cbpu8gsyul] {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}

.btn[b-cbpu8gsyul] {
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    padding: 10px 14px;
    cursor: pointer;
    background: white;
}

.btn-primary[b-cbpu8gsyul] {
    background: #2563eb;
    color: white;
    border-color: #2563eb;
}

.btn-ghost[b-cbpu8gsyul] {
    background: #fff;
}

.btn:disabled[b-cbpu8gsyul] {
    opacity: .55;
    cursor: not-allowed;
}

.json-box[b-cbpu8gsyul] {
    background: #0f172a;
    color: #e5e7eb;
    padding: 12px;
    border-radius: 10px;
    max-height: 320px;
    overflow: auto;
}

.error-box[b-cbpu8gsyul] {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #fff1f2;
    border: 1px solid #fecdd3;
    color: #9f1239;
    white-space: pre-wrap;
}

.overlay[b-cbpu8gsyul] {
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: rgba(255,255,255,.7);
    backdrop-filter: blur(2px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.spinner[b-cbpu8gsyul], .btn-spinner[b-cbpu8gsyul] {
    width: 26px;
    height: 26px;
    border: 3px solid #cbd5e1;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: spin-b-cbpu8gsyul 0.9s linear infinite;
}

.btn-spinner[b-cbpu8gsyul] {
    width: 16px;
    height: 16px;
    border-width: 2px;
    display: inline-block;
    vertical-align: -3px;
    margin-right: 8px;
}

.overlay-text[b-cbpu8gsyul] {
    font-size: 14px;
    color: #334155;
}

@keyframes spin-b-cbpu8gsyul {
    to {
        transform: rotate(360deg);
    }
}
/* /Pages/Pages_Event/ScheduleFormModal.razor.rz.scp.css */
.schedm-wrap[b-dx6hmg01yt] {
    padding: 1em;
}

.modal-title[b-dx6hmg01yt] {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 8px;
}

.schedm-body[b-dx6hmg01yt] {
    min-width: 520px;
}

.preview[b-dx6hmg01yt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f8fafc;
    border: 1px solid #e7e9ec;
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 12px;
}

    .preview .big[b-dx6hmg01yt] {
        font-weight: 700;
        font-size: 18px;
        margin-right: 8px;
    }

    .preview .dow[b-dx6hmg01yt] {
        color: #6b7280;
    }

.form-grid[b-dx6hmg01yt] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.field[b-dx6hmg01yt] {
    display: flex;
    flex-direction: column;
}

    .field.full[b-dx6hmg01yt] {
        grid-column: 1 / -1;
    }

    .field label[b-dx6hmg01yt] {
        font-size: 12px;
        color: #6b7280;
        margin-bottom: 4px;
    }

    .field .req[b-dx6hmg01yt] {
        color: #dc2626;
    }

    .field .hint[b-dx6hmg01yt] {
        font-size: 12px;
        color: #6b7280;
        margin-top: 4px;
    }

.switches[b-dx6hmg01yt] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.note[b-dx6hmg01yt] {
    grid-column: 1 / -1;
    font-size: 12px;
    color: #6b7280;
}

    .note ul[b-dx6hmg01yt] {
        margin: 0;
        padding-left: 18px;
    }

.actions[b-dx6hmg01yt] {
    margin-top: 12px;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* badges */
.badge[b-dx6hmg01yt] {
    display: inline-block;
    padding: 2px 6px;
    font-size: 12px;
    border-radius: 6px;
    border: 1px solid transparent;
}

.badge-makeup[b-dx6hmg01yt] {
    background: #fff7d1;
    color: #7a6400;
    border-color: #f5e5a1;
}

.badge-holiday[b-dx6hmg01yt] {
    background: #ffe0e0;
    color: #7a0000;
    border-color: #f0c2c2;
}

.badge-hl[b-dx6hmg01yt] {
    background: #e7ffe8;
    color: #0b6a41;
    border-color: #ccefd2;
    font-weight: 700;
}

@media (max-width: 640px) {
    .schedm-body[b-dx6hmg01yt] {
        min-width: auto;
    }

    .form-grid[b-dx6hmg01yt] {
        grid-template-columns: 1fr;
    }
}

/* 三顆 switch 的格狀排列 */
.switch-grid[b-dx6hmg01yt] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 4px;
}

/* 每顆 switch 做成可點擊卡片 */
.switch-item[b-dx6hmg01yt] {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #e7e9ec;
    border-radius: 10px;
    padding: 10px 12px;
    margin: 0;
    cursor: pointer;
    background: #fff;
    /* 移除 bootstrap form-switch 的預設左縮排 */
    position: relative;
}

    .switch-item .form-check-input[b-dx6hmg01yt] {
        margin: 0;
        transform: scale(1.05);
    }

/* 文案區：標題＋副標 */
.switch-text[b-dx6hmg01yt] {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

    .switch-text .title[b-dx6hmg01yt] {
        font-weight: 600;
    }

    .switch-text .hint[b-dx6hmg01yt] {
        font-size: 12px;
        color: #6b7280;
    }

/* 勾選效果（需要現代瀏覽器；Chrome/Safari/Edge ok） */
.switch-item:has(input:checked)[b-dx6hmg01yt] {
    border-color: #93c5fd;
    background: #f8fbff;
    box-shadow: inset 0 0 0 2px #e5f0ff;
}

/* RWD：窄螢幕 2 欄，再更窄 1 欄 */
@media (max-width: 640px) {
    .switch-grid[b-dx6hmg01yt] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 420px) {
    .switch-grid[b-dx6hmg01yt] {
        grid-template-columns: 1fr;
    }
}


.switch-grid[b-dx6hmg01yt] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 4px;
}

.switch-item[b-dx6hmg01yt] {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #e7e9ec;
    border-radius: 10px;
    padding: 10px 12px;
    margin: 0;
    cursor: pointer;
    background: #fff;
}

    .switch-item .form-check-input[b-dx6hmg01yt] {
        margin: 0;
        transform: scale(1.05);
    }

.switch-text[b-dx6hmg01yt] {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

    .switch-text .title[b-dx6hmg01yt] {
        font-weight: 600;
    }

    .switch-text .hint[b-dx6hmg01yt] {
        font-size: 12px;
        color: #6b7280;
    }

/* 勾選時整張卡片加強（支援 :has 的瀏覽器） */
.switch-item:has(input:checked)[b-dx6hmg01yt] {
    border-color: #93c5fd;
    background: #f8fbff;
    box-shadow: inset 0 0 0 2px #e5f0ff;
}

/* 退而求其次：不支援 :has 時，用內層 switch-text 顯示高亮 */
@supports not selector(:has(*)) {
    .switch-text[b-dx6hmg01yt] {
        border: 1px solid transparent;
        border-radius: 8px;
        padding: 6px 8px;
    }

    .switch-item input:checked + .switch-text[b-dx6hmg01yt] {
        border-color: #93c5fd;
        background: #f8fbff;
        box-shadow: inset 0 0 0 2px #e5f0ff;
    }
}

/* RWD */
@media (max-width: 640px) {
    .switch-grid[b-dx6hmg01yt] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 420px) {
    .switch-grid[b-dx6hmg01yt] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Pages_Event/ScheduleListConfirmModal.razor.rz.scp.css */
.scm-root[b-mqxuqai5i4] {
    width: 1100px;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 18px 60px rgba(0,0,0,.16);
    overflow: hidden;
}

.scm-header[b-mqxuqai5i4] {
    padding: 18px 18px 14px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid rgba(15,23,42,.08);
    background: linear-gradient(180deg, rgba(248,250,252,.9), rgba(255,255,255,1));
}

.scm-title[b-mqxuqai5i4] {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: .2px;
}

.scm-subtitle[b-mqxuqai5i4] {
    margin-top: 6px;
    font-size: 13px;
    color: rgba(15,23,42,.62);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.scm-pill[b-mqxuqai5i4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 12px;
    color: rgba(15,23,42,.82);
    background: rgba(148,163,184,.22);
}

.scm-dot[b-mqxuqai5i4] {
    color: rgba(15,23,42,.35);
}

.scm-muted[b-mqxuqai5i4] {
    color: rgba(15,23,42,.55);
}

.scm-warn[b-mqxuqai5i4] {
    color: #b45309;
    font-weight: 700;
}

.scm-header-right[b-mqxuqai5i4] {
    display: flex;
    gap: 10px;
    align-items: center;
}

.scm-banner[b-mqxuqai5i4] {
    margin: 12px 14px 0;
    padding: 12px 12px;
    border-radius: 12px;
    border: 1px solid rgba(15,23,42,.10);
}

.scm-banner--danger[b-mqxuqai5i4] {
    border-color: rgba(220,38,38,.22);
    background: rgba(220,38,38,.06);
}

.scm-banner-title[b-mqxuqai5i4] {
    font-size: 13px;
    font-weight: 800;
    margin-bottom: 6px;
    color: rgba(15,23,42,.86);
}

.scm-banner-list[b-mqxuqai5i4] {
    margin: 0;
    padding-left: 18px;
    font-size: 12.5px;
    color: rgba(15,23,42,.75);
}

.scm-details[b-mqxuqai5i4] {
    margin: 10px 14px 0;
    border-radius: 12px;
    border: 1px solid rgba(15,23,42,.10);
    overflow: hidden;
    background: rgba(148,163,184,.10);
}

.scm-details-summary[b-mqxuqai5i4] {
    cursor: pointer;
    padding: 10px 12px;
    font-weight: 700;
    font-size: 13px;
    color: rgba(15,23,42,.82);
}

.scm-details-body[b-mqxuqai5i4] {
    padding: 10px 12px 12px;
    background: #fff;
    border-top: 1px solid rgba(15,23,42,.08);
}

.scm-skip-row[b-mqxuqai5i4] {
    font-size: 12.5px;
    color: rgba(15,23,42,.72);
    padding: 6px 8px;
    border-radius: 10px;
    background: rgba(148,163,184,.12);
    margin-bottom: 8px;
    word-break: break-word;
}

.scm-toolbar[b-mqxuqai5i4] {
    padding: 12px 14px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 12px;
}

.scm-toolbar-left[b-mqxuqai5i4] {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.scm-toolbar-right[b-mqxuqai5i4] {
    display: flex;
    align-items: flex-end;
}

.scm-hint[b-mqxuqai5i4] {
    font-size: 12px;
    color: rgba(15,23,42,.55);
}

.scm-field[b-mqxuqai5i4] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.scm-label[b-mqxuqai5i4] {
    font-size: 12px;
    color: rgba(15,23,42,.62);
    font-weight: 700;
}

.scm-input[b-mqxuqai5i4] {
    height: 36px;
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid rgba(15,23,42,.12);
    background: rgba(255,255,255,.96);
    outline: none;
    font-size: 13.5px;
    color: rgba(15,23,42,.88);
    min-width: 160px;
}

    .scm-input:focus[b-mqxuqai5i4] {
        border-color: rgba(59,130,246,.55);
        box-shadow: 0 0 0 4px rgba(59,130,246,.12);
    }

.scm-input-date[b-mqxuqai5i4] {
    min-width: 150px;
}

.scm-mini[b-mqxuqai5i4] {
    margin-top: 6px;
    font-size: 12px;
    color: rgba(15,23,42,.55);
}

.scm-btn[b-mqxuqai5i4] {
    height: 36px;
    padding: 0 12px;
    border-radius: 12px;
    border: 1px solid rgba(15,23,42,.12);
    background: #fff;
    color: rgba(15,23,42,.86);
    font-weight: 800;
    font-size: 13px;
    cursor: pointer;
    transition: transform .06s ease, box-shadow .12s ease, background .12s ease, opacity .12s ease;
}

    .scm-btn:hover[b-mqxuqai5i4] {
        box-shadow: 0 10px 22px rgba(0,0,0,.10);
        transform: translateY(-1px);
    }

    .scm-btn:disabled[b-mqxuqai5i4] {
        opacity: .45;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

.scm-btn-primary[b-mqxuqai5i4] {
    border-color: rgba(59,130,246,.30);
    background: rgba(59,130,246,.12);
}

.scm-btn-ghost[b-mqxuqai5i4] {
    background: transparent;
}

.scm-btn-soft[b-mqxuqai5i4] {
    background: rgba(148,163,184,.14);
}

.scm-table-wrap[b-mqxuqai5i4] {
    padding: 0 14px 14px;
    overflow: auto;
    flex: 1;
}

.scm-table[b-mqxuqai5i4] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    border: 1px solid rgba(15,23,42,.10);
    border-radius: 14px;
    overflow: hidden;
}

    .scm-table thead th[b-mqxuqai5i4] {
        position: sticky;
        top: 0;
        z-index: 2;
        text-align: left;
        font-size: 12px;
        letter-spacing: .2px;
        color: rgba(15,23,42,.62);
        background: rgba(248,250,252,.95);
        border-bottom: 1px solid rgba(15,23,42,.08);
        padding: 10px 10px;
    }

    .scm-table tbody td[b-mqxuqai5i4] {
        border-bottom: 1px solid rgba(15,23,42,.06);
        padding: 10px 10px;
        vertical-align: top;
    }

/* 假日淺綠底（週六/週日） */
.scm-row.is-holiday[b-mqxuqai5i4] {
    background: rgba(16,185,129,.08);
}

    .scm-row.is-holiday:hover[b-mqxuqai5i4] {
        background: rgba(16,185,129,.14);
    }

.scm-row:hover[b-mqxuqai5i4] {
    background: rgba(59,130,246,.04);
}

.scm-col-date[b-mqxuqai5i4] {
    width: 220px;
}

.scm-col-type[b-mqxuqai5i4] {
    width: 170px;
}

.scm-col-title[b-mqxuqai5i4] {
    width: auto;
}

.scm-col-flags[b-mqxuqai5i4] {
    width: 300px;
}

.scm-col-actions[b-mqxuqai5i4] {
    width: 90px;
    text-align: right;
}

.scm-empty[b-mqxuqai5i4] {
    padding: 22px 10px;
    text-align: center;
    color: rgba(15,23,42,.55);
    font-size: 13px;
}

/* 日期 input + 星期 */
.scm-datecell[b-mqxuqai5i4] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.scm-dow[b-mqxuqai5i4] {
    font-size: 12px;
    font-weight: 800;
    color: rgba(15,23,42,.65);
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(148,163,184,.14);
    white-space: nowrap;
}

.scm-chipset[b-mqxuqai5i4] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.scm-chip[b-mqxuqai5i4] {
    height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(15,23,42,.12);
    background: rgba(148,163,184,.12);
    color: #aaa;
    font-weight: 800;
    font-size: 12px;
    cursor: pointer;
    transition: background .12s ease, transform .06s ease, opacity .12s ease;
}

    .scm-chip:hover[b-mqxuqai5i4] {
        transform: translateY(-1px);
    }

    .scm-chip.is-on[b-mqxuqai5i4] {
        background: rgba(59,130,246,.18); /* 藍底（柔） */
        border-color: rgba(59,130,246,.40); /* 藍框 */
        color: rgba(30,64,175,.95); /* 藍字 */
    }

.scm-icon-btn[b-mqxuqai5i4] {
    height: 32px;
    padding: 0 10px;
    border-radius: 12px;
    border: 1px solid rgba(15,23,42,.12);
    background: #fff;
    font-weight: 900;
    font-size: 12px;
    cursor: pointer;
}

.scm-icon-btn--danger[b-mqxuqai5i4] {
    color: #dc2626;
    border-color: rgba(220,38,38,.25);
    background: rgba(220,38,38,.06);
}

.scm-footer[b-mqxuqai5i4] {
    padding: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    border-top: 1px solid rgba(15,23,42,.08);
    background: linear-gradient(0deg, rgba(248,250,252,.9), rgba(255,255,255,1));
}

.scm-footer-right[b-mqxuqai5i4] {
    display: flex;
    gap: 10px;
}

@media (max-width: 820px) {
    .scm-root[b-mqxuqai5i4] {
        width: 100%;
    }

    .scm-col-flags[b-mqxuqai5i4] {
        width: 260px;
    }

    .scm-toolbar[b-mqxuqai5i4] {
        align-items: flex-start;
    }

    .scm-toolbar-right[b-mqxuqai5i4] {
        display: none;
    }

    .scm-input[b-mqxuqai5i4] {
        min-width: 140px;
    }

    .scm-col-date[b-mqxuqai5i4] {
        width: 210px;
    }
}
/* /Pages/Pages_Event/SchedulePage.razor.rz.scp.css */
/* ===== 版面布局：左側功能、右側清單 ===== */
.sched-layout[b-ywwgyw66mf] {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 8px;
    padding: 0 8px;
}

/* 左側欄 */
.sched-aside[b-ywwgyw66mf] {
    background: #fff;
    border: 1px solid #e7e9ec;
    border-radius: 12px;
    padding: 12px;
    height: fit-content;
    position: sticky;
    top: 12px;
    
}

    .sched-aside .field[b-ywwgyw66mf] {
        margin-bottom: 10px;
    }

    .sched-aside label[b-ywwgyw66mf] {
        font-size: 12px;
        color: #6b7280;
        margin-bottom: 4px;
        display: block;
    }

.btn-col > .btn[b-ywwgyw66mf] {
    margin-bottom: 8px;
}

/* Summary 小卡 */
.summary[b-ywwgyw66mf] {
    border-top: 1px dashed #e7e9ec;
    margin-top: 12px;
    padding-top: 12px;
}

.sum-row[b-ywwgyw66mf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    padding: 4px 0;
}

    .sum-row strong[b-ywwgyw66mf] {
        font-weight: 700;
    }

.dot[b-ywwgyw66mf] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
}

.dot-makeup[b-ywwgyw66mf] {
    background: #f1c40f;
}

.dot-holiday[b-ywwgyw66mf] {
    background: #e74c3c;
}

.dot-week[b-ywwgyw66mf] {
    background: #60a5fa;
}

.dot-hl[b-ywwgyw66mf] {
    background: #10b981;
}

/* 右側主清單 */
.sched-main[b-ywwgyw66mf] {
    min-width: 0;
}

/* 清單外框 */
.schedule-list[b-ywwgyw66mf] {
    border: 1px solid #eee;
    border-radius: 12px;
    background: #fff;
}

/* 每列改用 <details> 增加 accordion */
.schedule-row[b-ywwgyw66mf] {
    border-bottom: 1px solid #f3f4f6;
}

    .schedule-row:last-child[b-ywwgyw66mf] {
        border-bottom: none;
    }

    /* summary 主列 */
    .schedule-row > summary[b-ywwgyw66mf] {
        list-style: none;
        cursor: pointer;
        display: grid;
        grid-template-columns: 84px 1fr;
        gap: 12px;
        padding: 12px 16px;
        align-items: start;
    }

        .schedule-row > summary[b-ywwgyw66mf]::-webkit-details-marker {
            display: none;
        }

    .schedule-row:hover > summary[b-ywwgyw66mf] {
        background: #fafafa;
    }

/* 日期三行堆疊：年 / 月日 / 週幾 */
.date-col[b-ywwgyw66mf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.1;
    /* 若需要固定寬度（配合 summary 的左欄）可解開下一行 */
    /* width:84px; */
}

    .date-col .year[b-ywwgyw66mf] {
        font-size: 12px;
        color: #6b7280; /* 淡灰 */
        letter-spacing: .04em;
        margin-bottom: 2px;
        /* 想做小膠囊也可以加： */
        /* background:#f3f4f6; padding:1px 6px; border-radius:999px; */
    }

    .date-col .md[b-ywwgyw66mf] {
        font-weight: 700;
        font-size: 16px; /* 看起來比 year/dow 大一階 */
    }

    .date-col .dow[b-ywwgyw66mf] {
        font-size: 12px;
        color: #6b7280;
        margin-top: 2px;
    }

    /*（可選）週末/今日的微強調 */
    .date-col.is-weekend .md[b-ywwgyw66mf] {
        color: #ef4444;
    }
    /* 週六/週日淡紅字 */
    .date-col.is-today .md[b-ywwgyw66mf] {
        text-decoration: underline;
    }


.content-col .title[b-ywwgyw66mf] {
    font-weight: 600;
    margin-bottom: 2px;
}

.content-col .desc[b-ywwgyw66mf] {
    font-size: 14px;
    color: #555;
}


/* 展開區域 */
.expand[b-ywwgyw66mf] {
    padding: 0 16px 12px 16px;
}

    .expand .label[b-ywwgyw66mf] {
        font-size: 12px;
        color: #6b7280;
        margin-bottom: 4px;
    }

    .expand .text[b-ywwgyw66mf] {
        line-height: 1.6;
    }

/* Badge（清淡色） */
.badge[b-ywwgyw66mf] {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 6px;
    font-size: 12px;
    border-radius: 6px;
    border: 1px solid transparent;
}

.badge-makeup[b-ywwgyw66mf] {
    background: #fff7d1;
    color: #7a6400;
    border-color: #f5e5a1;
}

.badge-holiday[b-ywwgyw66mf] {
    background: #ffe0e0;
    color: #7a0000;
    border-color: #f0c2c2;
}

.badge-week[b-ywwgyw66mf] {
    background: #e8f2ff;
    color: #094c99;
    border-color: #cfe3ff;
}

.badge-hl[b-ywwgyw66mf] {
    background: #e7ffe8;
    color: #0b6a41;
    border-color: #ccefd2;
    font-weight: 700;
}

/* 規則高亮（不用滿版色，僅邊緣提示） */
.schedule-row.is-makeup > summary[b-ywwgyw66mf] {
    box-shadow: inset 3px 0 0 #f1c40f;
}

.schedule-row.is-holiday > summary[b-ywwgyw66mf] {
    box-shadow: inset 3px 0 0 #e74c3c;
}

.schedule-row.is-week > summary[b-ywwgyw66mf] {
    box-shadow: inset 3px 0 0 #60a5fa;
}

.schedule-row.is-highlight > summary[b-ywwgyw66mf] {
    box-shadow: inset 3px 0 0 #10b981;
}

/* RWD */
@media (max-width: 1024px) {
    .sched-layout[b-ywwgyw66mf] {
        grid-template-columns: 1fr;
    }

    .sched-aside[b-ywwgyw66mf] {
        position: static;
    }
}

/* 基本：列保持緊湊 */
.schedule-row > summary[b-ywwgyw66mf] {
    padding: 10px 14px; /* 原始 */
    gap: 10px;
    align-items: center; /* 垂直置中，避免因內容多而拉高 */
}

.content-col .title[b-ywwgyw66mf] {
    margin-bottom: 0;
    line-height: 1.2;
}

.content-col .desc[b-ywwgyw66mf] {
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* 單行 */
    max-width: 60ch; /* 避免描述撐高 */
}

/* 大尺吋：更緊湊（避免卡片變高） */
@media (min-width: 1280px) {
    .schedule-row > summary[b-ywwgyw66mf] {
        padding: 6px 12px; /* 縮小上下間距 */
        gap: 8px;
    }

    .badge[b-ywwgyw66mf] { /* 標籤也縮小一點 */
        padding: 1px 6px;
        font-size: 11px;
    }

    .date-col .md[b-ywwgyw66mf] {
        font-size: 15px;
    }

    .date-col .year[b-ywwgyw66mf], .date-col .dow[b-ywwgyw66mf] {
        font-size: 11px;
    }
}

/* 若右側有「編輯」按鈕，讓它不撐高整列 */
.schedule-row > summary .btn[b-ywwgyw66mf] {
    align-self: center; /* 居中對齊 */
    padding: 2px 8px; /* 用小按鈕視覺更緊湊 */
}
/* /Pages/Pages_Event/WaitReturnLostModal.razor.rz.scp.css */
body[b-s7l79sj6h1] {
}
/* /Pages/Pages_Gatget/AssetQrCode.razor.rz.scp.css */

.print-table[b-ut02y9xwye] {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

    .print-table th[b-ut02y9xwye],
    .print-table td[b-ut02y9xwye] {
        border: 1px solid #000;
        padding: 8px;
        text-align: center;
    }

/* 列印時使用 A3 尺寸 */
@media print {
    @page {
        size: A3 landscape;
        margin: 20mm;
    }

    body[b-ut02y9xwye] {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .print-header h1[b-ut02y9xwye] {
        font-size: 24px;
        margin-bottom: 0.25rem;
    }

    .print-header p[b-ut02y9xwye] {
        font-size: 14px;
        margin-top: 0;
    }

    .print-area[b-ut02y9xwye] {
        page-break-inside: avoid;
    }

    /* 移除不必要的非列印元素（可依需求調整） */
    nav[b-ut02y9xwye], .btn[b-ut02y9xwye], .no-print[b-ut02y9xwye] {
        display: none !important;
    }
}
/* /Pages/Pages_Gatget/QrCodeGenerator.razor.rz.scp.css */
.parent-action-container[b-h4mv5ls0pr] {
    width: 300px;
    margin: 20px auto;
    padding: 10px;
    border: 2px solid #ccc;
    border-radius: 8px;
    position: relative;
}

.title[b-h4mv5ls0pr] {
    font-size: 0.9rem;
    font-weight: bold;
    position: absolute;
    top: -8px;
    left: 10px;
    background-color: white;
    color: #666;
    padding: 0 5px;
    z-index: 1;
}

.button-group[b-h4mv5ls0pr] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
}

.action-button[b-h4mv5ls0pr] {
    padding: 10px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

    .action-button:hover[b-h4mv5ls0pr] {
        background-color: #0056b3;
    }
/* /Pages/Pages_Home/ArticleRowCard.razor.rz.scp.css */
.article-card[b-wt4vw3it7t] {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    transition: box-shadow 0.2s ease;
    cursor: pointer;
}

    .article-card:hover[b-wt4vw3it7t] {
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        transform: translateY(-1px);
    }

.article-card-info[b-wt4vw3it7t] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    color: #555;
    font-weight: bold;
    font-size: 15px;
}

/*.article-classname {
    color: #0077cc;
}*/

.article-classname[b-wt4vw3it7t] {
    font-size: 12px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 6px;
    background: #eef2ff;
    color: #4338ca;
    white-space: nowrap;
}

.article-card-content[b-wt4vw3it7t] {
    font-size: 15px;
    color: #444;
    word-break: break-word;
}

.article-read[b-wt4vw3it7t],
.article-notread[b-wt4vw3it7t],
.article-reply[b-wt4vw3it7t] {
    color: #999;
    font-weight:400;
}


@media (max-width: 1024px) {
    .article-card[b-wt4vw3it7t] {
        padding: 8px;
    }

    .article-card-info[b-wt4vw3it7t] {
        gap: 4px;
    }
}
/* /Pages/Pages_Home/Home.razor.rz.scp.css */
.page-container[b-cpbrskgff5] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 8px;
    cursor: default;
}

    .page-container h5[b-cpbrskgff5] {
        padding: 0 4px;
    }


/* 左欄 */
.left-section[b-cpbrskgff5] {
    width: 300px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* 中欄主要內容 */
.center-section[b-cpbrskgff5] {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* 右欄 */
.right-section[b-cpbrskgff5] {
    width: 500px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* 統一小卡片樣式 */
.leave-section[b-cpbrskgff5],
.medicine-section[b-cpbrskgff5],
.menu-section[b-cpbrskgff5],
.schedule-section[b-cpbrskgff5],
.lost-section[b-cpbrskgff5],
.book-section[b-cpbrskgff5],
.article-section[b-cpbrskgff5],
.notice-section[b-cpbrskgff5],
.message-section[b-cpbrskgff5] {
    background: #fff;
    border-radius: 8px;
    padding: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

h5[b-cpbrskgff5] {
}

    h5 span[b-cpbrskgff5] {
        margin: auto 0;
    }

/* RWD: stack on narrow screens */
@media (max-width: 768px) {
    .page-container[b-cpbrskgff5] {
        flex-direction: column;
    }

    .left-section[b-cpbrskgff5] {
        width: 100%;
    }

    .right-section[b-cpbrskgff5] {
        /*        flex: 1 1 auto;*/
        width: 100%;
        /*order: 0;*/
    }
}




.homepage-card[b-cpbrskgff5] {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    transition: box-shadow 0.2s ease;
    cursor: pointer;
}

    .homepage-card:hover[b-cpbrskgff5] {
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }

.homepage-card-header[b-cpbrskgff5] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    color: #555;
    font-weight: bold;
    font-size: 15px;
}


.header-mark[b-cpbrskgff5] {
    color: #0077cc;
}

.homepage-card-content[b-cpbrskgff5] {
    font-size: 15px;
    color: #444;
    word-break: break-word;
}

.header-right[b-cpbrskgff5] {
    font-size: 14px;
}
/* /Pages/Pages_Home/HomePageCard/HomePageArticleCard.razor.rz.scp.css */
.article-card[b-ofpie7i8pd] {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    transition: box-shadow 0.2s ease;
    cursor: pointer;
}

    .article-card:hover[b-ofpie7i8pd] {
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }

.article-card-info[b-ofpie7i8pd] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    color: #555;
    font-weight: bold;
    font-size: 15px;
}

.article-classname[b-ofpie7i8pd] {
    color: #0077cc;
}

.article-card-content[b-ofpie7i8pd] {
    font-size: 15px;
    color: #444;
    word-break: break-word;
}
/* /Pages/Pages_Home/HomePageCard/HomePageBookCard.razor.rz.scp.css */
body[b-i1b349zu71] {
}
/* /Pages/Pages_Home/HomePageCard/HomePageLMCard.razor.rz.scp.css */
/* ===== 請假（緊湊） ===== */
.leave-section[b-fqdx25ldl3] {
    margin-bottom: 10px;
    background: #fff;
    border-radius: 8px;
    padding: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.leave-list[b-fqdx25ldl3] {
    display: grid;
    gap: 4px; /* 清單間距更小 */
}

.leave-item[b-fqdx25ldl3] {
    display: flex;
    gap: 8px;
    padding: 4px 6px; /* 內距縮小 */
    align-items: center;
    border: 1px solid #eee; /* 細框 */
    border-radius: 6px;
    background: #fff;
}

.leave-class[b-fqdx25ldl3],
.leave-student[b-fqdx25ldl3] {
    font-size: 14px;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.leave-type[b-fqdx25ldl3] {
    justify-self: start;
    font-size: 12px;
    line-height: 18px;
    padding: 0 6px; /* 小膠囊 */
    border-radius: 999px;
    background: #eef2ff;
    border: 1px solid #e0e7ff;
    color: #334155;
    white-space: nowrap;
}

.leave-time[b-fqdx25ldl3] {
    font-size: 12px;
    color: #555;
    font-variant-numeric: tabular-nums;
    justify-self: end;
    white-space: nowrap;
}

/* ===== 托藥（緊湊） ===== */
.medicine-section[b-fqdx25ldl3] {
    margin-bottom: 10px;
    background: #fff;
    border-radius: 8px;
    padding: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.medicine-list[b-fqdx25ldl3] {
    display: grid;
    gap: 4px;
}

.med-group-title[b-fqdx25ldl3] {
    margin: 6px 0 2px;
    padding: 4px 6px;
    font-size: 13px;
    font-weight: 700;
    color: #222;
    background: #f7f7f9;
    border: 1px solid #eee;
    border-radius: 6px;
}

.med-item[b-fqdx25ldl3] {
    display: flex;
    gap: 8px;
    padding: 4px 6px;
    align-items: center;
    border: 1px solid #eee;
    border-radius: 6px;
    background: #fff;
}

.med-class[b-fqdx25ldl3],
.med-student[b-fqdx25ldl3] {
    font-size: 14px;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.med-status[b-fqdx25ldl3] {
    font-size: 12px;
    min-width: 48px;
    text-align: right;
    color: #0a7a0a; /* 預留：正常 */
    white-space: nowrap;
}

    .med-status.is-missing[b-fqdx25ldl3] {
        color: #b91c1c; /* 未餵：紅色加重 */
        font-weight: 700;
    }

/* ===== 小螢幕（≤720px）更緊湊佈局 ===== */
@media (max-width: 720px) {
    .leave-item[b-fqdx25ldl3] {
        grid-template-columns: 84px 1fr; /* 兩欄 */
        gap: 6px;
    }

    .leave-type[b-fqdx25ldl3] {
        justify-self: end;
    }

    .leave-time[b-fqdx25ldl3] {
        grid-column: 1 / 3; /* 另起一行靠右 */
        justify-self: end;
        margin-top: 2px;
    }

    .med-item[b-fqdx25ldl3] {
        grid-template-columns: 1fr 1fr; /* 兩欄 */
        gap: 6px;
    }

    .med-status[b-fqdx25ldl3] {
        grid-column: 2 / 3; /* 仍靠右 */
        justify-self: end;
    }
}
/* /Pages/Pages_Home/HomePageCard/HomePageLostCard.razor.rz.scp.css */
/* 區塊標題 */
.lost-title[b-5q6uh2qc2y] {
    margin: 8px 0 12px;
    font-size: 18px;
    font-weight: 700;
    color: #111;
}

/* 清單容器 */
.lost-list[b-5q6uh2qc2y] {
    display: grid;
    gap: 12px;
}

/* 失物卡片：內距與區段 */
.lost-card[b-5q6uh2qc2y] {
    padding: 8px 12px;
}

.lost-header[b-5q6uh2qc2y] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0 8px;
    border-bottom: 1px solid #f0f0f0;
}

/* 日期圓角標籤 */
.lost-date[b-5q6uh2qc2y] {
    display: inline-flex;
    min-width: 56px;
    justify-content: center;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    background: #f3f4f6; /* 淺灰底 */
    color: #111;
}

/* 物品名稱 */
.lost-name[b-5q6uh2qc2y] {
    font-weight: 600;
    color: #222;
    flex: 1;
}

/* 單行省略 */
.one-line[b-5q6uh2qc2y] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 明細行（認領 / 歸還 / 待認領） */
.lost-row[b-5q6uh2qc2y] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-top: 1px dashed #f2f2f2;
}

.lost-desc[b-5q6uh2qc2y] {
    color: #333;
    line-height: 1.5;
}

/* 狀態標籤 */
.badge[b-5q6uh2qc2y] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
}

/* 狀態色系 */
.badge-claimed[b-5q6uh2qc2y] {
    background: #dcfce7;
    color: #166534;
}
/* 綠：已認領 */
.badge-returned[b-5q6uh2qc2y] {
    background: #dbeafe;
    color: #1d4ed8;
}
/* 藍：已歸還 */
.badge-pending[b-5q6uh2qc2y] {
    background: #fee2e2;
    color: #991b1b;
}
/* 紅：待認領 */

/* 小螢幕微調 */
@media (max-width: 640px) {
    .lost-card[b-5q6uh2qc2y] {
        padding: 8px 10px;
    }

    .lost-date[b-5q6uh2qc2y] {
        min-width: 52px;
    }
}
/* /Pages/Pages_Home/HomePageCard/HomePageMenuCard.razor.rz.scp.css */
/* 區塊標題 */
.menu-title[b-ux01us6r07] {
    margin: 8px 0 12px;
    font-size: 18px;
    font-weight: 700;
    color: #111;
}

/* 容器（可選） */
.menu-list[b-ux01us6r07] {
    display: grid;
    gap: 12px;
}

/* 卡片 */
.homepage-card[b-ux01us6r07] {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
    overflow: hidden;
}

/* 卡片標頭 */
.homepage-card-header[b-ux01us6r07] {
    padding: 10px 12px;
    border-bottom: 1px solid #f0f0f0;
}

.header-mark[b-ux01us6r07] {
    font-weight: 600;
    color: #222;
    letter-spacing: .2px;
}

/* 卡片內容行 */
.homepage-card-content[b-ux01us6r07] {
    padding: 8px 12px;
    border-top: 1px dashed #f2f2f2; /* 各道菜之間細分隔線 */
    line-height: 1.5;
    color: #333;
}

/* 單行省略 */
.one-line[b-ux01us6r07] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 小螢幕調整 */
@media (max-width: 640px) {
    .menu-list[b-ux01us6r07] {
        gap: 10px;
    }

    .homepage-card-header[b-ux01us6r07] {
        padding: 8px 10px;
    }

    .homepage-card-content[b-ux01us6r07] {
        padding: 8px 10px;
    }
}
/* /Pages/Pages_Home/HomePageCard/HomePageMessageCard.razor.rz.scp.css */
.message-header[b-8rvghm7jyv] {
    display: flex;
    justify-content: space-between;
    margin-bottom: .5em;
}

/* 卡片 */
.hp-card[b-8rvghm7jyv] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
    transition: box-shadow .2s ease, transform .12s ease, background .2s ease, border-color .2s ease;
    cursor: pointer;
    outline: none;
    color: #111827;
    margin-bottom: 8px;
}

    .hp-card:hover[b-8rvghm7jyv] {
        background: #f9fafb;
        box-shadow: 0 4px 10px rgba(0,0,0,.08);
        transform: translateY(-1px);
        border-color: #d1d5db;
    }

    .hp-card:active[b-8rvghm7jyv] {
        transform: translateY(0);
    }

    .hp-card:focus-visible[b-8rvghm7jyv] {
        box-shadow: 0 0 0 3px rgba(37,99,235,.35), 0 4px 10px rgba(0,0,0,.08);
        border-color: #2563eb;
    }

/* 頭部：左右對齊 */
.hp-card__header[b-8rvghm7jyv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* 左側：班級 + 姓名 */
.hp-card__header-left[b-8rvghm7jyv] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

/* 標記（班級） */
.hp-card__mark[b-8rvghm7jyv] {
    font-size: 12px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 6px;
    background: #eef2ff;
    color: #4338ca;
    white-space: nowrap;
}

/* 姓名 */
.hp-card__stuname[b-8rvghm7jyv] {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 右側：時間 */
.hp-card__header-right[b-8rvghm7jyv] {
    margin-left: auto;
    font-size: 12px;
    color: #6b7280;
    white-space: nowrap;
}

/* 內容 */
.hp-card__content[b-8rvghm7jyv] {
    font-size: 14px;
    line-height: 1.5;
    color: #111827;
    min-height: 1.5em;
}

/* 單行省略 */
.hp-one-line[b-8rvghm7jyv] {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* 多行省略 */
.hp-two-lines[b-8rvghm7jyv] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* RWD：手機縮小字與間距 */
@media (max-width: 480px) {
    .hp-card[b-8rvghm7jyv] {
        padding: 10px 12px;
        border-radius: 10px;
    }

    .hp-card__header[b-8rvghm7jyv] {
        gap: 8px;
    }

    .hp-card__mark[b-8rvghm7jyv] {
        font-size: 11px;
    }

    .hp-card__stuname[b-8rvghm7jyv] {
        font-size: 14px;
    }

    .hp-card__header-right[b-8rvghm7jyv] {
        font-size: 11px;
    }

    .hp-card__content[b-8rvghm7jyv] {
        font-size: 13px;
    }
}

/* 卡片列表：網格排列 */
.hp-card-list[b-8rvghm7jyv] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}
/* /Pages/Pages_Home/HomePageCard/HomePageNoticeCard.razor.rz.scp.css */
.article-card[b-12hcp2lcsp] {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    transition: box-shadow 0.2s ease;
    cursor: pointer;
}

    .article-card:hover[b-12hcp2lcsp] {
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }

.article-card-info[b-12hcp2lcsp] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    color: #555;
    font-weight: bold;
    font-size: 15px;
}

.article-classname[b-12hcp2lcsp] {
    color: #0077cc;
}

.article-card-content[b-12hcp2lcsp] {
    font-size: 15px;
    color: #444;
    word-break: break-word;
}
/* /Pages/Pages_Home/HomePageCard/HomePageScheduleCard.razor.rz.scp.css */
/* 區塊標題 */
.calendar-title[b-i7tjf7wdze] {
    margin: 8px 0 12px;
    font-size: 18px;
    font-weight: 700;
    color: #111;
}

/* 清單容器 */
.calendar-list[b-i7tjf7wdze] {
    display: grid;
    gap: 12px;
}

/* 卡片 */
.homepage-card[b-i7tjf7wdze] {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
    overflow: hidden;
}

/* 卡片標頭 */
.homepage-card-header[b-i7tjf7wdze] {
    padding: 10px 12px;
    border-bottom: 1px solid #f0f0f0;
}

.header-mark[b-i7tjf7wdze] {
    font-weight: 600;
    color: #222;
    letter-spacing: .2px;
    white-space: nowrap;
}

/* 卡片內容（單行省略） */
.homepage-card-content[b-i7tjf7wdze] {
    padding: 8px 12px;
    line-height: 1.5;
    color: #333;
}

.one-line[b-i7tjf7wdze] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 小螢幕微調 */
@media (max-width: 640px) {
    .calendar-list[b-i7tjf7wdze] { gap: 10px; }
    .homepage-card-header[b-i7tjf7wdze] { padding: 8px 10px; }
    .homepage-card-content[b-i7tjf7wdze] { padding: 8px 10px; }
}
/* /Pages/Pages_Home/IndexPage.razor.rz.scp.css */


/* ===== 版面骨架（維持原本高度與欄位） ===== */
.page-container[b-ag40sor4e6] {
    height: 100vh; /* 以整個視窗高度排版 */
    padding: 8px;
    display: grid;
    grid-template-rows: 90px 1fr; /* Top = 90px、下方填滿 */
    gap: 8px;
    background: #f5f7fb;
}

.top-section[b-ag40sor4e6] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

    .top-section .left-section[b-ag40sor4e6],
    .top-section .right-section[b-ag40sor4e6] {
        background: #ffffff;
        padding: 8px 12px;
        height: 90px; /* 依原始設定 */
        border-radius: 12px;
        box-shadow: 0 6px 24px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.05);
        overflow: auto; /* 只在小區塊內部捲動 */
    }

/* 下方三欄：維持你原本的比例 2fr / 2fr / 1fr */
.down-section[b-ag40sor4e6] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    /* 不設高度，交給子欄位的高度控制，避免整塊再產生滾動條 */
}

    .down-section .left-section[b-ag40sor4e6],
    .down-section .med-section[b-ag40sor4e6],
    .down-section .right-section[b-ag40sor4e6] {
        background: #ffffff;
        border-radius: 12px;
        box-shadow: 0 6px 24px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.05);
        height: calc(100vh - 114px); /* ＝ 100vh - (Top90 + gap10) ：跟你原本一樣 */
        overflow: auto; /* 內容多只在各欄位內滾動 */
    }

.down-section-content[b-ag40sor4e6] {
    padding: 0 8px;
}

/* ===== 常用樣式 ===== */
.title[b-ag40sor4e6] {
    font-weight: 700;
    margin-right: 6px;
    color: #1f2430;
}

.text-na[b-ag40sor4e6] {
    color: #c8cdd8;
    font-style: italic;
}

.text-danger[b-ag40sor4e6] {
    color: #dc2626 !important;
}

h5.d-flex[b-ag40sor4e6] {
    font-size: 1rem;
    font-weight: 700;
    margin: 2px 0 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e8ebf3;
    position: sticky;
    top: -2px; /* 讓標題列吸頂且不吃到邊框 */
    background: #ffffff;
    z-index: 2;
}

/* 下拉選單優化（保留 Bootstrap class） */
.form-select[b-ag40sor4e6] {
    padding: 6px 30px 6px 10px;
    border-radius: 10px;
    border: 1px solid #dbe2ef;
    background-color: #fff;
    transition: box-shadow .2s ease, border-color .2s ease;
}

    .form-select:focus[b-ag40sor4e6] {
        outline: none;
        border-color: #2563eb;
        box-shadow: 0 0 0 4px rgba(37, 99, 235, .15);
    }

/* 卡片 hover（你的卡片根元素如 .article-card/.student-message-row-card） */
.article-card[b-ag40sor4e6], .student-message-row-card[b-ag40sor4e6], .notice-card[b-ag40sor4e6] {
    border-radius: 12px;
    transition: transform .12s ease, box-shadow .12s ease, background-color .2s ease;
}

    .article-card:hover[b-ag40sor4e6],
    .student-message-row-card:hover[b-ag40sor4e6],
    .notice-card:hover[b-ag40sor4e6] {
        transform: translateY(-1px);
        background-color: #fafbff;
        box-shadow: 0 8px 28px rgba(0,0,0,.06);
    }

/* 捲軸樣式：只美化「局部欄位」的滾動條 */
.down-section .left-section[b-ag40sor4e6]::-webkit-scrollbar,
.down-section .med-section[b-ag40sor4e6]::-webkit-scrollbar,
.down-section .right-section[b-ag40sor4e6]::-webkit-scrollbar,
.top-section .left-section[b-ag40sor4e6]::-webkit-scrollbar,
.top-section .right-section[b-ag40sor4e6]::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.down-section .left-section[b-ag40sor4e6]::-webkit-scrollbar-thumb,
.down-section .med-section[b-ag40sor4e6]::-webkit-scrollbar-thumb,
.down-section .right-section[b-ag40sor4e6]::-webkit-scrollbar-thumb,
.top-section .left-section[b-ag40sor4e6]::-webkit-scrollbar-thumb,
.top-section .right-section[b-ag40sor4e6]::-webkit-scrollbar-thumb {
    background: #d7dbea;
    border-radius: 8px;
}

    .down-section .left-section[b-ag40sor4e6]::-webkit-scrollbar-thumb:hover,
    .down-section .med-section[b-ag40sor4e6]::-webkit-scrollbar-thumb:hover,
    .down-section .right-section[b-ag40sor4e6]::-webkit-scrollbar-thumb:hover,
    .top-section .left-section[b-ag40sor4e6]::-webkit-scrollbar-thumb:hover,
    .top-section .right-section[b-ag40sor4e6]::-webkit-scrollbar-thumb:hover {
        background: #c9cfe4;
    }

/* ===== RWD：維持原高度邏輯，同時避免手機 100vh 陷阱 ===== */

/* <= 1280：微調頂部高度與間距 */
@media (max-width: 1280px) {
    .top-section .left-section[b-ag40sor4e6],
    .top-section .right-section[b-ag40sor4e6] {
        height: 96px;
    }

    .down-section .left-section[b-ag40sor4e6],
    .down-section .med-section[b-ag40sor4e6],
    .down-section .right-section[b-ag40sor4e6] {
        height: calc(100vh - 106px); /* 96 + gap10 */
    }
}

/* <= 1024：切為兩欄；右欄落到下一列。行動裝置允許整頁滾動 */
@media (max-width: 1024px) {
    html[b-ag40sor4e6], body[b-ag40sor4e6] {
        overflow: auto;
    }
    /* 小螢幕回歸正常頁面滾動 */
    .page-container[b-ag40sor4e6] {
        height: auto;
        min-height: 100vh;
        grid-template-rows: auto 1fr;
    }

    .top-section[b-ag40sor4e6] {
        grid-template-columns: 1fr;
    }

        .top-section .left-section[b-ag40sor4e6],
        .top-section .right-section[b-ag40sor4e6] {
            height: auto;
            min-height: 90px;
        }

    .down-section[b-ag40sor4e6] {
        grid-template-columns: 1fr 1fr;
    }

        .down-section .right-section[b-ag40sor4e6] {
            grid-column: 1 / -1;
        }

        .down-section .left-section[b-ag40sor4e6],
        .down-section .med-section[b-ag40sor4e6],
        .down-section .right-section[b-ag40sor4e6] {
            height: auto; /* 小螢幕由內容撐高，避免 100vh 問題 */
            min-height: 360px;
            overflow: auto;
        }
}

/* <= 768：單欄直排，依序：文章 → 通知 → 學生訊息 */
@media (max-width: 768px) {
    .down-section[b-ag40sor4e6] {
        grid-template-columns: 1fr;
    }

    .form-select[b-ag40sor4e6] {
        min-width: 180px;
    }
}

/* <= 480：縮排與字級 */
@media (max-width: 480px) {
    .page-container[b-ag40sor4e6] {
        padding: 6px;
    }

    .title[b-ag40sor4e6] {
        font-size: .98rem;
    }

    .form-select[b-ag40sor4e6] {
        width: 100%;
        min-width: 0;
    }

    h5.d-flex[b-ag40sor4e6] {
        font-size: .95rem;
    }
}

/* 無動畫偏好 */
@media (prefers-reduced-motion: reduce) {
    *[b-ag40sor4e6] {
        transition: none !important;
        animation: none !important;
    }
}


/* /Pages/Pages_Home/IndexPageMessageContent.razor.rz.scp.css */
body[b-40pi3d5kzu] {
}
/* /Pages/Pages_Home/StudentMessageModal.razor.rz.scp.css */
.thread-modal[b-f1hcg517j7] {
    width: 1000px;
}

.thread-modal .thread[b-f1hcg517j7] {
    background: #fff;
    border: 1px solid #e9e9e9;
    border-radius: 16px;
    padding: 12px 14px;
    box-shadow: 0 1px 2px rgba(0,0,0,.02);
    margin: 1em;
    margin-top: 1em;
}

.thread-modal .post-header[b-f1hcg517j7],
.thread-modal .reply-header[b-f1hcg517j7] {
    display: flex;
    gap: 10px;
    align-items: center;
}

.thread-modal .avatar[b-f1hcg517j7] {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid #dfe6ff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

    .thread-modal .avatar.sm[b-f1hcg517j7] {
        width: 32px;
        height: 32px;
        font-size: 13px;
    }

.thread-modal .head-main[b-f1hcg517j7] {
    flex: 1;
    min-width: 0;
}

.thread-modal .row1[b-f1hcg517j7] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}

.thread-modal .row2[b-f1hcg517j7] {
    color: #888;
    font-size: 12px;
}

.thread-modal .name[b-f1hcg517j7] {
    font-weight: 700;
    font-size: 14px;
}

.thread-modal .type-chip[b-f1hcg517j7] {
    font-size: 12px;
    padding: 2px 8px;
    border: 1px solid #eee;
    border-radius: 999px;
    background: #fafafa;
}

.thread-modal .badge[b-f1hcg517j7] {
    padding: 2px 8px;
    font-size: 12px;
    border-radius: 999px;
    border: 1px solid #e0e0e0;
    background: #FFE4E6;
    color: #333;
}

.thread-modal .post-body[b-f1hcg517j7], .thread-modal .reply-body[b-f1hcg517j7] {
    margin-top: 10px;
}

.thread-modal .post-text[b-f1hcg517j7] {
    font-size: 14px;
    line-height: 1.7;
    color: #222;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

    .thread-modal .post-text a[b-f1hcg517j7] {
        color: #0b57d0;
        text-decoration: none;
        border-bottom: 1px dashed #9ab7f3;
    }

        .thread-modal .post-text a:hover[b-f1hcg517j7] {
            border-bottom-color: #0b57d0;
        }

.thread-modal .replies[b-f1hcg517j7] {
    margin-top: 10px;
    padding-left: 16px;
    border-left: 2px solid #f0f0f0;
}

.thread-modal .reply[b-f1hcg517j7] {
    padding: 10px 0 6px;
    border-bottom: 1px dashed #efefef;
}

    .thread-modal .reply:last-child[b-f1hcg517j7] {
        border-bottom: none;
    }

.thread-modal .photo[b-f1hcg517j7] {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
    border: 1px solid #f0f0f0;
    background: #fafafa;
}

    .thread-modal .photo.sm[b-f1hcg517j7] {
        max-height: 360px;
        object-fit: contain;
    }

.avatar[b-f1hcg517j7] {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid #dfe6ff;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .avatar.sm[b-f1hcg517j7] {
        width: 32px;
        height: 32px;
    }

/* 圖像填充容器，保留邊距更好看；若想滿版可改成 100% */
.avatar-img[b-f1hcg517j7] {
    width: 70%;
    height: 70%;
    object-fit: contain; /* 不裁切，完整顯示 icon */
    display: block;
    opacity: .7;
}

/* 大螢幕可微放大（可選） */
@media (min-width: 1280px) {
    .avatar[b-f1hcg517j7] {
        width: 44px;
        height: 44px;
    }

        .avatar.sm[b-f1hcg517j7] {
            width: 36px;
            height: 36px;
        }
}


@media (max-width: 1280px) {
    .thread-modal[b-f1hcg517j7] {
        width: 100%;
    }
}


/* 顏色變體 */
.avatar-teacher[b-f1hcg517j7] {
    background: #F0F7FF;
    border-color: #D6E6FF;
}
/* 淺藍 */
.avatar-family[b-f1hcg517j7] {
    background: #FFF0F3;
    border-color: #FFD6E0;
}
/* 淺紅(粉) */
.avatar-notice[b-f1hcg517j7],
.avatar-record[b-f1hcg517j7] {
    background: #EDFFF3;
    border-color: #CCEBD7;
}
/* 淺綠 */


.thread-modal .thread-footer[b-f1hcg517j7] {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed #eee;
    display: flex;
    justify-content: end;
    gap: 8px;
}

.thread-modal .btn-link[b-f1hcg517j7] {
    background: transparent;
    border: none;
    padding: 4px 6px;
    color: #0b57d0;
    cursor: pointer;
    font-size: 13px;
    border-bottom: 1px dashed rgba(11,87,208,.35);
}

    .thread-modal .btn-link:hover[b-f1hcg517j7] {
        border-bottom-color: #0b57d0;
    }

.thread-modal .composer[b-f1hcg517j7] {
    margin-top: 8px;
}

.thread-modal .composer-text[b-f1hcg517j7] {
    width: 100%;
    box-sizing: border-box;
    min-height: 32px;
    resize: vertical;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 8px 10px;
    font-size: 14px;
    line-height: 1.5;
    background: #fff;
}

    .thread-modal .composer-text:focus[b-f1hcg517j7] {
        outline: none;
        border-color: #c7d7fe;
        box-shadow: 0 0 0 3px rgba(199,215,254,.35);
    }

.thread-modal .composer-actions[b-f1hcg517j7] {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    justify-content: end;
}

.thread-modal .btn[b-f1hcg517j7] {
    display: inline-block;
    padding: 7px 12px;
    border-radius: 10px;
    border: 1px solid #dcdcdc;
    background: #f9f9f9;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
}

    .thread-modal .btn:hover[b-f1hcg517j7] {
        background: #f1f1f1;
    }

    .thread-modal .btn.small[b-f1hcg517j7] {
        padding: 6px 10px;
        font-size: 12px;
    }

    .thread-modal .btn.ghost[b-f1hcg517j7] {
        background: transparent;
    }

/* 標記為我的任務/職務 */
.myjob-mark[b-f1hcg517j7] {
    border: 1px solid #ffb347 !important; /* 淡橘邊框 */
    background: linear-gradient(180deg, #fff7ec 0%, #ffffff 30%) !important;
}
/* /Pages/Pages_Home/StudentMessageRowCard.razor.rz.scp.css */
.message-header[b-9by092nxnq] {
    display: flex;
    justify-content: space-between;
    margin-bottom: .5em;
}

/* 卡片 */
.hp-card[b-9by092nxnq] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
    transition: box-shadow .2s ease, transform .12s ease, background .2s ease, border-color .2s ease;
    cursor: pointer;
    outline: none;
    color: #111827;
    margin-bottom: 8px;
}

    .hp-card:hover[b-9by092nxnq] {
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        transform: translateY(-1px);
    }

    .hp-card:active[b-9by092nxnq] {
        transform: translateY(0);
    }

    .hp-card:focus-visible[b-9by092nxnq] {
        box-shadow: 0 0 0 3px rgba(37,99,235,.35), 0 4px 10px rgba(0,0,0,.08);
        border-color: #2563eb;
    }

/* 頭部：左右對齊 */
.hp-card__header[b-9by092nxnq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* 左側：班級 + 姓名 */
.hp-card__header-left[b-9by092nxnq] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

/* 標記（班級） */
.hp-card__mark[b-9by092nxnq] {
    font-size: 12px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 6px;
    background: #eef2ff;
    color: #4338ca;
    white-space: nowrap;
}

/* 姓名 */
.hp-card__stuname[b-9by092nxnq] {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 右側：時間 */
.hp-card__header-right[b-9by092nxnq] {
    margin-left: auto;
    font-size: 12px;
    color: #6b7280;
    white-space: nowrap;
}

/* 內容 */
.hp-card__content[b-9by092nxnq] {
    font-size: 14px;
    line-height: 1.5;
    color: #111827;
    min-height: 1.5em;
}

/* 單行省略 */
.hp-one-line[b-9by092nxnq] {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* 多行省略 */
.hp-two-lines[b-9by092nxnq] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* RWD：手機縮小字與間距 */
@media (max-width: 480px) {
    .hp-card[b-9by092nxnq] {
        padding: 10px 12px;
        border-radius: 10px;
    }

    .hp-card__header[b-9by092nxnq] {
        gap: 8px;
    }

    .hp-card__mark[b-9by092nxnq] {
        font-size: 11px;
    }

    .hp-card__stuname[b-9by092nxnq] {
        font-size: 14px;
    }

    .hp-card__header-right[b-9by092nxnq] {
        font-size: 11px;
    }

    .hp-card__content[b-9by092nxnq] {
        font-size: 13px;
    }
}

/* 卡片列表：網格排列 */
.hp-card-list[b-9by092nxnq] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}
/* /Pages/Pages_Info/AddHtmlArticle.razor.rz.scp.css */
/* ArticleAdd.razor.css */

/* ===== Base ===== */
.aa-page[b-niu0m8w5e9], .aa-page *[b-niu0m8w5e9] {
    box-sizing: border-box;
}

.aa-page[b-niu0m8w5e9] {
    height: 100vh;
    display: grid;
    grid-template-columns: 520px 1fr;
    gap: 16px;
    padding: 16px;
    background: #f6f7fb;
    /* 字體基準：全部 >= 14px */
    font-size: 15px;
    line-height: 1.55;
    color: #0f172a;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.aa-left[b-niu0m8w5e9], .aa-right[b-niu0m8w5e9] {
    height: calc(100vh - 32px);
    overflow: auto;
    padding-right: 6px;
}

/* ===== Card ===== */
.aa-card[b-niu0m8w5e9] {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
    overflow: hidden;
    margin-bottom: 14px;
}

.aa-card__head[b-niu0m8w5e9] {
    padding: 14px 16px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.aa-card__title[b-niu0m8w5e9] {
    font-size: 16px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: 0.2px;
}

.aa-card__sub[b-niu0m8w5e9] {
    margin-top: 4px;
    font-size: 14px;
    font-weight: 650;
    color: rgba(15, 23, 42, 0.62);
    line-height: 1.45;
}

/* ===== Left Meta ===== */
.aa-meta[b-niu0m8w5e9] {
    padding: 14px 16px 16px 16px;
}

.aa-toolbar[b-niu0m8w5e9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.aa-block[b-niu0m8w5e9] {
    margin: 10px 0 14px 0;
}

.aa-block__title[b-niu0m8w5e9] {
    font-size: 15px;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.12);
    text-align: start;
}

/* ===== Fields ===== */
.aa-field[b-niu0m8w5e9] {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

.aa-label[b-niu0m8w5e9] {
    font-size: 14px;
    color: rgba(15, 23, 42, 0.72);
    font-weight: 700;
}

.aa-input[b-niu0m8w5e9] {
    width: 100%;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 15px;
    color: #0f172a;
    background: rgba(255, 255, 255, 0.9);
    outline: none;
    transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}

    .aa-input:focus[b-niu0m8w5e9] {
        border-color: rgba(59, 130, 246, 0.55);
        box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.14);
    }

.aa-grid2[b-niu0m8w5e9] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 10px;
}

/* ===== Buttons ===== */
.aa-btn[b-niu0m8w5e9] {
    border: 1px solid transparent;
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease, background .12s ease;
    user-select: none;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
}

    .aa-btn:active[b-niu0m8w5e9] {
        transform: translateY(1px);
    }

    .aa-btn[disabled][b-niu0m8w5e9] {
        opacity: .55;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

.aa-btn--primary[b-niu0m8w5e9] {
    background: #2563eb;
    color: #fff;
    box-shadow: 0 10px 20px rgba(37, 99, 235, 0.22);
}

    .aa-btn--primary:hover[b-niu0m8w5e9] {
        box-shadow: 0 14px 26px rgba(37, 99, 235, 0.26);
    }

.aa-btn--soft[b-niu0m8w5e9] {
    background: rgba(15, 23, 42, 0.04);
    border-color: rgba(15, 23, 42, 0.10);
    color: #0f172a;
}

.aa-btn--ghost[b-niu0m8w5e9] {
    background: #fff;
    border-color: rgba(15, 23, 42, 0.12);
    color: #0f172a;
}

.aa-btn--dangerMini[b-niu0m8w5e9] {
    padding: 8px 10px;
    border-radius: 12px;
    background: rgba(239, 68, 68, 0.10);
    border-color: rgba(239, 68, 68, 0.20);
    color: #b91c1c;
    font-size: 14px;
    font-weight: 850;
}

.aa-btn--dangerWide[b-niu0m8w5e9] {
    width: 100%;
    background: rgba(239, 68, 68, 0.10);
    border: 1px solid rgba(239, 68, 68, 0.22);
    color: #b91c1c;
}

.aa-btn--successWide[b-niu0m8w5e9] {
    width: 100%;
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.22);
    color: #166534;
}

/* ===== Toggle (置頂) ===== */
.aa-toggle[b-niu0m8w5e9] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}

.aa-toggle__input[b-niu0m8w5e9] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.aa-toggle__ui[b-niu0m8w5e9] {
    width: 44px;
    height: 26px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.14);
    position: relative;
    transition: background .15s ease;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.10);
}

    .aa-toggle__ui[b-niu0m8w5e9]::after {
        content: "";
        position: absolute;
        top: 3px;
        left: 3px;
        width: 20px;
        height: 20px;
        border-radius: 999px;
        background: #fff;
        box-shadow: 0 6px 16px rgba(15, 23, 42, 0.18);
        transition: transform .15s ease;
    }

.aa-toggle__input:checked + .aa-toggle__ui[b-niu0m8w5e9] {
    background: rgba(37, 99, 235, 0.85);
}

    .aa-toggle__input:checked + .aa-toggle__ui[b-niu0m8w5e9]::after {
        transform: translateX(18px);
    }

.aa-toggle__text[b-niu0m8w5e9] {
    font-size: 14px;
    font-weight: 800;
    color: rgba(15, 23, 42, 0.80);
}

/* ===== Students Container ===== */
.aa-students[b-niu0m8w5e9] {
    padding: 1em;
}

/* ===== (Legacy) type radio - 若你已改成 switch 仍可留著不影響 ===== */
.aa-type[b-niu0m8w5e9] {
    display: grid;
    gap: 10px;
}

.aa-type__item[b-niu0m8w5e9] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.aa-radio[b-niu0m8w5e9] {
    margin-top: 3px;
    width: 16px;
    height: 16px;
}

.aa-type__label[b-niu0m8w5e9] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.02);
    width: 100%;
    cursor: pointer;
}

.aa-type__name[b-niu0m8w5e9] {
    font-size: 15px;
    color: #0f172a;
}

/* ===== Badges / Chips ===== */
.aa-badge[b-niu0m8w5e9] {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 900;
    border: 1px solid rgba(15, 23, 42, 0.10);
    line-height: 1.1;
}

.aa-badge--danger[b-niu0m8w5e9] {
    background: rgba(239, 68, 68, 0.10);
    border-color: rgba(239, 68, 68, 0.22);
    color: #b91c1c;
}

.aa-badge--info[b-niu0m8w5e9] {
    background: rgba(37, 99, 235, 0.10);
    border-color: rgba(37, 99, 235, 0.20);
    color: #1d4ed8;
}

.aa-chip[b-niu0m8w5e9] {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 900;
    background: rgba(15, 23, 42, 0.04);
    border: 1px solid rgba(15, 23, 42, 0.10);
    color: rgba(15, 23, 42, 0.78);
}

.chip-danger[b-niu0m8w5e9] {
    background: rgba(239, 68, 68, 0.10);
    border-color: rgba(239, 68, 68, 0.22);
    color: #b91c1c;
}

/* ===== Editor ===== */
.aa-editor__body[b-niu0m8w5e9] {
    padding: 12px 14px 14px 14px;
}

.aa-attachSummary[b-niu0m8w5e9] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.aa-attachBar[b-niu0m8w5e9] {
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.aa-attachBar__title[b-niu0m8w5e9] {
    font-size: 15px;
    font-weight: 900;
    color: #0f172a;
}

.aa-attachBar__hint[b-niu0m8w5e9] {
    font-size: 14px;
    font-weight: 650;
    color: rgba(15, 23, 42, 0.58);
    margin-top: 3px;
}

.aa-iconBtn[b-niu0m8w5e9] {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    border: 1px solid rgba(15, 23, 42, 0.10);
    background: rgba(255, 255, 255, 0.9);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease;
}

    .aa-iconBtn:hover[b-niu0m8w5e9] {
        box-shadow: 0 12px 24px rgba(15, 23, 42, 0.10);
        transform: translateY(-1px);
    }

.aa-iconBtn__icon[b-niu0m8w5e9] {
    width: 26px;
    height: 26px;
    opacity: .92;
}

/* ===== Survey ===== */
.aa-actionsRow[b-niu0m8w5e9] {
    padding: 12px 14px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.aa-divider[b-niu0m8w5e9] {
    height: 1px;
    background: rgba(15, 23, 42, 0.08);
    margin: 4px 0 10px 0;
}

.aa-samples[b-niu0m8w5e9] {
    padding: 12px 14px 16px 14px;
}

.aa-samples__title[b-niu0m8w5e9] {
    font-size: 15px;
    font-weight: 900;
    color: #0f172a;
    margin-bottom: 10px;
}

.aa-samples__grid[b-niu0m8w5e9] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.aa-qList[b-niu0m8w5e9] {
    padding: 12px 14px 0 14px;
    display: grid;
    gap: 10px;
}

.aa-qItem[b-niu0m8w5e9] {
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.02);
    padding: 12px;
}

.aa-qTop[b-niu0m8w5e9] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    align-items: center;
}

.aa-qTitle[b-niu0m8w5e9] {
    font-size: 15px;
    font-weight: 900;
    color: #0f172a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.aa-alert[b-niu0m8w5e9] {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, 0.10);
    font-size: 14px;
    line-height: 1.5;
    font-weight: 800;
}

.aa-alert--danger[b-niu0m8w5e9] {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.22);
    color: #b91c1c;
}

.aa-alert--success[b-niu0m8w5e9] {
    background: rgba(34, 197, 94, 0.10);
    border-color: rgba(34, 197, 94, 0.22);
    color: #166534;
}

.aa-alert__pill[b-niu0m8w5e9] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.08);
    border: 1px solid rgba(15, 23, 42, 0.12);
    margin: 0 4px;
    color: rgba(15, 23, 42, 0.86);
    font-size: 14px;
    font-weight: 900;
}

.aa-qOptions[b-niu0m8w5e9] {
    margin-top: 10px;
    display: flex;
    gap: 8px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.aa-qOptions__label[b-niu0m8w5e9] {
    font-size: 14px;
    font-weight: 900;
    color: rgba(15, 23, 42, 0.70);
}

.aa-qOptions__items[b-niu0m8w5e9] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.aa-pill[b-niu0m8w5e9] {
    display: inline-flex;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.05);
    border: 1px solid rgba(15, 23, 42, 0.10);
    font-size: 14px;
    font-weight: 900;
    color: rgba(15, 23, 42, 0.82);
}

.aa-actionsCol[b-niu0m8w5e9] {
    padding: 12px 14px 16px 14px;
    display: grid;
    gap: 10px;
}

/* ===== URL Share ===== */
.aa-urlBar[b-niu0m8w5e9] {
    padding: 12px 14px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: center;
}

.aa-urlPreview[b-niu0m8w5e9] {
    padding: 0 14px 14px 14px;
}

.aa-urlPreview__frame[b-niu0m8w5e9] {
    width: 100%;
    height: 70vh;
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 14px;
    background: #fff;
}

.aa-empty[b-niu0m8w5e9] {
    width: 100%;
    height: 70vh;
    border: 1px dashed rgba(15, 23, 42, 0.22);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.75);
    display: grid;
    place-content: center;
    text-align: center;
    gap: 6px;
}

.aa-empty__title[b-niu0m8w5e9] {
    font-size: 16px;
    font-weight: 950;
    color: #0f172a;
}

.aa-empty__hint[b-niu0m8w5e9] {
    font-size: 14px;
    font-weight: 650;
    color: rgba(15, 23, 42, 0.65);
}

/* ===== Hidden file inputs ===== */
.aa-hiddenFile[b-niu0m8w5e9] {
    display: none;
}

/* ===== 左側：文章類型 Switch List ===== */
.aa-typeSwitch[b-niu0m8w5e9] {
    display: grid;
    gap: 10px;
}

.aa-srow[b-niu0m8w5e9] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 12px 12px;
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.02);
    cursor: pointer;
    user-select: none;
}

    .aa-srow:hover[b-niu0m8w5e9] {
        background: rgba(15, 23, 42, 0.03);
    }

.aa-srow__left[b-niu0m8w5e9] {
    display: grid;
    gap: 4px;
}

.aa-srow__title[b-niu0m8w5e9] {
    font-size: 15px;
    font-weight: 900;
    color: #0f172a;
}

.aa-srow__sub[b-niu0m8w5e9] {
    font-size: 14px;
    font-weight: 850;
    color: rgba(239, 68, 68, 0.90);
}

.aa-srow__input[b-niu0m8w5e9] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.aa-switch[b-niu0m8w5e9] {
    width: 46px;
    height: 28px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.14);
    position: relative;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.10);
    transition: background .15s ease;
}

    .aa-switch[b-niu0m8w5e9]::after {
        content: "";
        position: absolute;
        top: 3px;
        left: 3px;
        width: 22px;
        height: 22px;
        border-radius: 999px;
        background: #fff;
        box-shadow: 0 6px 16px rgba(15, 23, 42, 0.18);
        transition: transform .15s ease;
    }

.aa-srow__input:checked + .aa-switch[b-niu0m8w5e9] {
    background: rgba(37, 99, 235, 0.88);
}

    .aa-srow__input:checked + .aa-switch[b-niu0m8w5e9]::after {
        transform: translateX(18px);
    }

/* ===== 右側（調查）：內容/題目 Segmented Switch ===== */
.aa-modebar[b-niu0m8w5e9] {
    margin: 10px 14px 0 14px;
    padding: 6px;
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.03);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.aa-seg[b-niu0m8w5e9] {
    border: 1px solid transparent;
    border-radius: 12px;
    padding: 10px 10px;
    background: transparent;
    cursor: pointer;
    font-size: 14px;
    font-weight: 950;
    color: rgba(15, 23, 42, 0.70);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background .12s ease, box-shadow .12s ease, color .12s ease;
}

    .aa-seg.is-active[b-niu0m8w5e9] {
        background: #fff;
        color: #0f172a;
        box-shadow: 0 10px 22px rgba(15, 23, 42, 0.10);
        border-color: rgba(15, 23, 42, 0.08);
    }

.aa-seg__count[b-niu0m8w5e9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.10);
    border: 1px solid rgba(37, 99, 235, 0.18);
    color: #1d4ed8;
    font-size: 14px;
    font-weight: 950;
}

/* ===== Responsive: 小尺寸不固定高度，往下疊 ===== */
@media (max-width: 1100px) {
    .aa-page[b-niu0m8w5e9] {
        height: auto;
        min-height: 0;
        grid-template-columns: 1fr;
        padding: 12px;
        gap: 12px;
        width: 100%;
    }

    .aa-left[b-niu0m8w5e9], .aa-right[b-niu0m8w5e9] {
        height: auto;
        max-height: none;
        overflow: visible;
        padding-right: 0;
    }

    .aa-urlPreview__frame[b-niu0m8w5e9],
    .aa-empty[b-niu0m8w5e9] {
        height: 52vh;
    }

    .aa-samples__grid[b-niu0m8w5e9] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .aa-grid2[b-niu0m8w5e9] {
        grid-template-columns: 1fr;
    }

    .aa-toolbar[b-niu0m8w5e9] {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .aa-attachBar[b-niu0m8w5e9] {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .aa-attachBar__right[b-niu0m8w5e9] {
        display: flex;
        gap: 10px;
        justify-content: flex-end;
    }

    .aa-actionsRow[b-niu0m8w5e9] {
        flex-direction: column;
        align-items: stretch;
    }

    .aa-samples__grid[b-niu0m8w5e9] {
        grid-template-columns: 1fr;
    }

    .aa-qTop[b-niu0m8w5e9] {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "title btn"
            "badge btn";
        row-gap: 8px;
    }

        .aa-qTop .aa-badge[b-niu0m8w5e9] {
            grid-area: badge;
        }

        .aa-qTop .aa-qTitle[b-niu0m8w5e9] {
            grid-area: title;
            white-space: normal;
        }

        .aa-qTop .aa-btn--dangerMini[b-niu0m8w5e9] {
            grid-area: btn;
            justify-self: end;
        }

    .aa-urlBar[b-niu0m8w5e9] {
        grid-template-columns: 1fr;
    }

    .aa-urlBar__go[b-niu0m8w5e9] {
        width: 100%;
    }
}


/* ====== Article Add: file preview (photos + pdfs) ====== */

.aa-file-preview[b-niu0m8w5e9] {
    padding: 12px 14px 14px 14px;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    display: grid;
    gap: 12px;
    display: flex;
    flex-wrap: wrap;
}

/* ---------- Photos ---------- */
.file-photo[b-niu0m8w5e9] {
    position: relative;
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 16px;
    overflow: hidden;
    background: rgba(15, 23, 42, 0.02);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
    aspect-ratio: 1 / 1;
    width: 200px;
}

    .file-photo img[b-niu0m8w5e9] {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        cursor: pointer;
        transition: transform .18s ease, filter .18s ease, opacity .18s ease;
    }

    .file-photo:hover img[b-niu0m8w5e9] {
        transform: scale(1.02);
        filter: saturate(1.03) contrast(1.03);
    }

    /* delete button (右上角 X) */
    .file-photo button[b-niu0m8w5e9] {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 40px;
        height: 40px;
        border-radius: 999px;
        border: 1px solid rgba(15, 23, 42, 0.10);
        background: rgba(255, 255, 255, 0.92);
        color: rgba(15, 23, 42, 0.80);
        font-size: 16px;
        font-weight: 900;
        line-height: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: 0 12px 26px rgba(15, 23, 42, 0.14);
        transition: transform .12s ease, box-shadow .12s ease, background .12s ease, opacity .12s ease;
    }

        .file-photo button:hover[b-niu0m8w5e9] {
            background: rgba(239, 68, 68, 0.10);
            border-color: rgba(239, 68, 68, 0.20);
            color: #b91c1c;
            box-shadow: 0 16px 32px rgba(15, 23, 42, 0.16);
        }

        .file-photo button:active[b-niu0m8w5e9] {
            transform: translateY(1px);
        }

/* ---------- PDFs ---------- */
/* 你的 markup 是 <div class="file-pdf" src="...">，我用 attr(src) 顯示檔名 */
.file-pdf[b-niu0m8w5e9] {
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 16px;
    padding: 12px 12px;
    background: rgba(255, 255, 255, 0.90);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
    cursor: pointer;
    display: grid;
    gap: 6px;
    transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}

    .file-pdf:hover[b-niu0m8w5e9] {
        transform: translateY(-1px);
        box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
        background: #fff;
    }

    /* icon + title */
    .file-pdf[b-niu0m8w5e9]::before {
        content: "PDF";
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 52px;
        height: 30px;
        border-radius: 999px;
        background: rgba(220, 38, 38, 0.10);
        border: 1px solid rgba(220, 38, 38, 0.18);
        color: #b91c1c;
        font-size: 14px;
        font-weight: 950;
        letter-spacing: 0.4px;
    }

    .file-pdf[b-niu0m8w5e9]::after {
        content: attr(src);
        display: block;
        font-size: 15px; /* >= 14 */
        font-weight: 850;
        color: #0f172a;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* (可選) 小字提示：點擊刪除 */
    .file-pdf .file-pdf__hint[b-niu0m8w5e9] {
        font-size: 14px;
        font-weight: 650;
        color: rgba(15, 23, 42, 0.62);
    }

/* ---------- Responsive ---------- */
@media (max-width: 560px) {
    .aa-file-preview[b-niu0m8w5e9] {
        padding: 12px;
        gap: 10px;
    }

    .file-photo img[b-niu0m8w5e9] {
        max-height: 260px;
    }

    .file-photo button[b-niu0m8w5e9] {
        width: 38px;
        height: 38px;
        top: 8px;
        right: 8px;
    }

    .file-pdf[b-niu0m8w5e9] {
        padding: 12px;
    }

        .file-pdf[b-niu0m8w5e9]::after {
            font-size: 14px;
        }
}

/* /Pages/Pages_Info/ArticleContentEditModal.razor.rz.scp.css */
/* ArticleContentEditModal.razor.css */
/* No bootstrap, no :root. Apple-like minimal. RWD 1200 / 800 / 100% */

.acm-root[b-rzc0xiasis], .acm-root *[b-rzc0xiasis] {
    box-sizing: border-box;
}

.acm-loading[b-rzc0xiasis] {
    padding: 18px;
}

.acm-shell[b-rzc0xiasis] {
    width: 1200px;
    margin: 0 auto;
}

.acm-header[b-rzc0xiasis] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 14px 10px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.acm-headerLeft[b-rzc0xiasis] {
    min-width: 0;
}

.acm-title[b-rzc0xiasis] {
    font-size: 18px;
    font-weight: 800;
    color: rgba(15, 23, 42, 0.92);
    letter-spacing: .2px;
}

.acm-subtitle[b-rzc0xiasis] {
    margin-top: 2px;
    font-size: 12px;
    font-weight: 700;
    color: rgba(15, 23, 42, 0.55);
}

.acm-closeBtn[b-rzc0xiasis] {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, 0.10);
    background: rgba(255, 255, 255, 0.92);
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, transform .05s ease;
}

    .acm-closeBtn:hover[b-rzc0xiasis] {
        background: rgba(248, 250, 252, 1);
        border-color: rgba(15, 23, 42, 0.14);
    }

    .acm-closeBtn:active[b-rzc0xiasis] {
        transform: translateY(1px);
    }

.acm-closeIcon[b-rzc0xiasis] {
    font-size: 22px;
    line-height: 1;
    color: rgba(15, 23, 42, 0.72);
}

/* ===== body layout ===== */
.acm-body[b-rzc0xiasis] {
    display: grid;
    grid-template-columns: 400px 1fr;
    gap: 14px;
    padding: 14px;
}

/* Left panel */
.acm-left[b-rzc0xiasis] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.acm-panel[b-rzc0xiasis] {
    border-radius: 16px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.05);
    overflow: clip;
}

.acm-panelHead[b-rzc0xiasis] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 12px 10px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.acm-panelTitle[b-rzc0xiasis] {
    font-size: 13px;
    font-weight: 900;
    color: rgba(15, 23, 42, 0.86);
    letter-spacing: .2px;
}

.acm-panelHint[b-rzc0xiasis] {
    font-size: 12px;
    font-weight: 800;
    color: rgba(15, 23, 42, 0.52);
}

.acm-list[b-rzc0xiasis] {
    padding: 10px 10px 6px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.acm-emptyNote[b-rzc0xiasis] {
    padding: 10px 12px;
    font-size: 12px;
    font-weight: 800;
    color: rgba(15, 23, 42, 0.55);
}

.acm-panelFoot[b-rzc0xiasis] {
    padding: 10px 12px 12px;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
}

.acm-ghostBtn[b-rzc0xiasis] {
    width: 100%;
    border-radius: 14px;
    padding: 10px 12px;
    border: 1px dashed rgba(15, 23, 42, 0.18);
    background: rgba(248, 250, 252, 0.8);
    cursor: pointer;
    font-size: 13px;
    font-weight: 900;
    color: rgba(15, 23, 42, 0.72);
    transition: background .15s ease, border-color .15s ease, transform .05s ease;
}

    .acm-ghostBtn:hover[b-rzc0xiasis] {
        background: rgba(248, 250, 252, 1);
        border-color: rgba(15, 23, 42, 0.26);
    }

    .acm-ghostBtn:active[b-rzc0xiasis] {
        transform: translateY(1px);
    }

/* selectable item */
.acm-item[b-rzc0xiasis] {
    width: 100%;
    text-align: left;
    border-radius: 14px;
    border: 1px solid rgba(15, 23, 42, 0.10);
    background: rgba(255, 255, 255, 0.94);
    padding: 10px 10px;
    cursor: pointer;
    transition: transform .05s ease, box-shadow .15s ease, border-color .15s ease;
}

    .acm-item:hover[b-rzc0xiasis] {
        border-color: rgba(15, 23, 42, 0.16);
        box-shadow: 0 10px 18px rgba(15, 23, 42, 0.06);
    }

    .acm-item:active[b-rzc0xiasis] {
        transform: translateY(1px);
    }

    .acm-item.is-active[b-rzc0xiasis] {
        border-color: rgba(14, 165, 233, 0.45);
        box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.14);
    }

.acm-itemTitle[b-rzc0xiasis] {
    font-size: 13px;
    font-weight: 900;
    color: rgba(15, 23, 42, 0.86);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.acm-itemMeta[b-rzc0xiasis] {
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 800;
    color: rgba(15, 23, 42, 0.55);
}

.acm-dot[b-rzc0xiasis] {
    opacity: .7;
}

.acm-itemRow[b-rzc0xiasis] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.acm-badge[b-rzc0xiasis] {
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    color: rgba(15, 23, 42, 0.78);
    border: 1px solid rgba(15, 23, 42, 0.10);
    background: rgba(248, 250, 252, 0.85);
}

.acm-sort[b-rzc0xiasis] {
    font-size: 12px;
    font-weight: 900;
    color: rgba(15, 23, 42, 0.45);
}

/* item preview limited height 200px */
.acm-previewBox[b-rzc0xiasis] {
    max-height: 200px;
    overflow: auto;
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, 0.06);
    background: rgba(248, 250, 252, 0.75);
    padding: 10px;
}

.acm-previewText[b-rzc0xiasis] {
    font-size: 12.5px;
    font-weight: 750;
    color: rgba(15, 23, 42, 0.78);
    line-height: 1.55;
}

.acm-thumb[b-rzc0xiasis] {
    display: block;
    width: 100%;
    max-height: 190px;
    object-fit: cover;
    border-radius: 10px;
}

/* Right */
.acm-right[b-rzc0xiasis] {
    min-width: 0;
}

.acm-rightCard[b-rzc0xiasis] {
    border-radius: 18px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 16px 30px rgba(15, 23, 42, 0.06);
    overflow: clip;
}

.acm-rightTop[b-rzc0xiasis] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.acm-rightTitle[b-rzc0xiasis] {
    font-size: 14px;
    font-weight: 950;
    color: rgba(15, 23, 42, 0.86);
    letter-spacing: .2px;
}

.acm-rightActions[b-rzc0xiasis] {
    display: flex;
    gap: 10px;
}

.acm-primaryBtn[b-rzc0xiasis] {
    border-radius: 12px;
    padding: 10px 12px;
    border: 1px solid rgba(14, 165, 233, 0.35);
    background: #0ea5e9;
    color: #fff;
    font-size: 13px;
    font-weight: 950;
    cursor: pointer;
    transition: transform .05s ease, background .15s ease, box-shadow .15s ease;
    box-shadow: 0 10px 16px rgba(14, 165, 233, 0.18);
}

    .acm-primaryBtn:hover:not(:disabled)[b-rzc0xiasis] {
        background: #0284c7;
    }

    .acm-primaryBtn:active[b-rzc0xiasis] {
        transform: translateY(1px);
    }

    .acm-primaryBtn:disabled[b-rzc0xiasis] {
        opacity: .55;
        cursor: not-allowed;
        box-shadow: none;
    }

/* Right body height limit: 1000 / 600 */
.acm-rightBody[b-rzc0xiasis] {
    padding: 14px;
}

.acm-rightEmpty[b-rzc0xiasis] {
    padding: 18px;
    border-radius: 16px;
    border: 1px dashed rgba(15, 23, 42, 0.18);
    background: rgba(248, 250, 252, 0.85);
    font-size: 13px;
    font-weight: 900;
    color: rgba(15, 23, 42, 0.62);
}

.acm-form[b-rzc0xiasis] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.acm-grid2[b-rzc0xiasis] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.acm-field[b-rzc0xiasis] {
    display: grid;
    gap: 8px;
}

.acm-label[b-rzc0xiasis] {
    font-size: 12px;
    font-weight: 900;
    color: rgba(15, 23, 42, 0.68);
}

.acm-input[b-rzc0xiasis] {
    width: 100%;
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: #fff;
    padding: 10px 12px;
    font-size: 14px;
    outline: none;
    transition: box-shadow .15s ease, border-color .15s ease;
}

    .acm-input:focus[b-rzc0xiasis] {
        border-color: rgba(59, 130, 246, 0.55);
        box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.16);
    }

.acm-changedHint[b-rzc0xiasis] {
    margin-top: 2px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(234, 179, 8, 0.28);
    background: rgba(234, 179, 8, 0.10);
    font-size: 12px;
    font-weight: 900;
    color: rgba(113, 63, 18, 0.92);
}

.acm-htmlEditor[b-rzc0xiasis] {
    border-radius: 16px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(248, 250, 252, 0.6);
    padding: 10px;
}

/* ===== RWD ===== */
@media (max-width: 980px) {
    .acm-shell[b-rzc0xiasis] {
        width: 800px;
    }

    .acm-body[b-rzc0xiasis] {
        grid-template-columns: 300px 1fr;
    }

    .acm-rightBody[b-rzc0xiasis] {
        max-height: 600px;
    }
}

@media (max-width: 720px) {
    .acm-shell[b-rzc0xiasis] {
        width: 100%;
    }

    .acm-body[b-rzc0xiasis] {
        grid-template-columns: 1fr;
    }

    .acm-rightBody[b-rzc0xiasis] {
        max-height: 600px;
    }

    .acm-grid2[b-rzc0xiasis] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Pages_Info/ArticleContentEditor.razor.rz.scp.css */
/* ArticleContentEditor.razor.css */
.ace-root[b-hrjo05jr0w], .ace-root *[b-hrjo05jr0w] {
    box-sizing: border-box;
}

.ace-root[b-hrjo05jr0w] {
    width: 100%;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    overflow: clip;
    box-shadow: 0 10px 30px rgba(17,24,39,.06);
}

/* toolbar */
.ace-toolbar[b-hrjo05jr0w] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 10px;
    border-bottom: 1px solid #eef2f7;
    background: linear-gradient(180deg,#ffffff,#fbfbfd);
}

.ace-group[b-hrjo05jr0w] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px;
    border: 1px solid #eef2f7;
    border-radius: 14px;
    background: #fff;
}

.ace-group--right[b-hrjo05jr0w] {
    margin-left: auto;
}

.ace-btn[b-hrjo05jr0w] {
    border: 0;
    background: #f3f4f6;
    color: #111827;
    padding: 8px 10px;
    border-radius: 12px;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    transition: transform .12s ease, background .12s ease, opacity .12s ease;
    user-select: none;
}

    .ace-btn:hover[b-hrjo05jr0w] {
        background: #e5e7eb;
        transform: translateY(-1px);
    }

    .ace-btn:active[b-hrjo05jr0w] {
        transform: translateY(0);
    }

    .ace-btn:disabled[b-hrjo05jr0w] {
        opacity: .55;
        cursor: not-allowed;
        transform: none;
    }

.ace-btn--ghost[b-hrjo05jr0w] {
    background: #fff;
    border: 1px solid #e5e7eb;
}

    .ace-btn--ghost:hover[b-hrjo05jr0w] {
        background: #f9fafb;
    }

.ace-sep[b-hrjo05jr0w] {
    width: 1px;
    height: 22px;
    background: #e5e7eb;
    margin: 0 2px;
}

.ace-select[b-hrjo05jr0w] {
    border: 1px solid #e5e7eb;
    background: #fff;
    padding: 7px 10px;
    border-radius: 12px;
    font-size: 13px;
    color: #111827;
    outline: none;
}

.ace-color[b-hrjo05jr0w] {
    width: 36px;
    height: 34px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 0;
    background: #fff;
    cursor: pointer;
}

/* body/editor */
.ace-body[b-hrjo05jr0w] {
    padding: 12px;
}

.ace-editor[b-hrjo05jr0w] {
    min-height: 320px;
    padding: 14px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    outline: none;
    background: #fff;
    line-height: 1.7;
    color: #111827;
    font-size: 16px;
    overflow: auto;
}

    .ace-editor:empty[b-hrjo05jr0w]:before {
        content: attr(data-placeholder);
        color: #9ca3af;
    }

.ace-footer[b-hrjo05jr0w] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 4px 4px;
}

.ace-tip[b-hrjo05jr0w], .ace-count[b-hrjo05jr0w] {
    font-size: 12px;
    color: #6b7280;
}

/* preview */
.ace-preview[b-hrjo05jr0w] {
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 14px;
    background: #fff;
}

.ace-preview__title[b-hrjo05jr0w] {
    font-weight: 800;
    color: #111827;
    margin-bottom: 10px;
    font-size: 14px;
}

.ace-preview__content[b-hrjo05jr0w] {
    line-height: 1.75;
    color: #111827;
    overflow: auto;
}

    /* common typography */
    .ace-editor p[b-hrjo05jr0w], .ace-preview__content p[b-hrjo05jr0w] {
        margin: 0 0 10px;
    }

    .ace-editor h3[b-hrjo05jr0w], .ace-preview__content h3[b-hrjo05jr0w] {
        margin: 12px 0 8px;
        font-size: 18px;
        font-weight: 800;
    }

    .ace-editor h4[b-hrjo05jr0w], .ace-preview__content h4[b-hrjo05jr0w] {
        margin: 12px 0 8px;
        font-size: 16px;
        font-weight: 800;
    }

    .ace-editor ul[b-hrjo05jr0w], .ace-preview__content ul[b-hrjo05jr0w],
    .ace-editor ol[b-hrjo05jr0w], .ace-preview__content ol[b-hrjo05jr0w] {
        margin: 0 0 10px 18px;
    }

    .ace-editor blockquote[b-hrjo05jr0w], .ace-preview__content blockquote[b-hrjo05jr0w] {
        margin: 10px 0;
        padding: 10px 12px;
        border-left: 4px solid #e5e7eb;
        background: #f9fafb;
        border-radius: 12px;
        color: #374151;
    }

.is-hidden[b-hrjo05jr0w] {
    display: none !important;
}

/* help */
.ace-help[b-hrjo05jr0w] {
    margin-top: 12px;
    padding: 14px;
    border-top: 1px solid #eef2f7;
    background: #fbfbfd;
    border-radius: 12px;
}

.ace-help__title[b-hrjo05jr0w] {
    font-weight: 900;
    color: #111827;
    margin-bottom: 10px;
    font-size: 14px;
}

.ace-help__section[b-hrjo05jr0w] {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #e5e7eb;
}

    .ace-help__section:first-of-type[b-hrjo05jr0w] {
        border-top: 0;
        padding-top: 0;
        margin-top: 0;
    }

.ace-help__h[b-hrjo05jr0w] {
    font-weight: 800;
    color: #111827;
    margin-bottom: 6px;
    font-size: 13px;
}

.ace-help__list[b-hrjo05jr0w] {
    margin: 0;
    padding-left: 18px;
    color: #374151;
    line-height: 1.75;
    font-size: 13px;
}

    .ace-help__list li[b-hrjo05jr0w] {
        margin: 7px 0;
    }

.ace-help__note[b-hrjo05jr0w] {
    display: inline-block;
    margin-top: 4px;
    color: #6b7280;
    font-size: 12px;
}


/* AI button */
.ace-btn--ai[b-hrjo05jr0w] {
    background: #111827;
    color: #fff;
    border: 1px solid #111827;
}

    .ace-btn--ai:hover[b-hrjo05jr0w] {
        background: #0b1220;
    }

/* overlay */
.ace-body[b-hrjo05jr0w] {
    position: relative;
}

.ace-overlay[b-hrjo05jr0w] {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,.7);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 30;
    padding: 14px;
}

.ace-overlay__card[b-hrjo05jr0w] {
    width: min(460px, 92%);
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    box-shadow: 0 18px 50px rgba(17,24,39,.12);
    padding: 16px;
    text-align: center;
}

.ace-overlay__spinner[b-hrjo05jr0w] {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    border: 3px solid #e5e7eb;
    border-top-color: #111827;
    margin: 2px auto 10px;
    animation: aceSpin-b-hrjo05jr0w .9s linear infinite;
}

@keyframes aceSpin-b-hrjo05jr0w {
    to {
        transform: rotate(360deg);
    }
}

.ace-overlay__text[b-hrjo05jr0w] {
    font-weight: 900;
    color: #111827;
    margin-bottom: 6px;
}

.ace-overlay__sub[b-hrjo05jr0w] {
    font-size: 12px;
    color: #6b7280;
}

/* alert */
.ace-alert[b-hrjo05jr0w] {
    border: 1px solid #fecaca;
    background: #fff5f5;
    color: #7f1d1d;
    border-radius: 14px;
    padding: 12px 12px;
    margin-bottom: 10px;
}

.ace-alert__title[b-hrjo05jr0w] {
    font-weight: 900;
    margin-bottom: 4px;
}

.ace-alert__msg[b-hrjo05jr0w] {
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 10px;
}

.ace-alert__btn[b-hrjo05jr0w] {
    border: 1px solid #fecaca;
    background: #fff;
    color: #7f1d1d;
    border-radius: 12px;
    padding: 7px 10px;
    cursor: pointer;
    font-size: 13px;
}

    .ace-alert__btn:hover[b-hrjo05jr0w] {
        background: #ffecec;
    }
/* /Pages/Pages_Info/ArticleSummaryModal.razor.rz.scp.css */
/* 外框：控制 modal 寬度 */
.article-modal-frame[b-yx67h5l86p] {
    width: 1000px;
    /*min-width: 50vw;*/
    /*max-width: 1400px;*/
    padding-bottom: 2em;
}

/* 主要卡片：Apple 風格 */
.article-modal[b-yx67h5l86p] {
    background-color: #ffffff;
    border-radius: 24px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.12);
    /*overflow: hidden;*/
    display: flex;
    flex-direction: column;
}

/* Header */
.article-header[b-yx67h5l86p] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    backdrop-filter: blur(20px);
    background: rgba(249, 249, 249, 0.9);
}

.article-title[b-yx67h5l86p] {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #111827;
}

.article-close-btn[b-yx67h5l86p] {
    border: none;
    background: rgba(0, 0, 0, 0.04);
    width: 26px;
    height: 26px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.08s ease;
}

    .article-close-btn:hover[b-yx67h5l86p] {
        background: rgba(0, 0, 0, 0.08);
        transform: scale(1.02);
    }

    .article-close-btn:active[b-yx67h5l86p] {
        transform: scale(0.96);
    }

.article-close-icon[b-yx67h5l86p] {
    font-size: 18px;
    line-height: 1;
    margin-top: -2px;
    color: #374151;
}

/* Body：可捲動區域 */
.article-body[b-yx67h5l86p] {
    /*max-height: calc(100vh - 160px);*/
    /*padding: 18px 20px 20px;*/
    padding: 1em;
    /*overflow-y: auto;*/
    scroll-behavior: smooth;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* 通用卡片區塊 */
.article-section[b-yx67h5l86p] {
    background: #f9fafb;
    border-radius: 18px;
    padding: 14px 16px 16px;
    border: 1px solid rgba(15, 23, 42, 0.04);
}

/* 標題區 */
.article-section-meta[b-yx67h5l86p] {
    background: #ffffff;
}

.section-label[b-yx67h5l86p] {
    font-size: 14px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #9ca3af;
    margin-bottom: 4px;
}

.article-main-title[b-yx67h5l86p] {
    font-size: 18px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 8px;
}

.article-meta-row[b-yx67h5l86p] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

.article-meta-pill[b-yx67h5l86p] {
    font-size: 14px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
    background: #111827;
    color: #f9fafb;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.article-meta-text[b-yx67h5l86p] {
    font-size: 14px;
    color: #6b7280;
}

/* Section header */
.section-header-row[b-yx67h5l86p] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.section-header-row--with-tip[b-yx67h5l86p] {
    align-items: center;
}

.section-title[b-yx67h5l86p] {
    font-size: 15px;
    font-weight: 600;
    color: #111827;
}

.section-subtitle[b-yx67h5l86p] {
    font-size: 14px;
    color: #9ca3af;
}

/* 文章內容 */
.article-content-block[b-yx67h5l86p] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.article-line[b-yx67h5l86p] {
    margin-bottom: 4px;
}

.article-line-text[b-yx67h5l86p] {
    white-space: pre-line;
    line-height: 1.6;
}

    .article-line-text.is-bold[b-yx67h5l86p] {
        font-weight: 600;
    }

/* 圖片內容 */
.article-photo-row[b-yx67h5l86p] {
    display: flex;
    justify-content: center;
}

.article-photo-wrap[b-yx67h5l86p] {
    border: none;
    background: transparent;
    padding: 0;
    cursor: zoom-in;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.16);
    max-width: 420px;
    width: 100%;
}

.article-photo[b-yx67h5l86p] {
    display: block;
    width: 100%;
    height: auto;
}

/* URL / 附檔 */
.article-file-row[b-yx67h5l86p] {
    margin-top: 4px;
}

.article-file-link[b-yx67h5l86p] {
    /*display: inline-flex;*/
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 8px;
    background: #f3f4f6;
    font-size: 14px;
    color: #111827;
    text-decoration: none;
    /*transition: background-color 0.12s ease, transform 0.08s ease;*/
}

    .article-file-link:hover[b-yx67h5l86p] {
        background: #e5e7eb;
        transform: translateY(-0.5px);
    }

.article-file-icon[b-yx67h5l86p] {
    font-size: 14px;
}

.article-file-name[b-yx67h5l86p]:before {
    content: '[Link]📎';
}

.article-file-name[b-yx67h5l86p] {
    max-width: 260px;
    white-space: wrap;
    /*    overflow: hidden;
    text-overflow: ellipsis;*/
}

/* 問卷卡片 */
.question-card[b-yx67h5l86p] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.question-row[b-yx67h5l86p] {
    padding: 8px 10px;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.35);
}

.question-main[b-yx67h5l86p] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.question-type-pill[b-yx67h5l86p] {
    font-size: 14px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #eef2ff;
    color: #4338ca;
}

.question-trigger[b-yx67h5l86p] {
    font-size: 14px;
    color: #16a34a;
}

.question-title-btn[b-yx67h5l86p] {
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    text-align: left;
}

    .question-title-btn:hover[b-yx67h5l86p] {
        text-decoration: underline;
    }

/* 問卷選項 chips */
.question-options[b-yx67h5l86p] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.question-option-chip[b-yx67h5l86p] {
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    padding: 2px 8px;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    background: #f9fafb;
    color: #111827;
    transition: background-color 0.12s ease, transform 0.08s ease, border-color 0.12s ease;
}

    .question-option-chip:hover[b-yx67h5l86p] {
        background: #eef2ff;
        border-color: #c7d2fe;
        transform: translateY(-0.5px);
    }

.question-option-count[b-yx67h5l86p] {
    font-size: 14px;
    color: #6b7280;
}

/* 問卷底部提示 */
.section-footer-tip[b-yx67h5l86p] {
    margin-top: 8px;
    text-align: right;
}

.section-footer-text[b-yx67h5l86p] {
    font-size: 14px;
    color: #2563eb;
    cursor: pointer;
}

    .section-footer-text:hover[b-yx67h5l86p] {
        text-decoration: underline;
    }

/* 簽名摘要卡片 */
.sign-summary-card[b-yx67h5l86p] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sign-summary-row[b-yx67h5l86p] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.35);
}

.sign-summary-row--clickable[b-yx67h5l86p] {
    cursor: pointer;
    transition: background-color 0.12s ease, transform 0.08s ease, border-color 0.12s ease;
}

    .sign-summary-row--clickable:hover[b-yx67h5l86p] {
        background: #eff6ff;
        border-color: #bfdbfe;
        transform: translateY(-0.5px);
    }

.sign-label[b-yx67h5l86p] {
    font-size: 14px;
}

.sign-label-ok[b-yx67h5l86p] {
    color: #16a34a;
}

.sign-label-pending[b-yx67h5l86p] {
    color: #dc2626;
}

.sign-value[b-yx67h5l86p] {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
}

/* 表格外框 */
.table-shell[b-yx67h5l86p] {
    border-radius: 14px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.06);
}

/* 自訂表格 */
.article-table[b-yx67h5l86p] {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

    .article-table thead[b-yx67h5l86p] {
        background: #f3f4f6;
    }

    .article-table th[b-yx67h5l86p],
    .article-table td[b-yx67h5l86p] {
        padding: 8px 10px;
        text-align: left;
        border-bottom: 1px solid rgba(15, 23, 42, 0.04);
    }

    .article-table th[b-yx67h5l86p] {
        font-weight: 600;
        color: #4b5563;
        font-size: 14px;
    }

    .article-table tbody tr:last-child td[b-yx67h5l86p] {
        border-bottom: none;
    }

/* 未讀列 */
.row-unread[b-yx67h5l86p] {
    background: #fef2f2;
}

    .row-unread:hover[b-yx67h5l86p] {
        background: #fee2e2;
    }

/* 學生欄位 */
.table-student-cell[b-yx67h5l86p] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
}

.table-stu-class[b-yx67h5l86p] {
    font-size: 14px;
    color: #9ca3af;
}

.table-stu-numb[b-yx67h5l86p] {
    font-size: 14px;
    color: #6b7280;
}

.table-stu-name[b-yx67h5l86p] {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
}

/* 已讀 / 未讀文字 */
.read-status[b-yx67h5l86p] {
    display: flex;
    flex-direction: row;
    gap: 8px;
}

.text-read[b-yx67h5l86p] {
    font-size: 14px;
    color: #16a34a;
}

.text-unread[b-yx67h5l86p] {
    font-size: 14px;
    color: #dc2626;
}

/* 回覆狀態 chip */
.reply-status-chip[b-yx67h5l86p] {
    border-radius: 999px;
    border: none;
    padding: 3px 10px;
    font-size: 14px;
    cursor: pointer;
    background: #dcfce7;
    color: #15803d;
    transition: background-color 0.12s ease, transform 0.08s ease;
}

.reply-status-chip--ok:hover[b-yx67h5l86p] {
    background: #bbf7d0;
    transform: translateY(-0.5px);
}

.reply-status-text[b-yx67h5l86p] {
    font-size: 14px;
    color: #6b7280;
}

/* Footer 操作列 */
.article-footer[b-yx67h5l86p] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
    margin-top: 2px;
}

.article-footer-btn[b-yx67h5l86p] {
    border-radius: 999px;
    border: none;
    padding: 6px 14px;
    font-size: 14px;
    cursor: pointer;
    background: #111827;
    color: #f9fafb;
    transition: background-color 0.12s ease, transform 0.08s ease, box-shadow 0.12s ease;
    white-space: nowrap;
}

    .article-footer-btn:hover[b-yx67h5l86p] {
        background: #020617;
        transform: translateY(-0.5px);
        box-shadow: 0 6px 16px rgba(15, 23, 42, 0.25);
        color: #efefef;
    }

.article-footer-btn--danger[b-yx67h5l86p] {
    background: #dc2626;
}

    .article-footer-btn--danger:hover[b-yx67h5l86p] {
        background: #b91c1c;
    }

.article-footer-btn--ghost[b-yx67h5l86p] {
    background: #f3f4f6;
    color: #111827;
    border: 1px solid rgba(148, 163, 184, 0.7);
    box-shadow: none;
}

    .article-footer-btn--ghost:hover[b-yx67h5l86p] {
        background: #e5e7eb;
        transform: translateY(-0.5px);
        color: #222;
    }

.article-footer-btn--secondary[b-yx67h5l86p] {
    background: #e5e7eb;
    color: #111827;
    box-shadow: none;
}

.article-footer-main-actions[b-yx67h5l86p] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.article-footer-separator[b-yx67h5l86p] {
    flex: 1;
}

/* pkg null */
.article-empty[b-yx67h5l86p] {
    font-size: 14px;
    color: #6b7280;
    padding: 20px;
    text-align: center;
}

/* RWD */
@media (max-width: 768px) {
    .article-modal-frame[b-yx67h5l86p] {
        width: 100%;
    }

    .article-modal[b-yx67h5l86p] {
        border-radius: 0;
    }

    .article-body[b-yx67h5l86p] {
        /*max-height: calc(100vh - 130px);*/
        padding: 14px 14px 16px;
    }

    .article-section[b-yx67h5l86p] {
        padding: 12px 12px 14px;
    }

    .section-header-row[b-yx67h5l86p] {
        flex-direction: column;
        align-items: flex-start;
    }

    .article-footer[b-yx67h5l86p] {
        flex-wrap: wrap;
    }

    .article-footer-separator[b-yx67h5l86p] {
        display: none;
    }
}


.article-html h3[b-yx67h5l86p] {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 1.2rem 0 .6rem;
}

.article-html p[b-yx67h5l86p] {
    margin: .5rem 0;
    line-height: 1.7;
}

.article-html ul[b-yx67h5l86p] {
    padding-left: 1.2rem;
    margin: .5rem 0;
}

.article-html li[b-yx67h5l86p] {
    margin: .35rem 0;
    line-height: 1.6;
}

.article-html strong[b-yx67h5l86p] {
    font-weight: 600;
}
/* /Pages/Pages_Info/CreateArticlePage.razor.rz.scp.css */
.page-container[b-c7r47fc5re] {
    display: flex;
    gap: 20px;
    padding: 20px;
}

/* 左側類型與輸入區塊 */
.left-container[b-c7r47fc5re] {
    width: 25%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* 類型選擇區 */
.type-section[b-c7r47fc5re] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #f9f9f9;
}

.type-content[b-c7r47fc5re] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.radio-input[b-c7r47fc5re] {
    accent-color: #007bff; /* 調整為主題色 */
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.radio-label[b-c7r47fc5re] {
    cursor: pointer;
    font-weight: 500;
}

.question-section[b-c7r47fc5re] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #f9f9f9;
    margin-bottom: 1em;
}

    .question-section h5[b-c7r47fc5re] {
        width: 100%;
    }

/* 中間手機模擬區 */
.mid-container[b-c7r47fc5re] {
    width: 40%;
    display: flex;
    justify-content: center;
}

.phone-area[b-c7r47fc5re] {
    width: 400px;
    height: 800px;
    border: 1px solid #ccc;
    border-radius: 30px;
    background-color: white;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.phone-header[b-c7r47fc5re] {
    height: 60px;
    padding: 20px 16px;
    background-color: #eee;
    border-bottom: 1px solid #ccc;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
}

.phone-article-content[b-c7r47fc5re] {
    padding: 12px;
    flex-grow: 1;
    overflow-y: auto;
    height: 750px;
}

.content-container[b-c7r47fc5re] {
    margin-bottom: 8px;
}

.form-control:focus[b-c7r47fc5re] {
    box-shadow: none !important;
    outline: none !important;
    border-color: none !important; /* 可依需要改成原本的邊框色 */
    background-color: none !important; /* 如果 focus 時背景會變色，也可加這行 */
}

.contentfocus[b-c7r47fc5re] {
    border-radius: 8px;
    background-color: #f0f8ff; /* 淡藍色背景 */
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.3); /* 淡藍陰影 */
    transition: background-color 0.2s ease-in-out;
    padding: 4px;
}

.add-hover[b-c7r47fc5re] {
    text-align: center;
    font-size: 24px;
    color: #007bff;
    cursor: pointer;
    user-select: none;
    transition: transform 0.1s ease;
    border: 2px solid #fff;
    padding: 4px;
}


.add-hover:hover[b-c7r47fc5re] {
    border: 2px solid #007bff22;
    transform: scale(1.1);
}

/* 右側預留區 */
.right-container[b-c7r47fc5re] {
    width: 35%;
}


/* 手機優先，所有容器都設為 100% */
.page-container[b-c7r47fc5re] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
}

.left-container[b-c7r47fc5re],
.mid-container[b-c7r47fc5re],
.right-container[b-c7r47fc5re],
.mid-right-container[b-c7r47fc5re] {
    width: 100%;
}

.url-preview[b-c7r47fc5re] {
    width: 100%;
    height: 80vh;
    border: 1px solid #ccc;
    margin-top: 12px;
    overflow: hidden;
}

    .url-preview iframe[b-c7r47fc5re] {
        width: 100%;
        height: 100%;
        border: none;
    }


/* 當螢幕 >= 768px（平板以上）時改回多欄排版 */
@media (min-width: 768px) {
    .page-container[b-c7r47fc5re] {
        flex-direction: row;
    }

    .left-container[b-c7r47fc5re] {
        width: 25%;
    }

    .mid-container[b-c7r47fc5re] {
        width: 40%;
    }

    .right-container[b-c7r47fc5re] {
        width: 35%;
    }

    .mid-right-container[b-c7r47fc5re] {
        width: 75%;
    }
}

/* 螢幕 <= 480px 時進一步縮放手機模擬區 */
@media (max-width: 480px) {
    .phone-area[b-c7r47fc5re] {
        width: 100%;
        height: auto;
        border-radius: 20px;
    }

    .phone-article-content[b-c7r47fc5re] {
        height: auto;
    }
}

/* Grouped Form Sections */
.stu-details[b-c7r47fc5re] {
    margin-bottom: 2px;
}

/* Group Summary */
.stu-summary[b-c7r47fc5re] {
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;
    color: #007bff;
    padding: 6px 12px;
    background-color: #f1f1f1;
    border-radius: 4px;
    transition: background-color 0.3s ease;
    display: flex;
    justify-content: space-between;
}

    .stu-summary:hover[b-c7r47fc5re] {
        background-color: #e2e2e2;
    }

.stu-detail-container[b-c7r47fc5re] {
    padding: 8px 0;
}


details .all-student-summary[b-c7r47fc5re]::before {
    content: "+ ";
    font-weight: bold;
    margin-right: 12px;
}

details[open] .all-student-summary[b-c7r47fc5re]::before {
    content: "− ";
    font-weight: bold;
    margin-right: 12px;
}
/* /Pages/Pages_Info/CreateLifeRecordPage.razor.rz.scp.css */
/* ===== Page 尺寸參數 ===== */
.page-container[b-40is1j734t] {
    --header-h: 56px;
    --pad-y: 16px;
}

    /* 頁面標題列 */
    .page-container > h4[b-40is1j734t] {
        min-height: var(--header-h);
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0;
        padding: 8px 16px;
        background: #f5f5f5;
    }

/* ===== 單人：三欄 Grid ===== */
.single-container[b-40is1j734t] {
    display: grid;
    grid-template-columns: 350px 1fr 1fr;
    gap: 20px;
    height: calc(100vh - var(--header-h) - (var(--pad-y) * 2));
    min-height: 0;
}

/* ===== 批次：左右兩欄 ===== */
.batch-container[b-40is1j734t] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    height: calc(100vh - var(--header-h) - (var(--pad-y) * 2));
    min-height: 0;
}

    /* 各欄位各自捲動（桌機） */
    .single-container > .left-container[b-40is1j734t],
    .single-container > .mid-container[b-40is1j734t],
    .single-container > .right-container[b-40is1j734t],
    .batch-container > .left-container[b-40is1j734t],
    .batch-container > .right-container[b-40is1j734t] {
        height: 100%;
        min-height: 0;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

/* 左欄日期列 */
.left-container .date-search[b-40is1j734t] {
    padding: 8px;
    background: #fff;
    width: 100%;
}

/* ===== RWD 斷點 ===== */

/* 1280↓：單人變 2 欄（左固定 + 右上下兩塊） */
@media (max-width:1280px) {
    .single-container[b-40is1j734t] {
        grid-template-columns: 320px 1fr;
        grid-template-rows: 1fr 1fr;
    }

        .single-container .left-container[b-40is1j734t] {
            grid-row: 1 / span 2;
        }

        .single-container .mid-container[b-40is1j734t] {
            grid-column: 2;
            grid-row: 1;
        }

        .single-container .right-container[b-40is1j734t] {
            grid-column: 2;
            grid-row: 2;
        }
}

/* ========== 防爆版：手機覆蓋 ========== */
@media (max-width:900px) {
    html[b-40is1j734t], body[b-40is1j734t] {
        overflow-x: hidden; /* 保險：關掉橫向捲軸 */
    }

    .page-container[b-40is1j734t] {
        max-width: 100%;
        overflow-x: hidden;
    }

    /* 讓容器自己變單欄且不超寬 */
    .single-container[b-40is1j734t],
    .batch-container[b-40is1j734t] {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 12px; /* 縮小 gap，避免加總後超寬 */
        width: 100%;
        max-width: 100%;
        height: auto;
        min-height: auto;
        padding-left: 0; /* 若外層有左右 padding，手機下收掉 */
        padding-right: 0;
        overflow-x: hidden;
    }

        /* 關鍵！Grid/Flex 子項要能縮，避免被內文撐爆 */
        .single-container > .left-container[b-40is1j734t],
        .single-container > .mid-container[b-40is1j734t],
        .single-container > .right-container[b-40is1j734t],
        .batch-container > .left-container[b-40is1j734t],
        .batch-container > .right-container[b-40is1j734t] {
            grid-column: 1;
            grid-row: auto;
            width: 100%;
            max-width: 100%;
            min-width: 0; /* ★ 必加：允許內容縮小 */
            box-sizing: border-box; /* padding 不再把總寬推大 */
            height: auto;
            overflow: visible;
        }

    /* 常見超寬來源：內層 .p-3 / .px-3 等 padding/margin */
    .p-3[b-40is1j734t], .px-3[b-40is1j734t], .ps-md-0[b-40is1j734t], .me-md-2[b-40is1j734t] {
        padding-left: 12px !important;
        padding-right: 12px !important;
        margin-right: 0 !important;
        box-sizing: border-box;
        max-width: 100%;
        min-width: 0;
    }

    /* 日期列在手機上不要吸附，且不超寬 */
    .left-container .date-search[b-40is1j734t] {
        position: static !important;
        max-width: 100%;
        min-width: 0;
    }

    /* input 類在手機下請能縮 */
    .date-input[b-40is1j734t],
    .date-search input[type="date"][b-40is1j734t],
    .date-search input[type="text"][b-40is1j734t] {
        min-width: 0; /* 覆蓋你原本的 min-width:180px */
        width: 100%;
    }

    /* 如果有長字串 / 不斷行元素也一起處理 */
    .single-container *[b-40is1j734t], .batch-container *[b-40is1j734t] {
        max-width: 100%;
        min-width: 0;
        word-break: break-word; /* 防止長字把版面撐開 */
    }
}



/* 小修：避免內部內容把圓角邊框蓋住 */
.lr-item[b-40is1j734t] {
    overflow: hidden;
    border-radius: 12px;
}

.lr-head[b-40is1j734t] {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    background-clip: padding-box;
}

/* ===== 右側紀錄樣式（原樣保留） ===== */
.slr-panel[b-40is1j734t] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 1em 1em 1em 0;
}

@media (max-width:900px) {
    .slr-panel[b-40is1j734t] {
        padding: 1em;
    }
}

.slr-header[b-40is1j734t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.slr-title[b-40is1j734t] {
    font-size: 16px;
    font-weight: 700;
    color: #333;
}



/* 日期輸入 */
.date-search[b-40is1j734t] {
    display: flex;
    align-items: center;
    gap: 10px;
    /*padding: 6px 0;*/
}

    .date-search > label[b-40is1j734t] {
        color: #444;
        font-weight: 600;
    }

.date-input[b-40is1j734t] {
    border: 1px solid #cfcfcf;
    border-radius: 10px;
    padding: 8px 10px;
    outline: none;
    min-width: 180px;
    flex: 1;
}

    .date-input:focus[b-40is1j734t] {
        border-color: #7aa7ff;
        box-shadow: 0 0 0 3px rgba(122,167,255,.18);
    }

.date-loading[b-40is1j734t] {
    font-size: 12px;
    color: #888;
}
/* /Pages/Pages_Info/CreateNoticePage.razor.rz.scp.css */
/* 外層版面 ------------------------------------------------------------------ */

.cn-page[b-c9gq2fiocv] {
    display: flex;
    gap: 16px;
    padding: 16px;
    max-width: 1400px;
    margin: 0 auto;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

.cn-left[b-c9gq2fiocv] {
    flex: 0 0 480px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cn-right[b-c9gq2fiocv] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Card 通用樣式 ------------------------------------------------------------ */

.cn-card[b-c9gq2fiocv] {
    background-color: #ffffff;
    border-radius: 18px;
    padding: 14px 16px 16px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.04);
    box-sizing: border-box;
}

.cn-card-header[b-c9gq2fiocv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.cn-card-body[b-c9gq2fiocv] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cn-card-body--scroll[b-c9gq2fiocv] {
    max-height: calc(100vh - 170px);
    overflow: auto;
}

/* 標題文字 ------------------------------------------------------------------ */

.cn-card-title[b-c9gq2fiocv] {
    font-size: 15px;
    font-weight: 600;
    color: #111827;
    letter-spacing: 0.02em;
}

.cn-card-subtitle[b-c9gq2fiocv] {
    margin-top: 2px;
    font-size: 12px;
    color: #6b7280;
}

/* 小膠囊 / 角標 ------------------------------------------------------------- */

.cn-pill[b-c9gq2fiocv] {
    padding: 4px 10px;
    border-radius: 999px;
    background: #f3f4f6;
    font-size: 11px;
    color: #374151;
    white-space: nowrap;
}

.cn-header-meta[b-c9gq2fiocv] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cn-counter[b-c9gq2fiocv] {
    font-size: 11px;
    color: #6b7280;
}

/* 按鈕樣式 ------------------------------------------------------------------ */

.cn-btn[b-c9gq2fiocv] {
    appearance: none;
    border-radius: 999px;
    padding: 8px 16px;
    border: 1px solid transparent;
    font-size: 13px;
    line-height: 1.4;
    cursor: pointer;
    transition: background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, transform 0.06s ease;
    user-select: none;
    white-space: nowrap;
}

    .cn-btn:disabled[b-c9gq2fiocv] {
        opacity: 0.5;
        cursor: default;
        transform: none;
        box-shadow: none;
    }

.cn-btn-primary[b-c9gq2fiocv] {
    background-color: #0a84ff;
    border-color: #0a84ff;
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(10, 132, 255, 0.28);
}

    .cn-btn-primary:hover:not(:disabled)[b-c9gq2fiocv] {
        background-color: #0060df;
        border-color: #0060df;
        box-shadow: 0 14px 34px rgba(10, 132, 255, 0.32);
        transform: translateY(-1px);
    }

    .cn-btn-primary:active:not(:disabled)[b-c9gq2fiocv] {
        transform: translateY(0);
        box-shadow: 0 4px 14px rgba(15, 23, 42, 0.25);
    }

.cn-btn-secondary[b-c9gq2fiocv] {
    background-color: #f9fafb;
    border-color: #d1d5db;
    color: #111827;
}

    .cn-btn-secondary:hover:not(:disabled)[b-c9gq2fiocv] {
        background-color: #f3f4f6;
        border-color: #cbd5e1;
    }

.cn-btn-ghost[b-c9gq2fiocv] {
    background-color: #ffffff;
    border-color: #d1d5db;
    color: #111827;
}

    .cn-btn-ghost:hover:not(:disabled)[b-c9gq2fiocv] {
        background-color: #f9fafb;
        border-color: #cbd5e1;
    }

.cn-icon-btn[b-c9gq2fiocv] {
    appearance: none;
    border-radius: 999px;
    border: none;
    background: transparent;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #9ca3af;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.05s ease;
}

    .cn-icon-btn:hover[b-c9gq2fiocv] {
        background-color: #f3f4f6;
        color: #4b5563;
        transform: translateY(-0.5px);
    }

    .cn-icon-btn:active[b-c9gq2fiocv] {
        transform: translateY(0);
    }

/* 文本輸入 ------------------------------------------------------------------ */

.cn-textarea[b-c9gq2fiocv] {
    width: 100%;
    min-height: 130px;
    resize: vertical;
    border-radius: 14px;
    border: 1px solid #d1d5db;
    padding: 10px 12px;
    font-size: 14px;
    line-height: 1.5;
    box-sizing: border-box;
    color: #111827;
    background-color: #f9fafb;
    transition: border-color 0.14s ease, box-shadow 0.14s ease, background-color 0.14s ease;
}

    .cn-textarea:focus[b-c9gq2fiocv] {
        outline: none;
        border-color: #0a84ff;
        box-shadow: 0 0 0 1px #0a84ff33;
        background-color: #ffffff;
    }

    .cn-textarea[b-c9gq2fiocv]::placeholder {
        color: #9ca3af;
    }

.cn-input[b-c9gq2fiocv] {
    flex: 1;
    border-radius: 10px;
    border: 1px solid #d1d5db;
    padding: 6px 10px;
    font-size: 13px;
    line-height: 1.4;
    box-sizing: border-box;
    background-color: #f9fafb;
    color: #111827;
    transition: border-color 0.14s ease, box-shadow 0.14s ease, background-color 0.14s ease;
}

    .cn-input:focus[b-c9gq2fiocv] {
        outline: none;
        border-color: #0a84ff;
        box-shadow: 0 0 0 1px #0a84ff33;
        background-color: #ffffff;
    }

/* 行列輔助 ------------------------------------------------------------------ */

.cn-row[b-c9gq2fiocv] {
    display: flex;
    align-items: center;
}

.cn-row--gap[b-c9gq2fiocv] {
    gap: 8px;
}

.cn-row--end[b-c9gq2fiocv] {
    justify-content: flex-end;
}

/* 攜帶物品區 --------------------------------------------------------------- */

.cn-chip-list[b-c9gq2fiocv] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.cn-chip[b-c9gq2fiocv] {
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    background-color: #f9fafb;
    font-size: 12px;
    color: #374151;
    cursor: pointer;
    transition: background-color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease, transform 0.06s ease;
}

    .cn-chip:hover[b-c9gq2fiocv] {
        background-color: #eef2ff;
        border-color: #c7d2fe;
        box-shadow: 0 6px 18px rgba(79, 70, 229, 0.12);
        transform: translateY(-0.5px);
    }

.cn-bring-list[b-c9gq2fiocv] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
}

.cn-bring-row[b-c9gq2fiocv] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.cn-bring-index[b-c9gq2fiocv] {
    width: 28px;
    font-size: 11px;
    color: #9ca3af;
    text-align: right;
}

/* 附件區 -------------------------------------------------------------------- */

.cn-lower-grid[b-c9gq2fiocv] {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 12px;
}

.cn-attachments[b-c9gq2fiocv] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cn-attachment-block[b-c9gq2fiocv] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cn-attachment-header[b-c9gq2fiocv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.cn-attachment-title[b-c9gq2fiocv] {
    font-size: 13px;
    font-weight: 500;
    color: #111827;
}

.cn-attachment-subtitle[b-c9gq2fiocv] {
    font-size: 11px;
    color: #6b7280;
}

.cn-divider[b-c9gq2fiocv] {
    height: 1px;
    background: linear-gradient(to right, transparent, #e5e7eb, transparent);
    margin: 2px 0;
}

/* 照片預覽 ------------------------------------------------------------------ */

.cn-photo-grid[b-c9gq2fiocv] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 8px;
    margin-top: 4px;
}

.cn-photo-item[b-c9gq2fiocv] {
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    overflow: hidden;
    background-color: #f9fafb;
    display: flex;
    flex-direction: column;
}

.cn-photo-img[b-c9gq2fiocv] {
    width: 100%;
    height: 72px;
    object-fit: cover;
    display: block;
}

.cn-photo-meta[b-c9gq2fiocv] {
    padding: 4px 6px 6px;
}

.cn-photo-name[b-c9gq2fiocv] {
    font-size: 11px;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cn-photo-size[b-c9gq2fiocv] {
    font-size: 10px;
    color: #9ca3af;
}

/* PDF 列表 ------------------------------------------------------------------ */

.cn-pdf-list[b-c9gq2fiocv] {
    list-style: none;
    padding: 0;
    margin: 4px 0 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cn-pdf-item[b-c9gq2fiocv] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    background-color: #f9fafb;
}

.cn-pdf-icon[b-c9gq2fiocv] {
    font-size: 18px;
}

.cn-pdf-info[b-c9gq2fiocv] {
    min-width: 0;
}

.cn-pdf-name[b-c9gq2fiocv] {
    font-size: 12px;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cn-pdf-size[b-c9gq2fiocv] {
    font-size: 11px;
    color: #9ca3af;
}

/* 空狀態提示 ---------------------------------------------------------------- */

.cn-empty-hint[b-c9gq2fiocv] {
    margin-top: 4px;
    font-size: 11px;
    color: #9ca3af;
}

/* 隱藏檔案 input ----------------------------------------------------------- */

.cn-inputfile-wrapper[b-c9gq2fiocv] {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
}

/* RWD ---------------------------------------------------------------------- */

@media (max-width: 1024px) {
    .cn-page[b-c9gq2fiocv] {
        flex-direction: column;
    }

    .cn-left[b-c9gq2fiocv] {
        flex: 1 1 auto;
    }

    .cn-lower-grid[b-c9gq2fiocv] {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    .cn-card[b-c9gq2fiocv] {
        padding: 12px 12px 14px;
        border-radius: 14px;
    }

    .cn-page[b-c9gq2fiocv] {
        padding: 10px;
    }

    .cn-card-header[b-c9gq2fiocv] {
        align-items: flex-start;
        flex-direction: column;
    }

    .cn-row--end[b-c9gq2fiocv] {
        justify-content: flex-start;
    }
}

.cn-photo-item[b-c9gq2fiocv] {
    position: relative;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    overflow: hidden;
    background-color: #f9fafb;
    display: flex;
    flex-direction: column;
}

.cn-photo-remove[b-c9gq2fiocv] {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    border: none;
    background-color: rgba(17, 24, 39, 0.74);
    color: #f9fafb;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.35);
    transition: background-color 0.15s ease, transform 0.05s ease, box-shadow 0.15s ease;
}

    .cn-photo-remove:hover[b-c9gq2fiocv] {
        background-color: rgba(15, 23, 42, 0.92);
        transform: translateY(-0.5px);
    }

    .cn-photo-remove:active[b-c9gq2fiocv] {
        transform: translateY(0);
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.35);
    }

.cn-pdf-item[b-c9gq2fiocv] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    background-color: #f9fafb;
}

.cn-pdf-info[b-c9gq2fiocv] {
    min-width: 0;
    flex: 1;
}

/* 讓右側刪除按鈕靠右 */
.cn-pdf-remove[b-c9gq2fiocv] {
    flex-shrink: 0;
}

.cn-chip-row[b-c9gq2fiocv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.cn-chip-list[b-c9gq2fiocv] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.cn-btn-add[b-c9gq2fiocv] {
    background-color: #10b981; /* Apple 風綠色 */
    border-color: #10b981;
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(16, 185, 129, 0.25);
    padding-inline: 14px;
    font-size: 12px;
}

    .cn-btn-add:hover:not(:disabled)[b-c9gq2fiocv] {
        background-color: #059669;
        border-color: #059669;
        box-shadow: 0 14px 34px rgba(16, 185, 129, 0.35);
        transform: translateY(-1px);
    }

    .cn-btn-add:active:not(:disabled)[b-c9gq2fiocv] {
        transform: translateY(0);
        box-shadow: 0 4px 14px rgba(15, 23, 42, 0.25);
    }
/* /Pages/Pages_Info/InfoContentEditor.razor.rz.scp.css */
/* InfoContentEditor.razor.css */
/* Apple-like minimal card. No :root, no bootstrap dependency. */

.ice-card[b-uaz4fn5egi] {
    box-sizing: border-box;
    width: 100%;
    border-radius: 16px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06), 0 1px 0 rgba(15, 23, 42, 0.04);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 14px 14px 12px;
}

.ice-section[b-uaz4fn5egi] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ice-title[b-uaz4fn5egi] {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: #0f172a;
}

.ice-preview[b-uaz4fn5egi] {
    white-space: pre-line;
    line-height: 1.65;
    font-size: 14px;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(248, 250, 252, 0.9);
}

.ice-divider[b-uaz4fn5egi] {
    height: 1px;
    margin: 14px 0;
    background: rgba(15, 23, 42, 0.08);
}

.ice-field[b-uaz4fn5egi] {
    display: grid;
    gap: 8px;
    margin-top: 8px;
}

.ice-label[b-uaz4fn5egi] {
    font-size: 13px;
    font-weight: 600;
    color: rgba(15, 23, 42, 0.85);
}

.ice-input[b-uaz4fn5egi] {
    box-sizing: border-box;
    width: 100%;
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: #fff;
    padding: 10px 12px;
    font-size: 14px;
    outline: none;
    transition: box-shadow .15s ease, border-color .15s ease, transform .05s ease;
}

    .ice-input:focus[b-uaz4fn5egi] {
        border-color: rgba(59, 130, 246, 0.55);
        box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.16);
    }

.ice-color[b-uaz4fn5egi] {
    width: 56px;
    height: 38px;
    padding: 0;
    border-radius: 10px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: #fff;
    cursor: pointer;
}

.ice-choiceRow[b-uaz4fn5egi] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.ice-radio[b-uaz4fn5egi] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.10);
    background: rgba(248, 250, 252, 0.7);
    cursor: pointer;
    user-select: none;
    transition: background .15s ease, border-color .15s ease, transform .05s ease;
}

    .ice-radio:hover[b-uaz4fn5egi] {
        border-color: rgba(15, 23, 42, 0.18);
        background: rgba(248, 250, 252, 0.95);
    }

    .ice-radio:active[b-uaz4fn5egi] {
        transform: translateY(1px);
    }

    .ice-radio input[b-uaz4fn5egi] {
        width: 14px;
        height: 14px;
        accent-color: #2563eb;
    }

    .ice-radio span[b-uaz4fn5egi] {
        font-size: 13px;
        font-weight: 600;
        color: rgba(15, 23, 42, 0.82);
    }

.ice-actions[b-uaz4fn5egi] {
    margin-top: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.ice-spacer[b-uaz4fn5egi] {
    flex: 1 1 auto;
}

.ice-btn[b-uaz4fn5egi] {
    border: 1px solid transparent;
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.2px;
    cursor: pointer;
    transition: transform .05s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
}

    .ice-btn:active[b-uaz4fn5egi] {
        transform: translateY(1px);
    }

    .ice-btn:disabled[b-uaz4fn5egi] {
        opacity: 0.5;
        cursor: not-allowed;
        box-shadow: none;
    }

.ice-btn--primary[b-uaz4fn5egi] {
    background: #0ea5e9;
    border-color: rgba(14, 165, 233, 0.45);
    color: #fff;
}

    .ice-btn--primary:hover:not(:disabled)[b-uaz4fn5egi] {
        background: #0284c7;
    }

.ice-btn--danger[b-uaz4fn5egi] {
    background: #ef4444;
    border-color: rgba(239, 68, 68, 0.45);
    color: #fff;
}

    .ice-btn--danger:hover:not(:disabled)[b-uaz4fn5egi] {
        background: #dc2626;
    }

.ice-btn--ghost[b-uaz4fn5egi] {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(15, 23, 42, 0.12);
    color: rgba(15, 23, 42, 0.85);
    box-shadow: none;
}

    .ice-btn--ghost:hover:not(:disabled)[b-uaz4fn5egi] {
        background: rgba(248, 250, 252, 1);
        border-color: rgba(15, 23, 42, 0.16);
    }
/* /Pages/Pages_Info/InfoQuestionEditor.razor.rz.scp.css */
/* InfoQuestionEditor.razor.css */
/* Apple-like minimal, no bootstrap class, no :root */

.iqe-card[b-ncw5h51v49] {
    box-sizing: border-box;
    width: 100%;
    border-radius: 16px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06), 0 1px 0 rgba(15, 23, 42, 0.04);
    padding: 12px 12px 10px;
}

.iqe-head[b-ncw5h51v49] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    align-items: center;
}

.iqe-pill[b-ncw5h51v49] {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .2px;
    color: rgba(15, 23, 42, 0.86);
    border: 1px solid rgba(15, 23, 42, 0.10);
    background: rgba(248, 250, 252, 0.85);
    white-space: nowrap;
}

.iqe-qwrap[b-ncw5h51v49] {
    min-width: 0;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(15, 23, 42, 0.10);
    background: rgba(255, 255, 255, 0.92);
}

.iqe-qtext[b-ncw5h51v49] {
    font-size: 14px;
    font-weight: 650;
    color: rgba(15, 23, 42, 0.88);
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.iqe-btn[b-ncw5h51v49] {
    border: 1px solid transparent;
    border-radius: 12px;
    padding: 9px 12px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .2px;
    cursor: pointer;
    transition: transform .05s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}

    .iqe-btn:active[b-ncw5h51v49] {
        transform: translateY(1px);
    }

.iqe-btn--danger[b-ncw5h51v49] {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.22);
    color: #b91c1c;
}

    .iqe-btn--danger:hover[b-ncw5h51v49] {
        background: rgba(239, 68, 68, 0.18);
        border-color: rgba(239, 68, 68, 0.28);
    }

.iqe-trigger[b-ncw5h51v49] {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(248, 250, 252, 0.65);
}

.iqe-triggerOk[b-ncw5h51v49] {
    font-size: 13px;
    font-weight: 700;
    color: #166534;
}

.iqe-triggerErr[b-ncw5h51v49] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.iqe-errText[b-ncw5h51v49] {
    font-size: 13px;
    font-weight: 800;
    color: #b91c1c;
}

.iqe-bad[b-ncw5h51v49] {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(239, 68, 68, 0.90);
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .2px;
}

.iqe-options[b-ncw5h51v49] {
    margin-top: 10px;
    padding-left: 2px;
}

.iqe-optionsLabel[b-ncw5h51v49] {
    font-size: 12px;
    font-weight: 800;
    color: rgba(15, 23, 42, 0.62);
    margin: 0 0 6px;
}

.iqe-optionsRow[b-ncw5h51v49] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.iqe-chip[b-ncw5h51v49] {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    color: rgba(15, 23, 42, 0.78);
    border: 1px solid rgba(15, 23, 42, 0.10);
    background: rgba(255, 255, 255, 0.92);
}
/* /Pages/Pages_Info/LifeRecordDisplayComponent.razor.rz.scp.css */
.rec-list[b-jw7d768iel] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rec-item[b-jw7d768iel] {
    border: 1px solid #e9e9e9;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}

.rec-head[b-jw7d768iel] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid #f0f0f0;
    background: #fbfbfb;
}

.rec-type[b-jw7d768iel] {
    font-weight: 600;
    color: #333;
}

.rec-meta[b-jw7d768iel] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.meta-time[b-jw7d768iel] {
    font-size: 12px;
    color: #888;
}

.rec-body[b-jw7d768iel] {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rec-text[b-jw7d768iel] {
    color: #222;
    line-height: 1.5;
}

    .rec-text.muted[b-jw7d768iel] {
        color: #999;
    }

.chips[b-jw7d768iel] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.chip[b-jw7d768iel] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #d8d8d8;
    background: #fff;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 13px;
    color: #333;
}

.photo-grid[b-jw7d768iel] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.thumb[b-jw7d768iel] {
    width: 86px;
    height: 86px;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    background: #fff;
    padding: 0;
    overflow: hidden;
    cursor: pointer;
}

    .thumb img[b-jw7d768iel] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.file-list[b-jw7d768iel] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.file-btn[b-jw7d768iel] {
    display: inline-block;
    text-decoration: none;
    border: 1px solid #d7d7d7;
    background: #fff;
    color: #333;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 13px;
    transition: background-color .12s ease, border-color .12s ease;
}

    .file-btn:hover[b-jw7d768iel] {
        background: #f5f7ff;
        border-color: #cfdcff;
    }

.rec-foot[b-jw7d768iel] {
    padding: 8px 12px;
    border-top: 1px solid #f5f5f5;
    background: #fff;
    color: #777;
    font-size: 12px;
}

.empty[b-jw7d768iel] {
    padding: 12px;
    color: #777;
    font-size: 14px;
    text-align: center;
    border: 1px dashed #e1e1e1;
    border-radius: 10px;
    background: #fcfcfc;
}

@media (max-width:640px) {
    .rec-head[b-jw7d768iel] {
        padding: 10px;
    }

    .rec-body[b-jw7d768iel] {
        padding: 10px;
    }

    .rec-foot[b-jw7d768iel] {
        padding: 8px 10px;
    }

    .thumb[b-jw7d768iel] {
        width: 76px;
        height: 76px;
    }
}

.btn-delete[b-jw7d768iel] {
    background: #ce4d4f;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.2s ease;
}

    .btn-delete:hover[b-jw7d768iel] {
        background: #ff363e;
    }

/* 圖片刪除按鈕 */
.thumb-wrapper[b-jw7d768iel] {
    position: relative;
    display: inline-block;
}

.btn-delete-photo[b-jw7d768iel] {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    padding: 0;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    background: rgba(0,0,0,0.6);
    color: #fff;
}

    .btn-delete-photo:hover[b-jw7d768iel] {
        background: rgba(0,0,0,0.85);
    }


/* /Pages/Pages_Info/LifeRecordInputGroupComponent.razor.rz.scp.css */
.lr-editor[b-wht2nqgpzh] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lr-title[b-wht2nqgpzh] {
    font-weight: 700;
    color: #333;
}

/* 卡片 */
.lr-item[b-wht2nqgpzh] {
    border: 1px solid #e9e9e9;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}

    .lr-item.custom[b-wht2nqgpzh] {
        border-color: #e3d8ff;
        background: #faf7ff;
    }

/* Header（精簡） */
.lr-head[b-wht2nqgpzh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border-bottom: 1px solid #f0f0f0;
    background: #fbfbfb;
}

.lr-type[b-wht2nqgpzh] {
    font-weight: 600;
    color: #333;
}

    .lr-type .ro[b-wht2nqgpzh] {
        color: #888;
        margin-right: 6px;
    }

.lr-head-actions[b-wht2nqgpzh] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.lr-unit-badge[b-wht2nqgpzh] {
    font-size: 12px;
    color: #555;
    background: #f1f1f1;
    border: 1px solid #e3e3e3;
    padding: 1px 6px;
    border-radius: 999px;
}

.pill-btn[b-wht2nqgpzh] {
    border: 1px solid #d7d7d7;
    background: #fff;
    border-radius: 999px;
    padding: 3px 8px;
    cursor: pointer;
    font-size: 12px;
}

    .pill-btn.on:hover[b-wht2nqgpzh] {
        background: #f5f7ff;
    }

    .pill-btn.off:hover[b-wht2nqgpzh] {
        background: #fff4f4;
        border-color: #f0caca;
    }

/* Body（緊湊） */
.lr-body[b-wht2nqgpzh] {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .lr-body.compact[b-wht2nqgpzh] {
        gap: 8px;
    }

/* 自訂 rows */
.custom-row[b-wht2nqgpzh] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.custom-label[b-wht2nqgpzh] {
    min-width: 44px;
    color: #555;
    font-size: 13px;
}

/* 入力 */
.lr-input[b-wht2nqgpzh] {
    border: 1px solid #cfcfcf;
    border-radius: 10px;
    padding: 6px 8px;
    outline: none;
}

    .lr-input:focus[b-wht2nqgpzh] {
        border-color: #7aa7ff;
        box-shadow: 0 0 0 3px rgba(122,167,255,.18);
    }

    .lr-input.ta[b-wht2nqgpzh] {
        width: 100%;
        resize: vertical;
    }

    .lr-input.num[b-wht2nqgpzh] {
        width: 130px;
    }

    .lr-input.note[b-wht2nqgpzh] {
        flex: 1;
        /*min-width: 160px;*/
    }

    .lr-input[disabled][b-wht2nqgpzh] {
        background: #f6f6f6;
        color: #888;
        cursor: not-allowed;
    }

.unit[b-wht2nqgpzh] {
    color: #666;
}

/* 數值橫列 */
.kv-row[b-wht2nqgpzh] {
    display: flex;
    align-items: center;
}

.kv-content[b-wht2nqgpzh] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

/* 選項區 */
.choice-row[b-wht2nqgpzh] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.radio-group[b-wht2nqgpzh], .check-group[b-wht2nqgpzh] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.radio-item[b-wht2nqgpzh], .check-item[b-wht2nqgpzh] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border: 1px solid #e5e5e5;
    border-radius: 999px;
    background: #fff;
}

    .radio-item input[b-wht2nqgpzh], .check-item input[b-wht2nqgpzh] {
        width: 16px;
        height: 16px;
        margin: 0;
        accent-color: #2b6bf3;
    }

.other-row[b-wht2nqgpzh] {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .other-row.tight .lr-input[b-wht2nqgpzh] {
        width: 240px;
    }

.other-label[b-wht2nqgpzh] {
    font-size: 13px;
    color: #666;
}

/* 提示 */
.lr-hint[b-wht2nqgpzh] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #666;
    font-size: 12px;
}

.dot[b-wht2nqgpzh] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d0d0d0;
    display: inline-block;
}

    .dot.ok[b-wht2nqgpzh] {
        background: #3dbb6a;
    }

@media (max-width:720px) {
    .lr-input.num[b-wht2nqgpzh] {
        width: 110px;
    }

    .lr-input.note[b-wht2nqgpzh] {
        min-width: 0;
    }

    .custom-row[b-wht2nqgpzh] {
        flex-direction: column;
        align-items: stretch;
    }

    .custom-label[b-wht2nqgpzh] {
        min-width: 0;
    }
}

/* ===== 上傳區 ===== */
.uploader[b-wht2nqgpzh] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.btn-upload[b-wht2nqgpzh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #cfcfcf;
    background: #fff;
    color: #333;
    border-radius: 10px;
    padding: 10px 12px;
    cursor: pointer;
    user-select: none;
}

    .btn-upload:hover[b-wht2nqgpzh] {
        background: #f5f7ff;
        border-color: #cfdcff;
    }

    .btn-upload.disabled[b-wht2nqgpzh] {
        opacity: .55;
        cursor: not-allowed;
        pointer-events: auto;
    }

.inline-spinner[b-wht2nqgpzh] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #666;
}

.thumb-grid[b-wht2nqgpzh] {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 10px;
}

.thumb-item[b-wht2nqgpzh] {
    position: relative;
    aspect-ratio: 1/1;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}

    .thumb-item img[b-wht2nqgpzh] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.thumb-del[b-wht2nqgpzh] {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 999px;
    background: rgba(0,0,0,.55);
    color: #fff;
    font-size: 18px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

    .thumb-del:hover[b-wht2nqgpzh] {
        background: rgba(0,0,0,.72);
    }

@media (max-width:560px) {
    .thumb-grid[b-wht2nqgpzh] {
        grid-template-columns: repeat(2,1fr);
    }
}
/* /Pages/Pages_Info/LifeRecordSummaryPage.razor.rz.scp.css */
/* ===== 變數 ===== */
.rs-page[b-4jbrv6qnu5] {
    --gap: 16px;
    --left-w: 280px;
    --detail-w: 420px;
    --radius: 12px;
    --bd: #e8e8e8;
    --bg-card: #fff;
    --bg-soft: #f8f9fb;
    --txt: #222;
    --muted: #8a8a8a;
    --ok: #2e7d32;
    --nok: #d32f2f;
    --primary: #2b6de0;
    padding: 1em;
}

/* ===== 篩選列（保留 input-group 外觀） ===== */
.rs-filter[b-4jbrv6qnu5] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--gap);
    margin-bottom: var(--gap);
}

/* 覆寫：不要讓左側撐滿整列 */
.rs-filter-left[b-4jbrv6qnu5] {
    display: flex;
    gap: 8px;
    flex: 0 0 auto; /* ← 取代原本的 flex:1 */
}

    /* 每個日期 input-group 的寬度（擇一） */

    /* 固定寬 */
    .rs-filter-left .input-group[b-4jbrv6qnu5] {
        width: 240px;
        flex: 0 0 auto;
    }

    /* 或使用 clamp：180~260px 區間內依視窗變化 */
    .rs-filter-left .input-group[b-4jbrv6qnu5] {
        width: clamp(180px, 18vw, 260px);
        flex: 0 0 auto;
    }


@media (max-width:900px) {
    .rs-filter[b-4jbrv6qnu5] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .rs-filter-left[b-4jbrv6qnu5] {
        flex: initial; /* 交回內容本身控制 */
        width: 100%;
        flex-wrap: wrap;
        gap: 8px;
    }

        .rs-filter-left .input-group[b-4jbrv6qnu5] {
            width: 100%; /* 直排、各佔一行 */
        }

    .rs-filter-right[b-4jbrv6qnu5] {
        justify-content: flex-end; /* 右側按鈕靠右 */
        gap: 8px;
    }

    .rs-btn[b-4jbrv6qnu5] {
        width: 100%;
    }
}

/* 自訂按鈕（非 Bootstrap） */
.rs-btn[b-4jbrv6qnu5] {
    -webkit-appearance: none;
    appearance: none;
    border: 1px solid var(--primary);
    background: #fff;
    color: var(--primary);
    border-radius: 10px;
    padding: 8px 14px;
    cursor: pointer;
    font-weight: 600;
}

    .rs-btn:hover[b-4jbrv6qnu5] {
        background: #f2f6ff;
    }

.rs-btn-primary[b-4jbrv6qnu5] {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

    .rs-btn-primary:hover[b-4jbrv6qnu5] {
        filter: brightness(0.96);
    }

/* ===== 版面：三欄 Grid ===== */
.rs-grid[b-4jbrv6qnu5] {
    display: grid;
    grid-template-columns: var(--left-w) 1fr minmax(320px, var(--detail-w));
    gap: var(--gap);
    min-width: 0;
}

.rs-col[b-4jbrv6qnu5] {
    min-width: 0;
}

.rs-card[b-4jbrv6qnu5] {
    background: var(--bg-card);
    border: 1px solid var(--bd);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.rs-card-head[b-4jbrv6qnu5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    background: var(--bg-soft);
    border-bottom: 1px solid var(--bd);
}

.rs-card-title[b-4jbrv6qnu5] {
    margin: 0;
    font-size: 16px;
    color: var(--txt);
    font-weight: 700;
}

.rs-muted[b-4jbrv6qnu5] {
    color: var(--muted);
    font-size: 12px;
}

.rs-card-body[b-4jbrv6qnu5] {
    padding: 12px;
}

/* ===== 清單 ===== */
.rs-list[b-4jbrv6qnu5] {
    display: flex;
    flex-direction: column;
    padding: 6px;
    gap: 6px;
    max-height: calc(100vh - 260px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.rs-empty[b-4jbrv6qnu5] {
    color: var(--muted);
    padding: 16px;
    text-align: center;
}

/* 每一列（非 Bootstrap button，純自訂） */
.rs-item[b-4jbrv6qnu5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    text-align: left;
    background: #fff;
    border: 1px solid var(--bd);
    border-radius: 10px;
    padding: 10px 12px;
    cursor: pointer;
}

    .rs-item:hover[b-4jbrv6qnu5] {
        background: #f7f9ff;
        border-color: #d8e3ff;
    }

    .rs-item.is-active[b-4jbrv6qnu5] {
        outline: 2px solid #cfe0ff;
    }

.rs-item-main[b-4jbrv6qnu5] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rs-item-title[b-4jbrv6qnu5] {
    color: var(--txt);
    font-weight: 700;
}

.rs-item-sub[b-4jbrv6qnu5] {
    color: var(--muted);
    font-size: 12px;
}

.rs-badges[b-4jbrv6qnu5] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Chip 與 Badge */
.rs-chip[b-4jbrv6qnu5] {
    border: 1px solid #d7d7d7;
    background: #fff;
    color: #333;
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 12px;
    line-height: 18px;
}

.rs-badge[b-4jbrv6qnu5] {
    display: inline-block;
    min-width: 22px;
    text-align: center;
    padding: 2px 6px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    border: 1px solid #cfd7cf;
}

.rs-badge-ok[b-4jbrv6qnu5] {
    color: var(--ok);
    background: #eaf6ec;
    border-color: #dbeedd;
}

.rs-badge-nok[b-4jbrv6qnu5] {
    color: var(--nok);
    background: #fde7e7;
    border-color: #f7d0d0;
}

/* 專用於日期列，使選中更明顯 */
.rs-item-date .rs-item-title[b-4jbrv6qnu5] {
    font-variant-numeric: tabular-nums;
}

/* ===== RWD：小尺寸堆疊，避免超出 ===== */
@media (max-width: 1100px) {
    .rs-grid[b-4jbrv6qnu5] {
        grid-template-columns: 240px 1fr 380px;
    }
}

@media (max-width: 900px) {
    html[b-4jbrv6qnu5], body[b-4jbrv6qnu5] {
        overflow-x: hidden;
    }

    .rs-grid[b-4jbrv6qnu5] {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
    }

    .rs-col[b-4jbrv6qnu5] {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .rs-list[b-4jbrv6qnu5] {
        max-height: none;
    }

    .rs-filter[b-4jbrv6qnu5] {
        flex-direction: column;
        align-items: stretch;
    }

    .rs-filter-right[b-4jbrv6qnu5] {
        justify-content: flex-end;
    }
}
/* /Pages/Pages_Info/NoticeSummaryModal.razor.rz.scp.css */
/* 外框：控制 modal 內文寬度 */
.notice-modal-frame[b-mjzid88js5] {
    min-width: 50vw;
    max-width: 1400px;
    margin: 0 auto;
    padding-bottom: 2em;

}

/* Apple 風格卡片外觀 */
.notice-modal[b-mjzid88js5] {
    background-color: #ffffff;
    border-radius: 24px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.12);
    /*overflow: hidden;*/
    display: flex;
    flex-direction: column;
}

/* Header 區 */
.notice-header[b-mjzid88js5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    backdrop-filter: blur(20px);
    background: rgba(249, 249, 249, 0.9);
}

.notice-title[b-mjzid88js5] {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #111827;
}

/* 關閉按鈕：Apple 風格小圓角按鈕 */
.notice-close-btn[b-mjzid88js5] {
    border: none;
    background: rgba(0, 0, 0, 0.04);
    width: 26px;
    height: 26px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.08s ease;
}

    .notice-close-btn:hover[b-mjzid88js5] {
        background: rgba(0, 0, 0, 0.08);
        transform: scale(1.02);
    }

    .notice-close-btn:active[b-mjzid88js5] {
        transform: scale(0.96);
    }

.notice-close-icon[b-mjzid88js5] {
    font-size: 18px;
    line-height: 1;
    margin-top: -2px;
    color: #374151;
}

/* Body：可捲動區域，ElementReference 綁在這裡 */
.notice-body[b-mjzid88js5] {
    /*max-height: calc(100vh - 160px);*/
    padding: 18px 20px 20px;
    /*overflow-y: auto;*/
    scroll-behavior: smooth;
}

/* 主要內容容器 */
.notice-main[b-mjzid88js5] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* 區塊卡片 */
.notice-section[b-mjzid88js5] {
    background: #f9fafb;
    border-radius: 18px;
    padding: 14px 16px 16px;
    border: 1px solid rgba(15, 23, 42, 0.04);
}

/* 區塊標題列 */
.section-header-row[b-mjzid88js5] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.section-title[b-mjzid88js5] {
    font-size: 15px;
    font-weight: 600;
    color: #111827;
}

.section-subtitle[b-mjzid88js5] {
    font-size: 14px;
    color: #9ca3af;
}

/* 小標題 pill */
.section-heading[b-mjzid88js5] {
    margin-bottom: 8px;
}

.section-pill[b-mjzid88js5] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: #111827;
    color: #f9fafb;
}

.section-pill-soft[b-mjzid88js5] {
    background: #eef2ff;
    color: #4338ca;
}

/* 內容文字 */
.section-content[b-mjzid88js5] {
    font-size: 14px;
    color: #111827;
    padding-left: 1em;
}

.notice-text[b-mjzid88js5] {
    white-space: pre-wrap;
    line-height: 1.6;
}

/* 攜帶物品列表 */
.notice-items[b-mjzid88js5] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
    padding-left: 1em;
}

.notice-item-row[b-mjzid88js5] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
}

.notice-item-dot[b-mjzid88js5] {
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: #a5b4fc;
}

.notice-item-text[b-mjzid88js5] {
    font-size: 14px;
    color: #111827;
}

/* 附加照片 */
.notice-photo-grid[b-mjzid88js5] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 8px;
    margin-top: 6px;
    padding-left: 1em;
}

.notice-photo-wrap[b-mjzid88js5] {
    border: none;
    padding: 0;
    background: transparent;
    cursor: zoom-in;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
    transition: transform 0.14s ease, box-shadow 0.14s ease;
}

    .notice-photo-wrap:hover[b-mjzid88js5] {
        transform: translateY(-1px);
        box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12);
    }

.notice-photo[b-mjzid88js5] {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 120px;
    object-fit: cover;
}

/* 附加檔案 */
.notice-files[b-mjzid88js5] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 6px;
    padding-left: 1em;
}

.notice-file[b-mjzid88js5] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 9px;
    border-radius: 12px;
    background: #f3f4f6;
    text-decoration: none;
    font-size: 14px;
    color: #111827;
    transition: background-color 0.12s ease, transform 0.08s ease;
}

    .notice-file:hover[b-mjzid88js5] {
        background: #e5e7eb;
        transform: translateY(-0.5px);
    }

.notice-file-icon[b-mjzid88js5] {
    font-size: 14px;
}

.notice-file-name[b-mjzid88js5] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 表格外框 */
.table-shell[b-mjzid88js5] {
    border-radius: 14px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.06);
}

/* 自訂表格 */
.notice-table[b-mjzid88js5] {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

    .notice-table thead[b-mjzid88js5] {
        background: #f3f4f6;
    }

    .notice-table th[b-mjzid88js5],
    .notice-table td[b-mjzid88js5] {
        padding: 8px 10px;
        text-align: left;
        border-bottom: 1px solid rgba(15, 23, 42, 0.04);
    }

    .notice-table th[b-mjzid88js5] {
        font-weight: 600;
        color: #4b5563;
        font-size: 14px;
    }

    .notice-table tbody tr:last-child td[b-mjzid88js5] {
        border-bottom: none;
    }

/* 未讀列高亮 */
.row-unread[b-mjzid88js5] {
    background: #fef2f2;
}

    .row-unread:hover[b-mjzid88js5] {
        background: #fee2e2;
    }

/* 學生名字按鈕 */
.notice-student-link[b-mjzid88js5] {
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    cursor: pointer;
    font-size: 14px;
    color: #111827;
}

    .notice-student-link:hover .notice-stu-name[b-mjzid88js5] {
        text-decoration: underline;
    }

.notice-stu-class[b-mjzid88js5] {
    font-size: 14px;
    color: #9ca3af;
}

.notice-stu-numb[b-mjzid88js5] {
    font-size: 14px;
    color: #6b7280;
}

.notice-stu-name[b-mjzid88js5] {
    font-weight: 600;
}

/* 已讀 / 未讀狀態 */
.notice-read-status[b-mjzid88js5] {
    display: flex;
    flex-direction: row;
    gap: 8px;
}

.text-read[b-mjzid88js5] {
    font-size: 14px;
    color: #16a34a;
}

.text-unread[b-mjzid88js5] {
    font-size: 14px;
    color: #dc2626;
}

/* 有回覆 chip */
.notice-reply-chip[b-mjzid88js5] {
    border: none;
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #eef2ff;
    color: #4338ca;
    cursor: pointer;
    transition: background-color 0.12s ease, transform 0.08s ease;
}

    .notice-reply-chip:hover[b-mjzid88js5] {
        background: #e0e7ff;
        transform: translateY(-0.5px);
    }

.notice-reply-time[b-mjzid88js5] {
    font-size: 14px;
    color: #6b7280;
}

/* 訊息區 */
.message-section[b-mjzid88js5] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 單一學生訊息 Group Card */
.student-message-group[b-mjzid88js5] {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid rgba(15, 23, 42, 0.06);
    padding: 10px 12px;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, transform 0.08s ease;
}

    .student-message-group:hover[b-mjzid88js5] {
        border-color: rgba(37, 99, 235, 0.25);
        transform: translateY(-0.5px);
    }

    .student-message-group.is-active[b-mjzid88js5] {
        border-color: rgba(37, 99, 235, 0.45);
        box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.15);
        background: #f9fafb;
    }

/* Group header */
.message-group-header[b-mjzid88js5] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.message-header-left[b-mjzid88js5] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: baseline;
}

.message-classname[b-mjzid88js5] {
    font-size: 14px;
    color: #9ca3af;
}

.message-stuname[b-mjzid88js5] {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
}

.message-header-right[b-mjzid88js5] {
    font-size: 14px;
    color: #9ca3af;
}

.message-count[b-mjzid88js5] {
    white-space: nowrap;
}

/* 每一則訊息 */
.message-items[b-mjzid88js5] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.message-item[b-mjzid88js5] {
    padding: 6px 8px;
    border-radius: 12px;
    background: #f9fafb;
}

.message-main[b-mjzid88js5] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

/* 回覆者 */
.message-replier[b-mjzid88js5] {
    font-size: 14px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    background: #e5e7eb;
    white-space: nowrap;
}

.replier-teacher[b-mjzid88js5] {
    background: #dbeafe;
    color: #1d4ed8;
}

.replier-parent[b-mjzid88js5] {
    background: #dcfce7;
    color: #15803d;
}

/* 文字內容 */
.message-content[b-mjzid88js5] {
    font-size: 14px;
    color: #111827;
    line-height: 1.5;
    word-break: break-word;
}

/* 圖片內容 */
.message-photo-wrap[b-mjzid88js5] {
    border: none;
    background: transparent;
    padding: 0;
    cursor: zoom-in;
}

.message-item-photo[b-mjzid88js5] {
    max-width: 180px;
    max-height: 120px;
    border-radius: 10px;
    object-fit: cover;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.15);
}

/* meta 列：回覆按鈕 + 時間 */
.message-meta[b-mjzid88js5] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 4px;
}

.message-reply-btn[b-mjzid88js5] {
    border-radius: 999px;
    border: none;
    padding: 2px 10px;
    font-size: 14px;
    cursor: pointer;
    background: #111827;
    color: #f9fafb;
    transition: background-color 0.12s ease, transform 0.08s ease;
}

    .message-reply-btn:hover[b-mjzid88js5] {
        background: #020617;
        transform: translateY(-0.5px);
    }

.message-time[b-mjzid88js5] {
    font-size: 14px;
    color: #6b7280;
    white-space: nowrap;
}

/* hover-box，如果你有沿用這個 class */
.hover-box[b-mjzid88js5] {
    cursor: pointer;
}

/* RWD：小螢幕 padding & 排版調整 */
@media (max-width: 768px) {
    .notice-modal-frame[b-mjzid88js5] {
        min-width: 100%;
    }

    .notice-modal[b-mjzid88js5] {
        border-radius: 0;
    }

    .notice-body[b-mjzid88js5] {
        max-height: calc(100vh - 130px);
        padding: 14px 14px 16px;
    }

    .notice-section[b-mjzid88js5] {
        padding: 12px 12px 14px;
    }

    .section-header-row[b-mjzid88js5] {
        flex-direction: column;
        align-items: flex-start;
    }

    .notice-read-status[b-mjzid88js5] {
        gap: 0;
    }
}


.tips-section[b-mjzid88js5] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 2px 12px;
    border-radius: 12px;
    background: #f5f5f7; /* Apple 淡灰底 */
}

.tips-icon[b-mjzid88js5] {
    width: 22px;
    height: 22px;
    object-fit: contain;
    opacity: 0.8; /* 不搶眼 */
}

.tips-content[b-mjzid88js5] {
    font-size: 13px;
    color: #6b7280; /* 柔灰 */
    letter-spacing: 0.2px;
}


/* Footer 操作列 */
.article-footer[b-mjzid88js5] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
    margin-top: 2px;
}

.article-footer-btn[b-mjzid88js5] {
    border-radius: 999px;
    border: none;
    padding: 6px 14px;
    font-size: 14px;
    cursor: pointer;
    background: #111827;
    color: #f9fafb;
    transition: background-color 0.12s ease, transform 0.08s ease, box-shadow 0.12s ease;
    white-space: nowrap;
}

    .article-footer-btn:hover[b-mjzid88js5] {
        background: #020617;
        transform: translateY(-0.5px);
        box-shadow: 0 6px 16px rgba(15, 23, 42, 0.25);
        color: #efefef;
    }

.article-footer-btn--danger[b-mjzid88js5] {
    background: #dc2626;
}

    .article-footer-btn--danger:hover[b-mjzid88js5] {
        background: #b91c1c;
    }

.article-footer-btn--ghost[b-mjzid88js5] {
    background: #f3f4f6;
    color: #111827;
    border: 1px solid rgba(148, 163, 184, 0.7);
    box-shadow: none;
}

    .article-footer-btn--ghost:hover[b-mjzid88js5] {
        background: #e5e7eb;
        transform: translateY(-0.5px);
        color: #222;
    }

.article-footer-btn--secondary[b-mjzid88js5] {
    background: #e5e7eb;
    color: #111827;
    box-shadow: none;
}

.article-footer-main-actions[b-mjzid88js5] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.article-footer-separator[b-mjzid88js5] {
    flex: 1;
}
/* /Pages/Pages_Info/QuestionSummaryModal.razor.rz.scp.css */
.option-block[b-winnk911sk] {
    margin-bottom: 12px;
    border: 1px solid #ddd;
    padding: 8px;
    border-radius: 4px;
}

.bar-label[b-winnk911sk] {
    font-weight: bold;
    margin-bottom: 4px;
}

.bar-bg[b-winnk911sk] {
    background-color: #eee;
    border-radius: 4px;
    height: 18px;
    overflow: hidden;
    margin-bottom: 4px;
}

.bar-fill[b-winnk911sk] {
    background-color: #007bff;
    height: 100%;
}

.class-group[b-winnk911sk] {
    margin-left: 10px;
    margin-bottom: 4px;
}

    .class-group strong[b-winnk911sk] {
        color: #444;
        background-color: #e9e9e9;
        padding: 0 6px;
    }

.student-list[b-winnk911sk] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    font-size: 0.9rem;
}

.badge-danger[b-winnk911sk] {
    background-color: #dc3545;
    color: white;
    font-size: 0.8rem;
}

.badge-secondary[b-winnk911sk] {
    background-color: #6c757d;
    color: white;
    font-size: 0.8rem;
}
/* /Pages/Pages_Info/SchoolResource2Page.razor.rz.scp.css */
/* Container Layout */
.ios-container[b-mxbyssxho9] {
    max-width: 720px;
    margin: 0 auto;
    padding: 20px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #1d1d1f;
}

/* Card Styling */
.ios-card[b-mxbyssxho9] {
    background-color: #ffffff;
    border-radius: 18px;
    padding: 24px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    margin-bottom: 30px;
}

.panel-title[b-mxbyssxho9] {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 20px;
    color: #1d1d1f;
}

/* Form Elements */
.form-group[b-mxbyssxho9] {
    margin-bottom: 20px;
}

    .form-group label[b-mxbyssxho9] {
        display: block;
        font-size: 13px;
        font-weight: 500;
        color: #86868b;
        margin-bottom: 8px;
        margin-left: 4px;
    }

.ios-input[b-mxbyssxho9] {
    width: 100%;
    padding: 12px 16px;
    font-size: 16px;
    background-color: #f5f5f7;
    border: none;
    border-radius: 12px;
    color: #1d1d1f;
    transition: background-color 0.2s, box-shadow 0.2s;
    outline: none;
}

    .ios-input:focus[b-mxbyssxho9] {
        background-color: #fff;
        box-shadow: 0 0 0 2px #007aff;
    }

    .ios-input.invalid[b-mxbyssxho9] {
        box-shadow: 0 0 0 2px #ff3b30;
    }

.ios-textarea[b-mxbyssxho9] {
    min-height: 100px;
    resize: vertical;
}

.validation-msg[b-mxbyssxho9] {
    color: #ff3b30;
    font-size: 12px;
    margin-top: 6px;
    margin-left: 4px;
}

/* Segmented Control (Apple Style Tabs) */
.segmented-control[b-mxbyssxho9] {
    display: flex;
    background-color: #f5f5f7;
    padding: 3px;
    border-radius: 10px;
}

.segment-btn[b-mxbyssxho9] {
    flex: 1;
    border: none;
    background: transparent;
    padding: 8px 0;
    font-size: 14px;
    font-weight: 500;
    color: #1d1d1f;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .segment-btn.active[b-mxbyssxho9] {
        background-color: #ffffff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
        font-weight: 600;
    }

/* File Upload Custom Styling */
.hidden-input[b-mxbyssxho9] {
    display: none;
}

.file-upload-zone[b-mxbyssxho9] {
    margin-top: 10px;
}

.file-label[b-mxbyssxho9] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 30px;
    background-color: #fbfbfd;
    border: 2px dashed #d2d2d7;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

    .file-label:hover[b-mxbyssxho9] {
        border-color: #007aff;
        background-color: #f0f8ff;
    }

    .file-label .cta[b-mxbyssxho9] {
        color: #007aff;
        font-weight: 500;
    }

    .file-label .file-name[b-mxbyssxho9] {
        color: #1d1d1f;
        font-weight: 600;
        margin-right: 10px;
    }

.remove-btn[b-mxbyssxho9] {
    background: #ff3b30;
    color: white;
    border: none;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
}

.checkbox-label[b-mxbyssxho9] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    font-size: 13px;
    color: #86868b;
    opacity: 0.7;
}

/* Action Buttons */
.action-bar[b-mxbyssxho9] {
    margin-top: 24px;
    display: flex;
    justify-content: flex-end;
}

.ios-button[b-mxbyssxho9] {
    padding: 10px 24px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 20px;
    border: none;
    cursor: pointer;
    transition: transform 0.1s;
}

    .ios-button:active[b-mxbyssxho9] {
        transform: scale(0.96);
    }

    .ios-button.primary[b-mxbyssxho9] {
        background-color: #007aff;
        color: white;
    }

    .ios-button:disabled[b-mxbyssxho9] {
        background-color: #e5e5ea;
        color: #aeaeb2;
        cursor: not-allowed;
    }

/* Divider */
.divider[b-mxbyssxho9] {
    border: none;
    height: 1px;
    background-color: #e5e5ea;
    margin: 40px 0;
}

/* Resource Grid List */
.resource-grid[b-mxbyssxho9] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.resource-item[b-mxbyssxho9] {
    background: white;
    padding: 16px;
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid rgba(0,0,0,0.03);
    transition: transform 0.2s;
}

    .resource-item:hover[b-mxbyssxho9] {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(0,0,0,0.08);
    }

.resource-icon[b-mxbyssxho9] {
    width: 40px;
    height: 40px;
    background-color: #f2f2f7;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.resource-info[b-mxbyssxho9] {
    flex: 1;
    min-width: 0; /* Flexbox truncation fix */
}

.resource-title[b-mxbyssxho9] {
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.open-link[b-mxbyssxho9] {
    display: inline-block;
    font-size: 13px;
    color: #007aff;
    text-decoration: none;
    font-weight: 500;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

    .open-link:hover[b-mxbyssxho9] {
        text-decoration: underline;
    }

.delete-btn[b-mxbyssxho9] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #f2f2f7;
    color: #86868b;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

    .delete-btn:hover[b-mxbyssxho9] {
        background: #ff3b30;
        color: white;
    }
/* /Pages/Pages_Info/SchoolResourcePage.razor.rz.scp.css */
.sr-page[b-rqat7aubzi] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px 20px 24px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #111827;
}

.sr-header[b-rqat7aubzi] {
    margin-bottom: 16px;
}

.sr-title-row[b-rqat7aubzi] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.sr-title[b-rqat7aubzi] {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 0.01em;
    margin: 0;
}

.sr-tag[b-rqat7aubzi] {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #f3f4f6;
    color: #6b7280;
}

.sr-subtitle[b-rqat7aubzi] {
    font-size: 13px;
    color: #6b7280;
}

.sr-layout[b-rqat7aubzi] {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.6fr);
    gap: 16px;
}

/* 卡片基底 */

.sr-card[b-rqat7aubzi] {
    background: #ffffff;
    border-radius: 18px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.05), 0 1px 1px rgba(15, 23, 42, 0.02);
    padding: 14px 16px 16px;
}

.sr-card-header[b-rqat7aubzi] {
    margin-bottom: 10px;
}

.sr-card-title[b-rqat7aubzi] {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 2px;
}

.sr-card-note[b-rqat7aubzi] {
    font-size: 12px;
    color: #9ca3af;
}

.sr-form-card[b-rqat7aubzi] {
    align-self: flex-start;
}

/* 表單 */

.sr-form-body[b-rqat7aubzi] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sr-field[b-rqat7aubzi] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sr-field-inline[b-rqat7aubzi] {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.sr-label[b-rqat7aubzi] {
    font-size: 12px;
    font-weight: 500;
    color: #4b5563;
}

.sr-input[b-rqat7aubzi] {
    width: 100%;
    font-size: 13px;
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    outline: none;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.12s ease;
}

    .sr-input:focus[b-rqat7aubzi] {
        border-color: #2563eb;
        background: #ffffff;
        box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.12);
    }

.sr-textarea[b-rqat7aubzi] {
    width: 100%;
    font-size: 13px;
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    outline: none;
    resize: vertical;
    min-height: 96px;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.12s ease;
}

    .sr-textarea:focus[b-rqat7aubzi] {
        border-color: #2563eb;
        background: #ffffff;
        box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.12);
    }

.sr-checkbox-row[b-rqat7aubzi] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.sr-checkbox-label[b-rqat7aubzi] {
    font-size: 12px;
    color: #4b5563;
    cursor: pointer;
}

.sr-hint[b-rqat7aubzi] {
    font-size: 11px;
    color: #9ca3af;
}

.sr-divider[b-rqat7aubzi] {
    font-size: 11px;
    color: #d1d5db;
    text-align: center;
    margin: 2px 0;
}

.sr-file-row[b-rqat7aubzi] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 按鈕 */

.sr-form-footer[b-rqat7aubzi] {
    margin-top: 4px;
    display: flex;
    justify-content: flex-end;
}

.sr-btn[b-rqat7aubzi] {
    appearance: none;
    border-radius: 999px;
    border: 1px solid #d1d5db;
    font-size: 13px;
    padding: 7px 14px;
    cursor: pointer;
    background: #ffffff;
    color: #111827;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.06s ease, box-shadow 0.12s ease, opacity 0.15s ease;
}

.sr-btn-primary[b-rqat7aubzi] {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    border-color: #1d4ed8;
    color: #ffffff;
    box-shadow: 0 10px 18px rgba(37, 99, 235, 0.18), 0 1px 1px rgba(15, 23, 42, 0.06);
}

    .sr-btn-primary:hover[b-rqat7aubzi] {
        transform: translateY(-0.5px);
        box-shadow: 0 12px 22px rgba(37, 99, 235, 0.22), 0 1px 1px rgba(15, 23, 42, 0.08);
    }

    .sr-btn-primary:active[b-rqat7aubzi] {
        transform: translateY(0);
        box-shadow: 0 6px 12px rgba(37, 99, 235, 0.18), 0 1px 1px rgba(15, 23, 42, 0.06);
    }

.sr-btn-ghost[b-rqat7aubzi] {
    background: #f9fafb;
    border-color: #e5e7eb;
    color: #4b5563;
}

    .sr-btn-ghost:hover[b-rqat7aubzi] {
        background: #f3f4f6;
    }

/* 列表區 */

.sr-list-card[b-rqat7aubzi] {
    min-height: 260px;
}

.sr-empty[b-rqat7aubzi] {
    padding: 26px 10px;
    text-align: center;
    color: #9ca3af;
}

.sr-empty-icon[b-rqat7aubzi] {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    margin: 0 auto 6px;
    background: radial-gradient(circle at 30% 30%, #e5e7eb, #f3f4f6);
}

.sr-empty-text[b-rqat7aubzi] {
    font-size: 13px;
}

.sr-list[b-rqat7aubzi] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sr-item[b-rqat7aubzi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 14px;
    border: 1px solid #f3f4f6;
    background: linear-gradient(180deg, #ffffff, #f9fafb);
    transition: box-shadow 0.12s ease, transform 0.06s ease, border-color 0.12s ease, background-color 0.12s ease;
}

    .sr-item:hover[b-rqat7aubzi] {
        box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
        border-color: #e5e7eb;
        transform: translateY(-1px);
    }

.sr-item-main[b-rqat7aubzi] {
    min-width: 0;
}

.sr-item-title[b-rqat7aubzi] {
    font-size: 14px;
    font-weight: 500;
    color: #111827;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    margin-bottom: 2px;
}

.sr-item-meta[b-rqat7aubzi] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sr-item-date[b-rqat7aubzi] {
    font-size: 11px;
    color: #9ca3af;
}

.sr-item-actions[b-rqat7aubzi] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sr-item-text[b-rqat7aubzi] {
    margin: 4px 6px 0 6px;
    padding: 8px 10px;
    border-radius: 12px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    font-size: 13px;
    color: #374151;
    white-space: pre-wrap;
}

/* 類型標籤 */

.sr-type-badge[b-rqat7aubzi] {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid transparent;
}

.sr-type-photo[b-rqat7aubzi] {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1d4ed8;
}

.sr-type-pdf[b-rqat7aubzi] {
    background: #fef2f2;
    border-color: #fecaca;
    color: #b91c1c;
}

.sr-type-link[b-rqat7aubzi] {
    background: #ecfdf5;
    border-color: #bbf7d0;
    color: #15803d;
}

.sr-type-text[b-rqat7aubzi] {
    background: #f9fafb;
    border-color: #e5e7eb;
    color: #4b5563;
}

/* RWD */

@media (max-width: 900px) {
    .sr-layout[b-rqat7aubzi] {
        grid-template-columns: minmax(0, 1fr);
    }

    .sr-list-card[b-rqat7aubzi] {
        order: -1;
    }
}

/* 上傳按鈕 icon 外框（避免直接用 img 點擊太小） */
.add-icon-wrap[b-rqat7aubzi] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    padding: 6px;
    background: #f9fafb;
    border: 1px dashed #d1d5db;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.12s ease, transform 0.06s ease;
}

    .add-icon-wrap:hover[b-rqat7aubzi] {
        background: #f3f4f6;
        border-color: #cbd5e1;
        box-shadow: 0 6px 14px rgba(15, 23, 42, 0.06);
        transform: translateY(-0.5px);
    }

/* 真正的 icon 圖檔 */
.add-icon[b-rqat7aubzi] {
    width: 40px;
    height: 40px;
    display: block;
}

/* 上傳區整體排版：icon / 檔案資訊 / 按鈕 */
.sr-file-row[b-rqat7aubzi] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* 檔名與大小 */
.sr-file-info[b-rqat7aubzi] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.sr-file-name[b-rqat7aubzi] {
    font-size: 12px;
    font-weight: 500;
    color: #111827;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 180px;
}

.sr-file-meta[b-rqat7aubzi] {
    font-size: 11px;
    color: #9ca3af;
}

/* 圖片預覽 */
.sr-img-preview[b-rqat7aubzi] {
    margin-left: auto;
    cursor: pointer;
}

    .sr-img-preview img[b-rqat7aubzi] {
        width: 76px;
        height: 76px;
        border-radius: 14px;
        border: 1px solid #e5e7eb;
        object-fit: cover;
        background: #f9fafb;
        box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
    }
/* /Pages/Pages_Leave/AddLeaveModal.razor.rz.scp.css */
.lvp-modal[b-91inskuup9] {
    width: min(680px, 92vw);
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 12px;
    padding: 16px;
}

.lvp-header[b-91inskuup9] {
    display: grid;
    gap: 4px;
}

    .lvp-header .title[b-91inskuup9] {
        font-weight: 800;
        color: #0f172a;
        font-size: 20px;
        letter-spacing: .2px;
    }

    .lvp-header .subtitle[b-91inskuup9] {
        color: #64748b;
        font-size: 13px;
    }

.lvp-body[b-91inskuup9] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 1px 2px rgba(0,0,0,.03);
    display: grid;
    gap: 12px;
}

.field[b-91inskuup9] {
    display: grid;
    gap: 6px;
}

    .field.readonly[b-91inskuup9] {
        opacity: .95;
    }

    .field label[b-91inskuup9] {
        font-size: 12px;
        color: #6b7280;
    }

.ipt[b-91inskuup9] {
    border: 1px solid #cfd8e3;
    background: #fff;
    color: #0f172a;
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 14px;
    outline: none;
}

    .ipt:focus[b-91inskuup9] {
        border-color: #99c2ff;
        box-shadow: 0 0 0 3px rgba(153,194,255,.25);
    }

.pill[b-91inskuup9] {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 12px;
    border-radius: 999px;
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #e5e7eb;
    font-size: 13px;
}

.grid-3[b-91inskuup9] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}

@media (max-width: 600px) {
    .grid-3[b-91inskuup9] {
        grid-template-columns: 1fr;
    }
}

.seg[b-91inskuup9] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.seg-btn[b-91inskuup9] {
    appearance: none;
    border: 1px solid #d1d5db;
    background: #fff;
    color: #111827;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 14px;
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .05s;
}

    .seg-btn:hover[b-91inskuup9] {
        background: #f9fafb;
        transform: translateY(-1px);
    }

    .seg-btn.active[b-91inskuup9] {
        background: #0a53b5;
        border-color: #0a53b5;
        color: #fff;
    }

.hint[b-91inskuup9] {
    font-size: 12px;
    color: #64748b;
}

    .hint.warn[b-91inskuup9] {
        color: #b45309;
    }

    .hint.error[b-91inskuup9] {
        color: #b91c1c;
    }

.lvp-footer[b-91inskuup9] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.btn[b-91inskuup9] {
    appearance: none;
    border: 1px solid #cfd8e3;
    background: #fff;
    color: #111827;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 14px;
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .05s, opacity .15s;
}

    .btn:hover[b-91inskuup9] {
        background: #f5f7fb;
        transform: translateY(-1px);
    }

    .btn.primary[b-91inskuup9] {
        background: #0a53b5;
        border-color: #0a53b5;
        color: #fff;
    }

        .btn.primary:disabled[b-91inskuup9] {
            opacity: .6;
            cursor: not-allowed;
        }

    .btn.ghost[b-91inskuup9] {
        background: #fff;
        border-color: #d1d5db;
        color: #0f172a;
    }

        .btn.ghost:hover[b-91inskuup9] {
            background: #f9fafb;
        }

    .btn.danger[b-91inskuup9] {
        background: #dc2626; /* 紅色背景 */
        border-color: #b91c1c; /* 深紅色邊框 */
        color: #fff; /* 白字 */
    }

        .btn.danger:hover[b-91inskuup9] {
            background: #b91c1c; /* hover 時稍微加深 */
            border-color: #991b1b; /* 邊框加深 */
        }
/* /Pages/Pages_Leave/LeavePage.razor.rz.scp.css */
/* ===== 布局：頁面與主要區塊 ===== */
.lv-page[b-9daflgrmw9] {
    padding: 16px 16px;
    box-sizing: border-box;
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 16px;
    height: 100dvh;
}

.top-bar[b-9daflgrmw9] {
    height: auto;
    padding: 8px 0 0;
    position: sticky;
    top: 0;
    z-index: 5;
    background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.86));
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
}

/* 主區：左 summary、右條列 */
.lv-section[b-9daflgrmw9] {
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 16px;
    align-items: start;
}

/* 左側 Summary */
.summary-grid[b-9daflgrmw9] {
    background: rgba(255,255,255,0.92);
    border: 1px solid #ececec;
    border-radius: 14px;
    padding: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}

/* 右側條列容器 */
.lv-list[b-9daflgrmw9] {
    background: rgba(255,255,255,0.9);
    border-radius: 14px;
    border: 1px solid #ececec;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
    padding: 8px 0;
}

.lv-empty[b-9daflgrmw9] {
    padding: 16px 20px;
    font-size: 14px;
    color: #6b7280;
}

/* ===== 工具列／搜尋 ===== */
.lv-toolbar[b-9daflgrmw9] {
    background: rgba(255,255,255,0.82);
    border: 1px solid #ececec;
    border-radius: 14px;
    padding: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
    margin: 0;
    overflow: visible;
}

.lv-toolbar-wrap[b-9daflgrmw9] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.lv-fields[b-9daflgrmw9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.lv-field[b-9daflgrmw9] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 240px;
}

.lv-label[b-9daflgrmw9] {
    font-size: 14px;
    color: #3a3a3c;
    letter-spacing: 0.2px;
    white-space: nowrap;
}

.lv-input[b-9daflgrmw9],
.lv-select[b-9daflgrmw9] {
    appearance: none;
    height: 38px;
    padding: 0 12px;
    border: 1px solid #d9d9d9;
    border-radius: 12px;
    background: #f9f9f9;
    color: #111;
    outline: none;
    transition: border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
    box-sizing: border-box;
    flex: 1 1 160px;
    min-width: 160px;
}

    .lv-input:hover[b-9daflgrmw9],
    .lv-select:hover[b-9daflgrmw9] {
        background: #f6f6f6;
    }

    .lv-input:focus[b-9daflgrmw9],
    .lv-select:focus[b-9daflgrmw9] {
        border-color: #b9b9b9;
        background: #ffffff;
        box-shadow: 0 0 0 3px rgba(60, 60, 67, 0.08);
    }

/* 按鈕 */
.lv-btn[b-9daflgrmw9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid transparent;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .2px;
    cursor: pointer;
    transition: transform 80ms ease, box-shadow 120ms ease, background-color 120ms ease, border-color 120ms ease;
    user-select: none;
}

    .lv-btn:active[b-9daflgrmw9] {
        transform: scale(0.99);
    }

.lv-btn-primary[b-9daflgrmw9] {
    background: #2573ff;
    color: #fff;
    border-color: #1f63db;
    box-shadow: 0 2px 6px rgba(37,115,255,0.18);
}

    .lv-btn-primary:hover[b-9daflgrmw9] {
        background: #1f63db;
    }

.lv-btn-secondary[b-9daflgrmw9] {
    background: #ffffff;
    color: #1f1f1f;
    border-color: #d9d9d9;
}

    .lv-btn-secondary:hover[b-9daflgrmw9] {
        background: #f7f7f7;
        border-color: #c9c9c9;
    }

/* ===== Chips（假別顏色） ===== */
.blue-chip[b-9daflgrmw9],
.orange-chip[b-9daflgrmw9],
.red-chip[b-9daflgrmw9] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.6;
    border: 1px solid transparent;
    white-space: nowrap;
    user-select: none;
}

.blue-chip[b-9daflgrmw9] {
    color: #1d4ed8;
    background: #e8efff;
    border-color: #dbe6ff;
}

.orange-chip[b-9daflgrmw9] {
    color: #b45309;
    background: #fff1e6;
    border-color: #ffd9b8;
}

.red-chip[b-9daflgrmw9] {
    color: #b91c1c;
    background: #ffe9ea;
    border-color: #ffc8cc;
}

    .blue-chip:hover[b-9daflgrmw9],
    .orange-chip:hover[b-9daflgrmw9],
    .red-chip:hover[b-9daflgrmw9] {
        filter: brightness(0.98);
    }

/* ===== Summary：日期 → 班級 → 假別 ===== */
.sum-day[b-9daflgrmw9] {
    padding: 8px 6px;
    border-bottom: 1px dashed #eee;
}

    .sum-day:last-child[b-9daflgrmw9] {
        border-bottom: 0;
    }

.sum-day-title[b-9daflgrmw9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 8px;
    cursor: pointer;
    padding: 4px 4px;
    border-radius: 10px;
}

.sum-day--active .sum-day-title[b-9daflgrmw9] {
    background-color: rgba(0, 122, 255, 0.06);
}

.sum-date[b-9daflgrmw9] {
    color: #2573ff;
}

.sum-day-total[b-9daflgrmw9] {
    font-size: 12px;
    color: #1f2937;
    background: #f1f5ff;
    border: 1px solid #dbe6ff;
    padding: 2px 8px;
    border-radius: 999px;
}

.sum-class-row[b-9daflgrmw9] {
    margin: 6px 0 10px;
    cursor: pointer;
    border-radius: 10px;
    padding: 8px 10px;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

    .sum-class-row:hover[b-9daflgrmw9] {
        background-color: rgba(0,0,0,0.03);
    }

.sum-class-row--active[b-9daflgrmw9] {
    background-color: rgba(0, 122, 255, 0.08);
    box-shadow: 0 0 0 1px rgba(0, 122, 255, 0.4);
}

.sum-class-hd[b-9daflgrmw9] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.sum-class-name[b-9daflgrmw9] {
    font-weight: 600;
    color: #0f172a;
}

.sum-type-chip[b-9daflgrmw9] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.6;
    border: 1px solid transparent;
    user-select: none;
    max-width: 100%;
}

    .sum-type-chip .chip-label[b-9daflgrmw9] {
        white-space: nowrap;
    }

    .sum-type-chip .chip-count[b-9daflgrmw9] {
        font-variant-numeric: tabular-nums;
        background: rgba(255,255,255,.5);
        padding: 0 6px;
        border-radius: 999px;
    }

    .sum-type-chip:hover[b-9daflgrmw9] {
        filter: brightness(0.98);
    }

/* 篩選資訊列 */
.sum-filter-bar[b-9daflgrmw9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.sum-filter-text[b-9daflgrmw9] {
    font-size: 0.9rem;
    color: #555;
}

.lv-btn-clear[b-9daflgrmw9] {
    padding-inline: 10px;
    font-size: 0.85rem;
}

/* ===== 右側條列：班級區塊 + 列 ===== */
.lv-class-block[b-9daflgrmw9] {
    margin: 0 0 4px;
    border-top: 1px solid #e5e7eb;
}

.lv-class-header[b-9daflgrmw9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 16px;
    background: #f9fafb;
    font-size: 14px;
}

.lv-class-title[b-9daflgrmw9] {
    font-weight: 600;
    color: #111827;
}

.lv-class-total[b-9daflgrmw9] {
    font-size: 12px;
    color: #6b7280;
}

.lv-rows[b-9daflgrmw9] {
}

.lv-row[b-9daflgrmw9] {
    display: grid;
    grid-template-columns: 90px 110px minmax(180px, 220px) 1fr 110px;
    gap: 8px;
    padding: 6px 16px;
    font-size: 14px;
    align-items: center;
    border-top: 1px solid #f3f4f6;
}

    .lv-row:nth-child(even)[b-9daflgrmw9] {
        background: #f9fafb;
    }

.lv-col-type[b-9daflgrmw9] {
    display: flex;
    align-items: center;
}

.lv-col-stu[b-9daflgrmw9] {
    font-weight: 600;
    color: #111827;
}

.lv-col-time[b-9daflgrmw9] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13px;
    color: #4b5563;
}

.lv-date[b-9daflgrmw9] {
    font-size: 13px;
    color: #4b5563;
}

.lv-range[b-9daflgrmw9] {
    font-weight: 600;
    color: #111827;
}

.lv-col-reason[b-9daflgrmw9] {
    font-size: 13px;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.no-reason[b-9daflgrmw9] {
    color: #9ca3af;
}

/* 可用性 */
.lv-input:disabled[b-9daflgrmw9],
.lv-select:disabled[b-9daflgrmw9],
.lv-btn:disabled[b-9daflgrmw9] {
    opacity: .55;
    cursor: not-allowed;
    box-shadow: none;
}

/* RWD：小螢幕單欄，整頁滾動 */
@media (max-width: 980px) {
    .lv-section[b-9daflgrmw9] {
        grid-template-columns: 1fr;
    }

    .summary-grid[b-9daflgrmw9],
    .lv-list[b-9daflgrmw9] {
        max-height: none;
        overflow: visible;
    }
}

/* 搜尋欄在小螢幕滿寬 */
@media (max-width: 560px) {
    .lv-field[b-9daflgrmw9] {
        min-width: 100%;
    }

    .lv-input[b-9daflgrmw9],
    .lv-select[b-9daflgrmw9] {
        flex: 1 1 auto;
        min-width: 0;
        width: 100%;
    }

    .lv-btn[b-9daflgrmw9] {
        width: 100%;
    }

    .lv-row[b-9daflgrmw9] {
        grid-template-columns: 80px 1fr;
        grid-template-rows: auto auto auto;
        row-gap: 2px;
    }

    .lv-col-time[b-9daflgrmw9] {
        grid-column: 1 / -1;
        flex-direction: row;
        justify-content: flex-start;
        gap: 8px;
    }

    .lv-col-reason[b-9daflgrmw9] {
        grid-column: 1 / -1;
    }
}
/* /Pages/Pages_Leave/SchoolLeavePage.razor.rz.scp.css */
.page-container[b-itqg1y3lmw] {
    display: flex;
    flex-direction: row;
    gap: 20px;
    padding: 10px;
    flex-wrap: wrap; /* 讓 RWD 流動 */
}

.left-container[b-itqg1y3lmw] {
    flex: 0 0 320px; /* 左側固定寬 */
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.right-container[b-itqg1y3lmw] {
    flex: 1;
    min-width: 300px;
    overflow-y: auto;
    padding-right: 10px;
}

/* 左側區塊樣式 */
.search-section[b-itqg1y3lmw],
.function-section[b-itqg1y3lmw] {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 6px;
}

/* 假單行 */
.right-container .accordion .accordion-body > div[b-itqg1y3lmw] {
    display: flex;
    flex-wrap: wrap; /* 若內容太多可換行 */
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid #eee;
    font-size: 14px;
}

/* 分隔線對齊美化 */
.vr[b-itqg1y3lmw] {
    display: inline-block;
    width: 1px;
    height: 16px;
    background-color: #ccc;
    margin: 0 6px;
}

/* 手機版 RWD 調整 */
@media (max-width: 768px) {
    .page-container[b-itqg1y3lmw] {
        flex-direction: column;
    }

    .left-container[b-itqg1y3lmw] {
        flex: none;
        width: 100%;
    }

    .right-container[b-itqg1y3lmw] {
        flex: none;
        width: 100%;
        padding-right: 0;
    }

    /* 讓左側功能區塊不會太貼邊 */
    .search-section[b-itqg1y3lmw],
    .function-section[b-itqg1y3lmw] {
        margin-bottom: 10px;
    }
}
/* /Pages/Pages_Leave/TodayLeaveModal.razor.rz.scp.css */
/* 外層 modal 內容包裝 */
.lv-modal[b-uyh18n7uu3] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 800px;
    max-width: 1200px;
    box-sizing: border-box;
    margin: 1em;
}

/* 頂部資訊區 */
.lv-modal-header[b-uyh18n7uu3] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 1em;
    border-radius: 16px;
    background: #f7f7f9;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04) inset;
}

.close-btn[b-uyh18n7uu3] {
    cursor: pointer;
}

.lv-modal-times[b-uyh18n7uu3] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 14px;
}

.lv-label[b-uyh18n7uu3] {
    color: #888;
}

.lv-time[b-uyh18n7uu3] {
    font-weight: 600;
    color: #222;
}

.lv-separator[b-uyh18n7uu3] {
    margin: 0 4px;
    color: #c0c0c0;
}

.lv-modal-summary[b-uyh18n7uu3] {
    margin-top: 2px;
    font-size: 13px;
    color: #555;
}

.lv-summary-main[b-uyh18n7uu3] {
    font-weight: 500;
    margin-right: 4px;
}

.lv-summary-sub[b-uyh18n7uu3] {
    color: #888;
}

/* 內容區：可捲動 */
.lv-modal-body[b-uyh18n7uu3] {
    margin-top: 2px;
    padding: 8px 4px 4px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

/* 沒有資料時 */
.lv-empty[b-uyh18n7uu3] {
    padding: 24px 8px;
    text-align: center;
    color: #999;
    font-size: 13px;
}

.lv-empty-icon[b-uyh18n7uu3] {
    width: 28px;
    height: 28px;
    margin: 0 auto 8px;
    border-radius: 999px;
    border: 1px solid rgba(180, 180, 180, 0.5);
    box-sizing: border-box;
}

.lv-empty-text[b-uyh18n7uu3] {
    font-size: 13px;
}

/* 主要內容：每個班級一塊 */
.lv-content[b-uyh18n7uu3] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* 班級區塊 */
.cla-lev-section[b-uyh18n7uu3] {
    padding: 10px 12px 12px;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.04), 0 0 0 0.5px rgba(0, 0, 0, 0.03);
}

/* 班級標題列 */
.lv-class-header[b-uyh18n7uu3] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 10px;
    padding-bottom: 4px;
    border-bottom: 1px solid #f0f0f3;
    font-size: 14px;
}

    .lv-class-header span:first-child[b-uyh18n7uu3] {
        font-weight: 600;
        color: #222;
    }

    .lv-class-header span:last-child[b-uyh18n7uu3] {
        font-size: 12px;
        color: #888;
    }

/* 班級內的 3 欄卡片 grid */
.cla-lev-content[b-uyh18n7uu3] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

/* 單一請假卡片 */
.lv-card[b-uyh18n7uu3] {
    border-radius: 14px;
    background: #fafafa;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.03), 0 0 0 0.5px rgba(0, 0, 0, 0.02);
    border: 1px solid #f0f0f5;
    padding: 8px 9px 7px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* 卡片第一行：左邊人名/號碼，右邊假別+時間 */
.card-row1[b-uyh18n7uu3] {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

    /* 左邊：座號 + 姓名 */
    .card-row1 > div:first-child[b-uyh18n7uu3] {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 14px;
        color: #222;
        font-weight: 500;
    }

        /* 座號 */
        .card-row1 > div:first-child span:first-child[b-uyh18n7uu3] {
            /*min-width: 2em;*/
            text-align: right;
            font-size: 13px;
            color: #999;
            font-variant-numeric: tabular-nums;
        }

    /* 右邊：假別 + 時間 */
    .card-row1 > div:last-child[b-uyh18n7uu3] {
        display: flex;
        align-items: flex-end;
        gap: 2px;
    }

/* 假別 pill 共用樣式 */
.lv-type-personal[b-uyh18n7uu3],
.lv-type-sick[b-uyh18n7uu3],
.lv-type-infect[b-uyh18n7uu3],
.lv-type-other[b-uyh18n7uu3] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

/* type 顏色管理 */
.lv-type-personal[b-uyh18n7uu3] {
    background: #e4f0ff;
    color: #245fbd; /* 事假：藍 */
}

.lv-type-sick[b-uyh18n7uu3] {
    background: #ffe8d2;
    color: #c55b18; /* 病假：橘 */
}

.lv-type-infect[b-uyh18n7uu3] {
    background: #ffe1e3;
    color: #c43737; /* 傳染病：紅 */
}

.lv-type-other[b-uyh18n7uu3] {
    background: #e3f4e6;
    color: #2f7a3b; /* 其他：綠 */
}

/* 時間標籤 */
.lv-time-label[b-uyh18n7uu3] {
    margin-top: 1px;
    padding: 1px 8px;
    border-radius: 999px;
    background: #f5f5f8;
    color: #555;
    font-size: 12px;
}

/* 卡片第二行：原因 */
.card-row2[b-uyh18n7uu3] {
    margin-top: 2px;
    font-size: 13px;
    line-height: 1.5;
    color: #666;
    word-break: break-word;
}

/* RWD：窄螢幕改成 2 欄 / 1 欄 */
@media (max-width: 900px) {
    .cla-lev-content[b-uyh18n7uu3] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .lv-modal[b-uyh18n7uu3] {
        min-width: auto;
        max-width: 100%;
    }

    .cla-lev-content[b-uyh18n7uu3] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Pages_Management/BookHistoryModal.razor.rz.scp.css */
.bh-page[b-8nmd7hg2nz] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    background: #f2f2f7;
    min-height: 100%;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
    min-width: 40vw;
}

.bh-header[b-8nmd7hg2nz] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.bh-title[b-8nmd7hg2nz] {
    font-size: 18px;
    font-weight: 600;
    color: #111;
    margin: 0;
}

.bh-subtitle[b-8nmd7hg2nz] {
    margin: 4px 0 0 0;
    color: #666;
    font-size: 13px;
}

.bh-filters[b-8nmd7hg2nz] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.bh-chip[b-8nmd7hg2nz] {
    background: rgba(10, 60, 204, 0.08);
    border: 1px solid rgba(10, 60, 204, 0.15);
    color: #0a3bcc;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    white-space: nowrap;
}

.bh-list[b-8nmd7hg2nz] {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.03);
    border: 1px solid rgba(15, 23, 42, 0.035);
    overflow: hidden;
}

.bh-item[b-8nmd7hg2nz] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(240, 240, 240, 0.8);
    align-items: center;
}

    .bh-item:last-child[b-8nmd7hg2nz] {
        border-bottom: none;
    }

    .bh-item:hover[b-8nmd7hg2nz] {
        background: rgba(242, 242, 247, 0.3);
    }

.bh-item-main[b-8nmd7hg2nz] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bh-book[b-8nmd7hg2nz] {
    font-weight: 600;
    color: #111;
    font-size: 14px;
}

.bh-meta[b-8nmd7hg2nz] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 12px;
    color: #555;
}

.bh-student[b-8nmd7hg2nz] {
    padding: 2px 6px 2px 0;
}

.bh-class[b-8nmd7hg2nz] {
    background: rgba(0, 0, 0, 0.03);
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 12px;
    color: #444;
}

.bh-item-side[b-8nmd7hg2nz] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-end;
    min-width: 140px;
}

.bh-time[b-8nmd7hg2nz] {
    font-size: 12px;
    color: #666;
}

.bh-badge[b-8nmd7hg2nz] {
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
}

.bh-badge-out[b-8nmd7hg2nz] {
    background: rgba(255, 149, 0, 0.11);
    border: 1px solid rgba(255, 149, 0, 0.35);
    color: #c96a00;
}

.bh-badge-in[b-8nmd7hg2nz] {
    background: rgba(52, 199, 89, 0.06);
    border: 1px solid rgba(52, 199, 89, 0.25);
    color: #1e7b3b;
}

.bh-empty[b-8nmd7hg2nz] {
    padding: 40px 16px;
    text-align: center;
    color: #888;
    font-size: 13px;
}

/* loading skeleton */
.bh-loading[b-8nmd7hg2nz] {
    background: #fff;
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.03);
    border: 1px solid rgba(15, 23, 42, 0.035);
}

.bh-skeleton-header[b-8nmd7hg2nz],
.bh-skeleton-row[b-8nmd7hg2nz] {
    height: 14px;
    background: linear-gradient(90deg, #eceff4 0%, #f7f8fa 50%, #eceff4 100%);
    background-size: 200% 100%;
    border-radius: 999px;
    animation: bhShimmer-b-8nmd7hg2nz 1.4s ease-in-out infinite;
    margin-bottom: 10px;
}

.bh-skeleton-header[b-8nmd7hg2nz] {
    width: 36%;
    height: 16px;
}

.bh-skeleton-row[b-8nmd7hg2nz] {
    width: 100%;
}

@keyframes bhShimmer-b-8nmd7hg2nz {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* RWD */
@media (max-width: 700px) {
    .bh-item[b-8nmd7hg2nz] {
        flex-direction: column;
        align-items: flex-start;
    }

    .bh-item-side[b-8nmd7hg2nz] {
        flex-direction: row;
        gap: 8px;
        align-items: center;
        min-width: 0;
    }

    .bh-header[b-8nmd7hg2nz] {
        flex-direction: column;
        align-items: flex-start;
    }
}

.bh-item[b-8nmd7hg2nz] {
    display: grid;
    grid-template-columns: 16px 1fr auto;
    gap: 12px;
    padding: 14px 16px 14px 10px;
    border-bottom: 1px solid rgba(240, 240, 240, 0.8);
    align-items: center;
}

    .bh-item:last-child[b-8nmd7hg2nz] {
        border-bottom: none;
    }

.bh-item-left[b-8nmd7hg2nz] {
    display: flex;
    justify-content: center;
}

.bh-flow-dot[b-8nmd7hg2nz] {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #d0d3da;
}

.bh-item-out .bh-flow-dot[b-8nmd7hg2nz] {
    background: #ff9500;
}

.bh-item-in .bh-flow-dot[b-8nmd7hg2nz] {
    background: #34c759;
}

.bh-item-out[b-8nmd7hg2nz] {
    background: rgba(255,149,0,0.02);
}

.bh-item-in[b-8nmd7hg2nz] {
    background: rgba(52,199,89,0.01);
}

.bh-topline[b-8nmd7hg2nz] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
}

.bh-item-main[b-8nmd7hg2nz] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

@media (max-width: 700px) {
    .bh-item[b-8nmd7hg2nz] {
        grid-template-columns: 12px 1fr;
    }

    .bh-item-side[b-8nmd7hg2nz] {
        justify-self: start;
    }

    .bh-topline[b-8nmd7hg2nz] {
        flex-direction: column;
        align-items: flex-start;
    }
}

.bh-filterbar[b-8nmd7hg2nz] {
    display: flex;
    gap: 12px;
    background: #fff;
    border-radius: 14px;
    padding: 10px 12px 4px 12px;
    border: 1px solid rgba(15,23,42,0.03);
    box-shadow: 0 10px 30px rgba(15,23,42,0.02);
}

.bh-field[b-8nmd7hg2nz] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 160px;
}

.bh-label[b-8nmd7hg2nz] {
    font-size: 12px;
    color: #666;
}

.bh-select[b-8nmd7hg2nz] {
    border: 1px solid rgba(0,0,0,0.05);
    background: #f9f9fb;
    border-radius: 10px;
    padding: 5px 10px;
    font-size: 13px;
    outline: none;
    transition: border 0.15s ease;
}

    .bh-select:focus[b-8nmd7hg2nz] {
        border: 1px solid rgba(10,59,204,0.35);
        background: #fff;
    }

@media (max-width: 700px) {
    .bh-filterbar[b-8nmd7hg2nz] {
        flex-direction: column;
    }

    .bh-field[b-8nmd7hg2nz] {
        width: 100%;
    }
}
/* /Pages/Pages_Management/BookListModal.razor.rz.scp.css */
.bkpage[b-byx2yjrcjw] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
    box-sizing: border-box;
    width: 1500px !important;
    height: 100%;
    max-width: 80vw;
}

.bkpage-header[b-byx2yjrcjw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.bkpage-title[b-byx2yjrcjw] {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
}

.bkpage-meta[b-byx2yjrcjw] {
    display: flex;
    color: #666;
    font-size: 14px;
    gap: 12px;
    align-items: center;
}

/* Filters */
.bkpage-filters[b-byx2yjrcjw] {
    display: grid;
    grid-template-columns: repeat(8,minmax(0,1fr));
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

.bkpage-filter[b-byx2yjrcjw] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .bkpage-filter label[b-byx2yjrcjw] {
        font-size: 13px;
        color: #666;
    }

    .bkpage-filter select[b-byx2yjrcjw], .bkpage-filter input[b-byx2yjrcjw] {
        padding: 8px 10px;
        border: 1px solid #ddd;
        border-radius: 8px;
    }

.bk-search[b-byx2yjrcjw] {
    grid-column: span 2;
}

.bkpage-actions[b-byx2yjrcjw] {
    display: flex;
    align-items: end;
}

.bkbtn[b-byx2yjrcjw] {
    padding: 8px 12px;
    border: 1px solid #ddd;
    background: #fafafa;
    border-radius: 8px;
    cursor: pointer;
}

    .bkbtn:hover[b-byx2yjrcjw] {
        background: #f0f0f0;
    }

/* List */
.bkpage-list[b-byx2yjrcjw] {
    flex: 1 1 auto;
    overflow: auto;
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 12px;
    padding-top: 2px;
}

.bkpage-empty[b-byx2yjrcjw] {
    grid-column: 1/-1;
    text-align: center;
    color: #888;
    padding: 32px 0;
}

/* Card */
.bkcard[b-byx2yjrcjw] {
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
}

    .bkcard:hover[b-byx2yjrcjw] {
        transform: translateY(-1px);
        box-shadow: 0 2px 10px rgba(0,0,0,.06);
        background: #fafafa;
    }

.bkcard-title[b-byx2yjrcjw] {
    font-weight: 700;
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bk-tags[b-byx2yjrcjw] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.bktag[b-byx2yjrcjw] {
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 999px;
    background: #f5f6f8;
    border: 1px solid #e6e8eb;
}

.bk-meta-row[b-byx2yjrcjw] {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    font-size: 12px;
    color: #666;
}

.bk-muted[b-byx2yjrcjw] {
    color: #888;
}

/* Pagination */
.bkpage-pagination[b-byx2yjrcjw] {
    margin-top: 6px;
}

/* RWD */

@media(max-width:1200px) {
    .bkpage-list[b-byx2yjrcjw] {
        grid-template-columns: repeat(3,minmax(0,1fr));
    }


}

@media(max-width:600px) {
    .bkpage-list[b-byx2yjrcjw] {
        grid-template-columns: 1fr;
    }

    .bkpage-filters[b-byx2yjrcjw] {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .bk-search[b-byx2yjrcjw] {
        grid-column: span 2;
    }

    .bkpage[b-byx2yjrcjw] {
        min-width: 0;
    }
}

.over-date[b-byx2yjrcjw] {
    border: 1px solid #ff6b6b; /* 淡紅邊框 */
    background: linear-gradient(180deg, #ffecec 0%, #ffffff 40%);
}

.book-out[b-byx2yjrcjw] {
    border: 1px solid #4da3ff; /* 淡藍邊框 */
    background: linear-gradient(180deg, #eaf5ff 0%, #ffffff 40%);
}

/* checkbox 區塊 */
.bkpage-filter--checks[b-byx2yjrcjw] {
    gap: 0px; /* 上面的 label 跟下面的 checks 稍微近一點 */
    grid-column: span 2;

}

.bkpage-checkwrap[b-byx2yjrcjw] {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    padding-left: 8px;
}

.bkpage-checkbox[b-byx2yjrcjw] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: #333;
    cursor: pointer;
    margin-top: 10px;
    
}

    .bkpage-checkbox input[type="checkbox"][b-byx2yjrcjw] {
        width: 14px;
        height: 14px;
        accent-color: #0a84ff;
        cursor: pointer;
    }
/* /Pages/Pages_Management/BookModal.razor.rz.scp.css */
/* Apple 極簡風：乾淨留白、柔和陰影、圓角、細緻 focus ring */
.bk-modal[b-s9oixsixv6] {
    display: grid;
    gap: 12px;
    width: 1100px;
}

.bk-modal__header[b-s9oixsixv6] {
    padding: 4px 4px 0 4px;
}

.bk-title[b-s9oixsixv6] {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.2px;
    color: #0b0b0f;
}

.bk-form[b-s9oixsixv6] {
    background: #fff;
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06);
    border: 1px solid #ececf0;
}

.header-grid[b-s9oixsixv6] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
}

.bk-grid[b-s9oixsixv6] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
}

.bk-span-2[b-s9oixsixv6] {
    grid-column: 1 / -1; /* 佔滿兩欄 */
}

@media (max-width: 720px) {
    .bk-modal[b-s9oixsixv6] {
        width: 100%;
    }

    .bk-grid[b-s9oixsixv6] {
        grid-template-columns: 1fr;
    }
}

.bk-field[b-s9oixsixv6] {
    display: grid;
    gap: 6px;
}

.bk-label[b-s9oixsixv6] {
    font-size: 13px;
    color: #3a3a40;
    letter-spacing: 0.2px;
}

.bk-input[b-s9oixsixv6],
.bk-select[b-s9oixsixv6] {
    width: 100%;
    height: 40px;
    padding: 8px 12px;
    font-size: 14px;
    color: #0b0b0f;
    background: #fff;
    border: 1px solid #e3e5ea;
    border-radius: 12px;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
    -webkit-appearance: none;
    appearance: none;
}

    .bk-input:disabled[b-s9oixsixv6],
    .bk-select:disabled[b-s9oixsixv6] {
        background: #f7f8fb;
    }

.bk-input[b-s9oixsixv6]::placeholder {
    color: #9aa0a6;
}

    .bk-input:focus[b-s9oixsixv6],
    .bk-select:focus[b-s9oixsixv6] {
        background: #ffffff;
        border-color: #0a84ff;
        box-shadow: 0 0 0 3px rgba(10,132,255,0.15);
    }

.bk-select[b-s9oixsixv6] {
    /* 下拉選單 caret 視覺 */
    background-image: linear-gradient(45deg, transparent 50%, #7b7f86 50%), linear-gradient(135deg, #7b7f86 50%, transparent 50%), linear-gradient(to right, #e3e5ea, #e3e5ea);
    background-position: calc(100% - 18px) calc(50% - 3px), calc(100% - 12px) calc(50% - 3px), calc(100% - 32px) 50%;
    background-size: 6px 6px, 6px 6px, 1px 22px;
    background-repeat: no-repeat;
    padding-right: 36px;
}

.bk-actions[b-s9oixsixv6] {
    display: flex;
    gap: 10px;
    justify-content: space-between;
    padding-top: 8px;
    margin-top: 8px;
    border-top: 1px solid #f0f1f4;
}

.bk-btn[b-s9oixsixv6] {
    height: 40px;
    padding: 0 14px;
    font-size: 14px;
    border-radius: 12px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform .05s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
    user-select: none;
}

    .bk-btn:active[b-s9oixsixv6] {
        transform: translateY(0.5px);
    }

.bk-btn--ghost[b-s9oixsixv6] {
    background: #f7f8fb;
    color: #0b0b0f;
    border-color: #e3e5ea;
}

    .bk-btn--ghost:hover[b-s9oixsixv6] {
        background: #ffffff;
        box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    }

.bk-btn--primary[b-s9oixsixv6] {
    background: #0a84ff;
    color: #fff;
    box-shadow: 0 6px 16px rgba(10,132,255,0.25);
}

    .bk-btn--primary:hover[b-s9oixsixv6] {
        box-shadow: 0 8px 22px rgba(10,132,255,0.35);
    }

    .bk-btn--primary:focus[b-s9oixsixv6] {
        box-shadow: 0 0 0 3px rgba(10,132,255,0.2), 0 8px 22px rgba(10,132,255,0.35);
    }

/* 微互動：表單欄位的 hover */
.bk-input:hover[b-s9oixsixv6],
.bk-select:hover[b-s9oixsixv6] {
    border-color: #d8dbe2;
}

/* ================= 搜尋按鈕（條碼/ISBN） ================= */

.bk-btn-search[b-s9oixsixv6] {
    height: 40px;
    padding: 0 12px;
    font-size: 14px;
    border-radius: 12px;
    border: 1px solid #e3e5ea;
    background: #f7f8fb;
    color: #0b0b0f;
    cursor: pointer;
    transition: transform .05s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
    user-select: none;
    white-space: nowrap;
}

    .bk-btn-search:hover[b-s9oixsixv6] {
        background: #ffffff;
        border-color: #d8dbe2;
        box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    }

    .bk-btn-search:focus[b-s9oixsixv6] {
        outline: none;
        box-shadow: 0 0 0 3px rgba(10,132,255,0.2);
    }

    .bk-btn-search:active[b-s9oixsixv6] {
        transform: translateY(0.5px);
    }

    .bk-btn-search:disabled[b-s9oixsixv6],
    .bk-btn-search[disabled][b-s9oixsixv6] {
        opacity: .55;
        cursor: not-allowed;
        box-shadow: none;
    }

/* 讓輸入框與搜尋鈕同列（支援 :has 的瀏覽器時啟用） */
@supports (selector(:has(*))) {
    .bk-field:has(> .bk-btn-search) .bk-input[b-s9oixsixv6] {
        display: inline-block;
        width: calc(100% - 96px); /* 96 = 12+padding+button寬度空間，視需要調整 */
        vertical-align: middle;
    }

    .bk-field:has(> .bk-btn-search) .bk-btn-search[b-s9oixsixv6] {
        display: inline-block;
        vertical-align: middle;
        margin-left: 8px;
    }
}

/* Fallback：不支援 :has 時的同列策略 */
.bk-field > .bk-input + .bk-btn-search[b-s9oixsixv6] {
    margin-left: 8px;
    vertical-align: middle;
}

/* 手機：上下排列避免擁擠 */
@media (max-width: 480px) {
    @supports (selector(:has(*))) {
        .bk-field:has(> .bk-btn-search) .bk-input[b-s9oixsixv6] {
            display: block;
            width: 100%;
            margin-bottom: 8px;
        }

        .bk-field:has(> .bk-btn-search) .bk-btn-search[b-s9oixsixv6] {
            display: inline-block;
            margin-left: 0;
        }
    }
}

.input-field[b-s9oixsixv6] {
    display: flex;
    gap: 8px;
}

.bk-textarea[b-s9oixsixv6] {
    width: 100%;
    min-height: 80px;
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 10px;
    font-size: 14px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif;
    background-color: #fff;
    color: #111;
    resize: vertical;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

    .bk-textarea:focus[b-s9oixsixv6] {
        border-color: #0a84ff; /* iOS 藍 */
        box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.2);
        outline: none;
    }

    .bk-textarea:disabled[b-s9oixsixv6] {
        background-color: #f5f5f7;
        color: #888;
        cursor: not-allowed;
    }
/* /Pages/Pages_Management/BookPage.razor.rz.scp.css */
/* === 版面 === */
.book-page[b-jib5b49j97] {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 16px;
    padding: 12px;
}

@media (max-width: 900px) {
    .book-page[b-jib5b49j97] {
        grid-template-columns: 1fr;
    }
}

/* === 工具（中文文字） === */
.text-tools[b-jib5b49j97] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tools-title[b-jib5b49j97] {
    font-size: 14px;
    font-weight: 700;
    color: #4b5563;
    margin-bottom: 2px;
}

.textbtn[b-jib5b49j97] {
    display: block;
    width: 100%;
    text-align: center;
    padding: 10px 12px;
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    cursor: pointer;
    transition: background .12s ease, transform .08s ease, box-shadow .12s ease;
}

    .textbtn:hover[b-jib5b49j97] {
        background: #f3f4f6;
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(0,0,0,.06);
    }

    .textbtn:active[b-jib5b49j97] {
        transform: translateY(0);
        box-shadow: none;
    }

/* === 內容 === */
.content[b-jib5b49j97] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* KPI 區：四格 */
.headline[b-jib5b49j97] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 12px;
}

@media (max-width: 1100px) {
    .headline[b-jib5b49j97] {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}

@media (max-width: 600px) {
    .headline[b-jib5b49j97] {
        grid-template-columns: 1fr;
    }
}

/* KPI 卡片共同樣式 */
.metric[b-jib5b49j97] {
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    padding: 12px 14px;
    text-align: left;
}

.metric-title[b-jib5b49j97] {
    font-size: 14px;
    font-weight: 700;
    color: #374151;
}

.metric-row[b-jib5b49j97] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 6px;
}

.metric-num[b-jib5b49j97] {
    font-size: 32px;
    font-weight: 800;
    line-height: 1;
}

.metric-unit[b-jib5b49j97] {
    font-size: 14px;
    color: #6b7280;
    font-weight: 600;
}

/* 主總數（綠） */
.metric-total[b-jib5b49j97] {
    background: #10b981;
    border-color: #10b981;
    color: #fff;
}

    .metric-total .metric-title[b-jib5b49j97] {
        color: #e7fff5;
    }

    .metric-total .metric-unit[b-jib5b49j97] {
        color: #e7fff5;
    }

/* 其餘三塊做成膠囊按鈕 */
.metric-pill[b-jib5b49j97] {
    cursor: pointer;
    border-radius: 18px;
    transition: transform .08s ease, box-shadow .12s ease, background .12s ease;
}

    .metric-pill:hover[b-jib5b49j97] {
        transform: translateY(-1px);
        box-shadow: 0 4px 16px rgba(0,0,0,.06);
    }

.metric-blue[b-jib5b49j97] {
    background: #f1f7ff;
    border-color: #e0edff;
}

.metric-red[b-jib5b49j97] {
    background: #fff2f2;
    border-color: #ffe0e0;
}

.metric-yellow[b-jib5b49j97] {
    background: #fffae8;
    border-color: #fff0b8;
}

/* 區塊容器 */
.panel[b-jib5b49j97] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 10px;
}

.panel-title[b-jib5b49j97] {
    font-size: 15px;
    font-weight: 800;
    margin: 6px 8px 10px;
    color: #111827;
}

/* Key-Value 列表 */
.kv-list[b-jib5b49j97] {
    list-style: none;
    margin: 0;
    padding: 6px;
}

.kv-item[b-jib5b49j97] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid #eef2f7;
    background: #fafafa;
    margin: 6px 0;
    font-size: 14px;
}

    .kv-item.clickable[b-jib5b49j97] {
        cursor: pointer;
        transition: transform .08s ease, box-shadow .12s ease;
    }

        .kv-item.clickable:hover[b-jib5b49j97] {
            transform: translateY(-1px);
            box-shadow: 0 2px 10px rgba(0,0,0,.06);
        }

    .kv-item .value[b-jib5b49j97] {
        justify-self: end;
        font-weight: 800;
        color: #111827;
    }

/* 標籤 */
.tag[b-jib5b49j97] {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 12px;
    border: 1px solid transparent;
    background: #f3f4f6;
    font-weight: 600;
    color: #111827;
}

.tag-primary[b-jib5b49j97] {
    background: #eff6ff;
    border-color: #dbeafe;
}

.tag-success[b-jib5b49j97] {
    background: #ecfdf5;
    border-color: #d1fae5;
}

/* 提示徽章 */
.hint[b-jib5b49j97] {
    margin-left: 8px;
    font-size: 12px;
}

.hint-green[b-jib5b49j97] {
    color: #059669;
}

.hint-red[b-jib5b49j97] {
    color: #dc2626;
}

/* 手風琴 */
.acc[b-jib5b49j97] {
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    margin: 10px 0;
    padding: 2px 8px;
    background: #fff;
}

.acc-head[b-jib5b49j97] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    cursor: pointer;
    font-size: 14px;
}

.acc-title[b-jib5b49j97] {
    font-weight: 800;
    color: #1f2937;
}

.acc-total[b-jib5b49j97] {
    font-weight: 800;
    color: #4b5563;
}


/* 外層手風琴（整個 panel 可收合） */
.acc-root[b-jib5b49j97] {
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    background: #fff;
    margin-bottom: 0px;
    padding: 0; /* 用 summary 內距 */
    overflow: hidden;
}

    .acc-root summary[b-jib5b49j97] {
        list-style: none; /* 隱藏預設 marker */
    }

.acc-root-head[b-jib5b49j97] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    cursor: pointer;
    user-select: none;
}

    .acc-root-head .acc-title[b-jib5b49j97] {
        font-size: 15px;
        font-weight: 800;
        color: #111827;
    }

    .acc-root-head .acc-total[b-jib5b49j97] {
        font-weight: 800;
        color: #4b5563;
    }

    /* 自訂箭頭 */
    .acc-root-head[b-jib5b49j97]::after {
        content: "";
        width: 10px;
        height: 10px;
        border-right: 2px solid #6b7280;
        border-bottom: 2px solid #6b7280;
        transform: rotate(-45deg);
        transition: transform .15s ease;
        margin-left: 8px;
    }

.acc-root[open] .acc-root-head[b-jib5b49j97]::after {
    transform: rotate(45deg);
}

/* 展開時的內容內距 */
.acc-root[open] > *:not(.acc-root-head)[b-jib5b49j97] {
    padding: 0 10px 10px 10px;
}

/* 內層 acc（你原本就有）微調頂/底距離 */
.acc[b-jib5b49j97] {
    margin: 10px 10px;
}

/* 卡片網格：大尺寸 6 欄，小尺寸 2 欄（中間斷點可依需要調整） */
.card-grid[b-jib5b49j97] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    padding: 6px;
}

@media (max-width: 1100px) {
    .card-grid[b-jib5b49j97] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 750px) {
    .card-grid[b-jib5b49j97] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .card-grid[b-jib5b49j97] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* 卡片本體 */
.card[b-jib5b49j97] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid #eef2f7;
    border-radius: 12px;
    background: #fff;
    text-align: left;
}

/* 可點擊卡片的互動 */
.card-click[b-jib5b49j97] {
    cursor: pointer;
    transition: transform .08s ease, box-shadow .12s ease, background .12s ease;
}

    .card-click:hover[b-jib5b49j97] {
        transform: translateY(-1px);
        box-shadow: 0 2px 10px rgba(0,0,0,.06);
        background: #fafafa;
    }

/* 卡片內的元素 */
.card-title[b-jib5b49j97] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.card-sub[b-jib5b49j97] {
    color: #6b7280;
}

/* 右側數值 */
.card-right[b-jib5b49j97] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.card-value[b-jib5b49j97] {
    font-weight: 800;
    color: #111827;
}

/* 沿用既有的 tag/hint 顏色 */
/* /Pages/Pages_Management/BookQRCodeListModal.razor.rz.scp.css */
/* /Pages/Pages_Management/BookQRCodeRow.razor.rz.scp.css */
/* =========================
   Book Asset Label (Strip)
   ========================= */

.blabel-loading[b-lbhxrjlh1o] {
    display: grid;
    place-items: center;
    gap: 10px;
    padding: 24px 18px;
}

.blabel-loading-text[b-lbhxrjlh1o] {
    font-size: 13px;
    color: rgba(15,23,42,.58);
}

/* 這條就是「可截圖去印」的標籤 */
.blabel-strip[b-lbhxrjlh1o] {
    display: flex;
    align-items: stretch;
    gap: 14px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #fff;
    border: 1.6px solid rgba(15,23,42,.28);
    box-shadow: 0 1px 0 rgba(15,23,42,.06);
}

/* 左側資訊區 */
.blabel-info[b-lbhxrjlh1o] {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    align-content: center;
    gap: 6px;
}

/* 書名：大、粗、單行省略 */
.blabel-title[b-lbhxrjlh1o] {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: .2px;
    line-height: 1.15;
    color: #0f172a;
    /*overflow: hidden;*/
/*    text-overflow: ellipsis;
    white-space: nowrap;*/
}

/* 作者：次要資訊 */
.blabel-sub[b-lbhxrjlh1o] {
    font-size: 14px;
    font-weight: 650;
    color: rgba(15,23,42,.68);
/*    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;*/
}

/* 分類 chips：三個最多一行（可換行） */
.blabel-chips[b-lbhxrjlh1o] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    /*margin-top: 2px;*/
}

.blabel-chip[b-lbhxrjlh1o] {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 750;
    letter-spacing: .2px;
    background: rgba(15,23,42,.06);
    border: 1px solid rgba(15,23,42,.14);
    color: rgba(15,23,42,.88);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 條碼文字：給人工對照 */
.blabel-barcode[b-lbhxrjlh1o] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    /*margin-top: 2px;*/
}

.blabel-barcode-k[b-lbhxrjlh1o] {
    font-size: 14px;
    font-weight: 800;
    color: rgba(15,23,42,.55);
    letter-spacing: .3px;
}

.blabel-barcode-v[b-lbhxrjlh1o] {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .6px;
    color: #0f172a;
    word-break: break-all;
}

/* 右側 QR：固定方形，方便貼書背/封面 */
.blabel-qr[b-lbhxrjlh1o] {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    padding: 6px;
    border-radius: 10px;
    border: 1px solid rgba(15,23,42,.18);
    background: #fff;
}

.blabel-qrimg[b-lbhxrjlh1o] {
    width: 120px;
    height: 120px;
    object-fit: contain;
    border-radius: 8px;
    border: 1px solid rgba(15,23,42,.12);
    background: #fff;
}

.blabel-qrph[b-lbhxrjlh1o] {
    width: 120px;
    height: 120px;
    border-radius: 8px;
    border: 1px dashed rgba(15,23,42,.25);
    background: rgba(15,23,42,.03);
}

/* 備註：預設小字一行省略（避免標籤太高） */
.blabel-remark[b-lbhxrjlh1o] {
    margin-top: 8px;
    padding: 6px 10px;
    border-radius: 8px;
    background: rgba(15,23,42,.035);
    border: 1px solid rgba(15,23,42,.12);
    font-size: 12px;
    font-weight: 650;
    color: rgba(15,23,42,.75);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 列印/截圖友善：去陰影、保留邊框 */
@media print {
    .blabel-strip[b-lbhxrjlh1o] {
        box-shadow: none;
        border-color: #111827;
    }
}
/* /Pages/Pages_Medicine/MedicineFormModal.razor.rz.scp.css */
.med-modal[b-4aofndjs6n] {
    width: 100%;
    min-width: 600px;
    max-width: 720px;
    padding: 16px 18px 18px;
    box-sizing: border-box;
    background-color: #ffffff;
    border-radius: 18px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.12);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.med-header[b-4aofndjs6n] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 4px;
}

.med-title[b-4aofndjs6n] {
    font-size: 18px;
    font-weight: 600;
    color: #0f172a;
    letter-spacing: 0.01em;
}

.med-subtitle[b-4aofndjs6n] {
    font-size: 13px;
    color: #6b7280;
}

.med-section[b-4aofndjs6n] {
    padding: 12px 12px 10px;
    border-radius: 14px;
    background-color: #fafafa;
    border: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.med-section-header[b-4aofndjs6n] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.med-section-title[b-4aofndjs6n] {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
}

.med-section-desc[b-4aofndjs6n] {
    font-size: 12px;
    color: #9ca3af;
    margin-top: 2px;
}

/* Grid */
.med-grid[b-4aofndjs6n] {
    display: grid;
    gap: 10px 12px;
}

.med-grid-2[b-4aofndjs6n] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Field */
.field[b-4aofndjs6n] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.field-label[b-4aofndjs6n] {
    font-size: 13px;
    color: #4b5563;
}

.ipt[b-4aofndjs6n] {
    width: 100%;
    box-sizing: border-box;
    padding: 7px 10px;
    font-size: 14px;
    border-radius: 10px;
    border: 1px solid #d1d5db;
    background-color: #ffffff;
    color: #111827;
    outline: none;
    transition: border-color 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
    appearance: none;
}

    .ipt:focus[b-4aofndjs6n] {
        border-color: #3b82f6;
        box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.24);
        background-color: #f9fafb;
    }

    .ipt:disabled[b-4aofndjs6n] {
        background-color: #f3f4f6;
        color: #9ca3af;
    }

/* 數量 inline 排版 */
.field-inline[b-4aofndjs6n] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.field-inline-input[b-4aofndjs6n] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ipt-qty[b-4aofndjs6n] {
    max-width: 96px;
    text-align: right;
}

.unit-label[b-4aofndjs6n] {
    font-size: 13px;
    color: #6b7280;
}

/* 藥品卡片 */
.med-item-list[b-4aofndjs6n] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 2px;
}

.med-item-card[b-4aofndjs6n] {
    display: flex;
    gap: 10px;
    padding: 10px 10px 8px;
    border-radius: 12px;
    background-color: #fefefe;
    border: 1px solid #e5e7eb;
    align-items: flex-start;
    transition: background-color 0.12s ease, box-shadow 0.12s ease, transform 0.08s ease;
}

    .med-item-card:hover[b-4aofndjs6n] {
        background-color: #f9fafb;
        box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06);
        transform: translateY(-1px);
    }

.med-item-main[b-4aofndjs6n] {
    flex: 1;
}

/* 刪除 icon button */
.med-icon-btn[b-4aofndjs6n] {
    border: none;
    background: transparent;
    font-size: 12px;
    color: #9ca3af;
    padding: 4px 6px;
    border-radius: 999px;
    cursor: pointer;
    align-self: flex-start;
    transition: background-color 0.12s ease, color 0.12s ease, transform 0.08s ease;
    white-space: nowrap;
}

    .med-icon-btn:hover[b-4aofndjs6n] {
        background-color: #fee2e2;
        color: #b91c1c;
        transform: translateY(-0.5px);
    }

/* 空狀態 */
.med-empty[b-4aofndjs6n] {
    padding: 16px 10px 14px;
    border-radius: 12px;
    border: 1px dashed #e5e7eb;
    background-color: #f9fafb;
    display: flex;
    align-items: center;
    gap: 10px;
}

.med-empty-icon[b-4aofndjs6n] {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    background: radial-gradient(circle at 30% 30%, #e5e7eb, #f3f4f6);
}

.med-empty-text[b-4aofndjs6n] {
    font-size: 13px;
    color: #6b7280;
}

/* Footer buttons */
.med-footer[b-4aofndjs6n] {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 4px;
}

.med-btn[b-4aofndjs6n] {
    appearance: none;
    border: 1px solid #d1d5db;
    border-radius: 999px;
    padding: 7px 14px;
    font-size: 14px;
    cursor: pointer;
    background-color: #ffffff;
    color: #111827;
    transition: background-color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease, transform 0.06s ease, opacity 0.12s ease;
}

    .med-btn:disabled[b-4aofndjs6n] {
        opacity: 0.6;
        cursor: default;
    }

.med-btn-primary[b-4aofndjs6n] {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    border-color: #1d4ed8;
    color: #ffffff;
    box-shadow: 0 10px 25px rgba(37, 99, 235, 0.35);
}

    .med-btn-primary:hover:not(:disabled)[b-4aofndjs6n] {
        background: linear-gradient(135deg, #1d4ed8, #1e40af);
        border-color: #1e40af;
        transform: translateY(-1px);
    }

.med-btn-ghost[b-4aofndjs6n] {
    background-color: #ffffff;
    border-color: #e5e7eb;
    color: #111827;
}

    .med-btn-ghost:hover:not(:disabled)[b-4aofndjs6n] {
        background-color: #f9fafb;
        border-color: #d1d5db;
    }

/* RWD：窄螢幕時改為單欄 */
@media (max-width: 640px) {
    .med-modal[b-4aofndjs6n] {
        padding: 14px;
        border-radius: 16px;
        box-shadow: 0 14px 36px rgba(15, 23, 42, 0.16);
        min-width: 0;
    }

    .med-grid-2[b-4aofndjs6n] {
        grid-template-columns: minmax(0, 1fr);
    }

    .med-section[b-4aofndjs6n] {
        padding: 10px 10px 8px;
    }

    .med-footer[b-4aofndjs6n] {
        flex-direction: column;
        gap: 1em;
        align-items: stretch;
    }

    .med-btn[b-4aofndjs6n] {
        width: 100%;
        justify-content: center;
    }
}
/* /Pages/Pages_Medicine/MedicinePage.razor.rz.scp.css */
/* 整體頁面 */
.sm-page[b-c6j2uzkucs] {
    padding: 12px 16px 16px;
    background-color: #f5f5f7;
    box-sizing: border-box;
    min-height: 100vh;
}


.sm-top-actions[b-c6j2uzkucs] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.sm-func-btn[b-c6j2uzkucs] {
    appearance: none;
    border-radius: 999px;
    border: 1px solid #d1d5db;
    padding: 8px 16px;
    font-size: 14px;
    background-color: #ffffff;
    color: #111827;
    cursor: pointer;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.06s ease;
    width: 100%;
}

    .sm-func-btn:hover[b-c6j2uzkucs] {
        background-color: #f9fafb;
        box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);
        transform: translateY(-0.5px);
    }

.sm-top-search[b-c6j2uzkucs] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-end;
    background-color: #ffffff;
    padding: 10px 12px;
    border-radius: 16px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

.sm-top-search-wide[b-c6j2uzkucs] {
    width: 100%;
    justify-content: flex-start;
}

/* 下方主體：左 summary + 右 detail */
.sm-body[b-c6j2uzkucs] {
    margin-top: 10px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.sm-sidebar[b-c6j2uzkucs] {
    width: 260px;
    max-width: 100%;
    display: grid;
    gap: 16px;
}

.sm-main[b-c6j2uzkucs] {
    flex: 1;
    min-width: 0;
}

/* 共用表單欄位 */
.sm-field[b-c6j2uzkucs] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sm-inline-field[b-c6j2uzkucs] {
    min-width: 130px;
}

.sm-label[b-c6j2uzkucs] {
    font-size: 14px;
    color: #6b7280;
}

.sm-input[b-c6j2uzkucs],
.sm-select[b-c6j2uzkucs] {
    width: 100%;
    box-sizing: border-box;
    border-radius: 12px;
    border: 1px solid #d1d5db;
    padding: 7px 10px;
    font-size: 14px;
    color: #111827;
    background-color: #ffffff;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

    .sm-input:focus[b-c6j2uzkucs],
    .sm-select:focus[b-c6j2uzkucs] {
        border-color: #2563eb;
        box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.3);
        background-color: #f9fafb;
    }

/* 按鈕 */
.sm-btn[b-c6j2uzkucs] {
    appearance: none;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    background-color: #e5e7eb;
    color: #111827;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.06s ease, box-shadow 0.15s ease;
    outline: none;
}

.sm-btn-primary[b-c6j2uzkucs] {
    background-color: #0f172a;
    border-color: #0f172a;
    color: #f9fafb;
}

.sm-btn:hover[b-c6j2uzkucs] {
    transform: translateY(-0.5px);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.15);
}

.sm-btn:active[b-c6j2uzkucs] {
    transform: translateY(0);
    box-shadow: none;
}

/* 左側 Summary Card */
.sm-summary-card[b-c6j2uzkucs] {
    background-color: #ffffff;
    border-radius: 20px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
    padding: 12px;
}

.sm-summary-empty[b-c6j2uzkucs] {
    padding: 22px 6px;
    text-align: center;
    font-size: 14px;
    color: #6b7280;
}

.sm-summary-section + .sm-summary-section[b-c6j2uzkucs] {
    border-top: 1px solid #e5e7eb;
    margin-top: 6px;
    padding-top: 6px;
}

.sm-summary-date-header[b-c6j2uzkucs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 6px;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

    .sm-summary-date-header:hover[b-c6j2uzkucs] {
        background-color: #f3f4f6;
    }

    .sm-summary-date-header.active[b-c6j2uzkucs] {
        background-color: #0f172a;
    }

        .sm-summary-date-header.active .sm-summary-date-text[b-c6j2uzkucs] {
            color: #f9fafb;
        }

        .sm-summary-date-header.active .sm-summary-count[b-c6j2uzkucs] {
            background-color: #f97316;
            color: #fff;
        }

.sm-summary-date-text[b-c6j2uzkucs] {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
}

.sm-summary-count[b-c6j2uzkucs] {
    min-width: 26px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background-color: #e5e7eb;
    font-size: 14px;
    color: #4b5563;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sm-summary-class-list[b-c6j2uzkucs] {
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sm-summary-class-row[b-c6j2uzkucs] {
    width: 100%;
    border: none;
    background: transparent;
    padding: 5px 6px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    cursor: pointer;
    transition: background-color 0.12s ease, transform 0.06s ease;
}

    .sm-summary-class-row:hover[b-c6j2uzkucs] {
        background-color: #f9fafb;
        transform: translateY(-0.5px);
    }

    .sm-summary-class-row.active[b-c6j2uzkucs] {
        background-color: #eef2ff;
    }

.sm-summary-class-name[b-c6j2uzkucs] {
    font-size: 14px;
    font-weight: 500;
    color: #111827;
}

.sm-summary-chip-row[b-c6j2uzkucs] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.sm-summary-chip[b-c6j2uzkucs] {
    font-size: 14px;
    border-radius: 999px;
    padding: 2px 6px;
    white-space: nowrap;
}

    .sm-summary-chip.pending[b-c6j2uzkucs] {
        background-color: #fef3c7;
        color: #92400e;
    }

    .sm-summary-chip.feed[b-c6j2uzkucs] {
        background-color: #dcfce7;
        color: #166534;
    }

    .sm-summary-chip.nofeed[b-c6j2uzkucs] {
        background-color: #fee2e2;
        color: #b91c1c;
    }

/* 右側工具列 */
.sm-toolbar[b-c6j2uzkucs] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    gap: 8px;
}

.sm-toolbar-left[b-c6j2uzkucs] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sm-toolbar-right[b-c6j2uzkucs] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.sm-badge-tab[b-c6j2uzkucs] {
    font-size: 14px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    background-color: #111827;
    color: #f9fafb;
}

.sm-badge-muted[b-c6j2uzkucs] {
    font-size: 14px;
    color: #6b7280;
}

/* 視圖切換 */
.sm-toggle[b-c6j2uzkucs] {
    appearance: none;
    border-radius: 999px;
    border: 1px solid #d1d5db;
    padding: 5px 12px;
    font-size: 14px;
    background-color: #ffffff;
    color: #4b5563;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

    .sm-toggle.active[b-c6j2uzkucs] {
        background-color: #111827;
        border-color: #111827;
        color: #f9fafb;
        box-shadow: 0 8px 18px rgba(15, 23, 42, 0.2);
    }

/* 內容卡 */
.sm-content[b-c6j2uzkucs] {
    background-color: #ffffff;
    border-radius: 20px;
    padding: 10px 12px 12px;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
}

.sm-empty[b-c6j2uzkucs] {
    padding: 36px 12px;
    text-align: center;
}

.sm-empty-icon[b-c6j2uzkucs] {
    width: 40px;
    height: 40px;
    margin: 0 auto 10px;
    border-radius: 50%;
    border: 1px dashed #d1d5db;
}

.sm-empty-text[b-c6j2uzkucs] {
    font-size: 14px;
    color: #6b7280;
}

/* 區段（班級 / 時段） */
.sm-section[b-c6j2uzkucs] {
    padding: 10px 4px 6px;
    border-bottom: 1px solid #e5e7eb;
}

    .sm-section:last-child[b-c6j2uzkucs] {
        border-bottom: none;
    }

.sm-section-header[b-c6j2uzkucs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.sm-section-title-wrap[b-c6j2uzkucs] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sm-section-title[b-c6j2uzkucs] {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
}

.sm-pill[b-c6j2uzkucs] {
    font-size: 14px;
    color: #4b5563;
    padding: 2px 8px;
    border-radius: 999px;
    background-color: #f3f4f6;
}

/* group list */
.sm-group-list[b-c6j2uzkucs] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sm-group-row:last-child[b-c6j2uzkucs] {
    border-bottom: none;
}

.sm-group-row[b-c6j2uzkucs] {
    display: flex;
    flex-direction: row;
    gap: 10px;
    padding: 7px 8px;
    border-radius: 14px;
    transition: background-color 0.12s ease, transform 0.06s ease;
    cursor: default;
    border-bottom: 1px solid #f5f5f5;
}



/* 左側 meta */
.sm-group-meta[b-c6j2uzkucs] {
    min-width: 300px;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sm-meta-line[b-c6j2uzkucs] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* 右側 body */
.sm-group-body[b-c6j2uzkucs] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* chip 樣式 */
.sm-chip[b-c6j2uzkucs] {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 14px;
    white-space: nowrap;
}

.sm-chip-date[b-c6j2uzkucs] {
    background-color: #f3f4f6;
    color: #111827;
}

.sm-chip-timing[b-c6j2uzkucs] {
    background-color: #e0f2fe;
    color: #0f172a;
}

.sm-chip-class[b-c6j2uzkucs] {
    background-color: #eef2ff;
    color: #111827;
}

.sm-chip-student[b-c6j2uzkucs] {
    background-color: #fef3c7;
    color: #92400e;
}

/* 單筆藥描述列 */
.sm-med-line[b-c6j2uzkucs] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    line-height: 1.5;
    color: #111827;
}

.sm-med-text[b-c6j2uzkucs] {
    font-weight: 500;
}

/* 小分隔點 */
.sm-dot[b-c6j2uzkucs] {
    font-size: 14px;
    color: #9ca3af;
}

/* 備註 / 狀態 / 老師 / meta */
.sm-remark[b-c6j2uzkucs] {
    font-size: 14px;
    color: #4b5563;
}

.sm-status[b-c6j2uzkucs] {
    font-size: 14px;
    font-weight: 600;
}

.sm-status-ok[b-c6j2uzkucs] {
    color: #15803d;
}

.sm-status-no[b-c6j2uzkucs] {
    color: #b91c1c;
}

.sm-teacher[b-c6j2uzkucs] {
    font-size: 14px;
    color: #6b7280;
}

.sm-feeder[b-c6j2uzkucs] {
    font-size: 14px;
    color: #f97316; /* 橘色文字 */
    font-weight: 600; /* 稍微加粗，區別老師 */
}

.sm-meta-mini[b-c6j2uzkucs] {
    font-size: 14px;
    color: #9ca3af;
}

/* 小連結按鈕（處方箋 / 簽名） */
.sm-link[b-c6j2uzkucs] {
    appearance: none;
    border: none;
    padding: 0 6px;
    background: transparent;
    font-size: 14px;
    color: #2563eb;
    cursor: pointer;
    border-radius: 999px;
}

    .sm-link:hover[b-c6j2uzkucs] {
        background-color: rgba(37, 99, 235, 0.06);
    }

/* RWD */
@media (max-width: 900px) {
    .sm-body[b-c6j2uzkucs] {
        flex-direction: column;
    }

    .sm-sidebar[b-c6j2uzkucs] {
        position: static;
        width: 100%;
    }

    .sm-group-row[b-c6j2uzkucs] {
        flex-direction: column;
    }

    .sm-group-meta[b-c6j2uzkucs] {
        max-width: 100%;
        flex-direction: row;
        justify-content: space-between;
    }
}

/* 共用的小球外觀 */
.wait-process[b-c6j2uzkucs],
.finished-ok[b-c6j2uzkucs],
.finished-ng[b-c6j2uzkucs] {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 6px;
    border-radius: 50%;
    vertical-align: middle;
}

/* 處理中：橘色、會跳 */
.wait-process[b-c6j2uzkucs] {
    background: #fda156;
    opacity: 0.5;
    animation: waitpulse-b-c6j2uzkucs 0.8s ease-in-out infinite;
}

@keyframes waitpulse-b-c6j2uzkucs {
    0% {
        transform: scale(0.7);
        opacity: 0.4;
    }

    50% {
        transform: scale(1.0);
        opacity: 1;
    }

    100% {
        transform: scale(0.7);
        opacity: 0.4;
    }
}

/* 完成 OK：綠色，不跳 */
.finished-ok[b-c6j2uzkucs] {
    background: #22c55e; /* 可以改成你喜歡的綠色 */
    opacity: 1;
    /* 不要加 animation 就不會跳 */
}

/* 完成 NG：紅色，不跳 */
.finished-ng[b-c6j2uzkucs] {
    background: #ef4444; /* 可以改成你喜歡的紅色 */
    opacity: 1;
}
/* /Pages/Pages_Medicine/MedicinePhotoListModal.razor.rz.scp.css */
/* 最外層：給 modal 內一個有 padding 的區塊 */
.medphotolist-container[b-hj7onn4fjz] {
    padding: 12px 4px 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;

}

/* 標題列 ------------------------------------------------ */

.medphotolist-header[b-hj7onn4fjz] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0 4px 4px;
}

.medphotolist-title[b-hj7onn4fjz] {
    font-size: 15px;
    font-weight: 600;
    color: #111827;
}

.medphotolist-subtitle[b-hj7onn4fjz] {
    font-size: 12px;
    color: rgba(60, 60, 67, 0.7);
}

/* 清單區：限制高度、可滾動 -------------------------------- */

.medphotolist-content[b-hj7onn4fjz] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 65vh;
    overflow-y: auto;
    padding-right: 4px;
    padding-bottom: 150px;
}

/* 單一相片卡片 ------------------------------------------ */

.medphoto-item[b-hj7onn4fjz] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    padding: 10px 12px;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    margin: 0 4px;
}

/* 小螢幕一欄顯示 */
@media (max-width: 640px) {
    .medphoto-item[b-hj7onn4fjz] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* 左側文字資訊 ------------------------------------------ */

.medphoto-info[b-hj7onn4fjz] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.medphoto-stu[b-hj7onn4fjz] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.medphoto-stu-row[b-hj7onn4fjz] {
    font-size: 14px;
    font-weight: 500;
    color: #111827;
}

.medphoto-class[b-hj7onn4fjz] {
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(118, 118, 128, 0.12);
    font-size: 12px;
}

.medphoto-sep[b-hj7onn4fjz] {
    margin: 0 2px;
    color: rgba(60, 60, 67, 0.4);
}

.medphoto-name[b-hj7onn4fjz] {
    font-size: 14px;
}

.medphoto-badge[b-hj7onn4fjz] {
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(0, 122, 255, 0.08);
    color: #007aff;
    font-size: 12px;
}

/* 藥品文字區 */
.medphoto-meds[b-hj7onn4fjz] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.medphoto-medline[b-hj7onn4fjz] {
    font-size: 13px;
    line-height: 1.4;
    color: #1f2933;
}

.medphoto-medlabel[b-hj7onn4fjz] {
    display: inline-block;
    min-width: 40px;
    margin-right: 4px;
    font-size: 12px;
    color: rgba(60, 60, 67, 0.75);
}

/* 右側相片預覽 ------------------------------------------ */

.medphoto-preview[b-hj7onn4fjz] {
    display: flex;
    justify-content: center;
    align-items: center;
}

    /* 如果外面覺得卡片太大，可以這裡再稍微縮小 ZoomImage 容器 */
    .medphoto-preview .zoom-image-container[b-hj7onn4fjz] {
        max-width: 260px;
        max-height: 260px;
    }
/* /Pages/Pages_Medicine/MedicineProcessModal.razor.rz.scp.css */
/* ---------------------------------
   Modal Layout
-----------------------------------*/

.med-modal[b-mfsd2l909h] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px 18px 14px;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
    max-width: 1120px;
    max-height: 88vh;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    color: #111827;
}

/* Header ------------------------------------------------ */

.med-modal__header[b-mfsd2l909h] {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    border-bottom: 1px solid rgba(60, 60, 67, 0.12);
    padding-bottom: 10px;
}

.med-header__row[b-mfsd2l909h] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.med-header__meta[b-mfsd2l909h] {
    display: flex;
    justify-content: flex-end;
}

.med-header__status[b-mfsd2l909h] {
    padding: 8px 16px;
    font-size: 18px;
    color: rgba(60, 60, 67, 0.7);
}

.med-chip[b-mfsd2l909h] {
    padding: 8px 0;
    font-weight: bold;
    font-size: 16px;
}

.med-tag[b-mfsd2l909h] {
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(0, 122, 255, 0.08);
    color: #007aff;
    font-size: 16px;
    font-weight: 500;
}

/* ---------------------------------
   Body Layout
-----------------------------------*/

.med-modal__body[b-mfsd2l909h] {
    display: grid;
    /*grid-template-columns: 1fr 1fr;*/
    gap: 20px;
    min-height: 0;
}

@media (max-width: 640px) {
    .med-modal__body[b-mfsd2l909h] {
        grid-template-columns: 1fr;
    }
}

/* Left list area ---------------------------------------*/

.med-section--list[b-mfsd2l909h] {
    overflow-y: auto;
    padding-right: 6px;
    max-height: 60vh;
}

.list-title[b-mfsd2l909h] {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 12px;
}


.med-item[b-mfsd2l909h] {
    display: grid;
    grid-template-columns: 10px 1fr;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 12px;
    background: rgba(249, 249, 250, 0.95);
    margin-bottom: 6px;
}

.med-item__bullet[b-mfsd2l909h] {
    margin-top: 10px;
    width: 4px;
    height: 4px;
    background: #007aff;
    border-radius: 50%;
}

.med-item__desc[b-mfsd2l909h] {
    font-weight: 500;
    margin-bottom: 2px;
}

.med-label[b-mfsd2l909h] {
    min-width: 64px;
    color: rgba(60, 60, 67, 0.75);
    font-size: 12px;
}

.med-text[b-mfsd2l909h] {
    font-size: 13px;
}

/* ---------------------------------
   Right Photo Viewer
-----------------------------------*/

.med-section--photos[b-mfsd2l909h] {
    overflow: hidden !important; /* 禁止 scroll */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 外層容器 */
.photo-viewer[b-mfsd2l909h] {
    position: relative;
    width: 100%;
    height: 100%;
}

/* 圖片展示區 */
.photo-stage[b-mfsd2l909h] {
    width: 100%;
    height: 65vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 包住圖片，用於 JS 放大鏡 */
.med-photo-wrapper[b-mfsd2l909h] {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 圖片本體：完整顯示 (contain) */
.med-photo-img[b-mfsd2l909h] {
    max-width: 100%;
    max-height: 65vh;
    object-fit: contain;
    border-radius: 12px;
    background: #f2f2f7;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* ---------------------------------
   Photo Navigation Buttons
-----------------------------------*/

.photo-nav[b-mfsd2l909h] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background: rgba(250, 250, 250, 0.75);
    backdrop-filter: blur(4px);
    font-size: 20px;
    line-height: 38px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0,0,0,0.18);
    transition: 150ms ease;
}

    .photo-nav:hover[b-mfsd2l909h] {
        background: rgba(255,255,255,0.9);
        box-shadow: 0 6px 20px rgba(0,0,0,0.25);
    }

    .photo-nav.left[b-mfsd2l909h] {
        left: 6px;
    }

    .photo-nav.right[b-mfsd2l909h] {
        right: 6px;
    }

/* ---------------------------------
   Empty State
-----------------------------------*/

.med-empty[b-mfsd2l909h] {
    font-size: 13px;
    color: rgba(60, 60, 67, 0.8);
    padding: 8px 4px;
}

.med-empty--subtle[b-mfsd2l909h] {
    font-size: 12px;
    color: rgba(60,60,67,0.6);
}

/* ---------------------------------
   Footer Buttons
-----------------------------------*/

.med-modal__footer[b-mfsd2l909h] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(60, 60, 67, 0.12);
}

.med-btn[b-mfsd2l909h] {
    min-width: 96px;
    height: 34px;
    padding: 0 18px;
    border-radius: 999px;
    border: none;
    font-size: 14px;
    cursor: pointer;
    transition: 120ms ease;
}

.med-btn--primary[b-mfsd2l909h] {
    background: #007aff;
    color: #fff;
    box-shadow: 0 6px 14px rgba(0,122,255,.35);
}

    .med-btn--primary:hover[b-mfsd2l909h] {
        background: #0066d6;
    }



.med-btn--ghost[b-mfsd2l909h] {
    background: rgba(118,118,128,0.1);
}

    .med-btn--ghost:hover[b-mfsd2l909h] {
        background: rgba(118,118,128,0.18);
    }

.single-feed[b-mfsd2l909h] {
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    margin: 0 auto;
}

.single-feed:hover[b-mfsd2l909h] {
    text-decoration: underline;
}
/* /Pages/Pages_Medicine/TodayMedicineModal.razor.rz.scp.css */
/* 基本字體與區塊尺寸（包在 modal 內，寬 1200px） */
.med-modal[b-jqhv00rdon] {
    display: grid;
    place-items: center;
}

.med-container[b-jqhv00rdon] {
    width: 1200px;
    max-width: 100%;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    /*overflow: hidden;*/
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans TC", "PingFang TC", "Heiti TC", Arial, sans-serif;
    color: #0b0b0f;
}

/* 載入區 */
.med-loading[b-jqhv00rdon] {
    display: grid;
    place-items: center;
    padding: 48px 24px;
    text-align: center;
}

.med-loading-text[b-jqhv00rdon] {
    margin-top: 10px;
    font-size: 14px;
    color: #737780;
}

/* 內容外框 */
.med-wrap[b-jqhv00rdon] {
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 0;
}

/* Header 區：左統計、右未處理 */
.med-header[b-jqhv00rdon] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px;
    border-bottom: 1px solid #ececee;
    background: #fafafa;
}

.med-header-left .summary-text[b-jqhv00rdon] {
    font-weight: 600;
    font-size: 16px;
}

.med-header-left[b-jqhv00rdon],
.med-header-right[b-jqhv00rdon] {
    display: flex;
    gap: 10px;
}

.badge-pill[b-jqhv00rdon] {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.2px;
    background: #f2f3f5;
    color: #42464d;
    border: 1px solid #e7e8eb;
}

.badge-pill.warn[b-jqhv00rdon] {
    background: #fff5f3;
    color: #b0281a;
    border-color: #ffd8d2;
}

/* 內容可捲動 */
.med-content[b-jqhv00rdon] {
    /*max-height: 70vh;*/ /* 讓 modal 內部可捲動 */
    /*overflow: auto;*/
    padding: 12px 16px 20px;
    scrollbar-width: thin;
}

    .med-content[b-jqhv00rdon]::-webkit-scrollbar {
        width: 10px;
    }

    .med-content[b-jqhv00rdon]::-webkit-scrollbar-thumb {
        background: #d7d9de;
        border-radius: 8px;
    }

/* 時段群組 */
.timing-group[b-jqhv00rdon] {
    margin: 6px 0 18px;
}

.timing-head[b-jqhv00rdon] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 4px 10px;
}

.timing-chip[b-jqhv00rdon] {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    background: #f5f6f7;
    border: 1px solid #ececef;
    color: #2c2f36;
}

/* 卡片排列：自動等寬格 */
.med-grid[b-jqhv00rdon] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}



@media (max-width: 768px) {
    .med-container[b-jqhv00rdon] {
        width: 100%;
    }

        .med-grid[b-jqhv00rdon] {
        grid-template-columns: 1fr;
    }
}



/* 單張卡片：占 6 欄（兩張一列），RWD 會縮 */
.med-card[b-jqhv00rdon] {
    background: #ffffff;
    border: 1px solid #ececee;
    border-radius: 14px;
    padding: 14px 14px 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
    outline: none;
    transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
    cursor: pointer;
}


.med-card:hover[b-jqhv00rdon] {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

.med-card:focus-visible[b-jqhv00rdon] {
    border-color: #9ec8ff;
    box-shadow: 0 0 0 3px rgba(50,132,255,0.25);

}

/* 卡片上排：班級 - 學生 */
.card-row1[b-jqhv00rdon] {
    align-items: center;
    gap: 6px;
    font-weight: 650;
    color: #111114;
    letter-spacing: 0.2px;
    margin-bottom: 8px;
}

    .card-row1 span[b-jqhv00rdon] {
        margin-right: 4px;
    }

    .row1-class[b-jqhv00rdon],
    .row1-student[b-jqhv00rdon] {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.row1-sep[b-jqhv00rdon] {
    opacity: 0.4;
}

/* 卡片下排：類別 / 型態 / 數量 */
.card-row2[b-jqhv00rdon] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pill[b-jqhv00rdon] {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 550;
    background: #f6f7f9;
    border: 1px solid #ebedf0;
    color: #2e3238;
}

    .pill.qty[b-jqhv00rdon] {
        font-variant-numeric: tabular-nums;
        background: #eef7ff;
        border-color: #d5e9ff;
        color: #225ea8;
    }

/* 細節微調：按下/鍵盤操作感 */
.med-card:active[b-jqhv00rdon] {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}

/* 輕度分隔 */
.timing-group + .timing-group[b-jqhv00rdon] {
    border-top: 1px dashed #f0f1f3;
    padding-top: 14px;
}

.wait-process[b-jqhv00rdon] {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 6px;
    border-radius: 50%;
    background: #fda156; /* 橘色, 可換 #6b7280 為灰色 */
    opacity: 0.5;
    animation: waitpulse-b-jqhv00rdon 0.8s ease-in-out infinite;
    vertical-align: middle;
}

@keyframes waitpulse-b-jqhv00rdon {
    0% {
        transform: scale(0.7);
        opacity: 0.4;
    }

    50% {
        transform: scale(1.0);
        opacity: 1;
    }

    100% {
        transform: scale(0.7);
        opacity: 0.4;
    }
}

.text-waitprocess[b-jqhv00rdon] {
    color: #ff9922;
}
/* /Pages/Pages_Member/ClassFreshmanListPage.razor.rz.scp.css */
/* 根容器樣式 */
.page-container[b-ojixawb6v2] {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 0 20px;
}

/* 左側分類區 */
.left-section[b-ojixawb6v2] {
    flex: 0 0 400px;
    max-width: 350px;
    background-color: #f9f9f9;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    max-height: 100vh;
    overflow-y: auto;
}

.summary-area[b-ojixawb6v2] {
    margin-bottom: 15px;
}

    .summary-area span[b-ojixawb6v2] {
        display: block;
        margin: 5px 0;
        font-size: 1.1em;
        font-weight: bold;
    }

/* 列表區域 */
.list-area-header[b-ojixawb6v2] {
    font-size: 1.2em;
    font-weight: bold;
    margin: 10px 0;
}

.item-row[b-ojixawb6v2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
    margin: 4px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s;
}

    .item-row:hover[b-ojixawb6v2] {
        background-color: #e0e0e0;
    }

.item-name[b-ojixawb6v2], .item-gender[b-ojixawb6v2], .item-parent[b-ojixawb6v2], .item-date[b-ojixawb6v2], .item-status[b-ojixawb6v2] {
    margin-right: 10px;
    white-space: nowrap;
}

/* 右側詳細區 */
.right-section[b-ojixawb6v2] {
    flex: 1;
    padding: 20px 10px;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    max-height: 100vh;
    overflow-y: auto;
}

/* 基本資訊區塊 */
.basicinfo-container[b-ojixawb6v2] {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

.detail-area[b-ojixawb6v2] {
    flex: 1;
    padding: 10px;
    background-color: #f5f5f5;
    border-radius: 6px;
    margin-right: 10px;
}

.img-area[b-ojixawb6v2] {
    flex: 0 0 400px;
    max-width: 400px;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f0f0f0;
    border-radius: 8px;
}

.studentimg[b-ojixawb6v2] {
    max-width: 100%;
    max-height: 100%;
    border-radius: 5px;
}

/* 詳細資訊區塊 */
.detail-container[b-ojixawb6v2] {
    margin-top: 20px;
}

.detail-section[b-ojixawb6v2] {
    margin: 15px 0;
    padding: 10px;
    background-color: #f5f5f5;
    border-radius: 6px;
}

    .detail-section h4[b-ojixawb6v2] {
        font-size: 1.2em;
        margin-bottom: 8px;
        color: #0056b3;
    }

    .detail-section p[b-ojixawb6v2] {
        margin: 4px 0;
        font-size: 1em;
        color: #555;
    }

.alias[b-ojixawb6v2] {
    color: black;
}
/* 大尺寸螢幕 - page-container 2排, detail 2排 */
@media (min-width: 768px) {
    .page-container[b-ojixawb6v2] {
        flex-direction: row;
    }

    .basicinfo-container[b-ojixawb6v2] {
        flex-direction: row;
    }

    .detail-container[b-ojixawb6v2] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .detail-section[b-ojixawb6v2] {
        margin: 8px;
    }
}

}

/* 小尺寸螢幕 - 單排顯示 */
@media (max-width: 767px) {
    .page-container[b-ojixawb6v2] {
        flex-direction: column;
        gap: 20px;
    }

    .left-section[b-ojixawb6v2] {
        max-width: 100%;
        width: 100%;
        height: 30vh;
    }

    .right-section[b-ojixawb6v2] {
        max-width: 100%;
        width: 100%;
    }

    .basicinfo-container[b-ojixawb6v2] {
        flex-direction: column;
    }

    .img-area[b-ojixawb6v2] {
        width: 100%;
        height: auto;
        margin-top: 10px;
    }

    .detail-container[b-ojixawb6v2] {
        display: block;
        width: 100%;
    }

    .detail-section[b-ojixawb6v2] {
        margin: 10px 0;
    }
}

/* 手機樣式微調 */
@media (max-width: 480px) {
    .item-row[b-ojixawb6v2] {
        flex-direction: column;
        align-items: flex-start;
    }

    .item-name[b-ojixawb6v2], .item-gender[b-ojixawb6v2], .item-parent[b-ojixawb6v2], .item-date[b-ojixawb6v2], .item-status[b-ojixawb6v2] {
        margin-right: 0;
        margin-bottom: 5px;
    }

    .detail-section h4[b-ojixawb6v2] {
        font-size: 1.1em;
    }

    .detail-section p[b-ojixawb6v2] {
        font-size: 0.9em;
    }

    .studentimg[b-ojixawb6v2] {
        max-width: 100%;
        height: auto;
    }
}



/* 列印樣式 - 三排佈局 */
@media print {

    .page-container[b-ojixawb6v2] {
        padding: 0;
    }

    .right-section[b-ojixawb6v2] {
        flex: 1;
        padding: 0px;
        background-color: #fff;
        border: none;
        box-shadow: none;
        max-height: none;
        margin: 0;
        height: auto;
    }

    .basicinfo-container[b-ojixawb6v2] {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 15px;
        flex-wrap: wrap;
    }

    .detail-area[b-ojixawb6v2] {
        flex: 1;
        padding: 8px;
        background-color: #fff;
        margin-right: 5px;
    }

    .img-area[b-ojixawb6v2] {
        flex: 0 0 300px;
        max-width: 300px;
        height: 300px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #fff;
    }

    .studentimg[b-ojixawb6v2] {
        max-width: 100%;
        max-height: 100%;
        border-radius: 0;
    }

    .detail-container[b-ojixawb6v2] {
        margin-top: 15px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .detail-section[b-ojixawb6v2] {
        margin: 5px;
        padding: 8px;
        background-color: #fff;
        border: 1px solid #000;
        break-inside: avoid;
    }

        .detail-section h4[b-ojixawb6v2] {
            font-size: 1.1em;
            margin-bottom: 6px;
            color: #000;
        }

        .detail-section p[b-ojixawb6v2] {
            margin: 2px 0;
            font-size: .9em;
            color: #000;
        }

    /* 隱藏不必要元素 */
    .nav-bar[b-ojixawb6v2], .footer[b-ojixawb6v2], .btn[b-ojixawb6v2], .no-print[b-ojixawb6v2] {
        display: none;
    }

    /* 調整標題字型及間距 */
    h3[b-ojixawb6v2], h4[b-ojixawb6v2] {
        margin: 5px 0;
        font-size: 1.2em;
        color: #000;
    }

    /* 列印時標籤微調 */
    label[b-ojixawb6v2] {
        margin: 0;
        padding: 0;
        font-weight: bold;
    }

    /* 分隔線微調 */
    hr[b-ojixawb6v2] {
        margin: 5px 0;
        border: 1px solid #000;
    }

    /* 特別針對「其他調查」區塊，佔滿三格 */
    .detail-section.others-section[b-ojixawb6v2] {
        grid-column: span 3; /* 占三格 */
    }
}


@media print {
    .right-section[b-ojixawb6v2] {
        overflow-y: visible !important;
        height: auto !important;
    }

    .alias[b-ojixawb6v2] {
        text-decoration: underline;
    }
}
/* /Pages/Pages_Member/FamilyModal.razor.rz.scp.css */
/* 學生/家長資料 modal - sp = student/parent */

.sp-modal[b-h0x4m5nygu] {
    width: 800px;
    /*padding: 20px 24px 18px;*/
    box-sizing: border-box;
    /*background: #f9fafb;*/
    /*border-radius: 18px;*/
    /*box-shadow: 0 18px 60px rgba(0, 0, 0, 0.12);*/
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 1em;
}

/* Header */

.sp-modal-header[b-h0x4m5nygu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.sp-modal-title[b-h0x4m5nygu] {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #111827;
}

.sp-modal-subtitle[b-h0x4m5nygu] {
    margin-top: 2px;
    font-size: 14px;
    color: #6b7280;
}

.sp-close-button[b-h0x4m5nygu] {
    border: none;
    outline: none;
    padding: 6px 12px;
    font-size: 14px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.16);
    color: #111827;
    cursor: pointer;
    transition: background-color 0.18s ease, transform 0.08s ease;
    white-space: nowrap;
}

    .sp-close-button:hover[b-h0x4m5nygu] {
        background: rgba(148, 163, 184, 0.26);
        transform: translateY(-0.5px);
    }

/* Body */

.sp-modal-body[b-h0x4m5nygu] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.sp-section[b-h0x4m5nygu] {
    background: #ffffff;
    border-radius: 14px;
    padding: 12px 14px;
    box-sizing: border-box;
    /*box-shadow: 0 8px 28px rgba(15, 23, 42, 0.03);*/
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.12);
}

.sp-section-full[b-h0x4m5nygu] {
    width: 100%;
}

.sp-section-header[b-h0x4m5nygu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.sp-section-title[b-h0x4m5nygu] {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
}

.sp-section-tag[b-h0x4m5nygu] {
    font-size: 13px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #f3f4f6;
    color: #6b7280;
}

.sp-section-content[b-h0x4m5nygu] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Row */

.sp-row[b-h0x4m5nygu] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 4px 0;
    border-bottom: 1px solid rgba(15, 23, 42, 0.03);
}

    .sp-row:last-child[b-h0x4m5nygu] {
        border-bottom: none;
    }

.sp-row-inline[b-h0x4m5nygu] {
    align-items: center;
}

/* Label / Value */

.sp-label[b-h0x4m5nygu] {
    font-size: 14px;
    color: #9ca3af;
    min-width: 80px;
    flex-shrink: 0;
}

.sp-value[b-h0x4m5nygu] {
    font-size: 14px;
    color: #111827;
    text-align: right;
    flex: 1;
    word-break: break-all;
}

/* Pills / Chips */

.sp-pill[b-h0x4m5nygu] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    background: #f3f4f6;
    font-size: 14px;
    color: #111827;
    gap: 4px;
}

.sp-pill-warning[b-h0x4m5nygu] {
    background: #fef3c7;
    color: #92400e;
}

.sp-hint[b-h0x4m5nygu] {
    margin-left: 6px;
    font-size: 14px;
    color: #9ca3af;
}

.sp-muted[b-h0x4m5nygu] {
    font-size: 14px;
    color: #9ca3af;
}

.sp-chip[b-h0x4m5nygu] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 14px;
    background: #f3f4f6;
    color: #111827;
}

.sp-chip-separator[b-h0x4m5nygu] {
    margin: 0 3px;
    font-size: 13px;
    color: #d1d5db;
}

/* 子區塊 */

.sp-grid-two[b-h0x4m5nygu] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
}

.sp-sub-section[b-h0x4m5nygu] {
    border-radius: 12px;
    padding: 8px 10px;
    background: #f9fafb;
}

.sp-sub-title[b-h0x4m5nygu] {
    font-size: 14px;
    font-weight: 500;
    color: #4b5563;
    margin-bottom: 4px;
}

/* 按鈕群組 */

.sp-actions[b-h0x4m5nygu] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.sp-btn[b-h0x4m5nygu] {
    border: none;
    outline: none;
    padding: 7px 14px;
    font-size: 14px;
    border-radius: 999px;
    background: #111827;
    color: #f9fafb;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.08s ease, box-shadow 0.16s ease;
    white-space: nowrap;
}

    .sp-btn:hover[b-h0x4m5nygu] {
        background: #020617;
        box-shadow: 0 10px 30px rgba(15, 23, 42, 0.25);
        transform: translateY(-0.5px);
    }

    .sp-btn:active[b-h0x4m5nygu] {
        transform: translateY(0);
        box-shadow: 0 2px 12px rgba(15, 23, 42, 0.2);
    }

.sp-btn-danger[b-h0x4m5nygu] {
    background: #b91c1c;
}

    .sp-btn-danger:hover[b-h0x4m5nygu] {
        background: #991b1b;
        box-shadow: 0 10px 30px rgba(185, 28, 28, 0.25);
    }

.sp-btn-outline[b-h0x4m5nygu] {
    background: transparent;
    color: #111827;
    border: 1px solid rgba(148, 163, 184, 0.7);
}

    .sp-btn-outline:hover[b-h0x4m5nygu] {
        background: #f3f4f6;
    }

/* Footer */

.sp-modal-footer[b-h0x4m5nygu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 8px;
    margin-top: 4px;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
    gap: 12px;
}

.sp-updated[b-h0x4m5nygu] {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.sp-footer-close[b-h0x4m5nygu] {
    border: none;
    outline: none;
    padding: 6px 16px;
    font-size: 14px;
    border-radius: 999px;
    background: #111827;
    color: #f9fafb;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.08s ease;
}

    .sp-footer-close:hover[b-h0x4m5nygu] {
        background: #020617;
        transform: translateY(-0.5px);
    }

/* RWD */

@media (max-width: 640px) {
    .sp-modal[b-h0x4m5nygu] {
        width: 100%;
        padding: 16px 14px 14px;
        border-radius: 16px;
    }

    .sp-modal-header[b-h0x4m5nygu] {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    .sp-section[b-h0x4m5nygu] {
        padding: 10px 10px;
    }

    .sp-grid-two[b-h0x4m5nygu] {
        grid-template-columns: minmax(0, 1fr);
    }

    .sp-row[b-h0x4m5nygu] {
        flex-direction: column;
        align-items: flex-start;
    }

    .sp-value[b-h0x4m5nygu] {
        text-align: left;
    }

    .sp-actions[b-h0x4m5nygu] {
        flex-direction: column;
        align-items: stretch;
    }

    .sp-btn[b-h0x4m5nygu],
    .sp-footer-close[b-h0x4m5nygu],
    .sp-close-button[b-h0x4m5nygu] {
        width: 100%;
        text-align: center;
        justify-content: center;
        display: inline-flex;
        align-items: center;
    }

    .sp-modal-footer[b-h0x4m5nygu] {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* /Pages/Pages_Member/FreshmanListPage.razor.rz.scp.css */
/* 根容器樣式 */
.page-container[b-t3265uekvr] {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 0 20px;
}

/* 左側分類區 */
.left-section[b-t3265uekvr] {
    flex: 0 0 400px;
    max-width: 350px;
    background-color: #f9f9f9;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    max-height: 100vh;
    overflow-y: auto;
}

.summary-area[b-t3265uekvr] {
    margin-bottom: 15px;
}

    .summary-area span[b-t3265uekvr] {
        display: block;
        margin: 5px 0;
        font-size: 1.1em;
        font-weight: bold;
    }

/* 列表區域 */
.list-area-header[b-t3265uekvr] {
    font-size: 1.2em;
    font-weight: bold;
    margin: 10px 0;
}

.item-row[b-t3265uekvr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
    margin: 4px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s;
}

    .item-row:hover[b-t3265uekvr] {
        background-color: #e0e0e0;
    }

.item-name[b-t3265uekvr], .item-gender[b-t3265uekvr], .item-parent[b-t3265uekvr], .item-date[b-t3265uekvr], .item-status[b-t3265uekvr] {
    margin-right: 10px;
    white-space: nowrap;
}

/* 右側詳細區 */
.right-section[b-t3265uekvr] {
    flex: 1;
    padding: 20px 10px;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    max-height: 100vh;
    overflow-y: auto;
}

/* 基本資訊區塊 */
.basicinfo-container[b-t3265uekvr] {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

.detail-area[b-t3265uekvr] {
    flex: 1;
    padding: 10px;
    background-color: #f5f5f5;
    border-radius: 6px;
    margin-right: 10px;
}

.img-area[b-t3265uekvr] {
    flex: 0 0 400px;
    max-width: 400px;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f0f0f0;
    border-radius: 8px;
}

.studentimg[b-t3265uekvr] {
    max-width: 100%;
    max-height: 100%;
    border-radius: 5px;
}

/* 詳細資訊區塊 */
.detail-container[b-t3265uekvr] {
    margin-top: 20px;
}

.detail-section[b-t3265uekvr] {
    margin: 15px 0;
    padding: 10px;
    background-color: #f5f5f5;
    border-radius: 6px;
}

    .detail-section h4[b-t3265uekvr] {
        font-size: 1.2em;
        margin-bottom: 8px;
        color: #0056b3;
    }

    .detail-section p[b-t3265uekvr] {
        margin: 4px 0;
        font-size: 1em;
        color: #555;
    }

.alias[b-t3265uekvr] {
    color: black;
}
/* 大尺寸螢幕 - page-container 2排, detail 2排 */
@media (min-width: 768px) {
    .page-container[b-t3265uekvr] {
        flex-direction: row;
    }

    .basicinfo-container[b-t3265uekvr] {
        flex-direction: row;
    }

    .detail-container[b-t3265uekvr] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .detail-section[b-t3265uekvr] {
        margin: 8px;
    }
}

}

/* 小尺寸螢幕 - 單排顯示 */
@media (max-width: 767px) {
    .page-container[b-t3265uekvr] {
        flex-direction: column;
        gap: 20px;
    }

    .left-section[b-t3265uekvr] {
        max-width: 100%;
        width: 100%;
        height: 30vh;
    }

    .right-section[b-t3265uekvr] {
        max-width: 100%;
        width: 100%;
    }

    .basicinfo-container[b-t3265uekvr] {
        flex-direction: column;
    }

    .img-area[b-t3265uekvr] {
        width: 100%;
        height: auto;
        margin-top: 10px;
    }

    .detail-container[b-t3265uekvr] {
        display: block;
        width: 100%;
    }

    .detail-section[b-t3265uekvr] {
        margin: 10px 0;
    }
}

/* 手機樣式微調 */
@media (max-width: 480px) {
    .item-row[b-t3265uekvr] {
        flex-direction: column;
        align-items: flex-start;
    }

    .item-name[b-t3265uekvr], .item-gender[b-t3265uekvr], .item-parent[b-t3265uekvr], .item-date[b-t3265uekvr], .item-status[b-t3265uekvr] {
        margin-right: 0;
        margin-bottom: 5px;
    }

    .detail-section h4[b-t3265uekvr] {
        font-size: 1.1em;
    }

    .detail-section p[b-t3265uekvr] {
        font-size: 0.9em;
    }

    .studentimg[b-t3265uekvr] {
        max-width: 100%;
        height: auto;
    }
}



/* 列印樣式 - 三排佈局 */
@media print {

    .page-container[b-t3265uekvr] {
        padding: 0;
    }

    .right-section[b-t3265uekvr] {
        flex: 1;
        padding: 0px;
        background-color: #fff;
        border: none;
        box-shadow: none;
        max-height: none;
        margin: 0;
        height: auto;
    }

    .basicinfo-container[b-t3265uekvr] {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 15px;
        flex-wrap: wrap;
    }

    .detail-area[b-t3265uekvr] {
        flex: 1;
        padding: 8px;
        background-color: #fff;
        margin-right: 5px;
    }

    .img-area[b-t3265uekvr] {
        flex: 0 0 300px;
        max-width: 300px;
        height: 300px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #fff;
    }

    .studentimg[b-t3265uekvr] {
        max-width: 100%;
        max-height: 100%;
        border-radius: 0;
    }

    .detail-container[b-t3265uekvr] {
        margin-top: 15px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .detail-section[b-t3265uekvr] {
        margin: 5px;
        padding: 8px;
        background-color: #fff;
        border: 1px solid #000;
        break-inside: avoid;
    }

        .detail-section h4[b-t3265uekvr] {
            font-size: 1.1em;
            margin-bottom: 6px;
            color: #000;
        }

        .detail-section p[b-t3265uekvr] {
            margin: 2px 0;
            font-size: .9em;
            color: #000;
        }

    /* 隱藏不必要元素 */
    .nav-bar[b-t3265uekvr], .footer[b-t3265uekvr], .btn[b-t3265uekvr], .no-print[b-t3265uekvr] {
        display: none;
    }

    /* 調整標題字型及間距 */
    h3[b-t3265uekvr], h4[b-t3265uekvr] {
        margin: 5px 0;
        font-size: 1.2em;
        color: #000;
    }

    /* 列印時標籤微調 */
    label[b-t3265uekvr] {
        margin: 0;
        padding: 0;
        font-weight: bold;
    }

    /* 分隔線微調 */
    hr[b-t3265uekvr] {
        margin: 5px 0;
        border: 1px solid #000;
    }

    /* 特別針對「其他調查」區塊，佔滿三格 */
    .detail-section.others-section[b-t3265uekvr] {
        grid-column: span 3; /* 占三格 */
    }
}


@media print {
    .right-section[b-t3265uekvr] {
        overflow-y: visible !important;
        height: auto !important;
    }

    .alias[b-t3265uekvr] {
        text-decoration: underline;
    }
}
/* /Pages/Pages_Member/ParentCodePage.razor.rz.scp.css */
.page-container[b-rwwed7ar17] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
}

.left-container[b-rwwed7ar17],
.mid-container[b-rwwed7ar17],
.right-container[b-rwwed7ar17],
.mid-right-container[b-rwwed7ar17] {
    width: 100%;
}

/* 當螢幕 >= 768px（平板以上）時改回多欄排版 */
@media (min-width: 768px) {
    .page-container[b-rwwed7ar17] {
        flex-direction: row;
    }

    .left-container[b-rwwed7ar17] {
        width: 25%;
    }

    .mid-container[b-rwwed7ar17] {
        width: 40%;
    }

    .right-container[b-rwwed7ar17] {
        width: 35%;
    }

    .mid-right-container[b-rwwed7ar17] {
        width: 75%;
    }
}

/* Grouped Form Sections */
details[b-rwwed7ar17] {
    margin-bottom: 15px;
}

/* Group Summary */
summary[b-rwwed7ar17] {
    font-size: 1.2em;
    font-weight: bold;
    cursor: pointer;
    color: #007bff;
    padding: 10px;
    background-color: #f1f1f1;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

    summary:hover[b-rwwed7ar17] {
        background-color: #e2e2e2;
    }

.student-row[b-rwwed7ar17] {
    cursor: pointer;
    margin-bottom: 2px;
}

    .student-row:hover[b-rwwed7ar17] {
        background-color: #007bff22;
    }
/* /Pages/Pages_Member/StudentListPage.razor.rz.scp.css */
/* ===== 整體版面 ===== */

.student-list-page[b-rq8ylvci6j] {
    padding: 16px;
    background: #f5f5f7;
    font-size: 15px;
    color: #111827;
    box-sizing: border-box;
}

    .student-list-page .page-container[b-rq8ylvci6j] {
        display: flex;
        gap: 20px;
        align-items: flex-start;
        margin: 0 auto;
    }

    .student-list-page .left-section[b-rq8ylvci6j] {
        flex: 0 0 260px;
    }

    .student-list-page .right-section[b-rq8ylvci6j] {
        flex: 1;
        min-width: 0;
    }

.sl-right-inner[b-rq8ylvci6j] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* RWD：左右改直向 */
@media (max-width: 900px) {
    .student-list-page .page-container[b-rq8ylvci6j] {
        flex-direction: column;
    }

    .student-list-page .left-section[b-rq8ylvci6j] {
        flex: 0 0 auto;
        width: 100%;
    }
}

/* ===== 左側卡片 ===== */

.sl-left-card[b-rq8ylvci6j] {
    background: #ffffff;
    border-radius: 20px;
    padding: 16px 18px 18px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
    border: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sl-panel-title[b-rq8ylvci6j] {
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding-bottom: 4px;
}

.sl-section-title[b-rq8ylvci6j] {
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    margin-top: 12px;
    margin-bottom: 4px;
}

.sl-divider[b-rq8ylvci6j] {
    height: 1px;
    background: linear-gradient(90deg, #e5e7eb 0%, #f3f4f6 50%, #e5e7eb 100%);
    margin: 4px 0 10px;
    border-radius: 999px;
}

/* ===== 切換列 / Checkbox ===== */

.sl-toggle-row[b-rq8ylvci6j] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 2px;
    cursor: pointer;
    border-radius: 12px;
    transition: background-color 0.15s ease, transform 0.08s ease;
}

    .sl-toggle-row:hover[b-rq8ylvci6j] {
        background: #f3f4f6;
    }

.sl-checkbox[b-rq8ylvci6j] {
    width: 16px;
    height: 16px;
    border-radius: 6px;
    border: 1px solid #cbd5f5;
    background: #ffffff;
    appearance: none;
    outline: none;
    display: inline-block;
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
}

    .sl-checkbox:checked[b-rq8ylvci6j] {
        background: #007aff;
        border-color: #007aff;
    }

        .sl-checkbox:checked[b-rq8ylvci6j]::after {
            content: "";
            position: absolute;
            left: 4px;
            top: 1px;
            width: 6px;
            height: 10px;
            border: 2px solid #ffffff;
            border-top: 0;
            border-left: 0;
            transform: rotate(45deg);
        }

.sl-checkbox-label[b-rq8ylvci6j] {
    font-size: 14px;
    color: #111827;
}

/* inline small toggle (延托、刪除) */
.sl-toggle-inline[b-rq8ylvci6j] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}

/* ===== 按鈕 ===== */

.sl-btn[b-rq8ylvci6j] {
    border: none;
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.06s ease;
    background: #111827;
    color: #ffffff;
    text-align: center;
}

    .sl-btn:active[b-rq8ylvci6j] {
        transform: translateY(1px);
    }

.sl-btn-full[b-rq8ylvci6j] {
    width: 100%;
    margin-top: 6px;
}

/* 主要動作：儲存變更 */
.sl-btn-primary[b-rq8ylvci6j] {
    background: #007aff;
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.3);
}

    .sl-btn-primary:hover[b-rq8ylvci6j] {
        background: #0062c7;
    }

/* 次要動作：新增/批次 */
.sl-btn-secondary[b-rq8ylvci6j] {
    background: #ffffff;
    color: #111827;
    border: 1px solid #d1d5db;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
}

    .sl-btn-secondary:hover[b-rq8ylvci6j] {
        background: #f9fafb;
    }

/* 透明幽靈款：群組編輯新增 */
.sl-btn-ghost[b-rq8ylvci6j] {
    background: transparent;
    color: #007aff;
    border: 1px solid rgba(148, 163, 184, 0.7);
    box-shadow: none;
}

    .sl-btn-ghost:hover[b-rq8ylvci6j] {
        background: rgba(148, 163, 184, 0.06);
    }

.sl-btn-small[b-rq8ylvci6j] {
    padding: 4px 10px;
    font-size: 13px;
}

/* ===== 群組 Chips ===== */

.sl-group-chips[b-rq8ylvci6j] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.sl-chip[b-rq8ylvci6j] {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: #f3f4f6;
    font-size: 13px;
    color: #4b5563;
    white-space: nowrap;
}

.sl-chip-removable[b-rq8ylvci6j] {
    border: none;
}

/* ===== 右側：班級卡片 & 學生列 ===== */

.table-section[b-rq8ylvci6j] {
    background: #ffffff;
    border-radius: 18px;
    border: 1px solid #e5e7eb;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05);
}

/* 班級標題列 */
.table-head[b-rq8ylvci6j] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 10px 18px;
    background: linear-gradient(90deg, #f9fafb 0%, #ffffff 40%, #f9fafb 100%);
    border-bottom: 1px solid #e5e7eb;
}

.table-head-title[b-rq8ylvci6j] {
    font-size: 15px;
    font-weight: 600;
}

.table-head-count[b-rq8ylvci6j] {
    font-size: 13px;
    color: #6b7280;
}

/* 學生列：grid */
.table-row[b-rq8ylvci6j] {
    display: grid;
    grid-template-columns: 56px minmax(110px, 150px) minmax(0, 1.4fr) minmax(0, 1.4fr) 40px;
    column-gap: 12px;
    align-items: center; /* 名字 / 編輯同一垂直線 */
    padding: 8px 16px;
    border-top: 1px solid #f1f5f9;
    font-size: 14px;
    background: #ffffff;
    transition: background-color 0.12s ease;
}

    .table-row:hover[b-rq8ylvci6j] {
        background: #f9fafb;
    }

/* 編輯模式底色 */
.table-row-edit[b-rq8ylvci6j] {
    background: #f9fafb;
}

.table-row-edit-diff[b-rq8ylvci6j] {
    box-shadow: inset 2px 0 0 #fbbf24;
    background: #fffbeb;
}

/* 欄位 */
.col-numb[b-rq8ylvci6j] {
    font-variant-numeric: tabular-nums;
    color: #6b7280;
    display: flex;
    align-items: center;
}

.col-name[b-rq8ylvci6j] {
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
}

    .col-name:hover[b-rq8ylvci6j] {
        text-decoration: underline;
    }

/* 父母欄位 */
.col-parent[b-rq8ylvci6j] {
    display: flex;
    flex-direction: row;
    justify-content: start;
    gap: 2px;
    cursor: pointer;
}

    .col-parent:hover[b-rq8ylvci6j] {
        text-decoration: underline;
    }

.sl-parent-role[b-rq8ylvci6j] {
    font-size: 12px;
    color: #33f;
}

.sl-parent-email[b-rq8ylvci6j] {
    font-size: 13px;
    color: #111827;
    word-break: break-all;
}



/* ===== 編輯表單區塊 ===== */

/* 基本欄位外層 */
.sl-field[b-rq8ylvci6j] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-right: 8px;
    margin-bottom: 6px;
    min-width: 120px;
}

.sl-field-wide[b-rq8ylvci6j] {
    min-width: 180px;
}

.sl-field-narrow[b-rq8ylvci6j] {
    min-width: 100px;
}

/* label + input/select */
.sl-field-label[b-rq8ylvci6j] {
    font-size: 12px;
    color: #6b7280;
}

.sl-input[b-rq8ylvci6j],
.sl-select[b-rq8ylvci6j] {
    border-radius: 10px;
    border: 1px solid #d1d5db;
    padding: 6px 10px;
    font-size: 14px;
    outline: none;
    background: #ffffff;
    min-height: 32px;
}

    .sl-input:focus[b-rq8ylvci6j],
    .sl-select:focus[b-rq8ylvci6j] {
        border-color: #007aff;
        box-shadow: 0 0 0 1px rgba(0, 122, 255, 0.15);
    }

.sl-input-narrow[b-rq8ylvci6j] {
    max-width: 70px;
}

/* 基本資料編輯：座號 / 姓名 / 讀音 / 延托 / 分鐘數 */
.edit-form[b-rq8ylvci6j] {
    grid-column: 3 / 5;
    grid-row: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
    align-items: flex-end;
    padding-top: 0;
    padding-bottom: 4px;
}

/* 班級 / 刪除 編輯 */
.editclass-form[b-rq8ylvci6j] {
    grid-column: 3 / 5;
    grid-row: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
    align-items: center;
    padding-top: 0;
    padding-bottom: 4px;
}

    /* 讓欄位在同一列時比較緊湊 */
    .edit-form .sl-field[b-rq8ylvci6j],
    .editclass-form .sl-field[b-rq8ylvci6j] {
        margin-bottom: 0;
        min-width: 120px;
    }

        /* 座號欄窄一點 */
        .edit-form .sl-field:first-child .sl-input[b-rq8ylvci6j] {
            max-width: 80px;
        }

/* 分鐘數欄寬度限制一下 */
.edit-form .sl-field-narrow .sl-input[b-rq8ylvci6j] {
    max-width: 120px;
}

/* 延托 / 刪除 checkbox 在這一排裡垂直置中 */
.edit-form .sl-toggle-inline[b-rq8ylvci6j],
.editclass-form .sl-toggle-inline[b-rq8ylvci6j] {
    align-self: center;
    margin-top: 0;
}

/* 群組編輯列 */
.sl-group-edit-row[b-rq8ylvci6j] {
    grid-column: 3 / 5;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}

.sl-group-chip-wrap[b-rq8ylvci6j] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
}

.sl-group-edit-actions[b-rq8ylvci6j] {
    flex-shrink: 0;
}

.sl-empty-hint[b-rq8ylvci6j] {
    font-size: 13px;
    color: #cbd5e1;
    padding: 4px 0;
}

/* ===== RWD：中尺寸（<=900）欄位寬度調整 ===== */

@media (max-width: 900px) {
    .edit-form[b-rq8ylvci6j],
    .editclass-form[b-rq8ylvci6j] {
        grid-column: 1 / 5;
        grid-row: auto;
        padding-top: 4px;
    }

        .edit-form .sl-field[b-rq8ylvci6j],
        .editclass-form .sl-field[b-rq8ylvci6j] {
            min-width: 48%;
        }
}

/* ===== RWD：小尺寸（<=640）爸爸媽媽換第二排 ===== */

@media (max-width: 640px) {
    /* 整列改成 block 排版 */
    .table-row[b-rq8ylvci6j] {
        display: block;
        padding: 10px 12px;
    }

    /* 第一行：座號 + 姓名 */
    .col-numb[b-rq8ylvci6j] {
        display: inline-block;
        width: auto;
        margin-right: 8px;
        font-variant-numeric: tabular-nums;
    }

    .col-name[b-rq8ylvci6j] {
        display: inline-block;
        font-weight: 500;
        margin-bottom: 4px;
    }

    /* 爸爸 / 媽媽 在第二排，每行一個 */
    .col-parent[b-rq8ylvci6j] {
        display: block;
        margin-left: 24px;
        margin-top: 2px;
    }

    /* 編輯模式改成直向一整塊 */
    .edit-form[b-rq8ylvci6j],
    .editclass-form[b-rq8ylvci6j],
    .sl-group-edit-row[b-rq8ylvci6j] {
        display: block;
        margin-top: 6px;
        padding-top: 4px;
        grid-column: auto;
        grid-row: auto;
    }

        .edit-form .sl-field[b-rq8ylvci6j],
        .editclass-form .sl-field[b-rq8ylvci6j] {
            min-width: 100%;
            margin-bottom: 6px;
        }

    .student-list-page .right-section[b-rq8ylvci6j] {
        width: 100%;
    }

    .other-family[b-rq8ylvci6j]:before {
        content: "其他家人：";
    }

    .other-family[b-rq8ylvci6j]:after {
        content: " 位";
    }

    .span-mother[b-rq8ylvci6j]:before {
        content: "媽媽：";
    }

    .span-father[b-rq8ylvci6j]:before {
        content: "爸爸：";
    }
}


/* 未註冊：整個爸爸 / 媽媽那行都紅色 */
.col-parent.sl-text-danger .sl-parent-email[b-rq8ylvci6j],
.col-parent.sl-text-danger .sl-parent-role[b-rq8ylvci6j] {
    color: #ccc;
}

.col-parent.sl-text-danger[b-rq8ylvci6j] {
    cursor: default;
}

    .col-parent.sl-text-danger:hover[b-rq8ylvci6j] {
        text-decoration: none;
    }



/* /Pages/Pages_Member/StudentModal.razor.rz.scp.css */
/* ===== Modal 內容容器 ===== */

.m-wrap[b-p2z20mgiex] {
    width: 1000px;
    /*margin: 1em;*/
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 1em;
    font-size: 15px;
    color: #111827;
    box-sizing: border-box;
}

/* ===== Card 區塊 ===== */

.card[b-p2z20mgiex] {
    background: #ffffff;
    border-radius: 18px;
    border: 1px solid #e5e7eb;
    padding: 16px 18px 18px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
}

.card-title-row[b-p2z20mgiex] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /*margin-bottom: 12px;*/
}

.card-title[b-p2z20mgiex] {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

    .card-title.sub[b-p2z20mgiex] {
        font-size: 14px;
        font-weight: 500;
        margin-top: 8px;
        margin-bottom: 6px;
        color: #6b7280;
    }

/* ===== Grid ===== */

.grid[b-p2z20mgiex] {
    display: grid;
    gap: 12px 16px;
}

.grid-2[b-p2z20mgiex] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-3[b-p2z20mgiex] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.col-span-full[b-p2z20mgiex] {
    grid-column: 1 / -1;
}

/* RWD：小螢幕改一欄 / 兩欄 */
@media (max-width: 768px) {
    .m-wrap[b-p2z20mgiex] {
        width: 100%;
    }

    .grid-2[b-p2z20mgiex] {
        grid-template-columns: minmax(0, 1fr);
    }

    .grid-3[b-p2z20mgiex] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .col-span-full[b-p2z20mgiex] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 480px) {
    .grid-3[b-p2z20mgiex] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ===== Field & Label ===== */

.field[b-p2z20mgiex] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.label[b-p2z20mgiex] {
    font-size: 14px;
    font-weight: 500;
    color: #374151;
}

.req[b-p2z20mgiex] {
    color: #ef4444;
    margin-left: 4px;
}

/* ===== Input / Select ===== */

.input[b-p2z20mgiex],
.select[b-p2z20mgiex] {
    border-radius: 10px;
    border: 1px solid #d1d5db;
    background: #f9fafb;
    padding: 6px 10px;
    font-size: 15px;
    outline: none;
    min-height: 34px;
    box-sizing: border-box;
    width: 100%;
}

    .input:focus[b-p2z20mgiex],
    .select:focus[b-p2z20mgiex] {
        border-color: #007aff;
        background: #ffffff;
        box-shadow: 0 0 0 1px rgba(0, 122, 255, 0.15);
    }

/* 統一給數字欄位用：class="input input-number" */
.input-number[b-p2z20mgiex] {
    -moz-appearance: textfield; /* Firefox 不要用 number 外觀 */
    padding-right: 28px; /* 預留箭頭空間，避免內容撐寬 */
    box-sizing: border-box;
}

    /* Chrome / Edge 拿掉 spin button（如果你不需要上下箭頭） */
    .input-number[b-p2z20mgiex]::-webkit-outer-spin-button,
    .input-number[b-p2z20mgiex]::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

.flex-1[b-p2z20mgiex] {
    flex: 1 1 auto;
}

/* 一行內放 input + 按鈕 */
.inline-row[b-p2z20mgiex] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}

/* ===== Radio group ===== */

.radio-group[b-p2z20mgiex] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 3px;
    border-radius: 999px;
    background: #f3f4f6;
}

.radio[b-p2z20mgiex] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 999px;
    cursor: pointer;
    font-size: 14px;
}

    .radio input[type="radio"][b-p2z20mgiex] {
        width: 14px;
        height: 14px;
    }

/* ===== Checkbox（延托設定） ===== */

.check[b-p2z20mgiex] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    cursor: pointer;
}

.check-input[b-p2z20mgiex] {
    width: 16px;
    height: 16px;
    border-radius: 6px;
    border: 1px solid #cbd5f5;
    appearance: none;
    background: #ffffff;
    position: relative;
}

    .check-input:checked[b-p2z20mgiex] {
        background: #007aff;
        border-color: #007aff;
    }

        .check-input:checked[b-p2z20mgiex]::after {
            content: "";
            position: absolute;
            left: 4px;
            top: 1px;
            width: 6px;
            height: 10px;
            border: 2px solid #ffffff;
            border-top: 0;
            border-left: 0;
            transform: rotate(45deg);
        }

/* ===== 延托說明 ===== */

.charge-explain[b-p2z20mgiex] {
    margin-top: 2px;
    padding-top: 8px;
    border-top: 1px dashed #e5e7eb;
    display: flex;
    flex-direction: row;
    gap: 4px;
}

    .charge-explain .pill[b-p2z20mgiex] {
        display: inline-flex;
        align-items: center;
        padding: 2px 10px;
        border-radius: 999px;
        background: #eef2ff;
        font-size: 12px;
        color: #4f46e5;
        width: fit-content;
    }

    .charge-explain .time[b-p2z20mgiex] {
        font-size: 14px;
        font-weight: 500;
    }

    /* summary 一行顯示，過長用 ... */
    .charge-explain .desc[b-p2z20mgiex] {
        font-size: 13px;
        color: #6b7280;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

/* ===== 家庭區塊 ===== */

/* 主要監護人：兩個欄位左右各 50% */
.parent-raw[b-p2z20mgiex] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-top: 4px;
}

.parent-line[b-p2z20mgiex] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    min-width: 0;
    flex: 1 1 0; /* 左右各 50% */
}

.parent-label[b-p2z20mgiex] {
    font-weight: 500;
    white-space: nowrap;
}

.text-noregist[b-p2z20mgiex] {
    color: #e11d48;
    font-weight: 500;
}

/* 其他家人 chips */
.chips[b-p2z20mgiex] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

/* chip button */
.chip[b-p2z20mgiex] {
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 13px;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    color: #374151;
    cursor: pointer;
    max-width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

    .chip:hover[b-p2z20mgiex] {
        background: #eef2ff;
        border-color: #c7d2fe;
    }

.hide-mail[b-p2z20mgiex] {
    background: #fef9c3;
    border-color: #facc15;
}

/* 小螢幕：主要監護人改直向排列 */
@media (max-width: 640px) {
    .parent-raw[b-p2z20mgiex] {
        flex-direction: column;
        gap: 6px;
    }
}

/* ===== Buttons ===== */

.btn[b-p2z20mgiex] {
    border-radius: 999px;
    padding: 7px 14px;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.01em;
    border: none;
    cursor: pointer;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.06s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

    .btn.small[b-p2z20mgiex] {
        padding: 5px 10px;
        font-size: 13px;
    }

    /* 主要按鈕：確認 */
    .btn.primary[b-p2z20mgiex] {
        background: #007aff;
        color: #ffffff;
        box-shadow: 0 8px 20px rgba(37, 99, 235, 0.3);
    }

        .btn.primary:hover[b-p2z20mgiex] {
            background: #0062c7;
        }

    /* 取消 / 次要 */
    .btn.ghost[b-p2z20mgiex] {
        background: #ffffff;
        color: #111827;
        border: 1px solid #d1d5db;
        box-shadow: 0 4px 10px rgba(15, 23, 42, 0.04);
    }

        .btn.ghost:hover[b-p2z20mgiex] {
            background: #f9fafb;
        }

    /* 危險（如果之後要用） */
    .btn.danger[b-p2z20mgiex] {
        background: #f97373;
        color: #ffffff;
    }

/* ===== 底部 actions ===== */

.actions[b-p2z20mgiex] {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 8px;
}

.inline-row .btn.small[b-p2z20mgiex] {
    white-space: nowrap;
}

@media (max-width: 640px) {

    .actions[b-p2z20mgiex] {
        flex-direction:column;
    }

    .actions-right[b-p2z20mgiex] {
        width: 100%;
        display: flex;
        gap: 10px;
        justify-content: flex-end;
    }
}

/* /Pages/Pages_Member/TeacherAuthorPage.razor.rz.scp.css */
/* ===== 整體頁面容器 ===== */

.tp-page[b-pund5ajrib] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px 12px 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    font-size: 14px;
    color: #111827;
    box-sizing: border-box;
}

/* ===== Section 區塊 ===== */

.tp-section[b-pund5ajrib] {
    background: #ffffff;
    border-radius: 20px;
    padding: 18px 20px 20px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.04);
}

.tp-section-header[b-pund5ajrib] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}

.tp-section-header-left[b-pund5ajrib] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tp-section-title[b-pund5ajrib] {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: #111827;
    margin: 0;
}

.tp-section-caption[b-pund5ajrib] {
    margin: 0;
    font-size: 12px;
    color: #6b7280;
}

/* ===== Buttons（非 bootstrap） ===== */

.tp-btn[b-pund5ajrib] {
    border-radius: 999px;
    border: none;
    padding: 7px 14px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.01em;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: background-color 0.16s ease, box-shadow 0.16s ease, transform 0.06s ease, border-color 0.16s ease;
}

.tp-btn--primary[b-pund5ajrib] {
    background: #111827;
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.22);
}

    .tp-btn--primary:hover[b-pund5ajrib] {
        background: #020617;
        box-shadow: 0 14px 32px rgba(15, 23, 42, 0.3);
        transform: translateY(-0.5px);
    }

    .tp-btn--primary:active[b-pund5ajrib] {
        transform: translateY(0);
        box-shadow: 0 6px 16px rgba(15, 23, 42, 0.22);
    }

.tp-btn--outline[b-pund5ajrib] {
    background: #ffffff;
    color: #111827;
    border: 1px solid #d1d5db;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
}

    .tp-btn--outline:hover[b-pund5ajrib] {
        background: #f9fafb;
    }

/* 文字型小按鈕（表格操作） */

.tp-link-btn[b-pund5ajrib] {
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    font-size: 13px;
    color: #4b5563;
    cursor: pointer;
}

    .tp-link-btn:hover[b-pund5ajrib] {
        text-decoration: underline;
    }

.tp-link-btn--danger[b-pund5ajrib] {
    color: #dc2626;
}

    .tp-link-btn--danger:disabled[b-pund5ajrib],
    .tp-link-btn--danger[disabled][b-pund5ajrib] {
        opacity: .4;
        cursor: not-allowed;
        pointer-events: none;
        background: transparent;
        color: #a3a3a3;
    }

/* ===== Badge（人數） ===== */

.tp-badge[b-pund5ajrib] {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border-radius: 999px;
    background: #eef2ff;
    color: #4f46e5;
    font-size: 11px;
    font-weight: 500;
}

/* ===== 表格基底 ===== */

.tp-table[b-pund5ajrib] {
    width: 100%;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    overflow: hidden;
}

.tp-table--compact[b-pund5ajrib] {
    margin-top: 8px;
}

/* 行列使用 grid 模擬 table，維持 Apple 式整齊對齊 */

.tp-row[b-pund5ajrib] {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.5fr) minmax(0, 2.4fr) minmax(0, .6fr);
    align-items: center;
    padding: 8px 12px;
    column-gap: 10px;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
}

    .tp-row:last-child[b-pund5ajrib] {
        border-bottom: none;
    }

.tp-row--head[b-pund5ajrib] {
    background: #f3f4f6;
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
}

.tp-row:not(.tp-row--head):hover[b-pund5ajrib] {
    background: #ffffff;
}

.tp-row--empty[b-pund5ajrib] {
    grid-template-columns: minmax(0, 1fr);
}

/* 班級內的小表格：沒有操作欄 */

/*.tp-table--compact .tp-row {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 2.1fr) minmax(0, 2.4fr);
}*/

/* ===== 欄位 Column ===== */

.tp-col[b-pund5ajrib] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
}

.tp-col--name[b-pund5ajrib] {
    font-weight: 500;
    color: #111827;
    cursor: pointer;
}

    .tp-col--name:hover[b-pund5ajrib] {
        text-decoration: underline;
        text-decoration-thickness: 1px;
    }

.tp-col--email[b-pund5ajrib] {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
    font-size: 13px;
    color: #374151;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tp-col--flags[b-pund5ajrib] {
    flex-wrap: wrap;
    justify-content: flex-start;
}

.tp-col--operate[b-pund5ajrib] {
    justify-content: flex-end;
    gap: 10px;
}

.tp-col--empty[b-pund5ajrib] {
    font-size: 13px;
    color: #6b7280;
}

/* ===== 權限 Pill ===== */

.tp-pill[b-pund5ajrib] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    border: 1px solid transparent;
    transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease, transform 0.06s ease;
    white-space: nowrap;
    margin: 1px 3px 1px 0;
}

.tp-pill--on[b-pund5ajrib] {
    background: #e0f2fe;
    color: #0369a1;
    border-color: #bae6fd;
    box-shadow: 0 3px 18px rgba(56, 189, 248, 0.2);
}

.tp-pill--off[b-pund5ajrib] {
    background: #f3f4f6;
    color: #6b7280;
    border-color: #e5e7eb;
}

.tp-pill--on:hover[b-pund5ajrib] {
    background: #bfdbfe;
    color: #1d4ed8;
}

.tp-pill--off:hover[b-pund5ajrib] {
    background: #e5e7eb;
}

/* ===== 班級卡片 ===== */

.tp-class-card[b-pund5ajrib] {
    margin-top: 10px;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    padding: 10px 12px 12px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
}

.tp-class-header[b-pund5ajrib] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.tp-class-title[b-pund5ajrib] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: #111827;
}

.tp-class-actions[b-pund5ajrib] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* ===== Empty State ===== */

.tp-empty-state[b-pund5ajrib] {
    padding: 10px 2px 2px;
    font-size: 13px;
    color: #6b7280;
}

/* ===== RWD ===== */

@media (max-width: 900px) {
    .tp-section[b-pund5ajrib] {
        padding: 16px 14px 16px;
    }

    .tp-class-header[b-pund5ajrib] {
        flex-direction: column;
        align-items: flex-start;
    }

    .tp-class-actions[b-pund5ajrib] {
        width: 100%;
    }

        .tp-class-actions .tp-btn[b-pund5ajrib] {
            flex: 1 1 0;
            justify-content: center;
        }
}

@media (max-width: 768px) {
    .tp-row--head[b-pund5ajrib] {
        display: none; /* 小螢幕隱藏表頭列 */
    }

    .tp-row[b-pund5ajrib] {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 4px;
        align-items: flex-start;
        padding: 8px 10px;
    }

    .tp-col--operate[b-pund5ajrib] {
        justify-content: flex-start;
    }

    .tp-table[b-pund5ajrib] {
        border-radius: 14px;
    }

    .tp-section-header[b-pund5ajrib] {
        flex-direction: column;
        align-items: flex-start;
    }

    .tp-section-header-left[b-pund5ajrib] {
        width: 100%;
    }

    .tp-section-header .tp-btn[b-pund5ajrib] {
        align-self: flex-end;
    }
}

@media (max-width: 480px) {
    .tp-page[b-pund5ajrib] {
        padding: 12px 8px 18px;
    }

    .tp-section-title[b-pund5ajrib] {
        font-size: 16px;
    }

    .tp-btn[b-pund5ajrib] {
        font-size: 13px;
        padding: 6px 12px;
    }
}
/* /Pages/Pages_Message/BoardOwnerConfigPage.razor.rz.scp.css */
/* 版面 */
.bs-wrap[b-el3uz58rd9] {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 16px;
    padding: 8px;
    color: #111;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif;
}

@media (max-width: 920px) {
    .bs-wrap[b-el3uz58rd9] {
        grid-template-columns: 1fr;
    }
}

/* 側欄 */
.bs-side[b-el3uz58rd9] {
    background: #fff;
    border: 1px solid #efeff4;
    border-radius: 14px;
    padding: 12px;
}

.bs-side-title[b-el3uz58rd9] {
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 8px;
}

.bs-side-list[b-el3uz58rd9] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.bs-side-item[b-el3uz58rd9] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 10px;
    cursor: pointer;
    transition: background .15s ease;
}

    .bs-side-item:hover[b-el3uz58rd9] {
        background: #f8f9fb;
    }

.bs-dot[b-el3uz58rd9] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #0a84ff;
}

.bs-side-text[b-el3uz58rd9] {
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bs-link[b-el3uz58rd9] {
    justify-self: end;
    border: none;
    background: transparent;
    color: #0a84ff;
    font-size: 12px;
    cursor: pointer;
}

/* 主內容 */
.bs-main[b-el3uz58rd9] {
    display: grid;
}

.bs-grid[b-el3uz58rd9] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

@media (min-width: 1120px) {
    .bs-grid[b-el3uz58rd9] {
        grid-template-columns: 1fr 1fr; /* 大尺寸雙欄卡片 */
    }
}

/* 卡片 */
.bs-card[b-el3uz58rd9] {
    background: #fff;
    border: 1px solid #efeff4;
    border-radius: 14px;
    padding: 12px;
}

.bs-card-header[b-el3uz58rd9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.bs-card-title[b-el3uz58rd9] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .2px;
}

.bs-empty[b-el3uz58rd9] {
    font-size: 13px;
    color: #6b7280;
    padding: 8px 0;
}

/* 按鈕 */
.bs-btn[b-el3uz58rd9] {
    height: 32px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 14px;
    cursor: pointer;
    transition: transform .06s ease, box-shadow .15s ease, background .15s ease;
}

    .bs-btn:active[b-el3uz58rd9] {
        transform: translateY(1px);
    }

.bs-btn-primary[b-el3uz58rd9] {
    background: #0a84ff;
    color: #fff;
    box-shadow: 0 2px 6px rgba(10,132,255,.25);
}

    .bs-btn-primary:hover[b-el3uz58rd9] {
        box-shadow: 0 4px 10px rgba(10,132,255,.25);
    }

/* Chips */
.bs-chips[b-el3uz58rd9] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bs-chip[b-el3uz58rd9] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: #f2f2f7;
    border: 1px solid #e6e6eb;
    border-radius: 999px;
    font-size: 13px;
}

.bs-chip-name[b-el3uz58rd9] {
    line-height: 1;
}

.bs-chip-x[b-el3uz58rd9] {
    width: 18px;
    height: 18px;
    border: none;
    border-radius: 50%;
    background: #e9e9ef;
    cursor: pointer;
    line-height: 18px;
    text-align: center;
    font-size: 14px;
    color: #555;
}

    .bs-chip-x:hover[b-el3uz58rd9] {
        background: #dedee5;
    }

/* 無作用區塊 */
.bs-sep[b-el3uz58rd9] {
    height: 8px;
}

.bs-orphan[b-el3uz58rd9] {
    margin-top: 8px;
    background: #fff;
    border: 1px solid #efeff4;
    border-radius: 14px;
    padding: 12px;
}

.bs-orphan-title[b-el3uz58rd9] {
    font-size: 13px;
    color: #8e8e93;
    margin-bottom: 8px;
}
/* /Pages/Pages_Message/CategoryBoardPage.razor.rz.scp.css */
/* ========== 版面：三欄 ========== */
.ob-layout[b-a3uiwst5fx] {
    display: grid;
    grid-template-columns: 1fr 820px 1fr; /* 左欄 / 中欄(限制 820) / 右欄預留 */
    gap: 16px;
    align-items: start;
}

/* 左欄：面板 sticky + 水平置中 */
.left-col[b-a3uiwst5fx] {
    position: relative;
}

.filters-panel[b-a3uiwst5fx] {
    margin-top: 12px;
    position: sticky;
    width: 100%;
    max-width: 300px; /* 面板最大寬 */
    margin-left: auto; /* 水平置中 */
    margin-right: auto;
    background: #fff;
    border: 1px solid #e9e9e9;
    border-radius: 14px;
    padding: 12px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}

.panel-title[b-a3uiwst5fx] {
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 8px;
}

.filter[b-a3uiwst5fx] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
}

    .filter:last-child[b-a3uiwst5fx] {
        margin-bottom: 0;
    }

.filter-label[b-a3uiwst5fx] {
    font-size: 12px;
    color: #666;
}

.select[b-a3uiwst5fx] {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid #dedede;
    border-radius: 10px;
    background: #fff;
    font-size: 14px;
}

    .select:focus[b-a3uiwst5fx] {
        outline: none;
        border-color: #c7d7fe;
        box-shadow: 0 0 0 3px rgba(199,215,254,0.35);
    }

.btn[b-a3uiwst5fx] {
    display: inline-block;
    padding: 7px 12px;
    border-radius: 10px;
    border: 1px solid #dcdcdc;
    background: #f9f9f9;
    text-decoration: none;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
}

    .btn:hover[b-a3uiwst5fx] {
        background: #f1f1f1;
    }

    .btn.small[b-a3uiwst5fx] {
        padding: 6px 10px;
        font-size: 12px;
    }

    .btn.ghost[b-a3uiwst5fx] {
        background: transparent;
    }

/* 中欄：獨立滾動區（滿版高度） */
.main-col[b-a3uiwst5fx] {
    height: 100vh; /* 佔滿視窗高 */
    overflow-y: auto; /* 只在中欄滾動 */
    -webkit-overflow-scrolling: touch;
    justify-self: center; /* 置中對齊 */
    width: 100%;
}

/* 右欄：預留 */
.right-col[b-a3uiwst5fx] {
}

/* 中欄內部容器（控制最大寬、邊距） */
.ob-container[b-a3uiwst5fx] {
    max-width: 820px;
    margin: 0 auto;
    padding: 8px 12px 24px;
    box-sizing: border-box;
}

/* 空狀態 */
.empty[b-a3uiwst5fx] {
    text-align: center;
    color: #666;
    padding: 24px 0;
    font-size: 14px;
}

/* ========== 貼文卡片與內容 ========== */
.thread[b-a3uiwst5fx] {
    background: #fff;
    border: 1px solid #e9e9e9;
    border-radius: 16px;
    padding: 12px 14px;
    margin-bottom: 14px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}

/* header */
.post-header[b-a3uiwst5fx], .reply-header[b-a3uiwst5fx] {
    display: flex;
    gap: 10px;
    align-items: center;
}

.head-main[b-a3uiwst5fx] {
    flex: 1;
    min-width: 0;
}

.row1[b-a3uiwst5fx] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}

.row2[b-a3uiwst5fx] {
    color: #888;
    font-size: 12px;
}

/* avatar */
.avatar[b-a3uiwst5fx] {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid #dfe6ff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

    .avatar.sm[b-a3uiwst5fx] {
        width: 32px;
        height: 32px;
        font-size: 13px;
    }

/* 名稱、標籤、時間 */
.name[b-a3uiwst5fx] {
    font-weight: 700;
    font-size: 14px;
}

.badge[b-a3uiwst5fx] {
    display: inline-block;
    padding: 2px 8px;
    font-size: 12px;
    border-radius: 999px;
    border: 1px solid #e0e0e0;
    background: #FFE4E6; /* 淡粉紅 */
    color: #333;
    cursor:pointer;
}

.time[b-a3uiwst5fx] {
    font-size: 12px;
}

/* 內容區 */
.post-body[b-a3uiwst5fx], .reply-body[b-a3uiwst5fx] {
    margin-top: 10px;
}

.post-text[b-a3uiwst5fx] {
    font-size: 14px;
    line-height: 1.7;
    color: #222;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

    .post-text a[b-a3uiwst5fx] {
        color: #0b57d0;
        text-decoration: none;
        border-bottom: 1px dashed #9ab7f3;
    }

        .post-text a:hover[b-a3uiwst5fx] {
            border-bottom-color: #0b57d0;
        }



/* 圖片 */
.photo-anchor[b-a3uiwst5fx] {
    display: block;
    cursor: pointer;
}

.photo[b-a3uiwst5fx] {
    display: block;
    width: 100%;
    height: auto;
    max-height: 520px;
    object-fit: contain;
    border-radius: 12px;
    border: 1px solid #f0f0f0;
    background: #fafafa;
}

    .photo.sm[b-a3uiwst5fx] {
        max-height: 360px;
    }

/* 回覆串 */
.replies[b-a3uiwst5fx] {
    margin-top: 10px;
    padding-left: 16px;
    border-left: 2px solid #f0f0f0;
}

.reply[b-a3uiwst5fx] {
    padding: 10px 0 6px;
    border-bottom: 1px dashed #efefef;
}

    .reply:last-child[b-a3uiwst5fx] {
        border-bottom: none;
    }

/* 主卡片底部動作列 */
.thread-footer[b-a3uiwst5fx] {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed #eee;
    display: flex;
    justify-content: end;
}

.btn-link[b-a3uiwst5fx] {
    background: transparent;
    border: none;
    padding: 4px 6px;
    color: #0b57d0;
    cursor: pointer;
    font-size: 13px;
    border-bottom: 1px dashed rgba(11,87,208,0.35);
}

    .btn-link:hover[b-a3uiwst5fx] {
        border-bottom-color: #0b57d0;
    }

/* 回覆輸入框 */
.composer[b-a3uiwst5fx] {
    margin-top: 8px;
}

.composer-text[b-a3uiwst5fx] {
    width: 100%;
    box-sizing: border-box;
    min-height: 32px; /* rows=1 視覺高度 */
    resize: vertical;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 8px 10px;
    font-size: 14px;
    line-height: 1.5;
    background: #fff;
}

    .composer-text:focus[b-a3uiwst5fx] {
        outline: none;
        border-color: #c7d7fe;
        box-shadow: 0 0 0 3px rgba(199,215,254,0.35);
    }

.composer-actions[b-a3uiwst5fx] {
    display: flex;
    justify-content: end;
    gap: 8px;
    margin-top: 8px;
}

/* ========== RWD：小螢幕（單欄） ========== */
@media (max-width: 980px) {
    .ob-layout[b-a3uiwst5fx] {
        grid-template-columns: 1fr;
    }

    .left-col[b-a3uiwst5fx] {
        order: 1;
    }

    .main-col[b-a3uiwst5fx] {
        order: 2;
        height: auto; /* 與頁面共用滾動 */
        overflow: visible;
        justify-self: stretch;
        width: 100%;
    }

    .filters-panel[b-a3uiwst5fx] {
        position: static; /* 非 sticky */
        max-width: none; /* 全寬 */
        margin-top: 0;
    }

    .ob-container[b-a3uiwst5fx] {
        padding: 8px 8px 18px;
    }

    .avatar[b-a3uiwst5fx] {
        width: 36px;
        height: 36px;
    }

    .name[b-a3uiwst5fx] {
        font-size: 13px;
    }

    .badge[b-a3uiwst5fx] {
        font-size: 11px;
    }

    .post-text[b-a3uiwst5fx] {
        font-size: 13.5px;
    }
}

.avatar-img[b-a3uiwst5fx] {
    width: 70%;
    height: 70%;
    object-fit: contain; /* 不裁切，完整顯示 icon */
    display: block;
    opacity: .7;
}
/* /Pages/Pages_Photo/ClassGalleryPage.razor.rz.scp.css */
/* /Pages/Pages_Photo/GalleryComponent.razor.rz.scp.css */
/* ====== 版面佈局 ====== */
.gallery[b-nay9hgses8] {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 16px;
    height: 100%;
    min-height: 400px;
    padding: 12px;
    background: #fff;
    color: #111;
    box-sizing: border-box;
}

@media (max-width: 900px) {
    .gallery[b-nay9hgses8] {
        grid-template-columns: 200px 1fr;
    }
}

@media (max-width: 640px) {
    .gallery[b-nay9hgses8] {
        grid-template-columns: 1fr;
    }
}

/* ====== 左側：相簿清單 ====== */
.gallery-sidebar[b-nay9hgses8] {
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 8px;
    background: #fafafa;
    overflow-y: auto;
}

.sidebar-header[b-nay9hgses8] {
    display: flex;
    justify-content: space-between;
    padding: 4px 8px;
    border-bottom: 1px solid #ccc;
    margin-bottom: 8px;
}

.sidebar-title[b-nay9hgses8] {
    font-weight: 600;
}

/* 相簿項目 */
.album-item[b-nay9hgses8] {
    padding: 10px 12px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #ddd;
    margin-bottom: 8px;
    cursor: pointer;
    transition: background .2s, box-shadow .2s;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .album-item:hover[b-nay9hgses8] {
        background: #f9fafb;
        box-shadow: 0 2px 5px rgba(0,0,0,.08);
    }

/* ====== 右側內容 ====== */
.gallery-content[b-nay9hgses8] {
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 16px;
    background: #fff;
    overflow: auto;
}

.gallery-empty[b-nay9hgses8] {
    color: #666;
    font-size: 14px;
}

/* ====== 相簿標題區（調整版） ====== */
.album-header[b-nay9hgses8] {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
    align-items: flex-start; /* 封面與右側資訊頂端對齊 */
}

.album-cover[b-nay9hgses8] {
    width: 100px;
    height: 100px;
    border-radius: 8px;
    overflow: hidden;
    background: #eee;
    flex-shrink: 0;
    display:flex;
    justify-content:center;
    align-items:center;
}

    .album-cover img[b-nay9hgses8] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* 右側資訊：兩列（標題列 / 次要資訊列） */
.album-info[b-nay9hgses8] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 240px; /* 避免貼太窄導致擠壞 */
}

/* 第一列：標題 + 右側危險動作（直向堆疊） */
.album-title-row[b-nay9hgses8] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 1px solid #eee;
    padding-bottom: 8px;
    gap: 12px;
}

.album-title[b-nay9hgses8] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0; /* 讓文字可省略號 */
    margin: auto 0;
}

.album-name[b-nay9hgses8] {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.album-context[b-nay9hgses8] {
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.album-sep[b-nay9hgses8] {
    display: inline-block;
    width: 1px;
    height: 14px;
    background: #aaa;
    margin: 0 8px;
}

/* 標題列右側：刪除相片 / 刪除相簿 -> 直向 */
.album-title-row .album-actions[b-nay9hgses8] {
    display: flex;
    flex-direction: row;
    gap: 6px;
    align-items: flex-end;
}

/* 第二列：張數/日期 + 右側一般操作（橫向） */
.album-meta[b-nay9hgses8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding-bottom: 8px;
    gap: 12px;
}

    .album-meta .album-actions[b-nay9hgses8] {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap; /* 多顆時自動換行 */
    }

/* RWD：小螢幕時，右側按鈕群改成靠左、橫向排列，避免太高 */
@media (max-width: 640px) {
    .album-title-row[b-nay9hgses8] {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

        .album-title-row .album-actions[b-nay9hgses8] {
            flex-direction: row; /* 直向 -> 橫向 */
            align-items: center;
            justify-content: flex-start;
        }

    .album-meta[b-nay9hgses8] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}


/* ====== 按鈕 ====== */
.btn[b-nay9hgses8] {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    border: 1px solid transparent;
}

    .btn:hover[b-nay9hgses8] {
        opacity: .9;
    }

    .btn:disabled[b-nay9hgses8] {
        opacity: .6;
        cursor: not-allowed;
    }

.btn-sm[b-nay9hgses8] {
    padding: 4px 8px;
    font-size: 12px;
    border-radius: 6px;
}

.btn-primary[b-nay9hgses8] {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
}

.btn-danger[b-nay9hgses8] {
    background: #dc2626;
    border-color: #dc2626;
    color: #fff;
}

.btn-gray[b-nay9hgses8] {
    background: #6b7280;
    border-color: #6b7280;
    color: #fff;
}

.btn-ghost[b-nay9hgses8] {
    background: transparent;
    border: 1px solid #ddd;
    color: #333;
}

/* ====== 單欄 / 兩欄 ====== */
.layout-one[b-nay9hgses8] {
    display: block;
}

.layout-two[b-nay9hgses8] {
    display: grid;
    grid-template-columns: 1fr 360px; /* 左：照片牆；右：上傳佇列 */
    gap: 16px;
}

@media (max-width: 900px) {
    .layout-two[b-nay9hgses8] {
        grid-template-columns: 1fr;
    }
}

/* ====== 小標題 ====== */
.section-title[b-nay9hgses8] {
    margin: 8px 0;
    font-weight: 700;
    font-size: 15px;
}

/* ====== 照片牆 ====== */
.photo-grid[b-nay9hgses8] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
}

.photo-item[b-nay9hgses8] {
    position: relative;
    aspect-ratio: 1/1;
    border: 1px solid #ddd;
    border-radius: 10px;
    background: #f5f5f5;
    overflow: hidden;
    cursor: pointer;
}

    .photo-item img[b-nay9hgses8] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .25s;
    }

    .photo-item:hover img[b-nay9hgses8] {
        transform: scale(1.02);
    }

/* ====== 待上傳縮圖區 ====== */
.upload-grid[b-nay9hgses8] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.pill[b-nay9hgses8], .toppill[b-nay9hgses8] {
    position: absolute;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 999px;
    padding: 2px 6px;
    font-size: 12px;
}

.pill[b-nay9hgses8] {
    left: 6px;
    bottom: 6px;
}

.toppill[b-nay9hgses8] {
    left: 6px;
    top: 6px;
    background: #fcc;
}

.thumb-action[b-nay9hgses8] {
    position: absolute;
    right: 6px;
    top: 6px;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 999px;
    background: rgba(0,0,0,.6);
    color: #fff;
    cursor: pointer;
}

/* ====== 上傳中佇列 ====== */
.queue-grid[b-nay9hgses8] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
}

.queue-thumb[b-nay9hgses8] {
    position: relative;
    aspect-ratio: 1/1;
    border: 1px solid #ddd;
    border-radius: 10px;
    background: #f5f5f5;
    overflow: hidden;
}

.queue-thumb__img[b-nay9hgses8] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 狀態徽章 */
.badge[b-nay9hgses8] {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    border-radius: 999px;
    font-size: 12px;
    background: #e5e7eb;
    color: #111827;
}

.badge-info[b-nay9hgses8] {
    background: #dbeafe;
    color: #1d4ed8;
}

.badge-success[b-nay9hgses8] {
    background: #dcfce7;
    color: #166534;
}

.badge-danger[b-nay9hgses8] {
    background: #fee2e2;
    color: #991b1b;
}

.queue-thumb__badge[b-nay9hgses8] {
    position: absolute;
    left: 6px;
    top: 6px;
}

/* 進度條 */
.queue-thumb__progress[b-nay9hgses8] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 6px;
    background: rgba(0,0,0,.1);
}

.queue-thumb__progress-bar[b-nay9hgses8] {
    height: 100%;
    background: #2563eb;
    transition: width .2s;
}

/* 訊息條 */
.queue-thumb__msg[b-nay9hgses8] {
    position: absolute;
    left: 6px;
    right: 6px;
    bottom: 6px;
    font-size: 12px;
    padding: 4px 6px;
    border-radius: 6px;
    backdrop-filter: saturate(120%) blur(2px);
    max-height: 36px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .queue-thumb__msg.ok[b-nay9hgses8] {
        background: rgba(22,101,52,.15);
        color: #065f46;
    }

    .queue-thumb__msg.err[b-nay9hgses8] {
        background: rgba(153,27,27,.15);
        color: #7f1d1d;
    }

/* 建立時間 */
.queue-thumb__time[b-nay9hgses8] {
    position: absolute;
    right: 6px;
    bottom: 6px;
    font-size: 11px;
    color: #fff;
    background: rgba(0,0,0,.45);
    padding: 2px 6px;
    border-radius: 999px;
}

/* 佇列底部工具列 */
.queue-footer[b-nay9hgses8] {
    margin-top: 8px;
    text-align: right;
}

/* ====== 載入中 Spinner ====== */
.spinner-center[b-nay9hgses8] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px 0;
}

.circle-spinner[b-nay9hgses8] {
    width: 28px;
    height: 28px;
    border: 3px solid rgba(0,0,0,0.15);
    border-top-color: rgba(0,0,0,0.55);
    border-radius: 50%;
    animation: spin-b-nay9hgses8 .8s linear infinite;
}

@keyframes spin-b-nay9hgses8 {
    to {
        transform: rotate(360deg);
    }
}

/* ====== 隱藏檔案挑選器 ====== */
.custom-file.hidden[b-nay9hgses8] {
    position: absolute !important;
    width: 1px;
    height: 0px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
}


.process-section[b-nay9hgses8] {
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 12px;
}
/* /Pages/Pages_Photo/GalleryContentComponent.razor.rz.scp.css */
/* ====== 版面佈局 ====== */
.gallery[b-04bgwkgiv0] {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 16px;
    height: 100%;
    min-height: 400px;
    padding: 12px;
    background: #fff;
    color: #111;
    box-sizing: border-box;
}

@media (max-width: 900px) {
    .gallery[b-04bgwkgiv0] {
        grid-template-columns: 200px 1fr;
    }
}

@media (max-width: 640px) {
    .gallery[b-04bgwkgiv0] {
        grid-template-columns: 1fr;
    }
}

/* ====== 左側：相簿清單 ====== */
.gallery-sidebar[b-04bgwkgiv0] {
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 8px;
    background: #fafafa;
    overflow-y: auto;
}

.sidebar-header[b-04bgwkgiv0] {
    display: flex;
    justify-content: space-between;
    padding: 4px 8px;
    border-bottom: 1px solid #ccc;
    margin-bottom: 8px;
}

.sidebar-title[b-04bgwkgiv0] {
    font-weight: 600;
}

/* 相簿項目 */
.album-item[b-04bgwkgiv0] {
    padding: 10px 12px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #ddd;
    margin-bottom: 8px;
    cursor: pointer;
    transition: background .2s, box-shadow .2s;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .album-item:hover[b-04bgwkgiv0] {
        background: #f9fafb;
        box-shadow: 0 2px 5px rgba(0,0,0,.08);
    }

/* ====== 右側內容 ====== */
.gallery-content[b-04bgwkgiv0] {
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 16px;
    background: #fff;
    overflow: auto;
}

.gallery-empty[b-04bgwkgiv0] {
    color: #666;
    font-size: 14px;
}

/* ====== 相簿標題區（調整版） ====== */
.album-header[b-04bgwkgiv0] {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
    align-items: flex-start; /* 封面與右側資訊頂端對齊 */
}

.album-cover[b-04bgwkgiv0] {
    width: 100px;
    height: 100px;
    border-radius: 8px;
    overflow: hidden;
    background: #eee;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .album-cover img[b-04bgwkgiv0] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* 右側資訊：兩列（標題列 / 次要資訊列） */
.album-info[b-04bgwkgiv0] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 240px; /* 避免貼太窄導致擠壞 */
}

/* 第一列：標題 + 右側危險動作（直向堆疊） */
.album-title-row[b-04bgwkgiv0] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 1px solid #eee;
    padding-bottom: 8px;
    gap: 12px;
}

.album-title[b-04bgwkgiv0] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0; /* 讓文字可省略號 */
    margin: auto 0;
}

.album-name[b-04bgwkgiv0] {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.album-context[b-04bgwkgiv0] {
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.album-sep[b-04bgwkgiv0] {
    display: inline-block;
    width: 1px;
    height: 14px;
    background: #aaa;
    margin: 0 8px;
}

/* 標題列右側：刪除相片 / 刪除相簿 -> 直向 */
.album-title-row .album-actions[b-04bgwkgiv0] {
    display: flex;
    flex-direction: row;
    gap: 6px;
    align-items: flex-end;
}

/* 第二列：張數/日期 + 右側一般操作（橫向） */
.album-meta[b-04bgwkgiv0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding-bottom: 8px;
    gap: 12px;
}

    .album-meta .album-actions[b-04bgwkgiv0] {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap; /* 多顆時自動換行 */
    }

/* RWD：小螢幕時，右側按鈕群改成靠左、橫向排列，避免太高 */
@media (max-width: 640px) {
    .album-title-row[b-04bgwkgiv0] {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

        .album-title-row .album-actions[b-04bgwkgiv0] {
            flex-direction: row; /* 直向 -> 橫向 */
            align-items: center;
            justify-content: flex-start;
        }

    .album-meta[b-04bgwkgiv0] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}


/* ====== 按鈕 ====== */
.btn[b-04bgwkgiv0] {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    border: 1px solid transparent;
}

    .btn:hover[b-04bgwkgiv0] {
        opacity: .9;
    }

    .btn:disabled[b-04bgwkgiv0] {
        opacity: .6;
        cursor: not-allowed;
    }

.btn-sm[b-04bgwkgiv0] {
    padding: 4px 8px;
    font-size: 12px;
    border-radius: 6px;
}

.btn-primary[b-04bgwkgiv0] {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
}

.btn-danger[b-04bgwkgiv0] {
    background: #dc2626;
    border-color: #dc2626;
    color: #fff;
}

.btn-gray[b-04bgwkgiv0] {
    background: #6b7280;
    border-color: #6b7280;
    color: #fff;
}

.btn-ghost[b-04bgwkgiv0] {
    background: transparent;
    border: 1px solid #ddd;
    color: #333;
}

/* ====== 單欄 / 兩欄 ====== */
.layout-one[b-04bgwkgiv0] {
    display: block;
}

.layout-two[b-04bgwkgiv0] {
    display: grid;
    grid-template-columns: 1fr 360px; /* 左：照片牆；右：上傳佇列 */
    gap: 16px;
}

@media (max-width: 900px) {
    .layout-two[b-04bgwkgiv0] {
        grid-template-columns: 1fr;
    }
}

/* ====== 小標題 ====== */
.section-title[b-04bgwkgiv0] {
    margin: 8px 0;
    font-weight: 700;
    font-size: 15px;
}

/* ====== 照片牆 ====== */
.photo-grid[b-04bgwkgiv0] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
}

.photo-item[b-04bgwkgiv0] {
    position: relative;
    aspect-ratio: 1/1;
    border: 1px solid #ddd;
    border-radius: 10px;
    background: #f5f5f5;
    overflow: hidden;
    cursor: pointer;
}

    .photo-item img[b-04bgwkgiv0] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .25s;
    }

    .photo-item:hover img[b-04bgwkgiv0] {
        transform: scale(1.02);
    }

/* ====== 待上傳縮圖區 ====== */
.upload-grid[b-04bgwkgiv0] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.pill[b-04bgwkgiv0], .toppill[b-04bgwkgiv0] {
    position: absolute;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 999px;
    padding: 2px 6px;
    font-size: 12px;
}

.pill[b-04bgwkgiv0] {
    left: 6px;
    bottom: 6px;
}

.toppill[b-04bgwkgiv0] {
    left: 6px;
    top: 6px;
    background: #fcc;
}

.thumb-action[b-04bgwkgiv0] {
    position: absolute;
    right: 6px;
    top: 6px;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 999px;
    background: rgba(0,0,0,.6);
    color: #fff;
    cursor: pointer;
}

/* ====== 上傳中佇列 ====== */
.queue-grid[b-04bgwkgiv0] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
}

.queue-thumb[b-04bgwkgiv0] {
    position: relative;
    aspect-ratio: 1/1;
    border: 1px solid #ddd;
    border-radius: 10px;
    background: #f5f5f5;
    overflow: hidden;
}

.queue-thumb__img[b-04bgwkgiv0] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 狀態徽章 */
.badge[b-04bgwkgiv0] {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    border-radius: 999px;
    font-size: 12px;
    background: #e5e7eb;
    color: #111827;
}

.badge-info[b-04bgwkgiv0] {
    background: #dbeafe;
    color: #1d4ed8;
}

.badge-success[b-04bgwkgiv0] {
    background: #dcfce7;
    color: #166534;
}

.badge-danger[b-04bgwkgiv0] {
    background: #fee2e2;
    color: #991b1b;
}

.queue-thumb__badge[b-04bgwkgiv0] {
    position: absolute;
    left: 6px;
    top: 6px;
}

/* 進度條 */
.queue-thumb__progress[b-04bgwkgiv0] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 6px;
    background: rgba(0,0,0,.1);
}

.queue-thumb__progress-bar[b-04bgwkgiv0] {
    height: 100%;
    background: #2563eb;
    transition: width .2s;
}

/* 訊息條 */
.queue-thumb__msg[b-04bgwkgiv0] {
    position: absolute;
    left: 6px;
    right: 6px;
    bottom: 6px;
    font-size: 12px;
    padding: 4px 6px;
    border-radius: 6px;
    backdrop-filter: saturate(120%) blur(2px);
    max-height: 36px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .queue-thumb__msg.ok[b-04bgwkgiv0] {
        background: rgba(22,101,52,.15);
        color: #065f46;
    }

    .queue-thumb__msg.err[b-04bgwkgiv0] {
        background: rgba(153,27,27,.15);
        color: #7f1d1d;
    }

/* 建立時間 */
.queue-thumb__time[b-04bgwkgiv0] {
    position: absolute;
    right: 6px;
    bottom: 6px;
    font-size: 11px;
    color: #fff;
    background: rgba(0,0,0,.45);
    padding: 2px 6px;
    border-radius: 999px;
}

/* 佇列底部工具列 */
.queue-footer[b-04bgwkgiv0] {
    margin-top: 8px;
    text-align: right;
}

/* ====== 載入中 Spinner ====== */
.spinner-center[b-04bgwkgiv0] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px 0;
}

.circle-spinner[b-04bgwkgiv0] {
    width: 28px;
    height: 28px;
    border: 3px solid rgba(0,0,0,0.15);
    border-top-color: rgba(0,0,0,0.55);
    border-radius: 50%;
    animation: spin-b-04bgwkgiv0 .8s linear infinite;
}

@keyframes spin-b-04bgwkgiv0 {
    to {
        transform: rotate(360deg);
    }
}

/* ====== 隱藏檔案挑選器 ====== */
.custom-file.hidden[b-04bgwkgiv0] {
    position: absolute !important;
    width: 1px;
    height: 0px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
}


.process-section[b-04bgwkgiv0] {
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 12px;
}
/* /Pages/Pages_Photo/GalleryPage_Student.razor.rz.scp.css */
/* 這頁面額外的微調，不碰你 shared gp-* */

.gs-shell[b-wmvvo2kaxo] {
    /* 可留白：如果你想加 page 專屬調整放這 */
}

/* 學生欄：搜尋框（不使用 bootstrap） */
.gs-search[b-wmvvo2kaxo] {
    width: 140px;
    max-width: 55%;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 7px 10px;
    font-size: 13px;
    outline: none;
    background: #fff;
    color: #111827;
}

    .gs-search:focus[b-wmvvo2kaxo] {
        box-shadow: 0 0 0 3px rgba(37, 99, 235, .18);
        border-color: rgba(37, 99, 235, .35);
    }

/* 學生 item：右側數量 badge */
.gs-stuitem[b-wmvvo2kaxo] {
    justify-content: space-between;
}

.gs-badge[b-wmvvo2kaxo] {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 800;
    color: #64748b;
    background: rgba(100, 116, 139, .10);
    border: 1px solid rgba(100, 116, 139, .18);
    padding: 4px 8px;
    border-radius: 999px;
}

/* 右側封面改成學生縮圖 placeholder */
.gs-avatar[b-wmvvo2kaxo] {
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gs-avatar__txt[b-wmvvo2kaxo] {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .12em;
    color: #94a3b8;
}
/* /Pages/Pages_Photo/Gallery_PhotosSection.razor.rz.scp.css */
/* ====== Layout class（VM.LayoutClass 用） ====== */
.layout-one[b-d3m27o45f3] {
    display: block;
}

.layout-two[b-d3m27o45f3] {
    display: grid;
    grid-template-columns: 1fr 360px; /* 左：照片牆；右：上傳佇列 */
    gap: 16px;
}

@media (max-width: 900px) {
    .layout-two[b-d3m27o45f3] {
        grid-template-columns: 1fr;
    }
}

/* ====== 小標題 ====== */
.section-title[b-d3m27o45f3] {
    margin: 8px 0;
    font-weight: 800;
    font-size: 14px;
    color: #111827;
}

/* ====== 照片牆 ====== */
.photo-grid[b-d3m27o45f3] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
}

.photo-item[b-d3m27o45f3] {
    position: relative;
    aspect-ratio: 1/1;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #f3f4f6;
    overflow: hidden;
    cursor: pointer;
}

    .photo-item img[b-d3m27o45f3] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .25s ease;
    }

    .photo-item:hover img[b-d3m27o45f3] {
        transform: scale(1.02);
    }

/* ====== 佇列區（外框） ====== */
.process-section[b-d3m27o45f3] {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 12px;
    background: #fff;
}

/* 上傳中標題（含 spinner） */
.uploading-title[b-d3m27o45f3] {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ====== 待上傳縮圖區 ====== */
.upload-grid[b-d3m27o45f3] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

@media (max-width: 900px) {
    .upload-grid[b-d3m27o45f3] {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 640px) {
    .upload-grid[b-d3m27o45f3] {
        grid-template-columns: repeat(3, 1fr);
    }
}

.pill[b-d3m27o45f3], .toppill[b-d3m27o45f3] {
    position: absolute;
    border-radius: 999px;
    padding: 2px 7px;
    font-size: 12px;
    font-weight: 700;
    backdrop-filter: saturate(120%) blur(2px);
}

.pill[b-d3m27o45f3] {
    left: 6px;
    bottom: 6px;
    background: rgba(255,255,255,.92);
    border: 1px solid #e5e7eb;
    color: #111827;
}

.toppill[b-d3m27o45f3] {
    left: 6px;
    top: 6px;
    background: rgba(254, 226, 226, .9);
    border: 1px solid #fecaca;
    color: #991b1b;
}

/* 右上角叉叉 */
.thumb-action[b-d3m27o45f3] {
    position: absolute;
    right: 6px;
    top: 6px;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 999px;
    background: rgba(0,0,0,.55);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .thumb-action:hover[b-d3m27o45f3] {
        background: rgba(0,0,0,.7);
    }

    .thumb-action:disabled[b-d3m27o45f3] {
        opacity: .55;
        cursor: not-allowed;
    }

/* ====== 上傳中佇列 ====== */
.queue-grid[b-d3m27o45f3] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
}

.queue-thumb[b-d3m27o45f3] {
    position: relative;
    aspect-ratio: 1/1;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #f3f4f6;
    overflow: hidden;
}

.queue-thumb__img[b-d3m27o45f3] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 狀態徽章 */
.badge[b-d3m27o45f3] {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    background: #e5e7eb;
    color: #111827;
}

.badge-info[b-d3m27o45f3] {
    background: #dbeafe;
    color: #1d4ed8;
}

.badge-success[b-d3m27o45f3] {
    background: #dcfce7;
    color: #166534;
}

.badge-danger[b-d3m27o45f3] {
    background: #fee2e2;
    color: #991b1b;
}

.queue-thumb__badge[b-d3m27o45f3] {
    position: absolute;
    left: 6px;
    top: 6px;
}

/* 進度條 */
.queue-thumb__progress[b-d3m27o45f3] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 6px;
    background: rgba(0,0,0,.10);
}

.queue-thumb__progress-bar[b-d3m27o45f3] {
    height: 100%;
    background: #2563eb;
    transition: width .2s ease;
}

/* 訊息條 */
.queue-thumb__msg[b-d3m27o45f3] {
    position: absolute;
    left: 6px;
    right: 6px;
    bottom: 6px;
    font-size: 12px;
    padding: 4px 6px;
    border-radius: 8px;
    backdrop-filter: saturate(120%) blur(2px);
    max-height: 36px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .queue-thumb__msg.ok[b-d3m27o45f3] {
        background: rgba(22,101,52,.15);
        color: #065f46;
    }

    .queue-thumb__msg.err[b-d3m27o45f3] {
        background: rgba(153,27,27,.15);
        color: #7f1d1d;
    }

/* 建立時間 */
.queue-thumb__time[b-d3m27o45f3] {
    position: absolute;
    right: 6px;
    bottom: 6px;
    font-size: 11px;
    color: #fff;
    background: rgba(0,0,0,.45);
    padding: 2px 7px;
    border-radius: 999px;
}

/* 佇列底部工具列 */
.queue-footer[b-d3m27o45f3] {
    margin-top: 8px;
    text-align: right;
}

/* ====== Spinner ====== */
.spinner-center[b-d3m27o45f3] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
}

.circle-spinner[b-d3m27o45f3] {
    width: 28px;
    height: 28px;
    border: 3px solid rgba(0,0,0,0.12);
    border-top-color: rgba(0,0,0,0.5);
    border-radius: 50%;
    animation: spin-b-d3m27o45f3 .8s linear infinite;
}

@keyframes spin-b-d3m27o45f3 {
    to {
        transform: rotate(360deg);
    }
}
/* /Pages/Pages_Photo/SchoolClassGalleryPage.razor.rz.scp.css */
.pagecontainer[b-f34qgcjzr8] {
    display: flex;
    flex-direction: row;
    gap: 0px;
    height: 100vh;
}

.left-section-container[b-f34qgcjzr8] {
    flex-shrink: 0;
    max-height: 100vh;
    overflow: auto;
    padding: 1em 2em;
    width: 280px;
}

.right-section-container[b-f34qgcjzr8] {
    flex-grow: 1;
    max-height: 100vh;
    overflow: auto;
    padding: 1em;
}

.right-section[b-f34qgcjzr8] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
}

.album-header[b-f34qgcjzr8] {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    align-items: center;
    flex-wrap: wrap; /* ✅ RWD 時自動換行 */
}

.album-cover[b-f34qgcjzr8] {
    width: 100px;
    height: 100px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    background-color: #f5f5f5;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .album-cover img[b-f34qgcjzr8] {
        width: 100%;
        height: 100%;
        object-fit: cover; /* ✅ 保持圖片比例填滿裁切 */
        display: block;
    }

.album-photo[b-f34qgcjzr8] {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: transform 0.2s;
}

    .album-photo:hover[b-f34qgcjzr8] {
        transform: scale(1.05);
        cursor: pointer;
    }

.mybtn[b-f34qgcjzr8] {
    background-color: #999;
    color: white;
    border: none;
    font-size: 14px;
    border-radius: 4px;
    padding: 4px 8px;
    margin-left: 8px;
}

    .mybtn:hover[b-f34qgcjzr8] {
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
        cursor: pointer;
        transition: transform 0.2s;
    }

/* ✅ 加入 RWD Media Query */
@media (max-width: 768px) {
    .pagecontainer[b-f34qgcjzr8] {
        flex-direction: column;
        height: auto; /* ✅ 關鍵！讓整體容器高度也變自動 */
    }

    .left-section-container[b-f34qgcjzr8],
    .right-section-container[b-f34qgcjzr8] {
        width: 100%;
        max-height: unset;
        height: auto;
        overflow: visible; /* ✅ 建議同步讓 overflow 放開，避免限制 */
    }

    .right-section[b-f34qgcjzr8] {
        grid-template-columns: repeat(2, 1fr);
    }

    .album-cover[b-f34qgcjzr8] {
        width: 100%;
        height: 100vw;
    }

        .album-cover img[b-f34qgcjzr8] {
            object-fit: cover;
            width: 100%;
            aspect-ratio: 1 / 1;
            height: 100%;
        }
}

/*@media (max-width: 480px) {
    .right-section {
        grid-template-columns: repeat(1, 1fr);
    }

}*/
/* /Pages/Pages_Photo/SchoolClassHistoryGalleryPage.razor.rz.scp.css */
.pagecontainer[b-8bhh8vq0e8] {
    display: flex;
    flex-direction: row;
    gap: 0px;
    height: 100vh;
}

.left-section-container[b-8bhh8vq0e8] {
    flex-shrink: 0;
    max-height: 100vh;
    overflow: auto;
    padding: 1em 2em;
    width: 280px;
}

.right-section-container[b-8bhh8vq0e8] {
    flex-grow: 1;
    max-height: 100vh;
    overflow: auto;
    padding: 1em;
}

.right-section[b-8bhh8vq0e8] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
}

.album-header[b-8bhh8vq0e8] {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    align-items: center;
    flex-wrap: wrap; /* ✅ RWD 時自動換行 */
}

.album-cover[b-8bhh8vq0e8] {
    width: 100px;
    height: 100px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    background-color: #f5f5f5;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .album-cover img[b-8bhh8vq0e8] {
        width: 100%;
        height: 100%;
        object-fit: cover; /* ✅ 保持圖片比例填滿裁切 */
        display: block;
    }

.album-photo[b-8bhh8vq0e8] {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: transform 0.2s;
}

    .album-photo:hover[b-8bhh8vq0e8] {
        transform: scale(1.05);
        cursor: pointer;
    }

.mybtn[b-8bhh8vq0e8] {
    background-color: #999;
    color: white;
    border: none;
    font-size: 14px;
    border-radius: 4px;
    padding: 4px 8px;
    margin-left: 8px;
}

    .mybtn:hover[b-8bhh8vq0e8] {
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
        cursor: pointer;
        transition: transform 0.2s;
    }

/* ✅ 加入 RWD Media Query */
@media (max-width: 768px) {
    .pagecontainer[b-8bhh8vq0e8] {
        flex-direction: column;
        height: auto; /* ✅ 關鍵！讓整體容器高度也變自動 */
    }

    .left-section-container[b-8bhh8vq0e8],
    .right-section-container[b-8bhh8vq0e8] {
        width: 100%;
        max-height: unset;
        height: auto;
        overflow: visible; /* ✅ 建議同步讓 overflow 放開，避免限制 */
    }

    .right-section[b-8bhh8vq0e8] {
        grid-template-columns: repeat(2, 1fr);
    }

    .album-cover[b-8bhh8vq0e8] {
        width: 100%;
        height: 100vw;
    }

        .album-cover img[b-8bhh8vq0e8] {
            object-fit: cover;
            width: 100%;
            aspect-ratio: 1 / 1;
            height: 100%;
        }
}

/*@media (max-width: 480px) {
    .right-section {
        grid-template-columns: repeat(1, 1fr);
    }

}*/
/* /Pages/Pages_Photo/SchoolGalleryPage.razor.rz.scp.css */
/* ====== 版面佈局 ====== */
.gallery[b-qcjr523cx9] {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 16px;
    height: 100%;
    min-height: 400px;
    padding: 12px;
    background: #fff;
    color: #111;
    box-sizing: border-box;
}

@media (max-width: 900px) {
    .gallery[b-qcjr523cx9] {
        grid-template-columns: 200px 1fr;
    }
}

@media (max-width: 640px) {
    .gallery[b-qcjr523cx9] {
        grid-template-columns: 1fr;
    }
}

/* ====== 左側：相簿清單 ====== */
.gallery-sidebar[b-qcjr523cx9] {
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 8px;
    background: #fafafa;
    overflow-y: auto;
}

.sidebar-header[b-qcjr523cx9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 8px;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 10px;
    gap: 8px;
}

.sidebar-title[b-qcjr523cx9] {
    font-weight: 700;
    font-size: 14px;
    color: #111827;
}

/* 相簿項目 */
.album-item[b-qcjr523cx9] {
    padding: 10px 12px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #e5e7eb;
    margin-bottom: 8px;
    cursor: pointer;
    transition: background .2s ease, box-shadow .2s ease, transform .06s ease;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    outline: none;
}

    .album-item:hover[b-qcjr523cx9] {
        background: #f9fafb;
        box-shadow: 0 2px 8px rgba(0,0,0,.08);
    }

    .album-item:active[b-qcjr523cx9] {
        transform: translateY(1px);
    }

    .album-item:focus-visible[b-qcjr523cx9] {
        box-shadow: 0 0 0 3px rgba(37, 99, 235, .25);
    }

/* ====== 右側內容 ====== */
.gallery-content[b-qcjr523cx9] {
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 16px;
    background: #fff;
    overflow: auto;
}

.gallery-empty[b-qcjr523cx9] {
    color: #6b7280;
    font-size: 14px;
    padding: 6px 2px;
}

/* ====== 相簿標題區 ====== */
.album-header[b-qcjr523cx9] {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
    align-items: flex-start;
}

.album-cover[b-qcjr523cx9] {
    width: 100px;
    height: 100px;
    border-radius: 12px;
    overflow: hidden;
    background: #f3f4f6;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #e5e7eb;
}

    .album-cover img[b-qcjr523cx9] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* 右側資訊 */
.album-info[b-qcjr523cx9] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 260px;
}

/* 第一列：標題 + 操作 */
.album-title-row[b-qcjr523cx9] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    gap: 12px;
}

.album-title[b-qcjr523cx9] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin: auto 0;
}

.album-name[b-qcjr523cx9] {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.album-context[b-qcjr523cx9] {
    color: #374151;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px;
}

.album-sep[b-qcjr523cx9] {
    display: inline-block;
    width: 1px;
    height: 14px;
    background: #cbd5e1;
    margin: 0 8px;
}

/* 右側按鈕群 */
.album-actions[b-qcjr523cx9] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
}

/* 第二列：張數/日期 + 右側 */
.album-meta[b-qcjr523cx9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    gap: 12px;
}

    .album-meta > div:first-child[b-qcjr523cx9] {
        color: #374151;
        font-size: 14px;
    }

/* RWD：小螢幕 */
@media (max-width: 640px) {
    .album-title-row[b-qcjr523cx9] {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .album-actions[b-qcjr523cx9] {
        justify-content: flex-start;
    }

    .album-meta[b-qcjr523cx9] {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

/* ====== 按鈕（簡潔 Apple-ish） ====== */
.btn[b-qcjr523cx9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 10px;
    font-size: 14px;
    /*font-weight: 600;*/
    cursor: pointer;
    border: 1px solid transparent;
    user-select: none;
    line-height: 1;
    transition: transform .06s ease, opacity .15s ease, background .15s ease, box-shadow .15s ease;
}

    .btn:hover[b-qcjr523cx9] {
        opacity: .95;
    }

    .btn:active[b-qcjr523cx9] {
        transform: translateY(1px);
    }

    .btn:disabled[b-qcjr523cx9] {
        opacity: .55;
        cursor: not-allowed;
        transform: none;
    }

.btn-sm[b-qcjr523cx9] {
    padding: 5px 10px;
    font-size: 14px;
    border-radius: 10px;
}

.btn-primary[b-qcjr523cx9] {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
}

.btn-danger[b-qcjr523cx9] {
    background: #dc2626;
    border-color: #dc2626;
    color: #fff;
}

.btn-success[b-qcjr523cx9] {
    background: #16a34a;
    border-color: #16a34a;
    color: #fff;
}

.btn-gray[b-qcjr523cx9] {
    background: #6b7280;
    border-color: #6b7280;
    color: #fff;
}

.btn-ghost[b-qcjr523cx9] {
    background: transparent;
    border: 1px solid #e5e7eb;
    color: #374151;
}

.btn:focus-visible[b-qcjr523cx9] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .25);
}

/* ====== Layout class（VM.LayoutClass 用） ====== */
.layout-one[b-qcjr523cx9] {
    display: block;
}

.layout-two[b-qcjr523cx9] {
    display: grid;
    grid-template-columns: 1fr 360px; /* 左：照片牆；右：上傳佇列 */
    gap: 16px;
}

@media (max-width: 900px) {
    .layout-two[b-qcjr523cx9] {
        grid-template-columns: 1fr;
    }
}

/* ====== 小標題 ====== */
.section-title[b-qcjr523cx9] {
    margin: 8px 0;
    font-weight: 800;
    font-size: 14px;
    color: #111827;
}

/* ====== 照片牆 ====== */
.photo-grid[b-qcjr523cx9] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
}

.photo-item[b-qcjr523cx9] {
    position: relative;
    aspect-ratio: 1/1;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #f3f4f6;
    overflow: hidden;
    cursor: pointer;
}

    .photo-item img[b-qcjr523cx9] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .25s ease;
    }

    .photo-item:hover img[b-qcjr523cx9] {
        transform: scale(1.02);
    }

/* ====== 佇列區（外框） ====== */
.process-section[b-qcjr523cx9] {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 12px;
    background: #fff;
}

/* ====== 待上傳縮圖區 ====== */
.upload-grid[b-qcjr523cx9] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

@media (max-width: 900px) {
    .upload-grid[b-qcjr523cx9] {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 640px) {
    .upload-grid[b-qcjr523cx9] {
        grid-template-columns: repeat(3, 1fr);
    }
}

.pill[b-qcjr523cx9], .toppill[b-qcjr523cx9] {
    position: absolute;
    border-radius: 999px;
    padding: 2px 7px;
    font-size: 14px;
    font-weight: 700;
    backdrop-filter: saturate(120%) blur(2px);
}

.pill[b-qcjr523cx9] {
    left: 6px;
    bottom: 6px;
    background: rgba(255,255,255,.92);
    border: 1px solid #e5e7eb;
    color: #111827;
}

.toppill[b-qcjr523cx9] {
    left: 6px;
    top: 6px;
    background: rgba(254, 226, 226, .9);
    border: 1px solid #fecaca;
    color: #991b1b;
}

/* 右上角叉叉 */
.thumb-action[b-qcjr523cx9] {
    position: absolute;
    right: 6px;
    top: 6px;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 999px;
    background: rgba(0,0,0,.55);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .thumb-action:hover[b-qcjr523cx9] {
        background: rgba(0,0,0,.7);
    }

/* ====== 上傳中佇列 ====== */
.queue-grid[b-qcjr523cx9] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
}

.queue-thumb[b-qcjr523cx9] {
    position: relative;
    aspect-ratio: 1/1;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #f3f4f6;
    overflow: hidden;
}

.queue-thumb__img[b-qcjr523cx9] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 狀態徽章 */
.badge[b-qcjr523cx9] {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 800;
    background: #e5e7eb;
    color: #111827;
}

.badge-info[b-qcjr523cx9] {
    background: #dbeafe;
    color: #1d4ed8;
}

.badge-success[b-qcjr523cx9] {
    background: #dcfce7;
    color: #166534;
}

.badge-danger[b-qcjr523cx9] {
    background: #fee2e2;
    color: #991b1b;
}

.queue-thumb__badge[b-qcjr523cx9] {
    position: absolute;
    left: 6px;
    top: 6px;
}

/* 進度條 */
.queue-thumb__progress[b-qcjr523cx9] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 6px;
    background: rgba(0,0,0,.10);
}

.queue-thumb__progress-bar[b-qcjr523cx9] {
    height: 100%;
    background: #2563eb;
    transition: width .2s ease;
}

/* 訊息條 */
.queue-thumb__msg[b-qcjr523cx9] {
    position: absolute;
    left: 6px;
    right: 6px;
    bottom: 6px;
    font-size: 14px;
    padding: 4px 6px;
    border-radius: 8px;
    backdrop-filter: saturate(120%) blur(2px);
    max-height: 36px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .queue-thumb__msg.ok[b-qcjr523cx9] {
        background: rgba(22,101,52,.15);
        color: #065f46;
    }

    .queue-thumb__msg.err[b-qcjr523cx9] {
        background: rgba(153,27,27,.15);
        color: #7f1d1d;
    }

/* 建立時間 */
.queue-thumb__time[b-qcjr523cx9] {
    position: absolute;
    right: 6px;
    bottom: 6px;
    font-size: 14px;
    color: #fff;
    background: rgba(0,0,0,.45);
    padding: 2px 7px;
    border-radius: 999px;
}

/* 佇列底部工具列 */
.queue-footer[b-qcjr523cx9] {
    margin-top: 8px;
    text-align: right;
}

/* ====== Spinner ====== */
.spinner-center[b-qcjr523cx9] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
}

.circle-spinner[b-qcjr523cx9] {
    width: 28px;
    height: 28px;
    border: 3px solid rgba(0,0,0,0.12);
    border-top-color: rgba(0,0,0,0.5);
    border-radius: 50%;
    animation: spin-b-qcjr523cx9 .8s linear infinite;
}

@keyframes spin-b-qcjr523cx9 {
    to {
        transform: rotate(360deg);
    }
}

/* ====== 隱藏檔案挑選器 ====== */
.custom-file.hidden[b-qcjr523cx9] {
    position: absolute !important;
    width: 1px;
    height: 0px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
}
/* /Pages/Pages_Test/TestFreshmanPage.razor.rz.scp.css */
/* Basic Form Container */
.form-container[b-xjdx61oq9m] {
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Grouped Form Sections */
details[b-xjdx61oq9m] {
    margin-bottom: 15px;
}

/* Group Summary */
summary[b-xjdx61oq9m] {
    font-size: 1.2em;
    font-weight: bold;
    cursor: pointer;
    color: #007bff;
    padding: 10px;
    background-color: #f1f1f1;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

    summary:hover[b-xjdx61oq9m] {
        background-color: #e2e2e2;
    }

/* Form Fields */
.form-group[b-xjdx61oq9m] {
    margin-bottom: 15px;
    margin-top: 15px;
    margin-left: 15px;
}



/* Responsive Styles */
@media (max-width: 768px) {
    .form-container[b-xjdx61oq9m] {
        padding: 15px;
    }

    .form-label[b-xjdx61oq9m] {
        font-size: 0.9em;
    }

    .form-control[b-xjdx61oq9m] {
        font-size: 0.9em;
    }

    summary[b-xjdx61oq9m] {
        font-size: 1em;
    }
}

.required[b-xjdx61oq9m]::before {
    content: "*";
    color: red; /* 想整個 label 變紅，把這行搬到 .required 本身 */
    margin: 0 2px;
    font-weight: 700; /* 可有可無，看風格 */
}

.noselect[b-xjdx61oq9m] {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

details .details-content[b-xjdx61oq9m] {
    max-height: 0;
    overflow: auto;
    transition: max-height 0.8s ease;
}

details[open] .details-content[b-xjdx61oq9m] {
    max-height: 1500px; /* 要設夠大，足以容納所有內容 */
}
/* /Pages/Pages_Test/TestPage.razor.rz.scp.css */

.page-container[b-sm45czyaks] {
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 1em;
    gap: 1em;
    justify-content: flex-end;
}

.header-container[b-sm45czyaks] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.logo[b-sm45czyaks] {
    width: 30vw;
    height: 30vw;
}

.action-container[b-sm45czyaks] {
    width: 100%;
    padding: 16px;
    border: 1px solid #ccc;
    border-radius: 8px;
    position: relative;
}

.action-container-title[b-sm45czyaks] {
    font-size: 0.9rem;
    font-weight: bold;
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    background-color: white;
    color: #666;
    padding: 0 5px;
    z-index: 1;
}

.button-group[b-sm45czyaks] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 8px;
}

.action-button[b-sm45czyaks] {
    padding: 10px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}


.page-footer[b-sm45czyaks] {
    position: absolute;
    bottom: 0;
    padding: 4px;
    background-color: whitesmoke;
    width: 100%;
    text-align: center;
}
/* /Pages/RedirectPage/Login.razor.rz.scp.css */
.pagecontainer[b-u8irr8akw7] {
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

.page-header[b-u8irr8akw7] {
    text-align: center;
    margin-bottom: 60px;
}

.inputarea[b-u8irr8akw7] {
    min-width: 20vw;
    width: 350px;
    max-width: 90vw;
}

.separator[b-u8irr8akw7] {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 20px 0;
}

    .separator[b-u8irr8akw7]::before,
    .separator[b-u8irr8akw7]::after {
        content: '';
        flex: 1;
        border-bottom: 1px solid #999; /* 分隔線顏色 */
    }

    .separator[b-u8irr8akw7]::before {
        margin-right: 10px; /* 文字左側的間距 */
    }

    .separator[b-u8irr8akw7]::after {
        margin-left: 10px; /* 文字右側的間距 */
    }

    .separator span[b-u8irr8akw7] {
        padding: 0 10px; /* 文字的內邊距 */
        color: #999; /* 文字顏色 */
    }