/* ════════════════════════════════════════════════════════════════
   RACCON 共用側邊欄樣式 — 三個 app（上架中心 / 代購工作台 / 採購管理）共用
   單一來源；請勿在各頁 index.html 內重複定義 .rc-sidebar* 規則。
   自含調色盤 fallback，不依賴各頁 :root。
   ════════════════════════════════════════════════════════════════ */

:root {
    --rc-bg-main:      var(--bg-main, #f8f6f2);
    --rc-panel-bg:     var(--panel-bg, #ffffff);
    --rc-text-dark:    var(--text-dark, #1e1e1e);
    --rc-text-muted:   var(--text-muted, #8c867e);
    --rc-border:       var(--border-color, #e5e0d8);
    --rc-accent:       var(--accent-tan, #bba58d);
    --rc-soft-red:     var(--soft-red, #c98a8a);
    --rc-transition:   var(--transition, all 0.3s cubic-bezier(0.25,1,0.5,1));
}

/* ── 內容偏移（與側邊欄寬度 200px 連動）──────────────── */
body { margin-left: 0; transition: margin-left .25s cubic-bezier(.4,0,.2,1); }

/* ── Toggle 收合鈕（永遠可見：桌機收合 / 手機抽屜）────── */
#sidebarToggle {
    display: flex;
    position: absolute; top: 14px; right: -36px;
    width: 36px; height: 36px;
    border-radius: 0 8px 8px 0;
    background: var(--rc-panel-bg);
    border: 1px solid var(--rc-border); border-left: none;
    box-shadow: 3px 0 10px rgba(27,24,20,.10);
    cursor: pointer; flex-direction: column;
    align-items: center; justify-content: center; gap: 5px;
}
#sidebarToggle span { display: block; width: 16px; height: 2px; background: var(--rc-text-dark); border-radius: 2px; }

#sidebarOverlay {
    display: none; position: fixed; inset: 0; z-index: 999;
    background: rgba(27,24,20,.32);
}

/* ── 側邊欄主體 ──────────────────────────────────────── */
#rcSidebar {
    position: fixed; left: 0; top: 0; bottom: 0; width: 200px;
    background: var(--rc-panel-bg); border-right: 1px solid var(--rc-border);
    display: flex; flex-direction: column; padding: 0;
    z-index: 1000; overflow: visible;
    box-shadow: 2px 0 12px rgba(27,24,20,0.06);
    transform: translateX(-100%);
    transition: transform .25s cubic-bezier(.4,0,.2,1);
}

/* ── 推開式：預設收合；展開(body.rc-expanded)時側邊欄滑入、內容右移 ── */
body.rc-expanded { margin-left: 200px; }
body.rc-expanded #rcSidebar { transform: translateX(0); }
/* 初次套用已存狀態時不要動畫（避免載入瞬間滑動）*/
body.rc-no-anim, body.rc-no-anim #rcSidebar { transition: none !important; }

/* ── 品牌 / 登入控制列 ───────────────────────────────── */
.rc-sidebar-brand {
    padding: 18px 14px; display: flex; align-items: center;
    justify-content: space-between; gap: 6px;
    border-bottom: 1px solid var(--rc-border); min-height: 56px;
}
.rc-brand-text { font-size: 11px; letter-spacing: 4px; text-transform: uppercase;
    color: var(--rc-accent); font-weight: 700; flex-shrink: 0; }
.rc-brand-login-btn { font-size: 11px; padding: 4px 10px; border-radius: 6px; cursor: pointer;
    border: 1px solid var(--rc-accent); background: none; color: var(--rc-accent);
    letter-spacing: 1px; white-space: nowrap; transition: var(--rc-transition); flex-shrink: 0; }
.rc-brand-login-btn:hover { background: var(--rc-accent); color: #fff; }
.rc-brand-user { display: flex; align-items: center; gap: 4px; min-width: 0; }
.rc-brand-username { font-size: 10px; color: var(--rc-text-muted); overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; max-width: 70px; }
.rc-brand-logout-btn { font-size: 10px; padding: 3px 7px; border-radius: 5px; cursor: pointer;
    border: 1px solid var(--rc-border); background: none; color: var(--rc-text-muted);
    white-space: nowrap; transition: var(--rc-transition); flex-shrink: 0; }
.rc-brand-logout-btn:hover { border-color: var(--rc-soft-red); color: var(--rc-soft-red); }

/* ── 導覽連結 ────────────────────────────────────────── */
.rc-sidebar-nav { display: flex; flex-direction: column; padding: 12px 0; }
.rc-sidebar-link {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 20px; font-size: 13px; letter-spacing: 1px;
    color: var(--rc-text-muted); text-decoration: none;
    transition: var(--rc-transition); border-left: 3px solid transparent;
}
.rc-sidebar-link:hover { color: var(--rc-text-dark); background: var(--rc-bg-main); }
.rc-sidebar-link.rc-active {
    color: var(--rc-accent); border-left-color: var(--rc-accent);
    background: var(--rc-bg-main); font-weight: 600;
}
.rc-sidebar-icon { font-size: 16px; }

/* ── 可展開區段（採購管理子選單）────────────────────── */
.rc-sidebar-section {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 20px; cursor: pointer; font-size: 12px; font-weight: 600;
    color: var(--rc-text-muted); user-select: none;
    border-left: 3px solid transparent; letter-spacing: 1px;
    transition: var(--rc-transition);
}
.rc-sidebar-section:hover { background: var(--rc-bg-main); }
.rc-sidebar-section-body { overflow: hidden; }
.rc-sidebar-section-body.collapsed { max-height: 0 !important; overflow: hidden; }
.rc-sidebar-sub-link {
    display: block; padding: 9px 20px 9px 46px; font-size: 12px;
    color: var(--rc-text-muted); text-decoration: none;
    border-left: 3px solid transparent; letter-spacing: 0.5px;
    transition: var(--rc-transition);
}
.rc-sidebar-sub-link:hover { color: var(--rc-text-dark); background: var(--rc-bg-main); }
.rc-sidebar-sub-link.rc-active {
    color: var(--rc-accent); border-left-color: var(--rc-accent); font-weight: 600;
    background: var(--rc-bg-main);
}
.rc-section-chevron { font-size: 11px; transition: transform .2s; display: inline-block; }
.rc-section-chevron.rotated { transform: rotate(-90deg); }
.rc-sidebar-divider { height: 1px; background: var(--rc-border); margin: 8px 0; }

/* ── 手機（≤768px）：側邊欄改為抽屜 + 遮罩（不推內容）──── */
@media (max-width: 768px) {
    body, body.rc-expanded { margin-left: 0; }
    #rcSidebar, body.rc-expanded #rcSidebar { transform: translateX(-100%); box-shadow: 4px 0 20px rgba(27,24,20,.18); }
    body.sidebar-open #rcSidebar { transform: translateX(0); }
    body.sidebar-open #sidebarOverlay { display: block; }
}