/* Giao dien Dark - CHI co hieu luc khi .
Toan bo style.css (giao dien goc) khong bi dong toi - bat/tat qua dropdown chon giao dien o navbar,
luu trong localStorage, khong can tai lai trang.
Tinh than thiet ke: nen den kieu iOS Dark Mode (khong phai neon nhu Cyberpunk), icon DON SAC
(dung 1 mau accent duy nhat cho ca 3 icon muc, khong phai 3 gradient khac nhau nhu giao dien goc),
hieu ung kinh mo (backdrop-filter blur) cho navbar/card/modal/dropdown - dung dung cach iOS lam
"vibrancy" cho thanh dieu huong/action sheet, KHONG ap dung blur cho nut bam chinh (button filled
tren iOS van la mau dac, khong trong suot - blur chi danh cho lop "chrome" nam tren noi dung). */
/* Bang mau/be mat da doi theo anh tham khao (app theo doi thu cung "Paw Track") - accent chuyen tu
do sang xanh mint/teal, nen den ngam xanh nhe (khong con den tuyen doi), card dac hon (bot trong
suot) va bo goc tron nhieu hon (card/modal/nut) cho cam giac "premium app" giong anh mau. */
:root[data-theme="dark"] {
--dk-bg: #0a0d0c;
--dk-elevated: rgba(255, 255, 255, 0.07);
--dk-elevated-solid: #1a1e1c;
--dk-elevated2: rgba(255, 255, 255, 0.1);
--dk-text: #f5f5f7;
--dk-text-dim: #8f9a96;
--dk-border: rgba(255, 255, 255, 0.12);
--dk-accent: #00d9a3;
--dk-accent-dim: rgba(0, 217, 163, 0.16);
}
:root[data-theme="dark"] body {
background-color: var(--dk-bg);
color: var(--dk-text);
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "IBM Plex Sans", sans-serif;
}
:root[data-theme="dark"] h1,
:root[data-theme="dark"] h2,
:root[data-theme="dark"] h3,
:root[data-theme="dark"] h4,
:root[data-theme="dark"] h5,
:root[data-theme="dark"] h6,
:root[data-theme="dark"] .navbar-brand {
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", sans-serif;
color: var(--dk-text);
letter-spacing: -0.01em;
}
/* :not(.btn) - tranh de mau chu cua the thuong (VD pill loc "Tat ca", nut "Mo khoa")
de len tren dung mau chu Bootstrap cua .btn-primary/.btn-outline-*, vi selector co :root[]
lam tang do dac ta (specificity) cao hon ca class .btn-primary, khien chu do tren nen do
(btn-primary) bi vo hinh. Nut/pill van giu mau chu rieng theo tung variant o duoi. */
:root[data-theme="dark"] a:not(.btn) {
color: var(--dk-accent);
}
:root[data-theme="dark"] .text-muted {
color: var(--dk-text-dim) !important;
}
/* ---------- Kinh mo (frosted glass) - fallback neu trinh duyet khong ho tro backdrop-filter ---------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
:root[data-theme="dark"] .app-navbar,
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .modal-content,
:root[data-theme="dark"] .dropdown-menu,
:root[data-theme="dark"] .stat-tile,
:root[data-theme="dark"] .tx-card {
background-color: var(--dk-elevated-solid) !important;
}
}
/* ---------- Theme toggle dropdown (kinh mo kieu context menu iOS) ---------- */
:root[data-theme="dark"] .dropdown-menu {
background-color: rgba(28, 28, 30, 0.78);
-webkit-backdrop-filter: blur(24px) saturate(180%);
backdrop-filter: blur(24px) saturate(180%);
border: 1px solid var(--dk-border);
border-radius: 14px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
}
:root[data-theme="dark"] .dropdown-item {
color: var(--dk-text);
}
:root[data-theme="dark"] .dropdown-item:hover,
:root[data-theme="dark"] .dropdown-item:focus {
background-color: var(--dk-elevated2);
color: var(--dk-text);
}
:root[data-theme="dark"] .dropdown-item.active {
background-color: var(--dk-accent-dim);
color: var(--dk-accent);
}
/* ---------- Header (navbar kinh mo, luon noi len tren noi dung cuon ben duoi) ---------- */
:root[data-theme="dark"] .navbar.app-navbar {
background-color: rgba(20, 20, 22, 0.72) !important;
-webkit-backdrop-filter: blur(20px) saturate(180%);
backdrop-filter: blur(20px) saturate(180%);
border-bottom: 1px solid var(--dk-border);
}
:root[data-theme="dark"] .app-navbar .navbar-brand {
color: var(--dk-text) !important;
}
:root[data-theme="dark"] .app-navbar .nav-link {
color: var(--dk-text-dim) !important;
}
:root[data-theme="dark"] .app-navbar .nav-link:hover {
color: var(--dk-text) !important;
}
:root[data-theme="dark"] .app-navbar .navbar-text {
color: var(--dk-text-dim) !important;
}
:root[data-theme="dark"] .navbar-toggler {
filter: invert(1) grayscale(1);
}
/* ---------- Buttons (filled = mau dac giong iOS, khong trong suot; outline = kinh mo nhe "tinted") ---------- */
:root[data-theme="dark"] .btn {
border-radius: 999px;
}
:root[data-theme="dark"] .btn-primary {
background-color: var(--dk-accent);
border-color: var(--dk-accent);
color: #05100c;
}
:root[data-theme="dark"] .btn-primary:hover,
:root[data-theme="dark"] .btn-primary:focus {
background-color: #00b386;
border-color: #00b386;
box-shadow: 0 4px 16px rgba(0, 217, 163, 0.35);
}
:root[data-theme="dark"] .btn-outline-secondary {
background-color: var(--dk-elevated);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border-color: var(--dk-border);
color: var(--dk-text);
}
:root[data-theme="dark"] .btn-outline-secondary:hover {
background-color: var(--dk-elevated2);
border-color: var(--dk-border);
color: var(--dk-text);
}
:root[data-theme="dark"] .btn-outline-primary {
border-color: var(--dk-accent);
color: var(--dk-accent);
}
:root[data-theme="dark"] .btn-outline-primary:hover {
background-color: var(--dk-accent);
color: #05100c;
}
:root[data-theme="dark"] .btn-outline-danger {
border-color: #ff453a;
color: #ff453a;
}
:root[data-theme="dark"] .btn-outline-danger:hover {
background-color: #ff453a;
color: #fff;
}
:root[data-theme="dark"] .btn-outline-success {
border-color: #30d158;
color: #30d158;
}
:root[data-theme="dark"] .btn-outline-success:hover {
background-color: #30d158;
color: #000;
}
/* ---------- Cards (kinh mo nhe, khong do bong nang - dung do trong suot lam do sau) ---------- */
:root[data-theme="dark"] .card {
background-color: var(--dk-elevated);
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
border: 1px solid var(--dk-border);
border-radius: 20px;
box-shadow: none;
color: var(--dk-text);
}
:root[data-theme="dark"] a.card-link-hover:hover {
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
:root[data-theme="dark"] .card-title {
color: var(--dk-text);
}
/* ---------- Modal (kinh mo dam hon card, kieu action sheet iOS) ---------- */
:root[data-theme="dark"] .modal-content {
background-color: rgba(28, 28, 30, 0.82);
-webkit-backdrop-filter: blur(28px) saturate(180%);
backdrop-filter: blur(28px) saturate(180%);
border: 1px solid var(--dk-border);
border-radius: 24px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
}
:root[data-theme="dark"] .modal-header {
border-bottom: 1px solid var(--dk-border);
}
:root[data-theme="dark"] .modal-title {
color: var(--dk-text);
}
:root[data-theme="dark"] .modal-body {
color: var(--dk-text);
}
:root[data-theme="dark"] .btn-close {
filter: invert(1) grayscale(1);
}
/* ---------- Badges / status (vien nang kieu capsule iOS, nen kinh mo) ---------- */
:root[data-theme="dark"] .badge-status {
background-color: var(--dk-elevated2);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
color: var(--dk-text);
border: 1px solid var(--dk-border);
}
:root[data-theme="dark"] .badge-status.on-hero {
background-color: rgba(255, 255, 255, 0.14);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.3);
}
/* ---------- Back link (pill kinh mo) ---------- */
:root[data-theme="dark"] .back-link {
background-color: var(--dk-elevated);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border-color: var(--dk-border);
color: var(--dk-text);
}
:root[data-theme="dark"] .back-link:hover {
color: var(--dk-accent);
border-color: var(--dk-accent);
box-shadow: 0 4px 14px rgba(0, 217, 163, 0.25);
}
:root[data-theme="dark"] .back-link-icon {
background-color: var(--dk-elevated2);
color: var(--dk-text);
}
:root[data-theme="dark"] .back-link:hover .back-link-icon {
background-color: var(--dk-accent);
color: #05100c;
}
/* ---------- Hero ---------- */
:root[data-theme="dark"] .hero-cover {
background-color: #0c0c0d;
}
:root[data-theme="dark"] .hero-cover::before {
background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.92) 100%);
}
:root[data-theme="dark"] .hero-eyebrow {
color: var(--dk-text-dim);
}
:root[data-theme="dark"] .hero-cover h1 {
color: #fff;
}
:root[data-theme="dark"] .hero-sub {
color: rgba(255, 255, 255, 0.7);
}
/* ---------- Section icon badges - DON SAC: ca 3 muc dung CHUNG 1 kieu kinh mo + 1 mau accent
duy nhat (khac han 3 gradient rieng cua giao dien goc) - dung tinh than "minimalist" ---------- */
:root[data-theme="dark"] .section-icon {
background: var(--dk-elevated2) !important;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border: 1px solid var(--dk-border);
border-radius: 16px;
box-shadow: none;
color: var(--dk-accent);
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
font-weight: 600;
}
/* ---------- Stat tiles ---------- */
:root[data-theme="dark"] .stat-tile {
background: var(--dk-elevated);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
border: 1px solid var(--dk-border);
border-radius: 18px;
}
:root[data-theme="dark"] .stat-tile .stat-value {
color: var(--dk-text);
}
:root[data-theme="dark"] .stat-tile.positive .stat-value {
color: #30d158;
}
:root[data-theme="dark"] .stat-tile.negative .stat-value {
color: #ff453a;
}
:root[data-theme="dark"] .stat-tile .stat-label {
color: var(--dk-text-dim);
}
/* ---------- Progress bar ---------- */
:root[data-theme="dark"] .progress {
background-color: var(--dk-elevated2);
border-radius: 999px;
}
:root[data-theme="dark"] .progress-bar {
background-color: var(--dk-accent);
border-radius: 999px;
}
:root[data-theme="dark"] .progress-bar.bg-danger {
background-color: #ff453a !important;
}
:root[data-theme="dark"] .progress-bar.bg-success {
background-color: #30d158 !important;
}
/* ---------- Tx card list (Thu-Chi mobile) ---------- */
:root[data-theme="dark"] .tx-card {
background-color: var(--dk-elevated);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
border: 1px solid var(--dk-border);
border-radius: 18px;
}
:root[data-theme="dark"] .tx-card-date {
color: var(--dk-text-dim);
}
:root[data-theme="dark"] .tx-card-amount.text-success {
color: #30d158 !important;
}
:root[data-theme="dark"] .tx-card-amount.text-danger {
color: #ff453a !important;
}
/* ---------- Forms (dac, khong kinh mo - giong iOS input field luon nen dac) ---------- */
:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] .form-select {
background-color: var(--dk-elevated-solid);
border: 1px solid var(--dk-border);
color: var(--dk-text);
}
:root[data-theme="dark"] .form-control:focus,
:root[data-theme="dark"] .form-select:focus {
background-color: var(--dk-elevated-solid);
color: var(--dk-text);
border-color: var(--dk-accent);
box-shadow: 0 0 0 0.2rem rgba(0, 217, 163, 0.25);
}
:root[data-theme="dark"] .form-control::placeholder {
color: var(--dk-text-dim);
opacity: 0.8;
}
:root[data-theme="dark"] .form-label {
color: var(--dk-text-dim);
}
:root[data-theme="dark"] .form-check-input {
background-color: var(--dk-elevated-solid);
border-color: var(--dk-border);
}
:root[data-theme="dark"] .form-check-input:checked {
background-color: var(--dk-accent);
border-color: var(--dk-accent);
}
/* ---------- Tables ---------- */
:root[data-theme="dark"] .table {
color: var(--dk-text);
border-color: var(--dk-border);
}
:root[data-theme="dark"] .table > :not(caption) > * > * {
background-color: transparent;
color: var(--dk-text);
border-bottom-color: var(--dk-border);
}
:root[data-theme="dark"] .table thead th {
background-color: var(--dk-elevated2) !important;
color: var(--dk-text);
font-weight: 700;
}
/* ---------- Alerts (nen kinh mo mau ban trong theo trang thai) ---------- */
:root[data-theme="dark"] .alert-success {
background-color: rgba(48, 209, 88, 0.14);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border-color: rgba(48, 209, 88, 0.4);
color: #30d158;
}
:root[data-theme="dark"] .alert-danger {
background-color: rgba(255, 69, 58, 0.14);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border-color: rgba(255, 69, 58, 0.4);
color: #ff453a;
}
:root[data-theme="dark"] .alert-warning {
background-color: rgba(255, 159, 10, 0.14);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border-color: rgba(255, 159, 10, 0.4);
color: #ff9f0a;
}
:root[data-theme="dark"] .border-danger {
border-color: #ff453a !important;
}
/* ---------- Misc ---------- */
:root[data-theme="dark"] .progress-thumb,
:root[data-theme="dark"] .photo-preview-item .progress-thumb {
border: 1px solid var(--dk-border);
}
/* ---------- Lich tien do thi cong + moc thu tien (thay the ban Gantt truoc do) - cac class
.progress-cal-* dung mau chu global --text/--text-muted (gan den) tu style.css cho nen o
ngay trong suot mac dinh, phai khai bao rieng cho dark de khong bi chim vao nen den. ---------- */
:root[data-theme="dark"] .progress-cal-legend {
color: var(--dk-text-dim);
}
:root[data-theme="dark"] .progress-cal-month-label {
color: var(--dk-text);
}
:root[data-theme="dark"] .progress-cal-weekdays span {
color: var(--dk-text-dim);
}
:root[data-theme="dark"] .progress-cal-payment-icon {
color: var(--dk-accent);
}
:root[data-theme="dark"] .progress-cal-day {
background: var(--dk-elevated2);
border-color: var(--dk-border);
color: var(--dk-text);
}
:root[data-theme="dark"] .progress-cal-day.is-today {
outline-color: var(--dk-text);
}
:root[data-theme="dark"] .progress-cal-dot.is-done {
background: #30d158;
}
:root[data-theme="dark"] .progress-cal-day.is-done {
background: rgba(48, 209, 88, 0.18);
border-color: #30d158;
color: #30d158;
}
:root[data-theme="dark"] .progress-cal-dot.is-overdue {
background: #ff453a;
}
:root[data-theme="dark"] .progress-cal-day.is-overdue {
background: rgba(255, 69, 58, 0.16);
border-color: #ff453a;
color: #ff453a;
}
:root[data-theme="dark"] .progress-cal-dot.is-pending {
background: #ff9f0a;
}
:root[data-theme="dark"] .progress-cal-day.is-pending {
background: rgba(255, 159, 10, 0.16);
border-color: #ff9f0a;
color: #ff9f0a;
}
:root[data-theme="dark"] .progress-notify-box {
background: var(--dk-elevated2);
}
:root[data-theme="dark"] .progress-notify-photo-btn {
background: transparent;
border-color: var(--dk-border);
color: var(--dk-text);
}
:root[data-theme="dark"] .progress-notify-photo-btn:hover {
background: rgba(255, 255, 255, 0.08);
}
:root[data-theme="dark"] .progress-cal-summary-dot {
background: #30d158;
}
:root[data-theme="dark"] .stat-summary-sticky {
background-color: var(--dk-bg);
}
:root[data-theme="dark"] .filter-active-dot {
background: #ff453a;
}