/* theme-a-dark.css — Dark theme cho UI-A (light portal). Nạp SAU src/ui.css. Cơ chế ĐỒNG NHẤT với UI-B: gắn class .theme-dark trên -> ghi đè token nền/chữ. Controller App.uiA + nút ☀/🌙 trên topbar ở shell.js; lưu localStorage 'acl-fpf-ui-a-theme'. GIỮ NGUYÊN brand green (--acl-*) -> topbar/sidebar/login gradient vẫn nhận diện ACL, chỉ vùng nội dung (bg/surface/text) lật sang tối. Light mặc định = :root của ui.css (không cần class). */ /* ==================================================================== TOKENS — chỉ lật nền/đường viền/chữ/status-bg sang tối; brand giữ nguyên. .theme-dark (0,1,0) thắng :root (0,1,0) nhờ nạp sau; áp lên -> con kế thừa. ==================================================================== */ .theme-dark { /* Status — chữ giữ tươi, nền chuyển sang tint trong suốt cho nền tối */ --ok: #22c55e; --ok-bg: rgba(34,197,94,.15); --warn: #f59e0b; --warn-bg: rgba(245,158,11,.16); --danger: #ef4444; --danger-bg: rgba(239,68,68,.16); --info: #38bdf8; --info-bg: rgba(56,189,248,.15); /* Neutrals — deep navy/black */ --bg: #0b1220; --surface: #121a2b; --surface-2: #1b2436; --border: #283448; --border-strong: #3a4860; --text: #e8eef6; --muted: #9aa7bd; --muted-2: #6b7890; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.35); --shadow-lg: 0 18px 50px rgba(0,0,0,.55); color-scheme: dark; } /* ==================================================================== FIX các chỗ ui.css hardcode màu SÁNG (không qua token) ==================================================================== */ /* Form labels (ui.css: #334155 quá tối trên nền tối) */ .theme-dark .field > label { color: #cbd5e1; } /* Inputs / select / textarea (ui.css: background #fff) */ .theme-dark input[type=text], .theme-dark input[type=number], .theme-dark input[type=email], .theme-dark input[type=date], .theme-dark input[type=password], .theme-dark select, .theme-dark textarea { background: var(--surface-2); color: var(--text); border-color: var(--border-strong); } .theme-dark input::placeholder, .theme-dark textarea::placeholder { color: var(--muted-2); } .theme-dark select option { background: #121a2b; color: var(--text); } /* Badge accent (ui.css: nền #dcf3dd sáng) */ .theme-dark .badge.accent { color: #8ee29a; background: rgba(76,176,80,.16); } /* Toast: ui.css dùng var(--text) làm NỀN -> ở dark var(--text) sáng -> phải ép nền tối */ .theme-dark .toast { background: #1e2740; color: #fff; border: 1px solid var(--border-strong); } .theme-dark .toast.success { background: #14532d; } .theme-dark .toast.info { background: #14304d; } .theme-dark .toast.warn { background: #5a3210; } /* Notice: nền là token (đã translucent) nhưng chữ ui.css hardcode tối -> làm tươi lại */ .theme-dark .notice.warn { color: #fcd34d; } .theme-dark .notice.danger { color: #fca5a5; } .theme-dark .notice.info { color: #bae6fd; } .theme-dark .notice.ok { color: #86efac; } /* "Why this screen?" — hover & viền/chữ hardcode xanh nhạt */ .theme-dark .btn-why { color: #bae6fd; border-color: rgba(56,189,248,.4); background: rgba(56,189,248,.12); } .theme-dark .btn-why:hover { background: rgba(56,189,248,.2); } .theme-dark .btn-why.on { background: var(--info); color: #04293a; border-color: var(--info); } .theme-dark .screen-note { background: rgba(56,189,248,.08); border-color: rgba(56,189,248,.3); border-left-color: var(--info); } .theme-dark .screen-note .sn-row p, .theme-dark .sn-points li { color: #cde9fb; } .theme-dark .sn-points b { color: #eaf6ff; } .theme-dark .sn-points { border-top-color: rgba(56,189,248,.25); } /* Card header: tách nhẹ khỏi thân thẻ trên nền tối */ .theme-dark .card .card-h { background: rgba(255,255,255,.02); } /* Split pane head (tokenized nhưng cho rõ tách lớp) */ .theme-dark .workspace.split .pane-head { background: #0a1020; } /* Feedback widget (ui.css: .fb-act nền #fff) */ .theme-dark .fb-act { background: var(--surface-2); color: var(--text); border-color: var(--border-strong); } .theme-dark .fb-act.save { background: var(--acl-primary); border-color: var(--acl-primary); color: #fff; } .theme-dark .fb-input { background: var(--surface-2); color: var(--text); border-color: var(--border-strong); } .theme-dark .fb-item, .theme-dark .fb-list-head { border-color: var(--border); } /* Login (ui.css: card #fff, persona chọn #eef7ef) — gradient nền giữ brand green */ .theme-dark .login-card { background: var(--surface); border: 1px solid var(--border); color: var(--text); } .theme-dark .persona-opt { border-color: var(--border-strong); background: var(--surface-2); } .theme-dark .persona-opt:hover { border-color: var(--acl-accent); background: #14213a; } .theme-dark .persona-opt.sel { border-color: var(--acl-accent); background: rgba(76,176,80,.14); } .theme-dark .mfa-boxes input { background: var(--surface-2); } /* Nút đổi theme ☀/🌙 trên topbar (đồng bộ kích thước với UI-B) */ .topbar .btn-theme { font-size: 14px; line-height: 1; padding: 6px 9px; }