/*
 * UltraPAY Admin — Safe Overrides (Phase 2.3)
 * 載入方式：Panel ->assets([Css::make(...)]) — 疊加於 Filament 原生 CSS 之後
 * 注意：此 CSS 在 filament/app.css 之前載入，覆蓋 Tailwind dark utility 需要 !important
 * Filament 原生 base theme 完整保留，本檔案只作視覺疊加。
 * 不使用 @tailwind / @import / @config / @apply
 * 所有規則限定在 .dark .fi-* scope，不影響 light mode 與非 Filament 元件。
 * Filament 版本：3.3.49   日期：2026-07-10
 *
 * !important 數量：28 個（[16]–[19] 已退役，編號保留不重用）
 *   ┌ §2  [1][2]    sidebar/header 背景
 *   ├ §3  [3][4]    group label/icon 文字色
 *   ├ §4  [5]‥[11]  item 一般色/hover背景/active 背景+文字+連接線
 *   │         ※ hover label/icon 色：高 specificity 贏 app.css，不用 !important
 *   ├ §5  [12]     collapsed button hover 背景
 *   ├ §6  [13]     topbar 背景
 *   ├ §8  [14][15][32] fi-section border + border-radius + 深色底（Phase 2.2 / 6A-2）
 *   │     ※ §10–§12 [16]–[19]：Phase 6A-2 退役（StatsOverviewWidget 改自訂 Blade，不再渲染 fi-wi-stats-overview-*）
 *   ├ §13 [20][21] slide-over label/value 文字色（Phase 4A）
 *   │     ※ §14 FinancialReportPage（Phase 5A）：!important × 0
 *   │     ※ §15 ChannelStatusPage（Phase 5B）：!important × 0
 *   ├ §16 [22]‥[30] brand header 高度/背景/padding、fi-logo 解除、Logo 尺寸（Phase 5C）
 *   ├ §17 [31]     page 背景（Phase 6A-2，覆蓋 dark:bg-gray-950）
 *   ├ §18 !important × 0 — Stat Cards v2 全自訂 .up-card（Phase 6A-2）
 *   └ §19 !important × 0 — Tables fi-ta，以 specificity 墊高取勝（Phase 6B）
 * 載入順序：forms.css(46) → support.css(51) → [本檔](56) → app.css(67)
 *
 * §1  Design Tokens
 * §2  Sidebar Shell
 * §3  Sidebar Navigation Groups
 * §4  Sidebar Items
 * §5  Sidebar Collapsed State
 * §6  Topbar Shell
 * §7  Topbar Controls
 * §8  Dashboard Cards（Phase 2.2 保留、6A-2 補深色底）
 * §9  Reduced Motion
 * §14 Financial Report Page（Phase 5A）
 * §15 Channel Status Page（Phase 5B）
 * §16 UltraPAY Brand Logo（Phase 5C）
 * §10–§12（已退役，Phase 6A-2）
 * §17 Page Background（Phase 6A-2）
 * §18 Stat Cards v2 — .up-card（Phase 6A-2）
 * §19 Tables — fi-ta（Phase 6B）
 */

/* ══════════════════════════════════════════════════
   §1  Design Tokens
   集中定義避免散落，不套用至任何元素
   ══════════════════════════════════════════════════ */

:root {
    --up-sidebar-bg:          #080c18;
    --up-sidebar-border:      rgba(108, 99, 255, 0.12);
    --up-primary:             #6c63ff;
    --up-primary-soft:        rgba(108, 99, 255, 0.14);
    --up-text:                #eef0fa;
    --up-text-secondary:      #9aa4b5;
    --up-text-muted:          #56627a;
    --up-hover-bg:            rgba(255, 255, 255, 0.04);
    --up-topbar-bg:           rgba(8, 12, 24, 0.90);
    --up-topbar-border:       rgba(108, 99, 255, 0.10);
    --up-transition:          160ms ease;
    --up-section-border:      rgba(120, 140, 255, 0.14);

    /* Phase 6A-2 — Dashboard 精緻化 */
    --up-page-bg:             #05070f;
    --up-card-bg:             #0b111f;
    --up-card-border:         rgba(120, 140, 255, 0.12);
}


/* ══════════════════════════════════════════════════
   §2  Sidebar Shell
   覆蓋 dark:bg-gray-900 / dark:lg:bg-transparent
   !important × 2：app.css 在本檔之後載入
   ══════════════════════════════════════════════════ */

.dark .fi-sidebar {
    background-color: var(--up-sidebar-bg) !important; /* [1] overrides dark:lg:bg-transparent */
    border-right: 1px solid var(--up-sidebar-border);
}

.dark .fi-sidebar-header {
    background-color: var(--up-sidebar-bg) !important; /* [2] overrides dark:bg-gray-900 */
    border-bottom: 1px solid var(--up-sidebar-border);
}

.dark .fi-sidebar-nav {
    background-color: transparent;
    scrollbar-width: thin;
    scrollbar-color: rgba(108, 99, 255, 0.18) transparent;
}

.dark .fi-sidebar-nav::-webkit-scrollbar      { width: 3px; }
.dark .fi-sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.dark .fi-sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(108, 99, 255, 0.18);
    border-radius: 3px;
}
.dark .fi-sidebar-nav::-webkit-scrollbar-thumb:hover {
    background: rgba(108, 99, 255, 0.35);
}


/* ══════════════════════════════════════════════════
   §3  Sidebar Navigation Groups
   覆蓋 dark:text-gray-400 / dark:text-gray-500
   !important × 2：app.css 在本檔之後載入
   ══════════════════════════════════════════════════ */

.dark .fi-sidebar-group-label {
    color: var(--up-text-muted) !important; /* [3] overrides dark:text-gray-400 */
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.4px;
}

.dark .fi-sidebar-group-icon {
    color: var(--up-text-muted) !important; /* [4] overrides dark:text-gray-500 */
}

.dark .fi-sidebar-group-button:hover {
    background-color: var(--up-hover-bg);
    border-radius: 8px;
}

.dark .fi-sidebar-group-collapse-button {
    color: var(--up-text-muted);
    transition: color var(--up-transition);
}

.dark .fi-sidebar-group-collapse-button:hover {
    color: var(--up-text-secondary);
}


/* ══════════════════════════════════════════════════
   §4  Sidebar Items
   一般：覆蓋 dark:text-gray-200 / dark:text-gray-500   !important × 2
   hover：bg 覆蓋 dark:hover:bg-white/5               !important × 1
         label/icon 高 specificity 贏 app.css（不需 !important）
   active：覆蓋 dark:bg-white/5 / dark:text-primary-400 !important × 4
   連接線：覆蓋 dark:bg-gray-600                        !important × 1
   ══════════════════════════════════════════════════ */

/* 一般 item 文字與 icon */
.dark .fi-sidebar-item-label {
    color: var(--up-text-secondary) !important; /* [5] overrides dark:text-gray-200 */
    font-size: 13.5px;
    transition: color var(--up-transition);
}

.dark .fi-sidebar-item-icon {
    color: var(--up-text-muted) !important; /* [6] overrides dark:text-gray-500 */
    transition: color var(--up-transition);
}

/* Hover */
.dark .fi-sidebar-item-button:hover {
    background-color: var(--up-hover-bg) !important; /* [7] overrides dark:hover:bg-white/5 */
    border-radius: 8px;
}

.dark .fi-sidebar-item-button:hover .fi-sidebar-item-label {
    color: var(--up-text); /* 高 specificity selector 贏 app.css，不需 !important */
}

.dark .fi-sidebar-item-button:hover .fi-sidebar-item-icon {
    color: var(--up-text-secondary); /* 高 specificity selector 贏 app.css，不需 !important */
}

/* Active item（保留 Phase 2.2 效果）
   Selector 不依賴 <a> tag，見 sidebar/item.blade.php */
.dark .fi-sidebar-item.fi-active > .fi-sidebar-item-button {
    background-color: var(--up-primary-soft) !important; /* [8] overrides dark:bg-white/5 */
    border-radius: 0 8px 8px 0;
    box-shadow: inset 3px 0 0 0 var(--up-primary),
                0 0 10px rgba(108, 99, 255, 0.06);
}

.dark .fi-sidebar-item.fi-active .fi-sidebar-item-label {
    color: #c4bfff !important; /* [9] overrides dark:text-primary-400 */
    font-weight: 600;
}

.dark .fi-sidebar-item.fi-active .fi-sidebar-item-icon {
    color: var(--up-primary) !important; /* [10] overrides dark:text-primary-400 */
}

/* 子選單連接線
   升版風險：依賴匿名 > div，見 sidebar/item.blade.php */
.dark .fi-sidebar-item-grouped-border > div {
    background-color: rgba(108, 99, 255, 0.15) !important; /* [11] overrides dark:bg-gray-600 */
}


/* ══════════════════════════════════════════════════
   §5  Sidebar Collapsed State
   Sidebar 收合時的 icon-only dropdown 觸發按鈕
   此 button 無 fi-* class（見 sidebar/group.blade.php:77）
   升版風險：若 Filament 新增其他 button，此樣式可能誤套用
   !important × 1：app.css 在本檔之後載入
   ══════════════════════════════════════════════════ */

.dark .fi-sidebar-group button:hover {
    background-color: var(--up-hover-bg) !important; /* [12] overrides dark:hover:bg-white/5 */
    border-radius: 8px;
}


/* ══════════════════════════════════════════════════
   §6  Topbar Shell
   覆蓋 dark:bg-gray-900 / dark:ring-white/10
   !important × 1：app.css 在本檔之後載入
   backdrop-filter 限制在 nav 本身，不擴散至子元素
   ══════════════════════════════════════════════════ */

.dark .fi-topbar nav {
    background-color: var(--up-topbar-bg) !important; /* [13] overrides dark:bg-gray-900 */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--up-topbar-border);
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.18);
    /* 取消 Filament 的 ring（ring → box-shadow）以免疊加 */
    --tw-ring-color: transparent;
    --tw-ring-shadow: 0 0 #0000;
}


/* ══════════════════════════════════════════════════
   §7  Topbar Controls
   icon button hover、user menu、breadcrumbs
   不使用 !important（Filament 對這些元素的 dark 覆蓋較少）
   ══════════════════════════════════════════════════ */

.dark .fi-topbar-open-sidebar-btn,
.dark .fi-topbar-close-sidebar-btn {
    color: var(--up-text-secondary);
    border-radius: 8px;
    transition: color var(--up-transition), background-color var(--up-transition);
}

.dark .fi-topbar-open-sidebar-btn:hover,
.dark .fi-topbar-close-sidebar-btn:hover {
    color: var(--up-text);
    background-color: var(--up-hover-bg);
}

.dark .fi-icon-btn {
    color: var(--up-text-secondary);
    border-radius: 8px;
    transition: color var(--up-transition), background-color var(--up-transition);
}

.dark .fi-icon-btn:hover {
    color: var(--up-text);
    background-color: var(--up-hover-bg);
}

.dark .fi-user-menu-trigger {
    transition: opacity var(--up-transition);
}

.dark .fi-user-menu-trigger:hover {
    opacity: 0.85;
}

.dark .fi-breadcrumbs-item-label {
    color: var(--up-text-muted);
    transition: color var(--up-transition);
}

.dark .fi-breadcrumbs-item:last-child .fi-breadcrumbs-item-label {
    color: var(--up-text-secondary);
}

.dark .fi-page-header-heading {
    color: var(--up-text);
    font-weight: 700;
}


/* ══════════════════════════════════════════════════
   §8  Dashboard Cards（Phase 2.2 保留、6A-2 補深色底）
   ══════════════════════════════════════════════════ */

.dark .fi-section {
    border: 1px solid var(--up-section-border) !important; /* [14] overrides dark:ring-white/10 */
    border-radius: 12px !important;                        /* [15] overrides Filament rounded-xl */
    background-color: var(--up-card-bg) !important;        /* [32] overrides dark:bg-gray-900（深藍卡片底，Phase 6A-2） */
}


/* ══════════════════════════════════════════════════
   §9  Reduced Motion
   ══════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .dark .fi-sidebar-item-label,
    .dark .fi-sidebar-item-icon,
    .dark .fi-sidebar-group-collapse-button,
    .dark .fi-topbar-open-sidebar-btn,
    .dark .fi-topbar-close-sidebar-btn,
    .dark .fi-icon-btn {
        transition-duration: 1ms;
    }
}


/* ══════════════════════════════════════════════════
   §10–§12（已退役 — Phase 6A-2）
   DashboardStatsWidget 改為自訂 Blade（dashboard-stats.blade.php），
   fi-wi-stats-overview-* 與 up-stat-card--* 不再渲染。
   原 !important [16]–[19] 註銷，編號保留不重用。
   新樣式見 §18 Stat Cards v2。
   ══════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════
   §13  RecentAlertsWidget Slide-over（Phase 4A）
   僅作用於 .up-alert-* 自訂 class，不影響 Filament 元件
   !important × 2：dark 模式覆蓋 Light 預設背景/文字
   ══════════════════════════════════════════════════ */

/* 詳情 label（小標題） */
.up-alert-label {
    font-size: 0.70rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #6b7280;
    margin-bottom: 0.25rem;
}

.dark .up-alert-label {
    color: #9ca3af !important; /* [20] dark label 文字 */
}

/* 詳情 value（欄位值） */
.up-alert-value {
    font-size: 0.875rem;
    color: #111827;
}

.dark .up-alert-value {
    color: #f3f4f6 !important; /* [21] dark value 文字 */
}

/* JSON / pre-formatted code blocks */
.up-alert-json {
    font-family: 'Consolas', 'Monaco', 'Lucida Console', monospace;
    font-size: 0.72rem;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-all;
    overflow-x: auto;
    max-height: 300px;
    overflow-y: auto;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    background-color: #f8fafc;
    color: #334155;
    border: 1px solid #e2e8f0;
    margin: 0;
}

.dark .up-alert-json {
    background-color: #0f172a;
    color: #cbd5e1;
    border-color: #334155;
}


/* ══════════════════════════════════════════════════
   §14  FinancialReportPage（Phase 5A）
   .dark .up-report-* specificity 0,2,0 > Tailwind utility 0,1,0
   無需 !important — !important 數量：0
   ══════════════════════════════════════════════════ */

/* ── Filter panel ─────────────────────────────── */
.dark .up-report-filters {
    background-color: #111827;
    border-color: var(--up-section-border);
}

.dark .up-report-reset-btn {
    color: var(--up-text-secondary);
    border-color: var(--up-section-border);
}

.dark .up-report-reset-btn:hover {
    color: var(--up-text);
    background-color: var(--up-hover-bg);
    border-color: rgba(120, 140, 255, 0.30);
}

/* ── Date error banner ───────────────────────── */
.dark .up-report-error {
    background-color: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.28);
}

/* ── Stat cards ──────────────────────────────── */
.dark .up-report-stat-card {
    background-color: #111827;
    border-color: var(--up-section-border);
}

.dark .up-report-stat-label {
    color: var(--up-text-secondary);
}

/* ── Table containers ────────────────────────── */
.dark .up-report-table {
    background-color: #111827;
    border-color: var(--up-section-border);
}

/* ── Section header bar (operations log) ─────── */
.dark .up-report-section-header {
    border-color: var(--up-section-border);
}

/* ── Table head rows ─────────────────────────── */
.dark .up-report-thead {
    background-color: rgba(255, 255, 255, 0.025);
    border-color: var(--up-section-border);
}

/* ── Table header labels ─────────────────────── */
.dark .up-report-th-label {
    color: var(--up-text-secondary);
}

/* ── Table body rows ─────────────────────────── */
.dark .up-report-row {
    border-color: rgba(255, 255, 255, 0.04);
}

.dark .up-report-row:hover {
    background-color: var(--up-hover-bg);
}

/* ── Table footer (totals) ───────────────────── */
.dark .up-report-tfoot {
    background-color: rgba(108, 99, 255, 0.06);
    border-color: var(--up-section-border);
}

/* ── Cell text helpers ───────────────────────── */
.dark .up-report-cell-primary {
    color: var(--up-text);
}

.dark .up-report-cell-muted {
    color: var(--up-text-secondary);
}

/* ── Pending count badge ─────────────────────── */
.dark .up-report-badge-pending {
    background-color: rgba(251, 191, 36, 0.14);
    color: #fbbf24;
}

/* ── Loading indicator ───────────────────────── */
.up-report-loading {
    min-height: 1.25rem;
}


/* ══════════════════════════════════════════════════
   §15  ChannelStatusPage（Phase 5B）
   .dark .up-channel-* specificity 0,2,0
   無需 !important — !important 數量：0
   ══════════════════════════════════════════════════ */

/* ── Server card shell ───────────────────────── */
.dark .up-channel-card {
    ring-color: transparent;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.dark .up-channel-card-header {
    background-color: rgba(255, 255, 255, 0.03);
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

.dark .up-channel-card-title {
    color: var(--up-text);
}

.dark .up-channel-card-count {
    color: var(--up-text-muted);
}

/* ── Table structure ─────────────────────────── */
.dark .up-channel-thead {
    background-color: rgba(255, 255, 255, 0.02);
    border-bottom-color: rgba(255, 255, 255, 0.05);
}

.dark .up-channel-th {
    color: var(--up-text-secondary);
}

.dark .up-channel-row {
    border-bottom-color: rgba(255, 255, 255, 0.04);
}

.dark .up-channel-row:hover {
    background-color: var(--up-hover-bg);
}

/* ── Subtotal row ────────────────────────────── */
.dark .up-channel-subtotal {
    background-color: rgba(255, 255, 255, 0.025);
}

.dark .up-channel-subtotal-label {
    color: var(--up-text-muted);
}

/* ── Cell helpers ────────────────────────────── */
.dark .up-channel-cell-primary {
    color: var(--up-text);
}

.dark .up-channel-cell-muted {
    color: var(--up-text-secondary);
}

/* ── Provider badges (light base + dark override) ── */
.up-channel-badge {
    display: inline-flex;
    align-items: center;
}

.up-channel-badge--plus      { background-color: #dbeafe; color: #1d4ed8; }
.up-channel-badge--megapay   { background-color: #f3e8ff; color: #7e22ce; }
.up-channel-badge--tendoor   { background-color: #ffedd5; color: #c2410c; }
.up-channel-badge--silverinn { background-color: #f3f4f6; color: #374151; }
.up-channel-badge--funpoint  { background-color: #fce7f3; color: #9d174d; }
.up-channel-badge--default   { background-color: #f3f4f6; color: #4b5563; }

.dark .up-channel-badge--plus      { background-color: rgba(59, 130, 246, 0.15); color: #93c5fd; }
.dark .up-channel-badge--megapay   { background-color: rgba(168, 85, 247, 0.15); color: #d8b4fe; }
.dark .up-channel-badge--tendoor   { background-color: rgba(249, 115, 22, 0.15); color: #fdba74; }
.dark .up-channel-badge--silverinn { background-color: rgba(156, 163, 175, 0.12); color: #d1d5db; }
.dark .up-channel-badge--funpoint  { background-color: rgba(236, 72, 153, 0.15); color: #f9a8d4; }
.dark .up-channel-badge--default   { background-color: rgba(156, 163, 175, 0.10); color: #9ca3af; }

/* ── Payment method labels ───────────────────── */
.up-channel-method--atm     { color: #0369a1; }
.up-channel-method--cvs     { color: #059669; }
.up-channel-method--credit  { color: #7c3aed; }
.up-channel-method--default { color: #6b7280; }

.dark .up-channel-method--atm     { color: #38bdf8; }
.dark .up-channel-method--cvs     { color: #34d399; }
.dark .up-channel-method--credit  { color: #a78bfa; }
.dark .up-channel-method--default { color: var(--up-text-secondary); }

/* ── Success rate indicators ─────────────────── */
.up-channel-rate--success { color: #059669; }
.up-channel-rate--warning { color: #d97706; }
.up-channel-rate--danger  { color: #dc2626; }
.up-channel-rate--empty   { color: #9ca3af; }

.dark .up-channel-rate--success { color: #34d399; }
.dark .up-channel-rate--warning { color: #fbbf24; }
.dark .up-channel-rate--danger  { color: #f87171; }
.dark .up-channel-rate--empty   { color: var(--up-text-muted); }

/* ── Pending count ───────────────────────────── */
.up-channel-pending--active { color: #d97706; }
.up-channel-pending--empty  { color: #9ca3af; }

.dark .up-channel-pending--active { color: #fbbf24; }
.dark .up-channel-pending--empty  { color: var(--up-text-muted); }

/* ── Empty state ─────────────────────────────── */
.dark .up-channel-empty {
    color: var(--up-text-muted);
}


/* ══════════════════════════════════════════════════
   §16  UltraPAY Brand Logo（Phase 5C）
   品牌 Logo 區 — fi-sidebar-header 展開 / 收合
   !important × 9：[22]–[30]
   根因確認：
     · h-16 → height:4rem（Tailwind 無 !important）→ [22] 解除
     · bg-white → background-color:#fff（Tailwind 無 !important）→ [25] 覆蓋
     · Filament app.css 無 fi-sidebar-header 專屬規則
   ══════════════════════════════════════════════════ */

/* ── Sidebar header 高度解鎖與深色品牌背景 ─────── */
.fi-sidebar .fi-sidebar-header {
    position: relative;
    height: auto !important;           /* [22] 解除 h-16（4rem = 64px）高度限制 */
    min-height: 4rem !important;       /* [23] 收合時最低保留 64px，不塌陷 */
    padding: 1rem 1rem !important;     /* [24] 覆蓋原生 px-6；上下各 16px → header ≈ 83px */
    overflow: hidden;
    background:
        radial-gradient(
            ellipse at 30% 45%,
            rgba(56,  189, 248, 0.12),
            transparent 48%
        ),
        radial-gradient(
            ellipse at 75% 30%,
            rgba(168,  85, 247, 0.14),
            transparent 52%
        ),
        #080c18 !important;            /* [25] 覆蓋 bg-white（無 !important → 直接勝出） */
    border-bottom: 1px solid rgba(108, 99, 255, 0.22);
    --tw-ring-shadow: 0 0 #0000;
    --tw-ring-color:  transparent;
}

/* Dark mode：背景與 Light mode 相同（均為深色品牌）
   僅移除 border-bottom，由 ::after 漸層線接管 */
.dark .fi-sidebar .fi-sidebar-header {
    border-bottom: none;
}

/* ── 品牌區底部漸層分隔線 ───────────────────────── */
.fi-sidebar .fi-sidebar-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent                    0%,
        rgba(108,  99, 255, 0.45)     25%,
        rgba( 56, 189, 248, 0.40)     65%,
        transparent                   100%
    );
    pointer-events: none;
    z-index: 2;
}

/* ── 解除 Filament Logo wrapper 高度限制 ─────────── */
/* fi-logo：Filament 可能透過 brandLogoHeight 注入 inline-style 固定高度 */
.fi-sidebar-header .fi-logo {
    width: 100%;
    height: auto !important;           /* [26] 解除可能的固定高度 */
    max-height: none !important;       /* [27] 解除可能的 max-height */
    min-width: 0;
}

/* fi-brand-logo：<a> 品牌連結，確保 Logo 不被裁切 */
.fi-sidebar-header .fi-brand-logo {
    display: flex;
    width: 100%;
    height: auto;
    align-items: center;
    justify-content: flex-start;
    overflow: visible;
}

/* ── up-brand 主容器 ─────────────────────────────── */
.up-brand {
    position: relative;
    display: flex;
    width: 100%;
    min-width: 0;
    align-items: center;
    padding: 0;
}

/* ── 光暈層（Logo 後方；header overflow:hidden 防止溢出）
   Phase 6A-1：改扁（56px 高）、改淡（峰值 alpha 0.08）、
   72% 提早淡出 — 只留輕微流光，不得形成橢圓底板 */
.up-brand__glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 240px;
    height: 56px;
    background: radial-gradient(
        ellipse 80% 100% at 50% 50%,
        rgba(108,  99, 255, 0.08),
        rgba( 56, 189, 248, 0.03) 45%,
        transparent 72%
    );
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    animation: up-brand-pulse 9s ease-in-out infinite;
}

/* ── Logo 圖片容器 ──────────────────────────────── */
.up-brand__full {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
}

/* Logo 圖片：220px 寬，比例自動（1235:284 → 約 220×51 px）
   無固定 aspect-ratio，以新圖片原生比例為準 */
.up-brand__img {
    display: block;
    width: 220px !important;           /* [28] 適配新圖片（1235×284 寬幅橫式） */
    height: auto !important;           /* [29] 依圖片原始比例自動計算 */
    max-width: 100%;
    max-height: 64px !important;       /* [30] 配合 header 83px；自然高 51px 不觸限制 */
    object-fit: contain;
    object-position: left center;
    -webkit-user-drag: none;
}

/* ── Sidebar 收合時的 Mark（SIDEBAR_NAV_START 注入） */
/* 可見性由 Alpine x-show="! $store.sidebar.isOpen" 控制（blade 端）
   x-cloak 確保初始化前不閃爍；CSS 僅定義版面屬性 */
.up-brand-mark-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 0.75rem;
    margin-top: -1.25rem; /* 抵消 nav py-8 的頂部空間 */
}

.up-brand-mark-nav__img {
    display: block;
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 8px;
    opacity: 0.90;
    transition: opacity var(--up-transition);
}

.up-brand-mark-nav__img:hover {
    opacity: 1;
}

/* ── 流光動畫（9 秒慢速呼吸，不縮放 logo）
   Phase 6A-1：峰值 opacity 0.95 → 0.70，縮放幅度 1.10 → 1.06 */
@keyframes up-brand-pulse {
    0%, 100% {
        opacity: 0.35;
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        opacity: 0.70;
        transform: translate(-50%, -50%) scale(1.06);
    }
}

/* ── Reduced Motion ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .up-brand__glow {
        animation: none;
        opacity: 0.45;
        transform: translate(-50%, -50%) scale(1);
    }
}


/* ══════════════════════════════════════════════════
   §17  Page Background（Phase 6A-2）
   設計稿主內容區為深藍黑（比 sidebar 更暗），
   頂部帶極淡紫色輻射光，營造縱深
   !important × 1：覆蓋 body 的 dark:bg-gray-950
   ══════════════════════════════════════════════════ */

.dark .fi-body {
    background-color: var(--up-page-bg) !important; /* [31] overrides dark:bg-gray-950 */
    background-image: radial-gradient(
        1100px 460px at 68% -8%,
        rgba(108, 99, 255, 0.055),
        transparent 62%
    );
    background-attachment: fixed;
    background-repeat: no-repeat;
}


/* ══════════════════════════════════════════════════
   §18  Stat Cards v2 — .up-card（Phase 6A-2）
   自訂 Blade（dashboard-stats.blade.php）專用；
   元素上無 Tailwind dark: utilities，無 specificity 衝突
   → !important × 0
   佈局：icon 磚 | 標題/金額/副標，sparkline 絕對定位右下
   ══════════════════════════════════════════════════ */

/* ── Grid：手機 1 欄 / 平板 2 欄 / 1280px+ 4 欄（同設計稿）── */
.up-stats-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

@media (min-width: 768px) {
    .up-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1280px) {
    .up-stats-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* ── 卡片外殼 ─────────────────────────────────────── */
.up-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 1.125rem 1.25rem 1.25rem;
    background-color: var(--up-card-bg);
    border: 1px solid var(--up-card-border);
    border-radius: 14px;
    overflow: hidden;
    transition:
        transform var(--up-transition),
        border-color var(--up-transition),
        box-shadow var(--up-transition);
}

.up-card:hover {
    transform: translateY(-2px);
    border-color: rgba(120, 140, 255, 0.28);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}

/* ── Icon 磚（44×44 圓角方塊，色系由 modifier 決定）── */
.up-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    flex-shrink: 0;
}

.up-card__icon-svg {
    width: 22px;
    height: 22px;
}

/* ── 文字區 ───────────────────────────────────────── */
.up-card__body {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.up-card__label {
    font-size: 0.8rem;
    color: var(--up-text-secondary);
    letter-spacing: 0.01em;
}

.up-card__value {
    margin-top: 2px;
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--up-text);
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.up-card__sub {
    margin-top: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

.up-card__sub--pos   { color: #34d399; }
.up-card__sub--neg   { color: #f87171; }
.up-card__sub--muted { color: var(--up-text-muted); font-weight: 500; }

/* ── Sparkline（絕對定位右下，不擋滑鼠）───────────── */
.up-card__spark {
    position: absolute;
    right: 0.875rem;
    bottom: 0.75rem;
    width: 34%;
    max-width: 120px;
    height: 30px;
    opacity: 0.9;
    pointer-events: none;
}

/* ── 色系 modifier：icon 磚漸層底 + 微光 ──────────── */
.up-card--blue .up-card__icon {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.30), rgba(59, 130, 246, 0.10));
    color: #60a5fa;
    box-shadow: 0 0 14px rgba(59, 130, 246, 0.18);
}

.up-card--violet .up-card__icon {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.30), rgba(139, 92, 246, 0.10));
    color: #a78bfa;
    box-shadow: 0 0 14px rgba(139, 92, 246, 0.18);
}

.up-card--green .up-card__icon {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.28), rgba(34, 197, 94, 0.10));
    color: #4ade80;
    box-shadow: 0 0 14px rgba(34, 197, 94, 0.16);
}

.up-card--sky .up-card__icon {
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.28), rgba(56, 189, 248, 0.10));
    color: #7dd3fc;
    box-shadow: 0 0 14px rgba(56, 189, 248, 0.16);
}

.up-card--red .up-card__icon {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.28), rgba(239, 68, 68, 0.10));
    color: #f87171;
    box-shadow: 0 0 14px rgba(239, 68, 68, 0.16);
}

.up-card--orange .up-card__icon {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.28), rgba(249, 115, 22, 0.10));
    color: #fb923c;
    box-shadow: 0 0 14px rgba(249, 115, 22, 0.16);
}

.up-card--pink .up-card__icon {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.28), rgba(236, 72, 153, 0.10));
    color: #f9a8d4;
    box-shadow: 0 0 14px rgba(236, 72, 153, 0.16);
}

/* ── Reduced Motion ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .up-card {
        transition-duration: 1ms;
    }
}


/* ══════════════════════════════════════════════════
   §19  Tables — fi-ta（Phase 6B）
   清單頁表格外殼對齊 6A-2 卡片語彙：深藍底、藍紫描邊、圓角
   實作策略：以 .fi-ta 祖先墊高 specificity 贏過 app.css
   （dark:bg 0,2,0 / dark:hover 0,3,0 / dark:divide 0,4,0）
   → !important × 0（瀏覽器驗收若被蓋回再局部加）
   ══════════════════════════════════════════════════ */

/* ── 外殼：深藍卡片底 + 藍紫 1px 描邊（取代原生 ring）── */
.dark .fi-ta .fi-ta-ctn {
    background-color: var(--up-card-bg);   /* 0,3,0 > dark:bg-gray-900 0,2,0 */
    border-radius: 14px;
    box-shadow:                             /* 0,3,0 > shadow-sm 0,1,0，一併取代 ring 變數鏈 */
        0 0 0 1px var(--up-card-border),
        0 6px 24px rgba(0, 0, 0, 0.28);
}

/* ── 容器內區塊分隔線（工具列/表格/分頁之間）── */
.dark .fi-ta .fi-ta-ctn > :not([hidden]) ~ :not([hidden]) {
    border-color: rgba(120, 140, 255, 0.10); /* 0,5,0 > dark:divide 0,4,0 */
}

/* ── 表頭列：微藍紫底 ── */
.dark .fi-ta-table thead tr {
    background-color: rgba(120, 140, 255, 0.05); /* 0,2,2 > dark:bg-white/5 0,2,0 */
}

/* ── 表頭文字 ── */
.dark .fi-ta-table .fi-ta-header-cell-label {
    color: var(--up-text-secondary);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.03em;
}

/* ── thead/tbody 邊界與列分隔線 ── */
.dark .fi-ta .fi-ta-table > :not([hidden]) ~ :not([hidden]),
.dark .fi-ta .fi-ta-table thead > :not([hidden]) ~ :not([hidden]),
.dark .fi-ta .fi-ta-table tbody > :not([hidden]) ~ :not([hidden]) {
    border-color: rgba(120, 140, 255, 0.08); /* 0,5,0 > dark:divide 0,4,0 */
}

/* ── 列 hover：藍紫微光 ── */
.dark .fi-ta .fi-ta-table .fi-ta-row:hover {
    background-color: rgba(120, 140, 255, 0.06); /* 0,4,1 > dark:hover 0,3,0 */
}

/* ── 表格內輸入框（搜尋、每頁顯示）：深底 + 藍紫描邊 ── */
.dark .fi-ta-ctn .fi-input-wrp {
    background-color: rgba(255, 255, 255, 0.03); /* 0,3,0 > dark:bg-white/5 0,2,0 */
    box-shadow: 0 0 0 1px rgba(120, 140, 255, 0.20);
}

/* 聚焦時紫色外光（自行接管 box-shadow 後需補回 focus 提示）*/
.dark .fi-ta-ctn .fi-input-wrp:focus-within {
    box-shadow: 0 0 0 2px rgba(108, 99, 255, 0.55);
}