@charset "UTF-8";
@import url("yf-ui-custom.css");
/* ==========================================================================
   yf-ui.css — 預約系統統一風格樣式（Design System / Component Layer）
   --------------------------------------------------------------------------
   ● 本檔是「全站唯一的風格來源」：卡片、標題、表單欄位、按鈕、標籤、提示、
     徽章、表格等的顏色、圓角、陰影、字級、間距一律由這裡定義。
   ● 頁面中的 Tailwind 只用於「排版」（grid / flex / 寬度 / 間距位置），
     不要再用 Tailwind 的 bg-*、border-*、rounded-*、shadow-*、text-xs… 去
     描述元件的「外觀」，避免各頁漂移。
   ● 選擇器一律加 `body` 前綴（specificity 0,1,1），確保穩定勝過 Tailwind
     的單一 class 工具類（0,1,0），因此不需要 !important。
   ● 修改後請調整引入頁面的 ?v= 版本（自動取 filemtime，無需手動）。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 設計權杖 (Design Tokens)
   -------------------------------------------------------------------------- */
:root {
    /* 文字色 */
    --yf-ink: #0f172a;          /* slate-900：標題、主要文字 */
    --yf-ink-2: #334155;        /* slate-700：內文 */
    --yf-ink-3: #4b5563;        /* gray-600：次要說明 */
    --yf-muted: #6b7280;        /* gray-500：輔助文字 */
    --yf-faint: #9ca3af;        /* gray-400：提示、placeholder */

    /* 表面色 */
    --yf-surface: #ffffff;      /* 卡片/欄位底色 */
    --yf-surface-soft: #f9fafb; /* gray-50：輸入框預設底、hover 底 */
    --yf-surface-mute: #f3f4f6; /* gray-100：頁面底、停用底 */
    --yf-line: #f3f4f6;         /* gray-100：卡片外框、分隔線 */
    --yf-line-strong: #e5e7eb;  /* gray-200：輸入框外框 */

    /* 主色 / 狀態色 */
    --yf-primary: #0f172a;
    --yf-primary-hover: #1e293b;
    --yf-primary-soft: #f1f5f9;
    --yf-focus: #0f172a;
    --yf-danger: #e11d48;       /* rose-600 */
    --yf-danger-soft: #fff1f2;
    --yf-success: #059669;      /* emerald-600 */
    --yf-success-soft: #ecfdf5;
    --yf-warning: #b45309;      /* amber-700 */
    --yf-warning-soft: #fffbeb;
    --yf-info: #2563eb;
    --yf-info-soft: #eff6ff;

    /* 圓角 */
    --yf-radius-sm: 0.625rem;   /* 10px：小徽章、小按鈕 */
    --yf-radius: 0.75rem;       /* 12px：輸入框、一般按鈕 (rounded-xl) */
    --yf-radius-lg: 1rem;       /* 16px：提示框、次要卡片 (rounded-2xl) */
    --yf-radius-xl: 1.5rem;     /* 24px：主要卡片 (rounded-3xl) */
    --yf-radius-pill: 999px;

    /* 陰影 */
    --yf-shadow-none: none;
    --yf-shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
    --yf-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.08), 0 1px 2px -1px rgba(15, 23, 42, 0.05);
    --yf-shadow-lg: 0 12px 32px -12px rgba(15, 23, 42, 0.28);

    /* 元件尺寸 */
    --yf-field-pad-y: 0.625rem;  /* 輸入框上下內距 */
    --yf-field-pad-x: 0.8125rem; /* 輸入框左右內距 */
    --yf-field-font: 0.8125rem;  /* 13px */
    --yf-btn-h: 2.5rem;
    --yf-btn-h-sm: 2rem;
    --yf-btn-h-lg: 3rem;
    --yf-btn-font: 0.75rem;
    --yf-btn-font-sm: 0.6875rem;
    --yf-btn-font-lg: 0.8125rem;
    --yf-btn-radius: var(--yf-radius);

    /* 按鈕顏色（與 --yf-primary 分開，避免改按鈕時連帶影響側邊欄與選取狀態） */
    --yf-btn-primary-bg: var(--yf-primary);
    --yf-btn-primary-bg-hover: var(--yf-primary-hover);
    --yf-btn-primary-text: #ffffff;
    --yf-btn-secondary-text: var(--yf-ink-2);
    --yf-btn-secondary-border: var(--yf-line-strong);
    --yf-btn-secondary-hover-bg: var(--yf-surface-soft);

    /* 側邊欄 */
    --yf-sidebar-w: 16rem;       /* 桌面側邊欄寬度 */
    --yf-sidebar-w-rail: 4.5rem; /* 桌面收合（圖示列）寬度 */
    --yf-nav-h: 2.375rem;        /* 導覽項目最小高度 */
    --yf-nav-icon: 1.125rem;     /* 導覽圖示尺寸（18px） */
    --yf-nav-font: 0.8125rem;    /* 桌面導覽字級（13px） */
    --yf-nav-font-mobile: 0.9375rem; /* 手機導覽字級（15px） */

    /* 過場 */
    --yf-transition: background-color 0.18s ease, color 0.18s ease,
        border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

@media (min-width: 768px) {
    :root {
        --yf-field-font: 0.875rem; /* 桌機 14px，維持原本 text-sm 觀感 */
    }
}

/* --------------------------------------------------------------------------
   2. 基礎文字與表單元素
   -------------------------------------------------------------------------- */
body {
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Noto Sans TC",
        "PingFang TC", "Microsoft JhengHei", "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

body input[type="checkbox"],
body input[type="radio"] {
    accent-color: var(--yf-primary);
    width: 1rem;
    height: 1rem;
    cursor: pointer;
}

body ::placeholder {
    color: var(--yf-faint);
    opacity: 1;
}

body ::selection {
    background: var(--yf-primary);
    color: #fff;
}

/* --------------------------------------------------------------------------
   3. 頁面標題 / 區塊標題
   -------------------------------------------------------------------------- */
body .yf-page-head {
    margin-bottom: 0.5rem;
}

body .yf-eyebrow {
    display: block;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--yf-faint);
}

body .yf-page-title {
    margin: 0.25rem 0 0;
    font-size: 1.5rem;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--yf-ink);
}

@media (min-width: 768px) {
    body .yf-page-title {
        font-size: 1.875rem;
    }
}

body .yf-page-sub {
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: var(--yf-muted);
}

/* 卡片內的分段標題（原：text-base font-bold + 底部細線） */
body .yf-section-title {
    margin: 0 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--yf-line);
    font-size: 1rem;
    line-height: 1.4;
    font-weight: 700;
    color: var(--yf-ink);
}

/* 小標（原：text-xs uppercase tracking-wide） */
body .yf-sub-title {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--yf-ink-2);
}

/* --------------------------------------------------------------------------
   4. 卡片 (Card)
   -------------------------------------------------------------------------- */
body .yf-card {
    background: var(--yf-surface);
    border: 1px solid var(--yf-line);
    border-radius: var(--yf-radius-xl);
    box-shadow: var(--yf-shadow-sm);
    padding: 1.25rem;
}

@media (min-width: 768px) {
    body .yf-card {
        padding: 2rem;
    }
}

body .yf-card--soft {
    border-color: var(--yf-line-strong);
    box-shadow: var(--yf-shadow-none);
}

body .yf-card--flat {
    box-shadow: var(--yf-shadow-none);
}

body .yf-card--pop {
    box-shadow: var(--yf-shadow-lg);
    border-color: var(--yf-line-strong);
}

/* 有標題列＋內容區的卡片：自身不留內距，由 header/body 各自控制 */
body .yf-card--flush {
    padding: 0;
    overflow: hidden;
}

/* 固定高度的統計小卡（h-36 之類）：使用較精簡的內距 */
body .yf-card--tight {
    padding: 1.5rem;
}

@media (min-width: 768px) {
    body .yf-card--tight {
        padding: 1.5rem;
    }
}

body .yf-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1.25rem;
    background: var(--yf-surface);
    border-bottom: 1px solid var(--yf-line);
}

@media (min-width: 768px) {
    body .yf-card__header {
        padding: 1.5rem 2rem;
    }
}

body .yf-card__title {
    margin: 0;
    font-size: 1rem;
    line-height: 1.4;
    font-weight: 700;
    color: var(--yf-ink);
}

@media (min-width: 768px) {
    body .yf-card__title {
        font-size: 1.125rem;
    }
}

body .yf-card__body {
    padding: 1.25rem;
}

@media (min-width: 768px) {
    body .yf-card__body {
        padding: 1.75rem 2rem;
    }
}

body .yf-card__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1.25rem;
    border-top: 1px solid var(--yf-line);
    background: var(--yf-surface-soft);
}

/* 卡片內的小卡（原本常見的 bg-gray-50 區塊） */
body .yf-subcard {
    background: var(--yf-surface-soft);
    border: 1px solid var(--yf-line);
    border-radius: var(--yf-radius);
    padding: 1rem;
}

/* --------------------------------------------------------------------------
   5. 表單欄位 (Form)
   -------------------------------------------------------------------------- */
body .yf-label {
    display: block;
    margin-bottom: 0.375rem;
    font-size: 0.6875rem;
    line-height: 1.35;
    font-weight: 600;
    color: var(--yf-ink-3);
}

body .yf-label--lg {
    font-size: 0.75rem;
}

body .yf-hint {
    margin-top: 0.25rem;
    font-size: 0.6875rem;
    line-height: 1.5;
    color: var(--yf-faint);
}

body .yf-required::after {
    content: " *";
    color: var(--yf-danger);
}

body .yf-input,
body .yf-select,
body .yf-textarea {
    display: block;
    padding: var(--yf-field-pad-y) var(--yf-field-pad-x);
    font-size: var(--yf-field-font);
    line-height: 1.45;
    color: var(--yf-ink);
    background-color: var(--yf-surface-soft);
    border: 1px solid var(--yf-line-strong);
    border-radius: var(--yf-radius);
    transition: var(--yf-transition);
    outline: none;
    box-sizing: border-box;
}

body .yf-textarea {
    min-height: 5.5rem;
    resize: vertical;
}

body .yf-select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2.25rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.625rem center;
    background-size: 1rem 1rem;
    cursor: pointer;
}

body .yf-input:hover:not(:disabled),
body .yf-select:hover:not(:disabled),
body .yf-textarea:hover:not(:disabled) {
    border-color: #d1d5db; /* gray-300 */
}

body .yf-input:focus,
body .yf-select:focus,
body .yf-textarea:focus {
    background-color: var(--yf-surface);
    border-color: var(--yf-focus);
    box-shadow: 0 0 0 1px var(--yf-focus);
}

body .yf-input:disabled,
body .yf-select:disabled,
body .yf-textarea:disabled,
body .yf-input[readonly] {
    background-color: var(--yf-surface-mute);
    color: var(--yf-muted);
    cursor: not-allowed;
}

body .yf-input--white {
    background-color: var(--yf-surface);
}

/* 膠囊型欄位（原本 rounded-full 的搜尋框等） */
body .yf-input--pill,
body .yf-select--pill,
body .yf-textarea--pill {
    border-radius: var(--yf-radius-pill);
}

/* 檔案上傳 */
body .yf-file {
    display: block;
    width: 100%;
    font-size: 0.75rem;
    color: var(--yf-muted);
}

body .yf-file::file-selector-button {
    margin-right: 0.75rem;
    padding: 0.45rem 0.9rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #fff;
    background-color: var(--yf-primary);
    border: 0;
    border-radius: var(--yf-radius);
    cursor: pointer;
    transition: var(--yf-transition);
}

body .yf-file::file-selector-button:hover {
    background-color: var(--yf-primary-hover);
}

body .yf-field-error {
    margin-top: 0.25rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--yf-danger);
}

/* --------------------------------------------------------------------------
   6. 按鈕 (Button)
   -------------------------------------------------------------------------- */
body .yf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: var(--yf-btn-h);
    padding: 0 1.25rem;
    font-size: var(--yf-btn-font);
    font-weight: 600;
    line-height: 1;
    color: var(--yf-ink-2);
    background-color: var(--yf-surface);
    border: 1px solid transparent;
    border-radius: var(--yf-btn-radius);
    box-shadow: var(--yf-shadow-none);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: var(--yf-transition);
}

body .yf-btn:disabled,
body .yf-btn[disabled],
body .yf-btn.is-disabled {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
}

body .yf-btn--sm {
    height: var(--yf-btn-h-sm);
    padding: 0 0.9rem;
    font-size: var(--yf-btn-font-sm);
}

body .yf-btn--lg {
    height: var(--yf-btn-h-lg);
    padding: 0 2rem;
    font-size: var(--yf-btn-font-lg);
}

body .yf-btn--pill {
    border-radius: var(--yf-radius-pill);
}

/* 原本以 block 排版的按鈕／導覽項目：維持區塊級（滿版）而非縮成內容寬度 */
body .yf-btn--block {
    display: flex;
}

body .yf-btn--primary {
    color: var(--yf-btn-primary-text);
    background-color: var(--yf-btn-primary-bg);
    box-shadow: var(--yf-shadow-sm);
}

body .yf-btn--primary:hover {
    background-color: var(--yf-btn-primary-bg-hover);
}

body .yf-btn--secondary {
    color: var(--yf-btn-secondary-text);
    background-color: var(--yf-surface);
    border-color: var(--yf-btn-secondary-border);
    box-shadow: var(--yf-shadow-sm);
}

body .yf-btn--secondary:hover {
    background-color: var(--yf-btn-secondary-hover-bg);
    border-color: var(--yf-btn-secondary-border);
}

body .yf-btn--quiet {
    color: var(--yf-ink-3);
    background-color: var(--yf-surface-mute);
    border-color: transparent;
}

body .yf-btn--quiet:hover {
    background-color: var(--yf-line-strong);
    color: var(--yf-ink);
}

body .yf-btn--ghost {
    color: var(--yf-muted);
    background-color: transparent;
    border-color: transparent;
    box-shadow: var(--yf-shadow-none);
}

body .yf-btn--ghost:hover {
    color: var(--yf-ink);
    background-color: var(--yf-surface-soft);
}

body .yf-btn--danger {
    color: #fff;
    background-color: var(--yf-danger);
    box-shadow: var(--yf-shadow-sm);
}

body .yf-btn--danger:hover {
    background-color: #be123c; /* rose-700 */
}

body .yf-btn--danger-soft {
    color: var(--yf-danger);
    background-color: var(--yf-danger-soft);
    border-color: #fecdd3;
}

body .yf-btn--danger-soft:hover {
    background-color: #ffe4e6;
}

body .yf-btn--success {
    color: #fff;
    background-color: var(--yf-success);
    box-shadow: var(--yf-shadow-sm);
}

body .yf-btn--success:hover {
    background-color: #047857; /* emerald-700 */
}

/* --------------------------------------------------------------------------
   7. 徽章 / 狀態標籤 (Badge)
   -------------------------------------------------------------------------- */
body .yf-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.55rem;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.3;
    border-radius: var(--yf-radius-pill);
    background-color: var(--yf-surface-mute);
    color: var(--yf-ink-3);
    white-space: nowrap;
}

body .yf-badge--success {
    background-color: var(--yf-success-soft);
    color: var(--yf-success);
}

body .yf-badge--danger {
    background-color: var(--yf-danger-soft);
    color: var(--yf-danger);
}

body .yf-badge--warning {
    background-color: var(--yf-warning-soft);
    color: var(--yf-warning);
}

body .yf-badge--info {
    background-color: var(--yf-info-soft);
    color: var(--yf-info);
}

body .yf-badge--solid {
    background-color: var(--yf-primary);
    color: #fff;
}

/* --------------------------------------------------------------------------
   8. 提示訊息 (Alert)
   -------------------------------------------------------------------------- */
body .yf-alert {
    display: block;
    padding: 0.875rem 1.125rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.6;
    border: 1px solid var(--yf-line-strong);
    border-radius: var(--yf-radius-lg);
    background-color: var(--yf-surface-soft);
    color: var(--yf-ink-2);
    word-break: break-word;
}

body .yf-alert--success {
    border-color: #a7f3d0;
    background-color: var(--yf-success-soft);
    color: #047857;
}

body .yf-alert--danger {
    border-color: #fecdd3;
    background-color: var(--yf-danger-soft);
    color: #be123c;
}

body .yf-alert--warning {
    border-color: #fde68a;
    background-color: var(--yf-warning-soft);
    color: var(--yf-warning);
}

body .yf-alert--info {
    border-color: #bfdbfe;
    background-color: var(--yf-info-soft);
    color: #1d4ed8;
}

/* --------------------------------------------------------------------------
   9. 表格 (Table)
   -------------------------------------------------------------------------- */
body .yf-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
}

body .yf-table th {
    padding: 0.75rem 0.875rem;
    text-align: left;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--yf-muted);
    background-color: var(--yf-surface-soft);
    border-bottom: 1px solid var(--yf-line-strong);
    white-space: nowrap;
}

body .yf-table td {
    padding: 0.75rem 0.875rem;
    color: var(--yf-ink-2);
    border-bottom: 1px solid var(--yf-line);
    vertical-align: middle;
}

body .yf-table tbody tr:hover {
    background-color: var(--yf-surface-soft);
}

/* --------------------------------------------------------------------------
   10. 其他共用元件
   -------------------------------------------------------------------------- */
/* 空狀態 */
body .yf-empty {
    padding: 2.5rem 1.25rem;
    text-align: center;
    font-size: 0.75rem;
    line-height: 1.7;
    color: var(--yf-faint);
    background-color: var(--yf-surface-soft);
    border-radius: var(--yf-radius-lg);
}

/* 分隔線 */
body .yf-divider {
    height: 1px;
    background-color: var(--yf-line);
    border: 0;
    margin: 0;
}

/* 工具列（搜尋/篩選列） */
body .yf-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

/* 資訊列 (label / value) */
body .yf-kv-label {
    font-size: 0.6875rem;
    color: var(--yf-faint);
}

body .yf-kv-value {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--yf-ink);
}

/* 開合卡片按鈕（沿用 admin_operations.php 樣式） */
body .yf-collapse-btn {
    height: auto;
    padding: 0.375rem 1.25rem;
}

/* 對話框（modal）內容卡 */
body .yf-modal-card {
    background: var(--yf-surface);
    border: 1px solid var(--yf-line);
    border-radius: var(--yf-radius-xl);
    box-shadow: var(--yf-shadow-lg);
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   11. 側邊欄（Sidebar）／側邊導覽項目／圖示按鈕
   --------------------------------------------------------------------------
   三段式結構：品牌（固定）／導覽（可捲）／底部使用者區（固定）。
   桌面可收合成 --yf-sidebar-w-rail（圖示列）；手機為滑出抽屜，
   開合由頁面 JS 切換 `-translate-x-full`／`hidden` 與 `yf-scroll-lock`。
   選中樣式＝淡底 + 左側 3px 指示條（`.is-active`）。
   -------------------------------------------------------------------------- */
body .yf-sidebar {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 20rem;
}

/* 平台主控台：以靛藍為主色（只覆寫選中的區域權杖，其他樣式共用） */
body .yf-sidebar--platform {
    --yf-primary: #4f46e5;
    --yf-primary-soft: #eef2ff;
}

/* 品牌區（不隨導覽捲動；與下方使用者區共用同一條分隔線） */
body .yf-sidebar__brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.125rem 1rem 0.625rem;
}

/* 使用者區（Logo／品牌下方，不隨導覽捲動） */
body .yf-sidebar__user {
    padding: 0 1rem 1rem;
    border-bottom: 1px solid var(--yf-line);
}

body .yf-sidebar__user .yf-user-chip {
    margin: 0;
}

/* 導覽區（唯一可捲動的區塊） */
body .yf-sidebar__nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0.75rem;
}

/* 底部使用者區（不隨導覽捲動） */
body .yf-sidebar__foot {
    display: flex;
    flex-direction: column;
    padding: 0.75rem;
    border-top: 1px solid var(--yf-line);
}

/* 機構標記：有 Logo 放 <img>，沒有時放名稱首字 */
body .yf-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--yf-radius-sm);
    overflow: hidden;
    background: var(--yf-primary);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 800;
}

body .yf-brand-mark img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body .yf-brand-text {
    min-width: 0;
}

body .yf-brand-name {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--yf-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body .yf-brand-sub {
    margin: 0.125rem 0 0;
    font-size: 0.625rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--yf-faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body .yf-nav-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    min-height: var(--yf-nav-h);
    padding: 0.5rem 0.75rem;
    font-size: var(--yf-nav-font-mobile);
    font-weight: 500;
    line-height: 1.25;
    color: var(--yf-ink-3);
    border-radius: var(--yf-radius-sm);
    text-decoration: none;
    transition: var(--yf-transition);
}

body .yf-nav-item + .yf-nav-item {
    margin-top: 0.125rem;
}

body .yf-nav-item:hover {
    background-color: var(--yf-surface-soft);
    color: var(--yf-ink);
}

body .yf-nav-item:focus-visible {
    outline: 2px solid var(--yf-focus);
    outline-offset: 2px;
}

/* 選中樣式（方案 A）：淡底 + 左側 3px 指示條 */
body .yf-nav-item.is-active {
    background-color: var(--yf-primary-soft);
    color: var(--yf-ink);
    font-weight: 600;
}

body .yf-nav-item.is-active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 3px;
    height: 1.125rem;
    transform: translateY(-50%);
    border-radius: 0 3px 3px 0;
    background: var(--yf-primary);
}

body .yf-nav-item__icon {
    display: inline-flex;
    flex-shrink: 0;
    width: var(--yf-nav-icon);
    height: var(--yf-nav-icon);
    color: var(--yf-faint);
    transition: var(--yf-transition);
}

body .yf-nav-item__icon svg {
    width: 100%;
    height: 100%;
}

body .yf-nav-item:hover .yf-nav-item__icon,
body .yf-nav-item.is-active .yf-nav-item__icon {
    color: currentColor;
}

body .yf-nav-item__label {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

body .yf-nav-item__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 1.25rem;
    height: 1.125rem;
    margin-left: auto;
    padding: 0 0.375rem;
    border-radius: var(--yf-radius-pill);
    background: var(--yf-surface-mute);
    color: var(--yf-ink-2);
    font-size: 0.625rem;
    font-weight: 700;
}

body .yf-nav-item.is-active .yf-nav-item__badge {
    background: var(--yf-surface);
    color: var(--yf-ink);
}

body .yf-nav-item--danger {
    color: var(--yf-danger);
}

body .yf-nav-item--danger:hover {
    background-color: var(--yf-danger-soft);
    color: #be123c;
}

body .yf-nav-item--sub {
    min-height: 2rem;
    font-size: 0.75rem;
    color: var(--yf-muted);
}

/* 分組標籤（組內沒有可見項目時，PHP 端不會輸出整組） */
body .yf-nav-group + .yf-nav-group {
    margin-top: 0.875rem;
}

body .yf-nav-group__label,
body .yf-sidebar__label {
    margin: 0 0 0.375rem;
    padding: 0 0.5rem;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--yf-faint);
}

/* 底部使用者卡 */
body .yf-user-chip {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 0.25rem 0 0.375rem;
    padding: 0.5rem 0.625rem;
    border-radius: var(--yf-radius-sm);
    background: var(--yf-surface-soft);
}

body .yf-user-chip__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--yf-radius-pill);
    background: var(--yf-primary);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
}

body .yf-user-chip__meta {
    min-width: 0;
}

body .yf-user-chip__name {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--yf-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body .yf-user-chip__role {
    font-size: 0.625rem;
    color: var(--yf-faint);
}

/* 平台代理登入提示 */
body .yf-impersonate-chip {
    display: inline-block;
    align-self: flex-start;
    margin: 0 0 0.375rem;
    padding: 0.1875rem 0.5rem;
    border-radius: var(--yf-radius-pill);
    background: var(--yf-warning-soft);
    color: var(--yf-warning);
    font-size: 0.625rem;
    font-weight: 600;
}

/* 手機版頂部橫條（品牌 + 選單鈕）：只在 <1024px 顯示，見檔尾 §12 */
body .yf-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    padding: 0.625rem 1rem;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--yf-line);
}

body .yf-topbar__brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

body .yf-topbar .yf-brand-mark {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.5rem;
    font-size: 0.625rem;
}

body .yf-topbar__name {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--yf-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 抽屜遮罩 */
body .yf-sidebar-backdrop {
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(2px);
}

/* 抽屜開啟時鎖住背景捲動（由頁面 JS 切換 class） */
body.yf-scroll-lock {
    overflow: hidden;
}

/* 桌面收合鈕：浮在側欄右緣 */
body .yf-sidebar__collapse {
    position: absolute;
    top: 1.375rem;
    right: -0.75rem;
    z-index: 10;
    display: none;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border: 1px solid var(--yf-line-strong);
    border-radius: var(--yf-radius-pill);
    background: var(--yf-surface);
    color: var(--yf-muted);
    box-shadow: var(--yf-shadow-sm);
    cursor: pointer;
    transition: var(--yf-transition);
}

body .yf-sidebar__collapse svg {
    width: 0.875rem;
    height: 0.875rem;
    transition: transform 0.2s ease;
}

body .yf-sidebar__collapse:hover {
    color: var(--yf-ink);
    border-color: var(--yf-faint);
}

/* 桌面（>=1024px）：固定寬度 + 可收合成圖示列 */
@media (min-width: 1024px) {
    body .yf-sidebar {
        position: sticky;
        top: 0;
        bottom: auto;
        align-self: flex-start;
        width: var(--yf-sidebar-w);
        max-width: none;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
    }

    body .yf-sidebar__collapse {
        display: inline-flex;
    }

    body .yf-nav-item {
        font-size: var(--yf-nav-font);
    }

    body .yf-sidebar.is-collapsed {
        width: var(--yf-sidebar-w-rail);
    }

    body .yf-sidebar.is-collapsed .yf-sidebar__collapse svg {
        transform: rotate(180deg);
    }

    body .yf-sidebar.is-collapsed .yf-brand-text,
    body .yf-sidebar.is-collapsed .yf-user-chip__meta,
    body .yf-sidebar.is-collapsed .yf-nav-item__label {
        display: none;
    }

    body .yf-sidebar.is-collapsed .yf-sidebar__brand {
        justify-content: center;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    body .yf-sidebar.is-collapsed .yf-sidebar__nav,
    body .yf-sidebar.is-collapsed .yf-sidebar__user,
    body .yf-sidebar.is-collapsed .yf-sidebar__foot {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    body .yf-sidebar.is-collapsed .yf-nav-group__label,
    body .yf-sidebar.is-collapsed .yf-sidebar__label {
        height: 0;
        margin: 0;
        padding: 0;
        overflow: hidden;
        font-size: 0;
    }

    body .yf-sidebar.is-collapsed .yf-nav-group + .yf-nav-group {
        margin-top: 0.5rem;
        padding-top: 0.5rem;
        border-top: 1px solid var(--yf-line);
    }

    body .yf-sidebar.is-collapsed .yf-nav-item {
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
    }

    body .yf-sidebar.is-collapsed .yf-nav-item__badge {
        position: absolute;
        top: 0.1875rem;
        right: 0.5rem;
        margin: 0;
        min-width: 1rem;
        height: 1rem;
        padding: 0 0.25rem;
        font-size: 0.5625rem;
    }

    body .yf-sidebar.is-collapsed .yf-user-chip {
        justify-content: center;
        padding: 0.375rem 0;
        background: transparent;
    }

    body .yf-sidebar.is-collapsed .yf-nav-item.is-active::before {
        height: 1.375rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    body .yf-sidebar,
    body .yf-nav-item,
    body .yf-sidebar__collapse svg {
        transition: none;
    }
}

body .yf-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    color: var(--yf-ink-3);
    background: transparent;
    border: 0;
    border-radius: var(--yf-radius);
    cursor: pointer;
    transition: var(--yf-transition);
}

body .yf-icon-btn:hover {
    background-color: var(--yf-surface-mute);
    color: var(--yf-ink);
}

body .yf-icon-btn svg {
    width: 1.25rem;
    height: 1.25rem;
}


/* --------------------------------------------------------------------------
   11b. 保存／載入忙碌狀態（yf-busy）
   -------------------------------------------------------------------------- */
body.yf-busy-lock {
    overflow: hidden;
}

body .yf-busy-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background: rgba(15, 23, 42, 0.38);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

body .yf-busy-overlay[hidden] {
    display: none;
}

body .yf-busy-card {
    min-width: min(18rem, 100%);
    max-width: 22rem;
    padding: 1.25rem 1.5rem;
    border-radius: 1rem;
    background: var(--yf-surface);
    border: 1px solid #e5e7eb;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.18);
    text-align: center;
}

body .yf-busy-spinner {
    width: 2rem;
    height: 2rem;
    margin: 0 auto 0.85rem;
    border-radius: 9999px;
    border: 3px solid #e5e7eb;
    border-top-color: var(--yf-btn-primary-bg, #0f172a);
    animation: yf-busy-spin 0.75s linear infinite;
}

@keyframes yf-busy-spin {
    to { transform: rotate(360deg); }
}

body .yf-busy-text {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--yf-ink);
    letter-spacing: 0.01em;
}

body .yf-busy-sub {
    margin: 0.35rem 0 0;
    font-size: 0.75rem;
    color: var(--yf-muted);
}

body .yf-busy-toast {
    position: fixed;
    left: 50%;
    bottom: 1.5rem;
    z-index: 100000;
    transform: translateX(-50%) translateY(0.75rem);
    padding: 0.7rem 1.1rem;
    border-radius: 9999px;
    background: #065f46;
    color: #ecfdf5;
    font-size: 0.8rem;
    font-weight: 600;
    box-shadow: 0 12px 28px rgba(6, 95, 70, 0.28);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

body .yf-busy-toast[hidden] {
    display: none;
}

body .yf-busy-toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* --------------------------------------------------------------------------
   12. 響應式顯示（斷點與側邊欄一致：1024px）
   --------------------------------------------------------------------------
   本檔元件的選擇器一律寫成 `body .yf-xxx`（權重 0,1,1），比 Tailwind 的
   `lg:hidden`（0,1,0）高，所以「只在手機顯示」的元件若只靠 Tailwind 的
   `lg:` 變體，會被本檔的 `display: flex` / `inline-flex` 蓋掉而在桌機外露
   （topbar、抽屜關閉鈕都會卡在版面中間）。因此：
     - 行動版專用元件請加 `yf-mobile-only`，並由本區塊負責在 >=1024px 隱藏；
     - Tailwind 的 `lg:hidden` 對這些元件無效，不要依賴它。
   本區塊刻意放在檔案最後，確保同權重時後者勝出。
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
    body .yf-mobile-only,
    body .yf-topbar,
    body .yf-sidebar-backdrop {
        display: none;
    }
}