/** * 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: medium-gray background ───────────────────────────────── */ html:not(.dark) body { background: #e8edf4 !important; background-attachment: fixed; color: #0f172a; } /* ── Surface cards: white + clear border + shadow ────────────────── */ html:not(.dark) .card { background: #ffffff !important; border: 1px solid #d4dde8 !important; box-shadow: 0 1px 4px rgba(15, 23, 42, .06), 0 2px 8px rgba(15, 23, 42, .04); transition: box-shadow .2s ease, border-color .2s ease; } html:not(.dark) .card:hover { box-shadow: 0 4px 16px rgba(15, 23, 42, .09), 0 2px 6px rgba(15, 23, 42, .05); } /* Tailwind utility cards */ html:not(.dark) [class~="rounded-2xl"][class~="bg-white"], html:not(.dark) [class~="rounded-xl"][class~="bg-white"] { border: 1px solid #d4dde8 !important; box-shadow: 0 1px 4px rgba(15, 23, 42, .06), 0 2px 8px rgba(15, 23, 42, .04); } /* ── Form inputs: white bg, visible border, readable text ───────── */ /* Target tất cả class-based inputs */ html:not(.dark) .inp, html:not(.dark) input.inp, html:not(.dark) select.inp, html:not(.dark) textarea.inp, html:not(.dark) .field-input, html:not(.dark) .emp-select, html:not(.dark) .modal-field input, html:not(.dark) .modal-field select, html:not(.dark) .modal-field textarea { background: #ffffff !important; border-color: #b8c8d8 !important; color: #1e293b !important; box-shadow: inset 0 1.5px 3px rgba(15, 23, 42, .05); transition: border-color .15s ease, box-shadow .15s ease; } /* Target Tailwind utility inputs trong các page dùng bg-white/bg-slate-50 */ html:not(.dark) input[type="text"], html:not(.dark) input[type="number"], html:not(.dark) input[type="email"], html:not(.dark) input[type="tel"], html:not(.dark) input[type="password"], html:not(.dark) input[type="date"], html:not(.dark) input[type="time"], html:not(.dark) input[type="month"], html:not(.dark) input[type="search"], html:not(.dark) select:not([class*="day-btn"]):not([class*="tab-btn"]):not([class*="btn"]), html:not(.dark) textarea { background: #ffffff; border: 1px solid #b8c8d8; color: #1e293b; box-shadow: inset 0 1.5px 3px rgba(15, 23, 42, .045); transition: border-color .15s ease, box-shadow .15s ease; } /* Hover */ html:not(.dark) .inp:hover, html:not(.dark) input.inp:hover, html:not(.dark) .field-input:hover, html:not(.dark) input[type="text"]:hover, html:not(.dark) input[type="number"]:hover, html:not(.dark) input[type="email"]:hover, html:not(.dark) input[type="date"]:hover, html:not(.dark) input[type="time"]:hover, html:not(.dark) input[type="month"]:hover, html:not(.dark) select:not([class*="btn"]):hover, html:not(.dark) textarea:hover { border-color: #8fa8c0 !important; } /* Focus */ html:not(.dark) .inp:focus, html:not(.dark) input.inp:focus, html:not(.dark) select.inp:focus, html:not(.dark) textarea.inp:focus, html:not(.dark) .field-input:focus, html:not(.dark) input[type="text"]:focus, html:not(.dark) input[type="number"]:focus, html:not(.dark) input[type="email"]:focus, html:not(.dark) input[type="tel"]:focus, html:not(.dark) input[type="date"]:focus, html:not(.dark) input[type="time"]:focus, html:not(.dark) input[type="month"]:focus, html:not(.dark) select:not([class*="btn"]):focus, html:not(.dark) textarea:focus { border-color: var(--brand, #4f46e5) !important; box-shadow: inset 0 1.5px 3px rgba(15, 23, 42, .03), 0 0 0 3px color-mix(in srgb, var(--brand, #4f46e5) 18%, transparent) !important; outline: none !important; } /* Disabled / readonly inputs */ html:not(.dark) input[readonly], html:not(.dark) input:disabled, html:not(.dark) select:disabled, html:not(.dark) textarea:disabled, html:not(.dark) .field-input-readonly { background: #f1f5f9 !important; color: #64748b !important; border-color: #d0dae6 !important; box-shadow: none !important; cursor: not-allowed; } /* ── Labels: darker for better contrast ─────────────────────────── */ html:not(.dark) label, html:not(.dark) .lbl, html:not(.dark) .field-label { color: #374151 !important; font-weight: 600; } /* Section titles / small labels */ html:not(.dark) [class*="text-slate-500"], html:not(.dark) [class*="text-slate-400"] { /* Let Tailwind handle these — don't override */ } /* ── 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: #d4dde8 !important; letter-spacing: -.005em; } /* ── Tables ──────────────────────────────────────────────────────── */ html:not(.dark) th { background: #f1f5f9; border-bottom: 2px solid #d4dde8 !important; color: #374151 !important; } html:not(.dark) td { border-bottom-color: #e8edf4 !important; } html:not(.dark) tbody tr { transition: background-color .12s ease; } html:not(.dark) tbody tr:hover { background: #f5f8fc !important; } /* ── 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, .1), 0 0 0 1px color-mix(in srgb, var(--brand, #4f46e5) 18%, transparent) inset; } html:not(.dark) .btn-primary:hover { box-shadow: 0 4px 12px color-mix(in srgb, var(--brand, #4f46e5) 28%, transparent); transform: translateY(-1px); } html:not(.dark) .btn-primary:active { transform: translateY(0); } html:not(.dark) .btn-sm { background: #fff; border-color: #c8d5e3 !important; color: #334155; transition: all .12s ease; } html:not(.dark) .btn-sm:hover { background: #f1f5f9; border-color: #a0b3c6 !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%, #f8fafc 100%); border-right: 1px solid #c8d5e3; box-shadow: 2px 0 8px rgba(15, 23, 42, .06); } 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: #e8edf4; } /* ── Page content area: slight inset feel ───────────────────────── */ html:not(.dark) .pp-page-content { /* Không override; bg body đủ tạo contrast với card trắng */ } /* ── Sticky bars (save bar, filter bar…) ────────────────────────── */ html:not(.dark) [class*="sticky"][class*="bg-white"] { background: rgba(255,255,255,.97) !important; border-bottom-color: #c8d5e3 !important; box-shadow: 0 2px 6px rgba(15,23,42,.06); } /* ── Nav top bar ─────────────────────────────────────────────────── */ html:not(.dark) header[class*="sticky"] { border-bottom-color: #c8d5e3 !important; box-shadow: 0 1px 4px rgba(15,23,42,.06); } /* ── att-card & hr-config.card overrides ─────────────────────────── */ html:not(.dark) .att-card { background: #ffffff !important; border-color: #c8d5e3 !important; box-shadow: 0 2px 8px rgba(15,23,42,.06) !important; } /* ── pe-admin / admin tab buttons ───────────────────────────────── */ html:not(.dark) .tab-btn:not(.active) { background: #fff !important; border-color: #c8d5e3 !important; color: #374151 !important; } html:not(.dark) .tab-btn:not(.active):hover { background: #f1f5f9 !important; border-color: #8fa8c0 !important; } /* ── Placeholder text darker ─────────────────────────────────────── */ html:not(.dark) input::placeholder, html:not(.dark) textarea::placeholder { color: #94a3b8; } /* ── Section / divider borders inside cards ──────────────────────── */ html:not(.dark) .card hr, html:not(.dark) .card .divider, html:not(.dark) [class*="border-slate-200"]:not([class*="dark"]) { border-color: #d4dde8 !important; } /* ── Checkbox & radio ────────────────────────────────────────────── */ html:not(.dark) input[type="checkbox"], html:not(.dark) input[type="radio"] { accent-color: var(--brand, #4f46e5); background: #fff; border: 1.5px solid #b8c8d8; box-shadow: none; }