/* =====================================================================
 * benq-flat.css — 前台共用「BenQ 平面化」設計系統
 * ---------------------------------------------------------------------
 * 設計語言萃取自 list_order 的 _style-flat-benq.css（去 .lo-style scope）：
 *   - Accent: BenQ 紫 #7B2CBF / 深 #5B21B6 / 淺 #EDE9FE
 *   - 扁平：移除漸層、uppercase、letter-spacing、過重 box-shadow
 *   - 淡陰影 0 1px 2px rgba(0,0,0,.04)、圓角 8–12px
 *   - 狀態色：綠 / 琥珀 / 紅（語意保留）
 *
 * 全部 selector 以 body.benq-flat 為 scope，避免污染 base.html（index）
 * 與後台。各頁 content block 可直接用下列 .benq-* 元件 class，或讓
 * Bootstrap 既有 class（.btn-primary / .card / .badge / .alert）被覆寫。
 * ===================================================================== */

body.benq-flat {
    /* ---- 主色 ---- */
    --benq-pri: #7B2CBF;
    --benq-pri-dark: #5B21B6;
    --benq-pri-light: #EDE9FE;
    /* ---- 中性 ---- */
    --benq-bg: #FFFFFF;
    --benq-bg-soft: #F9FAFB;
    --benq-border: #E5E7EB;
    --benq-text: #111827;
    --benq-text-soft: #6B7280;
    /* 導覽列 / 選單 / 電商側欄文字：比 #6c727f 略黑的中性灰 */
    --benq-nav-text: #585e6b;
    /* ---- 狀態 ---- */
    --benq-success-bg: #ECFDF5;
    --benq-success-fg: #047857;
    --benq-warning-bg: #FEF3C7;
    --benq-warning-fg: #92400E;
    --benq-danger-bg: #FEE2E2;
    --benq-danger-fg: #B91C1C;
    --benq-info-bg: #EFF6FF;
    --benq-info-fg: #1E40AF;
    /* ---- 形狀 ---- */
    --benq-radius: 12px;
    --benq-radius-sm: 8px;
    --benq-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    --benq-shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.08);

    color: var(--benq-text);
}

/* =====================================================================
 * 1. 連結
 * ===================================================================== */
body.benq-flat a {
    color: var(--benq-pri);
}
body.benq-flat a:hover {
    color: var(--benq-pri-dark);
}

/* 電商側邊「商店導覽」：所有連結（含展開子選單的分類 toggle / 子分類項 /
   商店首頁）文字一律 --benq-nav-text，取代原本散落的紫(body.benq-flat a)、
   Bootstrap 預設藍(#0d6efd)、深灰(#212529)。 */
body.benq-flat .shop-nav a {
    color: var(--benq-nav-text);
}
body.benq-flat .shop-nav a:hover,
body.benq-flat .shop-nav a:focus {
    color: var(--benq-pri-dark);
}
/* 選取項：淡底 + BenQ 紫字 + 粗體，取代原 Bootstrap 藍底白字
   （base2.css / list_products.css 的 #0d6efd + #fff !important）。 */
body.benq-flat .shop-nav .list-group-item.active,
body.benq-flat .shop-nav .list-group-item-action.active {
    background-color: var(--benq-bg-soft);
    border-color: var(--benq-border);
    color: var(--benq-pri);
    font-weight: 600;
}
body.benq-flat .shop-nav .list-group-item.active i,
body.benq-flat .shop-nav .list-group-item.active a,
body.benq-flat .shop-nav .list-group-item-action.active i {
    color: var(--benq-pri) !important;
}
/* 進入某分類頁後，側欄當前分類連結帶 Bootstrap .text-primary（藍 #0d6efd），
   改為 BenQ 紫（蓋過 Bootstrap 的 !important）。 */
body.benq-flat .shop-nav .text-primary {
    color: var(--benq-pri) !important;
}

/* =====================================================================
 * 2. 按鈕（覆寫 Bootstrap primary + 提供 .benq-btn）
 * ===================================================================== */
body.benq-flat .btn-primary,
body.benq-flat .benq-btn {
    background: var(--benq-pri);
    border: 1px solid var(--benq-pri);
    color: #fff;
    border-radius: var(--benq-radius-sm);
    background-image: none;
    text-transform: none;
    letter-spacing: 0;
    box-shadow: none;
}
body.benq-flat .btn-primary:hover,
body.benq-flat .btn-primary:focus,
body.benq-flat .benq-btn:hover,
body.benq-flat .benq-btn:focus {
    background: var(--benq-pri-dark);
    border-color: var(--benq-pri-dark);
    color: #fff;
    box-shadow: none;
}

body.benq-flat .btn-outline-primary,
body.benq-flat .benq-btn-secondary {
    background: var(--benq-bg);
    border: 1px solid var(--benq-border);
    color: var(--benq-text);
    border-radius: var(--benq-radius-sm);
    background-image: none;
}
body.benq-flat .btn-outline-primary:hover,
body.benq-flat .benq-btn-secondary:hover {
    background: var(--benq-bg-soft);
    border-color: var(--benq-pri);
    color: var(--benq-pri-dark);
}

/* =====================================================================
 * 3. 卡片
 * ===================================================================== */
body.benq-flat .card,
body.benq-flat .benq-card {
    background: var(--benq-bg);
    border: 1px solid var(--benq-border);
    border-radius: var(--benq-radius);
    box-shadow: var(--benq-shadow);
}
body.benq-flat .benq-card--soft {
    background: var(--benq-bg-soft);
}
body.benq-flat .card-header,
body.benq-flat .benq-card__header {
    background: var(--benq-bg-soft);
    border-bottom: 1px solid var(--benq-border);
    color: var(--benq-text);
}

/* =====================================================================
 * 4. Badge / 標籤
 * ===================================================================== */
body.benq-flat .badge.bg-primary,
body.benq-flat .benq-badge {
    background: var(--benq-pri) !important;
    color: #fff;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}
body.benq-flat .benq-badge--soft {
    background: var(--benq-pri-light) !important;
    color: var(--benq-pri-dark) !important;
}
body.benq-flat .benq-badge--success { background: var(--benq-success-bg) !important; color: var(--benq-success-fg) !important; }
body.benq-flat .benq-badge--warning { background: var(--benq-warning-bg) !important; color: var(--benq-warning-fg) !important; }
body.benq-flat .benq-badge--danger  { background: var(--benq-danger-bg) !important;  color: var(--benq-danger-fg) !important; }

/* =====================================================================
 * 5. 表格
 * ===================================================================== */
body.benq-flat .benq-table-wrapper {
    background: var(--benq-bg);
    border: 1px solid var(--benq-border);
    border-radius: var(--benq-radius);
    box-shadow: var(--benq-shadow);
    overflow: hidden;
}
body.benq-flat table.benq-table thead,
body.benq-flat table.benq-table thead th {
    background: var(--benq-bg-soft);
    color: var(--benq-text);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
    font-size: 0.85rem;
    border-bottom: 1px solid var(--benq-border);
}
body.benq-flat table.benq-table tbody tr {
    border-bottom: 1px solid var(--benq-border);
}
body.benq-flat table.benq-table tbody tr:hover {
    background: var(--benq-bg-soft);
}

/* =====================================================================
 * 6. 表單
 * ===================================================================== */
body.benq-flat .form-control,
body.benq-flat .form-select {
    border: 1px solid var(--benq-border);
    border-radius: var(--benq-radius-sm);
    color: var(--benq-text);
}
body.benq-flat .form-control:focus,
body.benq-flat .form-select:focus {
    border-color: var(--benq-pri);
    box-shadow: 0 0 0 3px var(--benq-pri-light);
    outline: none;
}
body.benq-flat .form-label {
    color: var(--benq-text);
    font-weight: 600;
}
body.benq-flat .form-check-input:checked {
    background-color: var(--benq-pri);
    border-color: var(--benq-pri);
}

/* =====================================================================
 * 7. Alert / 提示
 * ===================================================================== */
body.benq-flat .alert {
    border-radius: var(--benq-radius-sm);
    border-width: 1px;
}
body.benq-flat .alert-primary,
body.benq-flat .alert-info {
    background: var(--benq-pri-light);
    border-color: var(--benq-pri);
    color: var(--benq-pri-dark);
}
body.benq-flat .alert-success { background: var(--benq-success-bg); border-color: var(--benq-success-fg); color: var(--benq-success-fg); }
body.benq-flat .alert-warning { background: var(--benq-warning-bg); border-color: var(--benq-warning-fg); color: var(--benq-warning-fg); }
body.benq-flat .alert-danger  { background: var(--benq-danger-bg);  border-color: var(--benq-danger-fg);  color: var(--benq-danger-fg); }

/* =====================================================================
 * 8. 區段標題 / 文字輔助
 * ===================================================================== */
body.benq-flat .text-muted {
    color: var(--benq-text-soft) !important;
}
body.benq-flat .benq-section-title {
    color: var(--benq-text);
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

/* =====================================================================
 * 9. 分頁（Bootstrap / DataTables 共用）
 * ===================================================================== */
body.benq-flat .page-link {
    color: var(--benq-text);
    border-radius: 6px;
}
body.benq-flat .page-link:hover {
    background: var(--benq-pri-light);
    color: var(--benq-pri-dark);
    border-color: var(--benq-pri-light);
}
body.benq-flat .page-item.active .page-link {
    background: var(--benq-pri);
    border-color: var(--benq-pri);
    color: #fff;
}