:root { color-scheme: light; --primary-color: #059669; --primary-dark: #047857; --accent-color: #f59e0b; --bg-color: #ecf5f0; --card-bg: #ffffff; --text-main: #1f2937; --text-muted: #6b7280; --border-color: #d7e5dd; --input-border: #bcd6c7; --hover-bg: #dff0e7; --row-alt: #f4faf7; --shadow: 0 8px 24px -8px rgba(5, 150, 105, 0.25); --gradient-hero: linear-gradient(135deg, #047857, #059669 55%, #10b981); --ring: 0 0 0 3px rgba(5, 150, 105, 0.15); --ok-color: #047857; --err-color: #dc2626; --danger-hover: #b91c1c; --radius: 16px; } /* Dark mode: ikut sistem (HP/tablet/laptop), aksen emerald terang. Pilihan manual (localStorage) menang via atribut data-theme di . */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --primary-color: #34d399; --primary-dark: #6ee7b7; --accent-color: #fbbf24; --bg-color: #0a1a14; --card-bg: #10251d; --text-main: #e6f4ed; --text-muted: #93a89e; --border-color: #1e3a2f; --input-border: #2c4f40; --hover-bg: #14382c; --row-alt: #0e2119; --shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.6); --gradient-hero: linear-gradient(135deg, #065f46, #047857 55%, #059669); --ring: 0 0 0 3px rgba(52, 211, 153, 0.2); --ok-color: #34d399; --err-color: #f87171; --danger-hover: #f87171; } :root:not([data-theme="light"]) select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2393a89e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); } } :root[data-theme="dark"] { color-scheme: dark; --primary-color: #34d399; --primary-dark: #6ee7b7; --accent-color: #fbbf24; --bg-color: #0a1a14; --card-bg: #10251d; --text-main: #e6f4ed; --text-muted: #93a89e; --border-color: #1e3a2f; --input-border: #2c4f40; --hover-bg: #14382c; --row-alt: #0e2119; --shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.6); --gradient-hero: linear-gradient(135deg, #065f46, #047857 55%, #059669); --ring: 0 0 0 3px rgba(52, 211, 153, 0.2); --ok-color: #34d399; --err-color: #f87171; --danger-hover: #f87171; } :root[data-theme="dark"] select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2393a89e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, Tahoma, Geneva, Verdana, sans-serif; background-color: var(--bg-color); color: var(--text-main); line-height: 1.5; padding: 16px; } /* --- Layar auth di tengah (login/register saja, halaman app rata atas) --- */ .center-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; } /* --- Kartu --- */ .card { background-color: var(--card-bg); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px; width: 90%; max-width: 600px; margin: 16px auto; } .card h1, .card h2 { color: var(--primary-color); margin-bottom: 12px; } /* --- Form --- */ .field { margin-bottom: 16px; } label { font-weight: 600; font-size: 0.9rem; } input[type="email"], input[type="password"], input[type="text"], input[type="number"] { width: 100%; min-height: 44px; padding: 10px; margin-top: 8px; font-size: 0.9rem; line-height: 1.5; font-family: inherit; color: var(--text-main); background-color: var(--card-bg); border: 1px solid var(--input-border); border-radius: 6px; } /* Select native: panah bawaan diganti chevron custom agar identik dengan dropdown produk (posisi + bentuk sama persis) */ select { width: 100%; min-height: 44px; padding: 10px 36px 10px 10px; margin-top: 8px; font-size: 0.9rem; line-height: 1.5; font-family: inherit; color: var(--text-main); background-color: var(--card-bg); border: 1px solid var(--input-border); border-radius: 6px; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; } input:focus, select:focus, #dropdown-tombol:focus { border-color: var(--primary-color); outline: none; box-shadow: var(--ring); } /* --- Tombol --- */ .btn, button { background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); color: white; border: none; padding: 10px 20px; font-size: 0.9rem; font-weight: 600; border-radius: 10px; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease; } .btn:hover, button:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: var(--shadow); } .btn:active, button:active { transform: translateY(0); box-shadow: none; } /* Varian tombol: bahaya (hapus) + lembut (batal/tutup). background-image: none = matikan gradasi hijau agar identitas warna solid terjaga (merah = destruktif, abu = sekunder). */ .btn-danger { background-color: var(--err-color); background-image: none; } .btn-danger:hover { background-color: var(--danger-hover); background-image: none; } .btn-soft { background-color: var(--border-color); background-image: none; color: var(--text-main); } .btn-soft:hover { background-color: var(--input-border); background-image: none; } /* Tombol ikon: kotak kecil berisi SVG, teks disembunyikan visual */ .btn-ikon { padding: 8px 10px; line-height: 0; background: transparent; color: var(--text-muted); } .btn-ikon:hover { background-color: var(--border-color); color: var(--text-main); transform: none; box-shadow: none; filter: none; } .btn-ikon svg { vertical-align: middle; } /* --- Teks --- */ #hasil, #hasil-login, #hasil-register, #hasil-username, #info-user, #info, #meter-password { margin-top: 12px; color: var(--text-muted); font-size: 0.9rem; } /* Pesan semantik: sukses hijau, error merah */ .msg-ok { color: var(--ok-color) !important; font-weight: 600; } .msg-err { color: var(--err-color) !important; font-weight: 600; } /* Angka hero dashboard: kartu gradient hijau + angka putih besar */ .saldo-hero { background: var(--gradient-hero); border-radius: var(--radius); padding: 20px; margin: 12px 0 16px; box-shadow: var(--shadow); color: #ffffff; } .saldo-hero .saldo-label { display: block; font-size: 0.85rem; font-weight: 600; opacity: 0.85; margin-bottom: 4px; } .saldo-hero #saldo { font-size: 2rem; font-weight: 700; color: #ffffff; } .saldo-hero #saldo.saldo-minus { color: #fecaca !important; } /* Sidebar menu: kiri di laptop (>=1024px), bar atas di HP. Link berikon (SVG via data-ikon), halaman aktif pil hijau solid. */ .sidebar { background-color: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px; width: 90%; max-width: 600px; margin: 16px auto 0; } .sidebar-brand { font-weight: 700; color: var(--primary-color); margin-bottom: 8px; } .sidebar-nav { display: flex; gap: 6px; overflow-x: auto; } .sidebar-nav a { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; text-decoration: none; font-size: 0.85rem; font-weight: 600; color: var(--text-muted); white-space: nowrap; transition: background-color 0.15s ease, color 0.15s ease; } .sidebar-nav a .nav-ikon { line-height: 0; } .sidebar-nav a .nav-ikon svg { width: 20px; height: 20px; } .sidebar-nav a:hover { background-color: var(--hover-bg); color: var(--text-main); } .sidebar-nav a.nav-aktif { background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); color: #ffffff; } @media (min-width: 1024px) { /* Full-bleed desktop: tanpa jeda tepi. HP/tablet (<1024px) tidak tersentuh = padding + radius nyaman tetap seperti semula. */ body.app { padding: 0 0 0 216px; } .sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: 216px; max-width: none; margin: 0; border: none; border-right: 1px solid var(--border-color); border-radius: 0; box-shadow: none; } .sidebar-nav { flex-direction: column; overflow: visible; } /* Khusus halaman app (body.app): auth (center-screen) tidak ikut. */ body.app .card { width: 100%; max-width: none; margin: 0; border-radius: 0; box-shadow: none; min-height: 100vh; } } /* Status tema di Profile */ .tema-status { color: var(--text-muted); font-weight: 400; } /* Judul seksi non-field (pengganti label telanjang agar Console bersih) */ .label-teks { font-weight: 600; font-size: 0.9rem; margin-bottom: 2px; } /* Tab Riwayat (Semua/Masuk/Keluar): pil netral, aktif hijau gradient */ .tab-bar { display: flex; gap: 6px; margin-bottom: 12px; } .tab-riwayat { background-color: var(--hover-bg); background-image: none; color: var(--text-main); border-radius: 999px; padding: 8px 18px; } .tab-riwayat:hover { background-color: var(--hover-bg); background-image: none; transform: none; box-shadow: none; filter: none; } .tab-riwayat.tab-aktif { background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); color: #ffffff; } /* Badge jenis di tabel gabungan: hijau = masuk, merah = keluar */ .badge-masuk, .badge-keluar { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.8rem; font-weight: 700; white-space: nowrap; } .badge-masuk { background-color: var(--hover-bg); color: var(--ok-color); } .badge-keluar { background-color: #fdecec; color: var(--err-color); } :root[data-theme="dark"] .badge-keluar { background-color: #3a1d1d; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .badge-keluar { background-color: #3a1d1d; } } /* Ritme vertikal antar blok */ .card hr { margin: 16px 0; border: none; border-top: 1px solid var(--border-color); } .card ul { margin: 8px 0 8px 20px; } .card li { margin-bottom: 6px; } a { color: var(--primary-color); } /* --- Dropdown custom (milik webapp, serasi kartu) --- */ .dropdown { position: relative; margin-top: 8px; } #dropdown-tombol { position: relative; width: 100%; min-height: 44px; padding: 10px 36px 10px 10px; font-size: 0.9rem; font-weight: 400; font-family: inherit; text-align: left; line-height: 1.5; color: var(--text-main); background-color: var(--card-bg); background-image: none; border: 1px solid var(--input-border); border-radius: 6px; } #dropdown-tombol:hover { background-color: var(--card-bg); background-image: none; border-color: var(--primary-color); } #dropdown-tombol .dd-chevron { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--text-muted); line-height: 0; } #dropdown-tombol .dd-chevron svg { display: block; } .dropdown-list { position: absolute; left: 0; right: 0; background-color: var(--card-bg); border: 1px solid var(--input-border); border-radius: 6px; box-shadow: var(--shadow); padding: 8px; z-index: 10; } #dropdown-cari { margin-top: 0; } .dropdown-item { padding: 8px; border-radius: 6px; cursor: pointer; font-size: 0.9rem; } .dropdown-item:hover { background-color: var(--hover-bg); } .dropdown-tambah { font-weight: 600; color: var(--primary-color); } .dropdown-kosong { color: var(--text-muted); cursor: default; } /* --- Tabel transaksi: 2 seksi + subtotal, angka kanan --- */ /* Scroll horizontal hanya tabel di HP sempit (halaman tidak ikut geser) */ .tabel-scroll { overflow-x: auto; margin-bottom: 16px; } .tabel-transaksi { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 0.9rem; } .tabel-transaksi th, .tabel-transaksi td { border: 1px solid var(--border-color); padding: 8px; text-align: left; vertical-align: top; } .tabel-transaksi thead th { background-color: var(--hover-bg); } .tabel-transaksi tbody tr:nth-child(even) { background-color: var(--row-alt); } .tabel-transaksi td:nth-child(3), .tabel-transaksi tfoot td:nth-child(2) { text-align: right; white-space: nowrap; } .tabel-transaksi tfoot td { font-weight: 700; background-color: var(--bg-color); } /* --- Tabel ringkasan kategori + bar mini (CSS murni, tanpa lib) --- */ .tabel-kategori { width: 100%; border-collapse: collapse; font-size: 0.9rem; } .tabel-kategori td { padding: 6px 4px; vertical-align: middle; } .bar-mini { background-color: var(--border-color); border-radius: 6px; height: 10px; min-width: 60px; } .bar-mini-isi { background: linear-gradient(90deg, var(--primary-color), var(--primary-dark)); border-radius: 6px; height: 10px; } /* Grafik dashboard (Chart.js): canvas ikut lebar kartu */ #grafik-arus, #grafik-minggu, #grafik-kategori { max-width: 100%; } /* --- Panel inline (catatan + edit): baris khusus di bawah baris induk --- */ .baris-catatan td, .baris-edit td { background-color: var(--row-alt); } .panel-catatan .field { margin-bottom: 10px; } .panel-catatan label { display: block; margin-bottom: 2px; } /* --- Input Rupiah: prefix Rp sebagai span (visual saja, bukan ketikan) --- */ .input-rp { display: flex; align-items: stretch; margin-top: 8px; } .input-rp span { display: flex; align-items: center; padding: 10px 12px; font-size: 0.9rem; font-weight: 600; color: var(--text-muted); background-color: var(--bg-color); border: 1px solid var(--input-border); border-right: none; border-radius: 6px 0 0 6px; } .input-rp input { margin-top: 0; border-radius: 0 6px 6px 0; } /* Tombol mata password menempel di kanan input (reuse .input-rp) */ .input-rp button { flex-shrink: 0; border-radius: 0 6px 6px 0; padding: 10px 14px; } .input-rp input { border-radius: 0; } .input-rp span + input { border-left: none; } /* Tombol mata password overlay di dalam input (opsi A) */ .password-wrap { position: relative; margin-top: 8px; } .password-wrap input { width: 100%; padding-right: 44px; background-color: var(--card-bg); color: var(--text-main); } .password-wrap .btn-ikon { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); padding: 6px; background: transparent; border: none; } .password-wrap .btn-ikon:hover { background: transparent; color: var(--primary-color); } /* --- Responsif --- */ @media (min-width: 600px) { .card { width: 500px; } } @media (min-width: 1024px) { /* Ukuran kartu full-bleed diatur blok layout di atas; di sini hanya grid grafik. PENTING: .card fluid didefinisikan ulang di bawah agar menang atas .card 500px dari blok 600px (urutan source = penentu). */ /* Grafik duo berdampingan (arus + mingguan), donat penuh di bawah. HP (<1024px) tetap 1 kolom seperti semula. */ .grid-grafik { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; align-items: start; } .grid-grafik .field-grafik-penuh { grid-column: 1 / -1; width: 100%; max-width: 560px; margin-left: auto; margin-right: auto; } /* Kartu fluid full-bleed khusus halaman app (body.app): auth tetap kartu tengah. HARUS di bawah blok 600px agar menang cascade. Tanpa ini kolom konten terjepit 500px + void kanan (bug PR #72). */ body.app .card { width: 100%; max-width: none; margin: 0; border-radius: 0; box-shadow: none; min-height: 100vh; padding: 32px; } /* Auth (login/register) tetap kartu tengah 600px seperti sebelum Fase A. */ body.center-screen .card { width: 600px; } /* Stat duo dashboard: 2 kartu berdampingan memenuhi lebar */ .stat-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 12px 0 16px; } /* Anti-jepit: anak grid boleh menyusut, canvas ikut kolom */ .grid-grafik > .field { min-width: 0; } } /* Stat duo: susun bawah di HP, kartu mini bergaris */ .stat-duo { display: grid; gap: 12px; margin: 12px 0 16px; } .stat-card { background-color: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--radius); padding: 16px 20px; box-shadow: var(--shadow); } .stat-card .stat-label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--text-muted); margin-bottom: 4px; } .stat-card strong { font-size: 1.5rem; font-weight: 700; } .stat-masuk strong { color: var(--ok-color); } .stat-keluar strong { color: var(--err-color); }