/* 後台樣式（KaiyuLocal /admin）。刻意簡潔，沿用 site.css 的 .btn 基礎。 */

.admin-page {
    max-width: 1000px;
    margin: 2rem auto;
    padding: 0 1.5rem;
}

.admin-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.admin-topbar h1 { margin: 0; font-size: 1.6rem; }

.admin-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

/* 表單 */
.admin-form { display: flex; flex-direction: column; gap: 1rem; max-width: 460px; }
.admin-form-wide { max-width: 720px; }
.admin-form label { display: flex; flex-direction: column; gap: .35rem; font-weight: 600; color: #333; }

.admin-input {
    font: inherit;
    padding: .55rem .7rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    width: 100%;
    box-sizing: border-box;
}
.admin-input:focus { outline: 2px solid #1565c0; border-color: #1565c0; }
textarea.admin-input { resize: vertical; }
.admin-input-num { width: 80px; }

.admin-checkbox { flex-direction: row !important; align-items: center; gap: .5rem; font-weight: 600; }
.admin-checkbox input { width: auto; }

.admin-form-actions { display: flex; gap: .75rem; margin-top: .5rem; }

/* 篩選列 */
.admin-filter {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 1rem;
}
.admin-filter .admin-input { width: auto; min-width: 160px; }

.admin-count { color: #666; margin: .25rem 0 1rem; }

/* 表格 */
.admin-table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.admin-table th, .admin-table td {
    text-align: left;
    padding: .6rem .7rem;
    border-bottom: 1px solid #eee;
    vertical-align: middle;
}
.admin-table th { color: #555; font-weight: 600; background: #fafafa; }
.admin-table code { background: #f3f3f3; padding: .1rem .35rem; border-radius: 4px; font-size: .85em; }
.row-inactive { opacity: .55; }
.admin-col-actions { white-space: nowrap; }

.inline-form { display: inline; }

/* 分類管理（div 列） */
.cat-head, .cat-row {
    display: grid;
    grid-template-columns: 90px 1fr 90px auto;
    gap: .6rem;
    align-items: center;
    padding: .5rem 0;
    border-bottom: 1px solid #eee;
}
.cat-head { font-weight: 600; color: #555; }
.cat-count { color: #666; }
.cat-actions { display: flex; gap: .4rem; }

/* 徽章 */
.badge { display: inline-block; padding: .15rem .5rem; border-radius: 999px; font-size: .85rem; font-weight: 600; }
.badge-on { background: #e3f5e6; color: #1b7a36; }
.badge-off { background: #fde7e7; color: #b3261e; }

/* 訊息 */
.admin-error { color: #b3261e; background: #fde7e7; padding: .6rem .8rem; border-radius: 6px; }
.admin-notice { color: #1b5e20; background: #e8f5e9; padding: .6rem .8rem; border-radius: 6px; }
.admin-hint { color: #888; font-size: .95rem; margin-top: 1rem; }

/* 按鈕變體（若 site.css 未提供則在此補上） */
.btn-sm { padding: .35rem .8rem; font-size: .95rem; }
.btn-xs { padding: .25rem .55rem; font-size: .85rem; }
/* WEB-1：限定在後台版面（.admin-page）內，避免後台藍色覆蓋前台品牌青的 .btn-outline。 */
.admin-page .btn-outline { background: #fff; color: #1565c0; border: 1px solid #1565c0; }
.admin-page .btn-outline:hover { background: #e8f0fe; }
.btn-danger { background: #b3261e; color: #fff; border: 1px solid #b3261e; }
.btn-danger:hover { background: #8c1c16; }
.btn-danger[disabled] { opacity: .4; cursor: not-allowed; }

.admin-login { max-width: 420px; }

/* ── 空狀態（後台查無結果）WEB-2 ── */
.admin-empty { text-align: center; color: #777; padding: 2rem 1rem; }

/* ── 自訂錯誤／404 頁（WEB-1）── */
.error-page { max-width: 640px; margin: 3rem auto; text-align: center; padding: 0 1.5rem; }
.error-page .error-code { font-size: 3.5rem; font-weight: 800; color: #0B6E72; margin: 0 0 .25rem; letter-spacing: .05em; }
.error-page h1 { margin: 0 0 1rem; font-size: 1.6rem; }
.error-page .error-msg { color: #555; line-height: 1.7; margin: 0 0 1.75rem; }
.error-page .error-ctas { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }

/* .sr-only 已移至 site.css 作為全站共用無障礙工具（WEB-2），此處不再重複定義。 */

/* ── 鍵盤焦點可見（WCAG 2.4.7）WEB-4 ── */
.admin-page a:focus-visible,
.admin-page button:focus-visible,
.admin-page .btn:focus-visible,
.admin-page .btn-danger:focus-visible { outline: 2px solid #0B6E72; outline-offset: 2px; border-radius: 4px; }