/** * theme-light.css — Lớp design refinements cho LIGHT mode. * Chỉ áp dụng khi KHÔNG có class 'dark'. Không phá dark mode hiện hữu. */ /* ── Body: subtle cool gradient + colour fix ─────────────────────── */ html:not(.dark) body { background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%) !important; background-attachment: fixed; color: #0f172a; } /* ── Surface cards: refined border + soft shadow ─────────────────── */ html:not(.dark) .card { border-color: #e6edf5 !important; box-shadow: 0 1px 3px rgba(15, 23, 42, .04), 0 1px 2px rgba(15, 23, 42, .03); transition: box-shadow .2s ease, border-color .2s ease; } html:not(.dark) .card:hover { box-shadow: 0 4px 14px rgba(15, 23, 42, .06), 0 2px 6px rgba(15, 23, 42, .04); } /* Cũng áp cho các card dùng Tailwind utility classes (không chỉ .card) */ html:not(.dark) [class~="rounded-2xl"][class~="bg-white"], html:not(.dark) [class~="rounded-xl"][class~="bg-white"] { border-color: #e6edf5; box-shadow: 0 1px 3px rgba(15, 23, 42, .035), 0 1px 2px rgba(15, 23, 42, .025); } /* ── Form inputs: refined border + focus ring ────────────────────── */ html:not(.dark) .inp, html:not(.dark) input.inp, html:not(.dark) select.inp, html:not(.dark) textarea.inp { border-color: #d9e2ee; background: #fff; box-shadow: inset 0 1px 2px rgba(15, 23, 42, .02); transition: border-color .15s ease, box-shadow .15s ease; } html:not(.dark) .inp:hover, html:not(.dark) input.inp:hover { border-color: #c2cee0; } html:not(.dark) .inp:focus, html:not(.dark) input.inp:focus, html:not(.dark) select.inp:focus, html:not(.dark) textarea.inp:focus { border-color: var(--brand, #4f46e5) !important; box-shadow: inset 0 1px 2px rgba(15, 23, 42, .02), 0 0 0 3px color-mix(in srgb, var(--brand, #4f46e5) 16%, transparent); outline: none !important; } /* ── Headings ────────────────────────────────────────────────────── */ html:not(.dark) h1, html:not(.dark) h2 { color: #0f172a; letter-spacing: -.015em; } html:not(.dark) h3 { color: #1e293b; letter-spacing: -.01em; } /* ── Section dividers ────────────────────────────────────────────── */ html:not(.dark) .sec-title { color: #334155 !important; border-bottom-color: #e6edf5 !important; letter-spacing: -.005em; } /* ── Tables ──────────────────────────────────────────────────────── */ html:not(.dark) th { background: #f6f8fb; border-bottom-color: #e6edf5 !important; color: #475569 !important; } html:not(.dark) td { border-bottom-color: #f1f5f9 !important; } html:not(.dark) tbody tr { transition: background-color .12s ease; } html:not(.dark) tbody tr:hover { background: #fbfcfe; } /* ── Buttons: subtle elevation on primary ───────────────────────── */ html:not(.dark) .btn-primary, html:not(.dark) button.btn-primary { box-shadow: 0 1px 2px rgba(15, 23, 42, .08), 0 0 0 1px color-mix(in srgb, var(--brand, #4f46e5) 18%, transparent) inset; } html:not(.dark) .btn-primary:hover { box-shadow: 0 4px 10px color-mix(in srgb, var(--brand, #4f46e5) 25%, transparent); transform: translateY(-1px); } html:not(.dark) .btn-primary:active { transform: translateY(0); } html:not(.dark) .btn-sm { background: #fff; border-color: #e6edf5 !important; transition: all .12s ease; } html:not(.dark) .btn-sm:hover { background: #f6f8fb; border-color: #cbd5e1 !important; } /* ── Code & kbd ──────────────────────────────────────────────────── */ html:not(.dark) code { background: #f1f5f9; border-radius: .3rem; padding: .12rem .35rem; font-size: .88em; color: #1e293b; } /* ── Sidebar light mode refinements ──────────────────────────────── */ html:not(.dark) #ppSidebar { background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%); border-right: 1px solid #e6edf5; box-shadow: 1px 0 4px rgba(15, 23, 42, .025); } html:not(.dark) #ppSidebar .pp-brand { border-bottom-color: #e6edf5; background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%); } html:not(.dark) #ppSidebar .pp-brand-name { color: #0f172a; letter-spacing: -.005em; } html:not(.dark) #ppSidebar .pp-section-title { color: #94a3b8; font-weight: 700; } html:not(.dark) #ppSidebar .pp-link { color: #475569; font-weight: 500; } html:not(.dark) #ppSidebar .pp-link:hover { background: #f6f8fb; color: #0f172a; } html:not(.dark) #ppSidebar .pp-link.active { background: color-mix(in srgb, var(--brand, #4f46e5) 9%, #ffffff); color: var(--brand, #4f46e5); border-left-color: var(--brand, #4f46e5); font-weight: 600; } html:not(.dark) #ppSidebar .pp-bottom { border-top-color: #e6edf5; } html:not(.dark) #ppSidebar .pp-user-row { border-top-color: #e6edf5; } html:not(.dark) #ppSidebar #tenantSel { background: #fff; border-color: #e6edf5; } /* Default state cả 2 nút (Cấu hình + Sáng/Tối) — brand-tinted nhẹ. !important để thắng inline style #ppSidebar .pp-action-btn từ nav.js. */ html:not(.dark) #ppSidebar .pp-action-btn:not(.pp-active) { background: color-mix(in srgb, var(--brand, #4f46e5) 10%, #fff) !important; border-color: color-mix(in srgb, var(--brand, #4f46e5) 30%, transparent) !important; color: var(--brand, #4f46e5) !important; font-weight: 500 !important; } html:not(.dark) #ppSidebar .pp-action-btn:not(.pp-active):hover { background: color-mix(in srgb, var(--brand, #4f46e5) 18%, #fff) !important; border-color: var(--brand, #4f46e5) !important; color: var(--brand, #4f46e5) !important; } /* Active state — quay lại khi đang ở admin context (specificity cao hơn để thắng) */ html:not(.dark) #ppSidebar .pp-action-btn.pp-active { background: var(--brand, #4f46e5) !important; border-color: var(--brand, #4f46e5) !important; color: #fff !important; box-shadow: 0 1px 2px color-mix(in srgb, var(--brand, #4f46e5) 30%, transparent); } html:not(.dark) #ppSidebar .pp-action-btn.pp-active:hover { filter: brightness(.92); background: var(--brand, #4f46e5) !important; } html:not(.dark) #ppSidebar .pp-user-btn { background: #fbfcfe; border-color: #e6edf5; } html:not(.dark) #ppSidebar .pp-user-btn:hover { background: #f6f8fb; } html:not(.dark) #ppSidebar .pp-collapse-btn, html:not(.dark) #ppSidebar .pp-collapse-btn-mini { background: #fff; border-color: #e6edf5; } /* ── Scrollbar (WebKit) ──────────────────────────────────────────── */ html:not(.dark) ::-webkit-scrollbar { width: 10px; height: 10px; } html:not(.dark) ::-webkit-scrollbar-track { background: transparent; } html:not(.dark) ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; border: 2px solid transparent; background-clip: content-box; } html:not(.dark) ::-webkit-scrollbar-thumb:hover { background: #94a3b8; background-clip: content-box; } /* ── Badges / pills polish ───────────────────────────────────────── */ html:not(.dark) .badge { font-weight: 600; } /* ── Subtle separators between sections inside cards ─────────────── */ html:not(.dark) .card hr, html:not(.dark) .card .divider { border-color: #eef2f7; } /* ── Login / register polish (no sidebar pages) ──────────────────── */ html:not(.dark) body.no-sidebar { background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%); }