/* ============================================================
APP BANJAR — THEME: Dark Sidebar + Teal/Gold (Bali-inspired)
============================================================ */
/* Font Google (Plus Jakarta Sans, Inter) dimuat lewat di
tiap file HTML, BUKAN @import di sini — @import bikin loading
berantai/lambat (harus download+baca CSS ini dulu baru tahu perlu
download font). Lihat tag & di bagian atas file HTML. */
:root {
--ink: #1C2B29;
--muted: #6E7C79;
--line: #e5e7e5;
--bg: #F6F3EC;
--sidebar-from: #0f2e2c;
--sidebar-to: #0a1e1c;
--sidebar-text: #a9c2be;
--sidebar-text-active: #ffffff;
--accent-1: #0d9488;
--accent-2: #0b7a70;
--accent-gold: #C99A2E;
--accent-grad: linear-gradient(135deg, var(--accent-1), var(--accent-2));
--ok: #16a34a;
--danger: #ef4444;
--radius: 12px;
}
/* ============================================================
DESAIN MODE APK — TOKEN WARNA & GRADASI (v3, ditegaskan lagi —
versi sebelumnya kelihatan nyaris sama dengan warna lama, kurang
kontras) Dipakai di semua header/hero supaya konsisten.
============================================================ */
body.apk-mode {
--apk-blue-1: #8fb2ff;
--apk-blue-2: #3f6bf0;
--apk-blue-3: #1230a8;
--apk-grad: linear-gradient(135deg, var(--apk-blue-1) 0%, var(--apk-blue-2) 42%, #2a3fd6 68%, var(--apk-blue-3) 100%);
/* Tekstur: titik-titik lebih jelas + kilau diagonal (garis putih tipis
miring, ala kilau kaca/logam) + 2 lingkaran cahaya besar — supaya
header terasa hidup & "mahal", bukan gradasi polos statis. */
--apk-grad-texture:
linear-gradient(115deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.16) 48%, rgba(255,255,255,0) 56%),
radial-gradient(circle at 90% 4%, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 40%),
radial-gradient(circle at 2% 100%, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 38%),
radial-gradient(rgba(255,255,255,.22) 1.3px, transparent 1.6px);
--apk-grad-texture-size: auto, auto, auto, 16px 16px;
/* Latar halaman putih bersih; kartu pakai abu-muda ini supaya tetap
kelihatan menonjol (tidak menyatu dengan latar putih). */
--apk-card-bg: #F2F4F8;
background-color: #ffffff;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
background: var(--bg);
color: var(--ink);
font-size: 13px;
line-height: 1.5;
}
h1, h2, h3, .topbar-brand-name, .sidebar-link, .btn {
font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
}
/* ============================================================
TOPBAR
============================================================ */
.topbar {
background: radial-gradient(circle at top left, #24365f, var(--sidebar-from) 45%, var(--sidebar-to) 100%);
padding: 0 24px;
height: 56px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid rgba(255,255,255,0.06);
position: sticky;
top: 0;
z-index: 30;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}
.topbar .brand {
display: flex;
align-items: center;
gap: 10px;
font-weight: 700;
font-size: 14px;
color: #fff;
}
.topbar-brand-icon {
width: 32px;
height: 32px;
border-radius: 9px;
background: var(--accent-grad);
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
flex-shrink: 0;
box-shadow: 0 6px 16px rgba(13,148,136,0.35);
}
.topbar-brand-icon svg { width: 16px; height: 16px; }
.topbar-brand-name {
color: #fff;
font-size: 14px;
font-weight: 800;
letter-spacing: -0.2px;
line-height: 1.2;
}
.topbar-brand-sub {
color: #8a92b0;
font-size: 10px;
font-weight: 600;
line-height: 1.2;
}
.hamburger {
display: none;
background: none;
border: none;
font-size: 18px;
cursor: pointer;
color: #fff;
padding: 4px 8px;
border-radius: 6px;
}
.hamburger:hover {
background: rgba(255,255,255,0.08);
}
/* ============================================================
ACCOUNT
============================================================ */
.account {
position: relative;
}
.account-btn {
display: flex;
align-items: center;
gap: 8px;
background: none;
border: none;
padding: 5px 10px;
cursor: pointer;
font-size: 12px;
font-weight: 600;
color: #fff;
border-radius: 30px;
}
.account-btn:hover {
background: rgba(255,255,255,0.08);
}
.account-btn .avatar {
width: 30px;
height: 30px;
border-radius: 50%;
background: var(--accent-grad);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
box-shadow: 0 2px 6px rgba(99, 102, 241, 0.35);
}
.account-btn .caret {
font-size: 9px;
color: rgba(255,255,255,0.6);
}
.account-menu {
display: none;
position: absolute;
top: 42px;
right: 0;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
min-width: 190px;
z-index: 40;
overflow: hidden;
}
.account-menu.open {
display: block;
}
.account-menu .info {
padding: 14px 16px;
border-bottom: 1px solid var(--line);
}
.account-menu .info .name {
font-weight: 700;
font-size: 13px;
}
.account-menu .info .role-badge {
display: inline-block;
background: linear-gradient(135deg, rgba(99,102,241,0.12), rgba(139,92,246,0.12));
color: var(--accent-1);
padding: 2px 10px;
border-radius: 20px;
font-size: 10px;
font-weight: 700;
margin-top: 4px;
}
.account-menu .info .online {
display: flex;
align-items: center;
gap: 5px;
font-size: 11px;
color: var(--ok);
margin-top: 8px;
font-weight: 600;
}
.account-menu .info .online .dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--ok);
box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15);
}
.account-menu button.linklike {
width: 100%;
text-align: left;
background: none;
border: none;
padding: 11px 16px;
font-size: 12px;
font-weight: 600;
color: var(--danger);
cursor: pointer;
}
.account-menu button.linklike:hover {
background: #fef2f2;
}
/* ============================================================
SIDEBAR — DARK
============================================================ */
.app-shell {
display: flex;
min-height: calc(100vh - 56px);
}
.sidebar {
width: 220px;
background: radial-gradient(circle at top left, #24365f, var(--sidebar-from) 35%, var(--sidebar-to) 100%);
padding: 18px 0 0;
position: sticky;
top: 56px;
height: calc(100vh - 56px);
flex-shrink: 0;
display: flex;
flex-direction: column;
}
.sidebar-links {
flex: 1;
overflow-y: auto;
padding: 0 10px 12px;
}
.sidebar-links::-webkit-scrollbar {
width: 3px;
}
.sidebar-links::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.12);
border-radius: 10px;
}
.sidebar-link {
display: flex;
align-items: center;
gap: 11px;
padding: 9px 12px;
margin-bottom: 2px;
border-radius: 8px;
text-decoration: none;
color: var(--sidebar-text);
font-size: 12.5px;
font-weight: 600;
transition: all 0.15s;
}
.sidebar-link:hover {
background: rgba(255,255,255,0.06);
color: var(--sidebar-text-active);
}
.sidebar-link.active {
background: var(--accent-grad);
color: #fff;
box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35);
}
.sidebar-icon {
width: 20px;
height: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.sidebar-icon svg { width: 18px; height: 18px; }
.sidebar-divider {
height: 1px;
background: rgba(255,255,255,0.08);
margin: 8px 12px;
}
.sidebar-version {
flex-shrink: 0;
padding: 10px 18px 14px;
font-size: 10.5px;
font-weight: 600;
color: rgba(255,255,255,0.35);
}
/* ============================================================
MAIN CONTENT
============================================================ */
main.container {
flex: 1;
padding: 24px 28px;
max-width: 1180px;
margin: 0 auto;
width: 100%;
}
/* ============================================================
TYPOGRAPHY
============================================================ */
h1 {
font-size: 21px;
font-weight: 800;
margin: 0 0 2px 0;
color: var(--ink);
letter-spacing: -0.3px;
}
h2 {
font-size: 14px;
font-weight: 700;
margin: 0 0 12px 0;
color: var(--ink);
}
.muted {
color: var(--muted);
font-size: 12px;
}
/* ============================================================
CARDS
============================================================ */
.card {
background: #ffffff;
border-radius: var(--radius);
padding: 18px 20px;
border: 1px solid var(--line);
margin-bottom: 16px;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
/* ============================================================
STAT CARDS — PURPLE GRADIENT (DASHBOARD)
============================================================ */
.stat-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
gap: 14px;
margin: 14px 0 22px;
}
.stat-card {
background: var(--accent-grad);
border-radius: 14px;
padding: 20px 18px;
border: none;
color: #fff;
position: relative;
overflow: hidden;
box-shadow: 0 10px 24px rgba(99, 102, 241, 0.25);
}
.stat-card::after {
content: "";
position: absolute;
right: -30px;
top: -30px;
width: 110px;
height: 110px;
background: rgba(255,255,255,0.08);
border-radius: 50%;
}
.stat-card .stat-value {
font-size: 28px;
font-weight: 800;
line-height: 1.1;
color: #fff;
}
.stat-card .stat-label {
font-size: 12px;
color: rgba(255,255,255,0.85);
margin-top: 4px;
font-weight: 600;
}
.stat-card .stat-detail {
font-size: 11px;
color: rgba(255,255,255,0.72);
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid rgba(255,255,255,0.18);
}
/* Variant accents so individual stat cards can still read distinctly,
within the teal/gold Bali-inspired family. */
.stat-card.c-indigo { background: linear-gradient(135deg, #C99A2E, #B8791F); }
.stat-card.c-red { background: linear-gradient(135deg, #fb7185, #ef4444); box-shadow: 0 10px 24px rgba(239,68,68,0.25); }
.stat-card.c-orange { background: linear-gradient(135deg, #fbbf24, #f59e0b); box-shadow: 0 10px 24px rgba(245,158,11,0.25); }
.stat-card.c-teal { background: linear-gradient(135deg, #2dd4bf, #0d9488); box-shadow: 0 10px 24px rgba(13,148,136,0.25); }
/* ============================================================
MENU GRID
============================================================ */
.nav-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 12px;
margin-top: 14px;
}
.nav-card {
background: #ffffff;
border-radius: var(--radius);
padding: 16px 14px;
text-decoration: none;
color: var(--ink);
border: 1px solid var(--line);
transition: all 0.15s;
display: flex;
flex-direction: column;
gap: 3px;
}
.nav-card:hover {
border-color: var(--accent-1);
box-shadow: 0 8px 20px rgba(99, 102, 241, 0.12);
transform: translateY(-2px);
}
.nav-card .icon {
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 6px;
}
.nav-card .icon svg { width: 26px; height: 26px; }
.nav-card .title {
font-weight: 700;
font-size: 13px;
}
.nav-card .desc {
font-size: 11px;
color: var(--muted);
}
/* ============================================================
TABLES
============================================================ */
.table-wrap {
overflow-x: auto;
}
table {
width: 100%;
border-collapse: collapse;
font-size: 12px;
}
th, td {
text-align: left;
padding: 10px 12px;
border-bottom: 1px solid var(--line);
}
th {
background: #161d2f;
color: #c3c9da;
font-weight: 700;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.4px;
}
th:first-child { border-top-left-radius: 8px; }
th:last-child { border-top-right-radius: 8px; }
tr:hover td {
background: #f8f7ff;
}
/* NOTE: the previous horizontal-scroll-with-edge-fade approach for
#tableWrap/#tablePemasukan/#tableMeninggal/#tableUsers/etc. has been
replaced by the .card-table pattern below, which turns each row
into a readable stacked card on narrow screens instead of forcing
sideways scrolling through a shrunken table. See "RESPONSIVE
CARD-TABLE" further down this file. */
/* ============================================================
BADGES
============================================================ */
.badge {
display: inline-block;
padding: 2px 10px;
border-radius: 20px;
font-size: 10px;
font-weight: 700;
}
.badge.ok {
background: #dcfce7;
color: #16a34a;
}
.badge.danger {
background: #fee2e2;
color: #dc2626;
}
.badge.warning {
background: #fef3c7;
color: #d97706;
}
.badge.primary {
background: linear-gradient(135deg, rgba(99,102,241,0.12), rgba(139,92,246,0.12));
color: var(--accent-1);
}
/* ============================================================
FORMS
============================================================ */
input, select, textarea {
width: 100%;
padding: 9px 12px;
border: 1px solid var(--line);
border-radius: 8px;
font-size: 12px;
font-family: inherit;
background: #fff;
transition: all 0.15s;
color: var(--ink);
}
input:focus, select:focus, textarea:focus {
outline: none;
border-color: var(--accent-1);
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}
input[readonly] {
background: #f8fafc;
color: var(--muted);
}
label {
font-size: 11px;
font-weight: 700;
color: var(--muted);
display: block;
margin-bottom: 4px;
}
.field {
margin-bottom: 12px;
width: 100%;
}
.row {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.row > .field {
flex: 1;
min-width: 130px;
}
/* ============================================================
BUTTONS
============================================================ */
.btn {
background: var(--accent-grad);
color: #fff;
border: none;
padding: 9px 18px;
border-radius: 8px;
font-size: 12px;
font-weight: 700;
cursor: pointer;
transition: all 0.15s;
font-family: inherit;
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
}
.btn:hover {
filter: brightness(1.05);
transform: translateY(-1px);
}
.btn:active {
transform: scale(0.97);
}
.btn.secondary {
background: #eef0f7;
color: var(--ink);
box-shadow: none;
}
.btn.secondary:hover {
background: #e2e6f3;
transform: none;
}
.btn.danger {
background: linear-gradient(135deg, #fb7185, #ef4444);
box-shadow: 0 4px 12px rgba(239,68,68,0.25);
}
.btn.danger:hover {
filter: brightness(1.05);
}
.btn.small {
padding: 5px 11px;
font-size: 11px;
}
/* ============================================================
TOOLBAR
============================================================ */
.toolbar {
display: flex;
gap: 10px;
flex-wrap: wrap;
align-items: end;
margin-bottom: 12px;
}
/* A group of filter fields that should wrap together as a unit,
separate from action buttons (e.g. Reset Filter, + Tambah).
Uses a grid (not flex-wrap) so every field's left/right edges
line up cleanly across rows — each track is the same width, and
the row always fills edge-to-edge instead of leaving a ragged
gap after the last field when it wraps. Individual pages no
longer need an inline max-width on each .field; minmax() below
keeps fields from getting either too cramped or too stretched. */
.toolbar-filters {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 10px;
flex: 1 1 auto;
align-items: end;
width: 100%;
}
.toolbar-filters .field {
max-width: none;
min-width: 0;
width: 100%;
}
.toolbar-filters .field input,
.toolbar-filters .field select {
width: 100%;
box-sizing: border-box;
}
.toolbar-actions {
display: flex;
gap: 10px;
align-items: end;
flex-wrap: wrap;
}
/* ============================================================
TOAST
============================================================ */
.toast {
position: fixed;
bottom: 20px;
right: 20px;
background: #1b2236;
color: #fff;
padding: 12px 18px;
border-radius: 8px;
font-size: 12px;
font-weight: 600;
box-shadow: 0 10px 28px rgba(15,23,42,0.25);
z-index: 100;
opacity: 0;
transform: translateY(12px);
transition: all 0.25s;
max-width: 360px;
}
.toast.show {
opacity: 1;
transform: translateY(0);
}
.toast.error {
background: linear-gradient(135deg, #fb7185, #ef4444);
}
/* ============================================================
MODAL
============================================================ */
.modal-backdrop {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.5);
display: none;
align-items: center;
justify-content: center;
z-index: 50;
padding: 16px;
}
.modal-backdrop.show {
display: flex;
}
.modal {
background: #fff;
border-radius: 14px;
padding: 26px;
max-width: 460px;
width: 100%;
max-height: 90vh;
overflow: auto;
box-shadow: 0 20px 50px rgba(0,0,0,0.18);
}
.modal h3 {
font-size: 16px;
font-weight: 800;
margin-top: 0;
margin-bottom: 16px;
}
.modal-actions {
display: flex;
justify-content: flex-end;
gap: 8px;
margin-top: 16px;
}
/* ============================================================
DETAIL TUNGGAKAN MODAL (warga.html)
============================================================ */
.detail-modal-head {
margin-bottom: 16px;
}
.detail-modal-sub {
color: var(--muted);
font-size: 12px;
margin-top: 2px;
}
.detail-summary {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
padding: 14px;
background: #f8fafc;
border: 1px solid var(--line);
border-radius: var(--radius);
margin-bottom: 18px;
}
.detail-summary-item {
display: flex;
flex-direction: column;
gap: 4px;
}
.detail-summary-label {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.4px;
color: var(--muted);
}
.detail-summary-value {
font-size: 15px;
font-weight: 800;
color: #dc2626;
}
.detail-summary-total {
border-left: 1px solid var(--line);
padding-left: 12px;
}
.detail-summary-total .detail-summary-value {
color: #0f172a;
}
.detail-section {
margin-bottom: 18px;
}
.detail-section-title {
font-size: 13px;
font-weight: 700;
color: #0f172a;
margin-bottom: 8px;
}
.detail-section-body {
border: 1px solid var(--line);
border-radius: var(--radius);
overflow: hidden;
}
.detail-section-body .empty {
padding: 16px;
text-align: center;
}
.detail-table {
width: 100%;
border-collapse: collapse;
font-size: 12px;
}
.detail-table th {
background: #f8fafc;
color: var(--muted);
font-weight: 700;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.3px;
text-align: left;
padding: 9px 12px;
border-bottom: 1px solid var(--line);
}
.detail-table td {
padding: 9px 12px;
border-bottom: 1px solid var(--line);
vertical-align: middle;
}
.detail-table tr:last-child td {
border-bottom: none;
}
.detail-table tr:hover td {
background: #f8fafc;
}
.detail-table .col-nominal {
text-align: right;
font-weight: 700;
color: #dc2626;
white-space: nowrap;
}
.detail-table .col-status {
text-align: right;
white-space: nowrap;
}
.detail-table tfoot td {
padding: 10px 12px;
font-weight: 800;
background: #f8fafc;
border-top: 2px solid var(--line);
border-bottom: none;
}
.detail-table tfoot .col-nominal {
color: #dc2626;
}
@media (max-width: 560px) {
.detail-summary {
grid-template-columns: 1fr;
}
.detail-summary-total {
border-left: none;
padding-left: 0;
border-top: 1px solid var(--line);
padding-top: 10px;
}
}
/* ============================================================
LOGIN
============================================================ */
.login-wrap {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: radial-gradient(circle at top left, #123a37, #0a1e1c 60%);
}
/* Mode APK: latar putih bersih & logo biru, senada seluruh halaman APK
lainnya (bukan gradasi gelap teal — skema warna lama versi web). Dipakai
otomatis di register.html, forgot-kode/username/password.html, dan
verify-email.html karena semuanya berbagi class .login-wrap yang sama. */
body.apk-mode .login-wrap { background: #fff; }
body.apk-mode .login-card .logo .circ {
background: linear-gradient(135deg, #4f7cf6, #2f5ed6) !important;
box-shadow: 0 10px 24px rgba(47,94,214,.35) !important;
}
.login-card {
background: #fff;
border-radius: 16px;
padding: 34px 30px;
width: 100%;
max-width: 350px;
box-shadow: 0 24px 60px rgba(0,0,0,0.35);
border: 1px solid var(--line);
}
body.apk-mode .login-card {
box-shadow: 0 2px 16px rgba(28,43,41,.08);
border: none;
}
/* ---- Link & kotak aksen teal lama (dipakai di modal Login/Daftar
index.html, dan halaman register.html) — diseragamkan biru untuk mode
APK. Class ditambahkan khusus di HTML-nya, TIDAK mengubah inline style
asli (web tetap sama persis seperti sebelumnya). ---- */
body.apk-mode .apk-accent-link { color: #2f5ed6 !important; }
body.apk-mode .apk-accent-box { background: #eaf0fe !important; border-color: #2f5ed6 !important; }
body.apk-mode .apk-accent-text { color: #2f5ed6 !important; }
.login-card .logo {
text-align: center;
margin-bottom: 16px;
}
.login-card .logo .circ {
width: 52px;
height: 52px;
border-radius: 16px;
background: var(--accent-grad);
margin: 0 auto 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
color: #fff;
box-shadow: 0 10px 24px rgba(13,148,136,0.35);
}
.login-card h1 {
text-align: center;
font-size: 21px;
margin-bottom: 2px;
}
.login-card .sub {
text-align: center;
color: var(--muted);
font-size: 12px;
margin-bottom: 22px;
}
.error-box {
background: #fee2e2;
color: #dc2626;
padding: 9px 12px;
border-radius: 8px;
font-size: 12px;
font-weight: 600;
margin-bottom: 12px;
display: none;
}
/* ============================================================
SKELETON
============================================================ */
.skeleton {
background: linear-gradient(90deg, #f1f4f9, #f8fafc, #f1f4f9);
background-size: 200% 100%;
animation: skeleton 1.2s infinite;
border-radius: 6px;
height: 12px;
margin: 4px 0;
}
@keyframes skeleton {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.empty {
text-align: center;
color: var(--muted);
padding: 30px 16px;
font-size: 12px;
}
/* ============================================================
BOTTOM NAV (Mobile)
============================================================ */
.bottom-nav {
display: none;
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: radial-gradient(circle at top left, #24365f, var(--sidebar-from) 45%, var(--sidebar-to) 100%);
border-top: 1px solid rgba(255,255,255,0.08);
z-index: 20;
padding: 4px 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
/* IMPORTANT: .bottom-nav must stay display:block (overridden to
"block", never "flex", in the @media(max-width:900px) block
below) so it behaves as a plain horizontally-scrolling
container. .bottom-nav-inner — a normal block-level child in
that case — is free to grow wider than its parent and trigger
the scrollbar. Making .bottom-nav itself display:flex (an
earlier version of this rule did) turns .bottom-nav-inner into
a flex item instead, and flex items get squeezed/clipped by
their flex parent rather than reliably overflowing it — that
was the actual cause of admin's 8-item menu losing items on
mobile/tablet even after the centering+scroll markup was added. */
}
.bottom-nav::-webkit-scrollbar {
display: none;
}
.bottom-nav-inner {
display: flex;
width: max-content;
min-width: 100%;
justify-content: center;
margin: 0 auto;
}
.bottom-link {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 1px;
text-decoration: none;
color: #8a92a8;
font-size: 9px;
font-weight: 600;
padding: 6px 14px;
flex: 0 0 auto;
min-width: 58px;
}
.bottom-icon {
width: 18px;
height: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.bottom-icon svg { width: 17px; height: 17px; }
.bottom-link.active {
color: #fff;
}
/* Scroll-hint arrows for .bottom-nav, shown only when its content
overflows the viewport and there's more to reveal in that
direction. These are independent fixed-position elements (siblings
of .bottom-nav, injected by JS in api.js) rather than nested inside
it, so they don't interfere with .bottom-nav's own fixed layout —
their left/right edges are kept in sync with .bottom-nav's box via
JS on resize. */
.bottom-nav-arrow {
display: none;
position: fixed;
bottom: 0;
width: 26px;
height: 38px;
align-items: center;
justify-content: center;
color: rgba(255,255,255,0.85);
font-size: 13px;
z-index: 21;
pointer-events: none;
}
.bottom-nav-arrow.left {
left: 0;
background: linear-gradient(to right, var(--sidebar-to), rgba(12,20,38,0));
}
.bottom-nav-arrow.right {
right: 0;
background: linear-gradient(to left, var(--sidebar-to), rgba(12,20,38,0));
}
.bottom-nav-arrow.show {
display: flex;
}
/* ============================================================
SIDEBAR BACKDROP
============================================================ */
.sidebar-backdrop {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.45);
z-index: 19;
display: none;
}
/* ============================================================
FORM ALIGNMENT — keep label/input edges flush left & right
(.field/.row base rules already defined above; this just
reinforces that inputs always fill their field's full width
so left/right edges line up neatly in every form on the site)
============================================================ */
.field input,
.field select,
.field textarea {
width: 100%;
box-sizing: border-box;
}
/* ============================================================
PAGINATION
============================================================ */
.pagination {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px;
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid var(--line);
}
.pagination-info {
font-size: 11.5px;
color: var(--muted);
font-weight: 600;
}
.pagination-controls {
display: flex;
align-items: center;
gap: 6px;
}
.pagination-controls button {
background: #eef0f7;
color: var(--ink);
border: none;
width: 30px;
height: 30px;
border-radius: 7px;
font-size: 12px;
font-weight: 700;
cursor: pointer;
transition: all 0.15s;
}
.pagination-controls button:hover:not(:disabled) {
background: var(--accent-grad);
color: #fff;
}
.pagination-controls button:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.pagination-controls button.active {
background: var(--accent-grad);
color: #fff;
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}
.pagination-controls .pg-dots {
color: var(--muted);
padding: 0 2px;
font-size: 12px;
}
/* ============================================================
BULK SELECT TABLES (admin checklist + hapus/edit)
============================================================ */
.row-actions {
display: flex;
gap: 6px;
justify-content: center;
flex-wrap: wrap;
}
.bulk-actionbar {
display: none;
margin-top: 14px;
padding: 12px 16px;
background: #f8fafc;
border-radius: 8px;
border: 1px solid var(--line);
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 12px;
}
.bulk-actionbar.show {
display: flex;
}
.bulk-actionbar .bulk-summary {
font-size: 12px;
}
.bulk-actionbar .bulk-buttons {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
/* ============================================================
RESPONSIVE TABLE — plain table at every screen size
Per explicit request: tables must look the same on phones/
tablets as on desktop (normal rows/columns), not turn into
stacked "cards". When a table is wider than its container,
.table-wrap (overflow-x:auto, set earlier in this file) lets
the user scroll left/right to see the rest, instead of
reflowing the layout.
============================================================ */
.table-wrap table {
min-width: 640px;
}
.table-wrap td, .table-wrap th {
white-space: nowrap;
}
@media (max-width: 1024px) {
main.container {
padding: 18px 20px;
}
}
@media (max-width: 900px) {
.sidebar {
position: fixed;
top: 0;
left: 0;
height: 100vh;
z-index: 22;
width: 230px;
padding-top: 64px;
padding-bottom: 0;
transform: translateX(-100%);
transition: transform 0.2s;
box-shadow: 0 4px 20px rgba(0,0,0,0.25);
}
.sidebar.open {
transform: translateX(0);
}
.hamburger {
display: block;
}
.bottom-nav {
display: block;
}
main.container {
padding: 12px;
padding-bottom: 68px;
}
.stat-grid {
grid-template-columns: 1fr 1fr;
}
.nav-grid {
grid-template-columns: 1fr 1fr;
}
.row {
flex-direction: column;
}
.row > .field {
min-width: 100%;
}
}
@media (max-width: 480px) {
.topbar {
padding: 0 10px;
height: 50px;
}
.topbar .brand .brand-name {
font-size: 13px;
}
.topbar .page-title {
font-size: 12px;
}
.account-btn span:not(.avatar) {
display: none;
}
h1 {
font-size: 18px;
}
.stat-grid {
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.stat-card {
padding: 14px;
}
.stat-card .stat-value {
font-size: 19px;
}
.nav-grid {
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.nav-card {
padding: 12px 10px;
}
.nav-card .icon {
width: 26px; height: 26px;
}
.nav-card .icon svg { width: 22px; height: 22px; }
.card {
padding: 12px;
}
.login-card {
padding: 26px 18px;
margin: 10px;
}
.toast {
bottom: 64px;
right: 10px;
left: 10px;
max-width: 100%;
}
.pagination {
justify-content: center;
text-align: center;
}
.bulk-actionbar {
flex-direction: column;
align-items: stretch;
}
.bulk-actionbar .bulk-buttons {
justify-content: stretch;
}
.bulk-actionbar .bulk-buttons .btn {
flex: 1;
}
}
/* Wilayah form - responsive */
.wilayah-form {
display: flex;
gap: 10px;
align-items: flex-end;
flex-wrap: wrap;
width: 100%;
}
.wilayah-form .field {
flex: 1;
min-width: 200px;
}
.wilayah-form .field input {
width: 100%;
}
.wilayah-form .btn {
flex-shrink: 0;
}
@media (max-width: 600px) {
.wilayah-form {
flex-direction: column;
align-items: stretch;
}
.wilayah-form .field {
min-width: 100%;
}
.wilayah-form .btn {
width: 100%;
}
}
/* ============================================================
SETTINGS PAGE - MOBILE RESPONSIVE
============================================================ */
/* Settings cards - full width di mobile */
.settings-card {
flex: 1;
min-width: 300px;
max-width: 480px;
width: 100%;
}
.settings-card-full {
max-width: 100%;
width: 100%;
}
.settings-row {
display: flex;
gap: 16px;
flex-wrap: wrap;
align-items: stretch;
width: 100%;
}
.settings-row .settings-card {
flex: 1;
min-width: 280px;
}
/* Settings form - full width inputs */
.settings-card input,
.settings-card select,
.settings-card textarea {
width: 100%;
box-sizing: border-box;
}
.settings-card .btn {
width: 100%;
}
/* Responsive untuk settings */
@media (max-width: 768px) {
.settings-row {
flex-direction: column;
gap: 12px;
}
.settings-row .settings-card {
min-width: 100%;
max-width: 100%;
}
.settings-card-full {
padding: 14px;
}
/* Nominal info display */
#infoNominal {
padding: 12px !important;
}
#infoNominal > div {
flex-direction: column;
gap: 4px;
align-items: flex-start !important;
}
#infoNominal > div span:last-child {
font-size: 16px;
}
}
@media (max-width: 480px) {
.settings-card {
padding: 14px;
}
.settings-card h2 {
font-size: 15px;
}
#infoNominal > div {
padding: 8px 0 !important;
}
}
/* ====== EXPORT BAR ====== */
.export-bar {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.export-label {
font-size: 13px;
color: var(--muted, #6b7280);
font-weight: 500;
}
.export-btn {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 12px;
padding: 5px 12px;
border-radius: 6px;
transition: opacity .15s;
}
.export-btn:disabled { opacity: .5; cursor: wait; }
/* ============================================================
SETTINGS TABS — pill-style nav bar (Pengaturan)
Menggantikan tab lama yang memakai .btn/.btn.secondary biasa,
yang jadi berantakan saat jumlah tab banyak & lebar tidak rata.
============================================================ */
.settings-tabs-card {
padding: 8px;
}
.settings-tabs {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
background: var(--bg);
padding: 6px;
border-radius: 14px;
}
.settings-tab {
display: inline-flex;
align-items: center;
gap: 7px;
border: none;
background: transparent;
color: var(--muted);
font-weight: 700;
font-size: 12.5px;
font-family: inherit;
padding: 9px 16px;
border-radius: 10px;
cursor: pointer;
white-space: nowrap;
transition: all 0.15s;
}
.settings-tab svg { flex-shrink: 0; opacity: .85; }
.settings-tab:hover {
background: #fff;
color: var(--ink);
}
.settings-tab.active {
background: var(--accent-grad);
color: #fff;
box-shadow: 0 4px 12px rgba(13, 148, 136, 0.3);
}
.settings-tab.active svg { opacity: 1; }
/* Pemisah visual polos (tanpa label teks) antara tab "umum" dan tab
khusus Super Admin — cukup garis tipis, tidak perlu tulisan mencolok. */
.settings-tab-separator {
align-self: stretch;
width: 1px;
margin: 4px 6px;
background: var(--line);
}
@media (max-width: 640px) {
.settings-tabs {
flex-direction: column;
flex-wrap: nowrap;
align-items: stretch;
padding: 6px;
gap: 4px;
}
.settings-tab {
width: 100%;
text-align: left;
padding: 11px 14px;
font-size: 13px;
}
.settings-tab-separator {
width: 100%;
height: 1px;
margin: 4px 0;
}
}
/* ============================================================
MODE APK — tanpa sidebar/hamburger sama sekali, navigasi cuma lewat
bottom-nav (ala aplikasi HP pada umumnya: PLN Mobile, Bibit, dst).
Class "apk-mode" ditambahkan otomatis lewat JS di renderShell() (api.js)
kalau terdeteksi jalan di dalam Capacitor (IS_APK). Berlaku di SEMUA
halaman setelah login, karena topbar/sidebar/bottom-nav dirender dari
satu fungsi bersama (renderShell) yang dipakai semua halaman.
============================================================ */
body.apk-mode .hamburger { display: none !important; }
body.apk-mode .sidebar { display: none !important; }
body.apk-mode .bottom-nav { display: block !important; }
body.apk-mode main.container { padding-bottom: 72px; padding-top: 0; } /* ruang supaya konten tidak ketutup bottom-nav, tanpa celah di atas */
/* ============================================================
POLA UMUM MODE APK — dipakai berulang di tiap halaman menu (Data
Warga, Iuran & Duka, Keuangan, dst) supaya konsisten satu sama lain.
============================================================ */
/* ---- Tombol tambah jadi mengambang (FAB), bukan nempel di toolbar ---- */
body.apk-mode .apk-fab {
display: flex !important;
position: fixed;
right: 18px;
bottom: 78px; /* di atas bottom-nav */
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--accent-grad);
color: #fff;
align-items: center;
justify-content: center;
box-shadow: 0 6px 18px rgba(13,148,136,.4);
border: none;
z-index: 15;
font-size: 26px;
cursor: pointer;
}
.apk-fab { display: none; } /* tersembunyi kecuali di apk-mode */
/* Class tambahan untuk sembunyikan FAB pada role yang tidak berhak —
lebih spesifik (2 class) daripada aturan .apk-fab polos di atas,
jadi menang walau sama-sama pakai !important. Sebelumnya JS mencoba
menyembunyikan lewat inline style="display:none", tapi kalah karena
aturan .apk-fab di atas pakai !important juga (inline style TANPA
!important tetap kalah dari CSS !important) — makanya FAB "+" masih
selalu muncul untuk semua role padahal harusnya cuma admin/super_admin/
sekretaris yang boleh lihat. */
body.apk-mode .apk-fab.apk-fab-hidden { display: none !important; }
/* ---- Filter disembunyikan di balik 1 tombol, muncul sebagai bottom-sheet ---- */
body.apk-mode .toolbar { flex-direction: row; flex-wrap: nowrap; gap: 8px; justify-content: center; }
body.apk-mode .apk-filter-toggle { display: inline-flex !important; align-items: center; gap: 6px; }
.apk-filter-toggle { display: none; }
/* .apk-filter-sheet membungkus .toolbar-filters yang SAMA (bukan duplikat)
— di web tampil normal apa adanya, di apk-mode baru berubah jadi overlay
yang naik dari bawah saat tombol Filter ditekan.
flex:1 di sini WAJIB ada untuk halaman yang membungkus .toolbar-filters
di dalam .apk-filter-sheet (pola lebih baru, mis. Persetujuan) — tanpa
ini, div pembungkusnya cuma menciut sebesar kontennya sendiri di dalam
.toolbar (flex container), bukan melebar penuh, sehingga field jadi
menumpuk sempit di kiri dengan sisa ruang kosong besar di kanannya.
Di apk-mode, position:fixed di bawah membuat aturan flex ini otomatis
tidak berpengaruh (elemennya sudah keluar dari alur flex biasa). */
.apk-filter-sheet { flex: 1 1 auto; min-width: 0; }
body.apk-mode .apk-filter-sheet {
position: fixed;
inset: 0;
background: rgba(15,23,42,.45);
z-index: 40;
display: none;
align-items: flex-end;
}
body.apk-mode .apk-filter-sheet.show { display: flex; }
body.apk-mode .apk-filter-sheet-inner {
background: #fff;
width: 100%;
max-height: 80vh;
overflow-y: auto;
border-radius: 20px 20px 0 0;
padding: 18px 18px calc(18px + env(safe-area-inset-bottom));
}
.apk-filter-sheet-header, .apk-filter-sheet-handle { display: none; }
body.apk-mode .apk-filter-sheet-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 14px;
}
body.apk-mode .apk-filter-sheet-handle {
display: block;
width: 40px;
height: 4px;
background: #e2e8f0;
border-radius: 999px;
margin: 0 auto 14px;
}
/* ---- Kartu list (pengganti tabel lebar) ---- */
.apk-card-list { display: none; }
.apk-select-all-row {
display: none;
align-items: center;
gap: 10px;
padding: 10px 14px;
font-size: 12.5px;
font-weight: 600;
color: var(--muted);
}
body.apk-mode .apk-select-all-row {
display: flex;
}
.apk-select-all-row input[type="checkbox"] { width: auto; flex-shrink: 0; }
body.apk-mode .apk-card-list { display: flex; flex-direction: column; gap: 14px; }
body.apk-mode .table-wrap { display: none; } /* tabel disembunyikan, kartu yang tampil */
/* Pengecualian: preview Import Duka/Iuran Historis (ada dropdown pencocokan
per baris) belum punya versi kartu — biarkan tetap tampil sebagai tabel
yang bisa discroll ke samping, daripada hilang sama sekali di mode APK. */
body.apk-mode #idh_previewTable .table-wrap,
body.apk-mode #iih_previewTable .table-wrap {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
font-size: 12px;
}
.apk-item-card {
background: var(--apk-card-bg, #fff);
border-radius: 16px;
padding: 14px 16px;
box-shadow: 0 3px 14px rgba(28,43,41,.09);
border: 1px solid rgba(28,43,41,.06);
}
.apk-item-card-top {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 10px;
margin-bottom: 4px;
}
/* Judul yang kepanjangan dipotong (...) otomatis, bukan numpuk/nabrak
ikon aksi di sebelahnya — berlaku ke semua kartu (Warga, Pengguna,
Warga Meninggal, Persetujuan, dst) tanpa perlu diatur manual per file. */
.apk-item-card-top .apk-item-card-title {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.apk-item-card-icon-actions,
.apk-item-card-top > .badge {
flex-shrink: 0;
}
.apk-item-card-title { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 15px; color: var(--ink); }
.apk-item-card-sub { font-size: 12.5px; color: var(--muted); margin-bottom: 10px; }
.apk-item-card-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.apk-item-card-actions { display: flex; gap: 8px; border-top: 1px solid #f1f5f9; padding-top: 10px; }
.apk-item-card-actions .btn { flex: 1; }
/* ---- Baris atas kartu: judul + badge status + ikon aksi cepat
(edit/hapus/dsb) sejajar dalam satu baris ---- */
.apk-item-card-icon-actions {
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
}
.apk-icon-btn {
width: 26px; height: 26px;
border-radius: 8px;
border: none;
background: #eef1f6;
color: var(--ink);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
line-height: 1;
cursor: pointer;
flex-shrink: 0;
}
.apk-icon-btn.danger { background: #fee2e2; }
/* ---- Baris bawah kartu: badge ringkasan di kiri, tombol utama
(Detail dsb) di kanan, sejajar satu baris ---- */
.apk-item-card-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
border-top: 1px solid #f1f5f9;
padding-top: 10px;
}
.apk-item-card-bottom .apk-item-card-tags { margin-bottom: 0; }
.apk-item-card-bottom .btn.small { flex-shrink: 0; }
body.apk-mode #keuanganStatGrid { display: none; } /* digantikan kartu mengambang #apkKeuanganSaldoCard */
/* ---- Kartu transaksi Keuangan: ikon bulat di kiri, kategori + tombol
hapus sejajar di atas, nominal besar di bawahnya, keterangan+tanggal
paling bawah — ikon & warna beda utk Pemasukan (hijau) vs
Pengeluaran (merah). ---- */
.apk-txn-card {
display: flex;
align-items: flex-start;
gap: 12px;
background: var(--apk-card-bg, #fff);
border-radius: 16px;
padding: 14px 16px;
box-shadow: 0 3px 14px rgba(28,43,41,.09);
border: 1px solid rgba(28,43,41,.06);
}
.apk-txn-icon {
width: 42px; height: 42px;
border-radius: 13px;
flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
}
.apk-txn-icon svg { width: 20px; height: 20px; }
.apk-txn-icon-in { background: linear-gradient(145deg, #d1fae5, #eefdf6); color: #047857; }
.apk-txn-icon-out { background: linear-gradient(145deg, #fee2e2, #fff5f5); color: #dc2626; }
.apk-txn-body { flex: 1; min-width: 0; }
.apk-txn-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.apk-txn-label { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .02em; }
.apk-txn-amount { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 15.5px; margin-top: 2px; }
.apk-txn-amount-in { color: #047857; }
.apk-txn-amount-out { color: #dc2626; }
.apk-txn-meta { font-size: 12px; color: var(--muted); margin-top: 3px; }
/* ---- Modal Tambah/Edit jadi bottom-sheet (naik dari bawah) ---- */
body.apk-mode .modal-backdrop { align-items: flex-end; }
body.apk-mode .modal-backdrop .modal {
width: 100%;
max-width: 100%;
max-height: 88vh;
overflow-y: auto;
border-radius: 20px 20px 0 0;
margin: 0;
animation: apk-sheet-up .25s ease;
}
@keyframes apk-sheet-up {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}
/* ============================================================
PERBESAR AREA SENTUH KHUSUS MODE APK — standar kenyamanan sentuh HP
itu minimal sekitar 44x44px; ukuran sebelumnya (dipakai bersama versi
web, dioptimalkan untuk mouse yang presisi) terlalu kecil untuk jari.
============================================================ */
/* ---- Menu bawah (bottom-nav) — ukuran pas: cukup besar untuk diketuk
tapi tidak berlebihan ---- */
body.apk-mode .bottom-nav { padding: 4px 0 max(4px, env(safe-area-inset-bottom)); }
body.apk-mode .bottom-link {
padding: 7px 14px;
min-width: 60px;
gap: 3px;
font-size: 10.5px;
}
body.apk-mode .bottom-icon { width: 21px; height: 21px; }
body.apk-mode .bottom-icon svg { width: 20px; height: 20px; }
/* ---- Tombol biasa — ukuran pas (tidak terlalu besar) ---- */
body.apk-mode .btn {
padding: 9px 16px;
font-size: 12.5px;
border-radius: 10px;
}
body.apk-mode .btn.small {
padding: 6px 11px;
font-size: 11.5px;
border-radius: 8px;
}
/* ---- Tombol aksi di dalam kartu (Detail/Edit/Hapus) ---- */
body.apk-mode .apk-item-card-actions { gap: 8px; }
body.apk-mode .apk-item-card-actions .btn.small {
padding: 9px 8px;
min-height: 40px;
}
/* ---- Input & pilihan form ---- */
body.apk-mode input,
body.apk-mode select,
body.apk-mode textarea {
padding: 11px 13px;
font-size: 14px;
min-height: 44px;
background: #fff;
}
/* ---- Ikon toggle filter, FAB ---- */
body.apk-mode .apk-fab { min-height: 44px; }
body.apk-mode .export-bar {
justify-content: center;
}
/* ---- Rapikan baris tombol Filter / Reset Filter — lebih kecil,
di tengah (bukan melebar penuh selebar layar) ---- */
body.apk-mode .toolbar-actions {
gap: 8px;
justify-content: center;
}
body.apk-mode .toolbar-actions .btn {
flex: none;
justify-content: center;
display: inline-flex;
align-items: center;
white-space: nowrap;
padding: 7px 14px;
font-size: 11.5px;
min-height: 40px;
box-sizing: border-box;
}
/* ============================================================
DAFTAR SUB-MENU BERGAYA KARTU — pengganti tab horizontal (Pemasukan/
Pengeluaran/Kategori, Akun/Nominal/Wilayah, dst) yang gampang meluber
di layar sempit. Tiap sub-menu jadi 1 kartu: ikon berwarna + judul +
keterangan + tanda ">" — ketuk untuk masuk, ada tombol "Kembali" untuk
balik ke daftar. Dipakai di halaman manapun yang punya sub-menu.
============================================================ */
.apk-menu-list { display: none; }
body.apk-mode .settings-tabs-card { display: none; }
body.apk-mode #tabBarCardIuranDuka { display: none; }
body.apk-mode #tabBarCardKeuangan { display: none; }
body.apk-mode .apk-menu-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
/* Paksa SEMUA .row (termasuk yang membungkus kartu, mis. Kategori
Pemasukan/Pengeluaran di Keuangan) selalu menumpuk vertikal & penuh
lebar di mode APK — tidak peduli gaya inline (style="flex:1" dsb) yang
mungkin ditimpakan ke anaknya, supaya tidak ada lagi yang "memanjang
ke kanan" di layar sempit. */
body.apk-mode .row {
flex-direction: column !important;
}
body.apk-mode .row > * {
width: 100%;
min-width: 0 !important;
flex: none !important;
}
body.apk-mode .apk-menu-item {
display: flex;
align-items: center;
gap: 14px;
background: var(--apk-card-bg, #fff);
border-radius: 16px;
padding: 16px;
cursor: pointer;
box-shadow: 0 2px 10px rgba(28,43,41,.06);
border: 1px solid rgba(28,43,41,.04);
}
body.apk-mode .apk-menu-item-icon {
width: 44px; height: 44px; border-radius: 14px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
body.apk-mode .apk-menu-item-icon svg { width: 21px; height: 21px; }
body.apk-mode .apk-menu-item-text { flex: 1; min-width: 0; }
body.apk-mode .apk-menu-item-title { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 14.5px; color: var(--ink); }
body.apk-mode .apk-menu-item-desc { font-size: 12px; color: var(--muted); margin-top: 2px; }
body.apk-mode .apk-menu-item-chevron { color: #c3cbd6; font-size: 20px; flex-shrink: 0; }
.apk-back-row { display: none; }
body.apk-mode .apk-back-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 14px;
color: var(--accent-1);
font-weight: 700;
font-size: 14px;
cursor: pointer;
}
body.apk-mode .apk-back-row svg { width: 18px; height: 18px; }
/* ============================================================
HEADER HERO DASHBOARD (mode APK) — gradasi warna + sapaan nama, kartu
ringkasan "mengambang" tumpang tindih di bawahnya (ala referensi app
konsumer: sapaan besar, kartu ringkasan overlap).
============================================================ */
.apk-dashboard-hero { display: none; }
/* PERBAIKAN BUG: sebelumnya aturan ini "body.apk-mode h1" TANPA
penanda halaman — akibatnya header biru h1 ikut disembunyikan di
SEMUA halaman (Warga, Keuangan, Iuran&Duka, dst), bukan cuma di
Dashboard yang memang sengaja diganti hero di bawah. Sekarang
dibatasi khusus ke body.apk-hal-dashboard (lihat dashboard.html). */
body.apk-mode.apk-hal-dashboard h1,
body.apk-mode.apk-hal-dashboard #welcomeSub { display: none; }
body.apk-mode .apk-dashboard-hero {
display: block;
position: relative;
overflow: hidden;
background: var(--apk-grad-texture), var(--apk-grad);
border-radius: 0 0 26px 26px;
padding: calc(18px + env(safe-area-inset-top)) 20px 46px;
margin: 0 -12px 0;
color: #fff;
}
/* Dekorasi lingkaran di belakang — dibesarkan & dipertegas supaya
gradasinya jelas tidak flat, ada "kedalaman" yang kelihatan. */
body.apk-mode .apk-dashboard-hero::before {
content: "";
position: absolute;
top: -90px; right: -60px;
width: 230px; height: 230px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255,255,255,.22), rgba(255,255,255,0) 70%);
}
body.apk-mode .apk-dashboard-hero::after {
content: "";
position: absolute;
bottom: -100px; left: -40px;
width: 190px; height: 190px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255,255,255,.16), rgba(255,255,255,0) 70%);
}
body.apk-mode .apk-dashboard-greeting,
body.apk-mode .apk-dashboard-name,
body.apk-mode .apk-dashboard-kode { position: relative; z-index: 1; }
body.apk-mode .apk-dashboard-greeting { font-size: 13px; color: rgba(255,255,255,.8); }
body.apk-mode .apk-dashboard-name { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 21px; margin-top: 2px; }
body.apk-mode .apk-dashboard-kode { font-size: 12px; color: rgba(255,255,255,.7); margin-top: 3px; letter-spacing: .02em; }
/* Kartu ringkasan utama (Total Kas + Warga Induk) — mengambang di atas
header hero, ala kartu "Saldo" di referensi. */
.apk-saldo-card { display: none; }
body.apk-mode .apk-saldo-card {
display: flex;
align-items: center;
background: var(--apk-card-bg, #fff);
border-radius: 20px;
padding: 18px 20px;
margin-top: -34px;
position: relative;
z-index: 2;
box-shadow: 0 8px 24px rgba(47,94,214,.14);
}
body.apk-mode .apk-saldo-main { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
body.apk-mode .apk-saldo-main > div:last-child { min-width: 0; overflow: hidden; }
body.apk-mode .apk-saldo-icon {
width: 42px; height: 42px; border-radius: 12px;
background: #EAF0FE; color: #2f5ed6;
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
body.apk-mode .apk-saldo-icon svg { width: 21px; height: 21px; }
body.apk-mode .apk-saldo-label { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.apk-mode .apk-saldo-value { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 15px; color: var(--ink); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.apk-mode .apk-saldo-divider { width: 1px; height: 34px; background: #e5e9f5; margin: 0 16px; flex-shrink: 0; }
body.apk-mode .apk-saldo-side { text-align: center; flex-shrink: 0; }
body.apk-mode .apk-saldo-side-value { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 16px; color: #2f5ed6; }
body.apk-mode .apk-saldo-side-label { font-size: 11px; color: var(--muted); margin-top: 1px; }
/* ============================================================
KARTU DUA-SISI SIMETRIS — utk pasangan nominal uang yang sama
pentingnya (Total Pemasukan/Pengeluaran, Tunggakan Iuran/Duka).
Beda dari .apk-saldo-card (yang cuma 1 ikon di kiri): di sini KEDUA
sisi punya ikon sendiri-sendiri, supaya tidak terkesan dobel standar.
Jarak tarik ke atas juga lebih kecil (-20px, bukan -34px) karena
dipakai di bawah header h1 yang lebih pendek dari hero Dashboard.
============================================================ */
.apk-dual-stat-card { display: none; }
body.apk-mode .apk-dual-stat-card {
display: flex;
align-items: center;
background: var(--apk-card-bg, #fff);
border-radius: 20px;
padding: 15px 16px;
margin: -20px 0 16px;
position: relative;
z-index: 2;
box-shadow: 0 8px 24px rgba(47,94,214,.14);
}
body.apk-mode .apk-dual-stat-half {
flex: 1;
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
body.apk-mode .apk-dual-stat-icon {
width: 38px; height: 38px;
border-radius: 12px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
body.apk-mode .apk-dual-stat-icon svg { width: 18px; height: 18px; }
body.apk-mode .apk-dual-stat-text { min-width: 0; }
body.apk-mode .apk-dual-stat-label { font-size: 10px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.apk-mode .apk-dual-stat-value { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 12px; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.apk-mode .apk-dual-stat-divider { width: 1px; align-self: stretch; background: #e5e9f5; margin: 0 12px; flex-shrink: 0; }
body.apk-mode .stat-grid { margin-top: 14px !important; }
/* ============================================================
HALAMAN PROFIL (mode APK) — header avatar+nama, kartu section,
tombol Keluar Akun. Dipakai di pengaturan.html sebagai tampilan
utama saat diakses lewat bottom-nav "Profil".
============================================================ */
#apkProfilView { display: none; }
body.apk-mode #apkProfilView { display: block; }
/* h1 "Pengaturan" & subteksnya disembunyikan HANYA di halaman Profil
(ditandai .apk-hal-profil di body) — halaman lain tetap tampil headernya. */
body.apk-mode.apk-hal-profil main.container > h1,
body.apk-mode.apk-hal-profil main.container > h1 + .muted { display: none; }
body.apk-mode .apk-profil-header {
background: var(--apk-grad-texture), var(--apk-grad);
border-radius: 0;
margin: 0 -12px 16px;
padding: calc(18px + env(safe-area-inset-top)) 20px 28px;
display: flex;
align-items: center;
gap: 14px;
position: relative;
overflow: hidden;
}
body.apk-mode .apk-profil-header::before {
content: "";
position: absolute;
top: -50px; right: -30px;
width: 130px; height: 130px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255,255,255,.12), rgba(255,255,255,0) 70%);
pointer-events: none;
}
body.apk-mode .apk-profil-avatar {
width: 54px; height: 54px;
border-radius: 50%;
background: rgba(255,255,255,.2);
border: 2px solid rgba(255,255,255,.5);
color: #fff;
display: flex; align-items: center; justify-content: center;
font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 20px;
flex-shrink: 0;
position: relative;
z-index: 1;
}
body.apk-mode .apk-profil-name {
flex: 1;
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 800;
font-size: 17px;
color: #fff;
position: relative;
z-index: 1;
}
body.apk-mode .apk-profil-edit-btn {
width: 38px; height: 38px;
border-radius: 10px;
border: none;
background: rgba(255,255,255,.18);
color: #fff;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
flex-shrink: 0;
position: relative;
z-index: 1;
}
body.apk-mode .apk-profil-edit-btn svg { width: 17px; height: 17px; }
body.apk-mode .apk-profil-section { margin-bottom: 16px; }
body.apk-mode .apk-profil-section-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
font-size: 13px;
color: var(--muted);
margin-bottom: 8px;
padding-left: 4px;
}
body.apk-mode .apk-profil-section .apk-menu-item { margin-bottom: 8px; }
body.apk-mode .apk-logout-btn {
width: 100%;
display: flex; align-items: center; justify-content: center; gap: 8px;
background: #fff;
border: 1.5px solid #fca5a5;
color: #dc2626;
border-radius: 14px;
padding: 14px;
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
font-size: 14.5px;
cursor: pointer;
margin-top: 4px;
margin-bottom: 20px;
}
body.apk-mode .apk-logout-btn svg { width: 18px; height: 18px; }
.apk-version-footer { display: none; }
body.apk-mode .apk-version-footer {
display: block;
text-align: center;
font-size: 12px;
color: var(--muted);
margin-top: -8px;
margin-bottom: 8px;
}
/* Topbar dihilangkan total di mode APK — halaman Profil (lewat bottom-nav)
sudah menyediakan jalur Keluar Akun, jadi topbar (yg isinya cuma logo +
menu akun) sudah tidak diperlukan lagi. */
body.apk-mode .topbar { display: none; }
body.apk-mode .app-shell { min-height: 100vh; }
body.apk-mode .sidebar { top: 0; height: 100vh; }
/* ============================================================
TEMA BIRU SOFT MENYELURUH (mode APK) — satu bahasa desain untuk
SEMUA menu: biru #2f5ed6 sebagai warna aksi, badge ikon biru muda
#EAF0FE, kartu putih bersih sudut membulat, font judul Plus Jakarta
Sans. Berlaku otomatis di semua halaman karena memakai class bersama.
============================================================ */
/* ---- Warna aksi utama: tombol, FAB, link aktif ---- */
body.apk-mode .btn {
background: linear-gradient(135deg, #4f7cf6, #2f5ed6);
box-shadow: 0 4px 14px rgba(47,94,214,.25);
}
body.apk-mode .btn.secondary {
background: #EAF0FE;
color: #2f5ed6;
box-shadow: none;
}
body.apk-mode .btn.danger {
background: linear-gradient(135deg, #fb7185, #ef4444);
}
body.apk-mode .apk-fab {
background: linear-gradient(135deg, #4f7cf6, #2f5ed6);
box-shadow: 0 6px 18px rgba(47,94,214,.4);
}
body.apk-mode .apk-back-row { color: #2f5ed6; }
body.apk-mode .bottom-link.active { color: #2f5ed6; }
body.apk-mode a { color: #2f5ed6; text-decoration: none; }
body.apk-mode .apk-menu-item-title { text-decoration: none; }
/* ---- Bottom-nav: putih bersih, item aktif biru ---- */
body.apk-mode .bottom-nav {
background: rgba(255,255,255,.92);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-top: 1px solid #e8ecf4;
box-shadow: 0 -6px 24px rgba(47,94,214,.07);
/* Mode APK cuma punya 3 item tetap (tidak butuh scroll horizontal
seperti versi admin/web) — overflow dibuka supaya tombol Warga
yang mencuat ke atas (margin negatif) tidak ikut kepotong. */
overflow: visible;
}
body.apk-mode .bottom-link { color: #9aa3b5; }
body.apk-mode .bottom-nav-inner { display: flex; justify-content: space-around; }
/* Item aktif: dikasih "pil" latar biru lembut supaya terasa hidup & mahal */
body.apk-mode .bottom-link.active {
color: #2f5ed6;
}
body.apk-mode .bottom-link.active:not(.bottom-link-center) .bottom-icon {
background: #EAF0FE;
border-radius: 12px;
padding: 5px 14px;
margin-bottom: 1px;
width: auto;
height: auto;
}
/* ---- Tombol tengah (Warga) — timbul/menonjol ke atas, lingkaran biru
gradasi, ala tombol "Scan" di referensi app konsumer. ---- */
body.apk-mode .bottom-link-center {
position: relative;
margin-top: -26px;
}
body.apk-mode .bottom-link-center .bottom-icon {
width: 54px; height: 54px;
border-radius: 50%;
background: var(--apk-grad-texture, none), var(--apk-grad);
box-shadow: 0 8px 18px rgba(47,94,214,.38), 0 0 0 5px #fff;
padding: 0;
margin: 0 auto 4px;
display: flex;
align-items: center;
justify-content: center;
}
body.apk-mode .bottom-link-center .bottom-icon svg {
width: 24px; height: 24px;
color: #fff;
stroke: #fff;
}
body.apk-mode .bottom-link-center.active .bottom-icon,
body.apk-mode .bottom-link-center:not(.active) .bottom-icon {
background: var(--apk-grad-texture, none), var(--apk-grad);
}
body.apk-mode .bottom-link-center .bottom-title {
color: #2f5ed6;
font-weight: 700;
}
/* ---- Ikon badge daftar menu (Profil, Pengaturan Lanjutan, Keuangan,
Iuran & Duka): border radius diseragamkan, TAPI warna latar/ikon
dibiarkan ikut yang diatur per-item di HTML (supaya beragam/hidup,
bukan biru seragam semua). ---- */
body.apk-mode .apk-menu-item-icon {
border-radius: 12px;
}
body.apk-mode .apk-menu-item { border-radius: 16px; }
body.apk-mode .apk-menu-item-chevron { color: #c9d2e3; }
/* ---- Grid menu Dashboard: 4 kolom ala aplikasi HP (ikon di atas,
label kecil di bawah, tanpa deskripsi) ---- */
body.apk-mode .nav-grid {
grid-template-columns: repeat(4, 1fr) !important;
gap: 8px !important;
}
body.apk-mode .nav-card {
border: none;
background: transparent;
box-shadow: none;
padding: 10px 4px;
align-items: center;
text-align: center;
gap: 0;
}
body.apk-mode .nav-card:hover { transform: none; box-shadow: none; }
body.apk-mode .nav-card .icon {
width: 58px; height: 58px;
border-radius: 17px;
background: linear-gradient(145deg, #EAF0FE, #F6F9FF);
color: #2f5ed6;
margin: 0 auto 7px;
box-shadow: 0 2px 8px rgba(47,94,214,.10);
}
body.apk-mode .nav-card .icon svg { width: 27px; height: 27px; }
/* ---- Warna ikon berbeda-beda per menu (supaya "hidup", tidak biru
pucat seragam semua) — dicocokkan lewat href kartu menunya. ---- */
body.apk-mode .nav-card[href="warga.html"] .icon { background: linear-gradient(145deg, #d8f3ee, #eefaf7); color: #0b7a70; box-shadow: 0 2px 8px rgba(13,148,136,.14); }
body.apk-mode .nav-card[href="iuran-duka.html"] .icon { background: linear-gradient(145deg, #fdecc8, #fff7e8); color: #92600f; box-shadow: 0 2px 8px rgba(201,154,46,.16); }
body.apk-mode .nav-card[href="laporan.html"] .icon { background: linear-gradient(145deg, #ede9fe, #f7f5ff); color: #6d28d9; box-shadow: 0 2px 8px rgba(109,40,217,.14); }
body.apk-mode .nav-card[href="keuangan.html"] .icon { background: linear-gradient(145deg, #d1fae5, #eefdf6); color: #047857; box-shadow: 0 2px 8px rgba(4,120,87,.14); }
body.apk-mode .nav-card[href="surat-meninggal.html"] .icon { background: linear-gradient(145deg, #e2e8f0, #f4f6f9); color: #475569; box-shadow: 0 2px 8px rgba(71,85,105,.12); }
body.apk-mode .nav-card[href="users.html"] .icon { background: linear-gradient(145deg, #ffe4d5, #fff3ec); color: #c2410c; box-shadow: 0 2px 8px rgba(194,65,12,.14); }
body.apk-mode .nav-card[href="pengaturan.html"] .icon { background: linear-gradient(145deg, #e4e7ff, #f2f3ff); color: #4338ca; box-shadow: 0 2px 8px rgba(67,56,202,.14); }
body.apk-mode .nav-card[href="subscribe.html"] .icon { background: linear-gradient(145deg, #fce7f3, #fff5fa); color: #be185d; box-shadow: 0 2px 8px rgba(190,24,93,.14); }
body.apk-mode .nav-card[href="support.html"] .icon { background: linear-gradient(145deg, #cffafe, #f0feff); color: #0e7490; box-shadow: 0 2px 8px rgba(14,116,144,.14); }
body.apk-mode .nav-card .title {
font-size: 11.5px;
font-weight: 600;
color: var(--ink);
line-height: 1.25;
}
body.apk-mode .nav-card .desc { display: none; }
/* ---- Kartu ringkasan (stat-card) di semua halaman: putih bersih,
angka berwarna, tanpa gradasi tebal ---- */
body.apk-mode .stat-card {
background: var(--apk-card-bg, #fff) !important;
box-shadow: 0 2px 10px rgba(28,43,41,.06);
border-radius: 16px;
}
body.apk-mode .stat-card .stat-value { font-size: 16px !important; }
body.apk-mode .stat-card .stat-label { font-size: 11px !important; color: var(--muted); font-weight: 600; }
body.apk-mode .stat-card::after { display: none; }
body.apk-mode .stat-card.c-indigo .stat-value { color: #2f5ed6; }
body.apk-mode .stat-card.c-red .stat-value { color: #ef4444; }
body.apk-mode .stat-card.c-orange .stat-value { color: #d97706; }
body.apk-mode .stat-card.c-teal .stat-value { color: #0d9488; }
/* ---- Dashboard: kartu ke-1 (Warga Induk) & ke-4 (Total Kas) disembunyikan
karena sudah tampil di kartu mengambang di atas — sisa 2 kartu (Tunggakan
Duka & Iuran) jadi 1 baris 2 kolom, dikasih ikon bulat di kiri (senada
pola "dompet" di kartu mengambang) supaya tidak polos angka doang. ---- */
body.apk-mode #statGrid {
grid-template-columns: 1fr 1fr;
}
body.apk-mode #statGrid .stat-card:nth-child(1),
body.apk-mode #statGrid .stat-card:nth-child(4) {
display: none;
}
body.apk-mode #statGrid .stat-card {
display: flex;
flex-direction: column;
justify-content: center;
gap: 2px;
padding: 14px 14px 14px 54px;
position: relative;
min-height: 60px;
}
/* Lebih kecil dari nominal di kartu "Total Kas Banjar" (15px) di atasnya */
body.apk-mode #statGrid .stat-card .stat-value { font-size: 11.5px !important; }
body.apk-mode #statGrid .stat-card .stat-label { font-size: 9px !important; }
body.apk-mode #statGrid .stat-card::before {
content: "";
position: absolute;
left: 10px; top: 50%;
transform: translateY(-50%);
width: 34px; height: 34px;
border-radius: 10px;
display: flex; align-items: center; justify-content: center;
font-size: 15px;
background-repeat: no-repeat;
background-position: center;
background-size: 16px 16px;
}
body.apk-mode #statGrid .stat-card.c-red::before {
background-color: #fee2e2;
background-image: url("data:image/svg+xml;utf8,");
}
body.apk-mode #statGrid .stat-card.c-orange::before {
background-color: #fef3c7;
background-image: url("data:image/svg+xml;utf8,");
}
/* ---- Judul halaman (h1) di menu selain Dashboard: header biru ringkas
ala aplikasi HP (rata tengah, latar biru lembut membulat) ---- */
body.apk-mode main.container > h1 {
font-size: 17px;
text-align: center;
margin: 0 -12px 4px;
padding: calc(14px + env(safe-area-inset-top)) 16px 26px;
background: var(--apk-grad-texture), var(--apk-grad);
color: #fff;
border-radius: 0;
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
position: relative;
overflow: hidden;
}
body.apk-mode main.container > h1::before {
content: "";
position: absolute;
top: -50px; right: -30px;
width: 130px; height: 130px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255,255,255,.12), rgba(255,255,255,0) 70%);
pointer-events: none;
}
body.apk-mode main.container > h1 + .muted {
text-align: center;
font-size: 12px;
margin: 8px 0 12px;
}
body.apk-mode .apk-hide-subtitle { display: none; }
/* ---- Tombol tab Iuran/Iuran Duka: ikon perlu ukuran tetap di SEMUA
platform (bukan cuma APK) — sebelumnya SVG tidak punya lebar/tinggi
sama sekali, jadi di Web tampil raksasa memakai ukuran bawaan browser
(300x150). Layout dasar (icon+teks sejajar, rapi) juga ditambahkan
supaya Web tidak polos/berantakan. ---- */
.apk-tab-split-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.apk-tab-split-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
/* ---- Tombol tab Iuran/Iuran Duka jadi kartu kiri-kanan dengan ikon,
bukan tombol teks polos ---- */
body.apk-mode .apk-tab-split { padding: 10px; }
body.apk-mode .apk-tab-split .toolbar { gap: 8px; margin-bottom: 0; }
body.apk-mode .apk-tab-split-btn {
flex: 1;
display: flex !important;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px 10px !important;
border-radius: 14px !important;
}
body.apk-mode .apk-tab-split-btn svg { width: 20px; height: 20px; }
body.apk-mode.apk-hal-customheader main.container > h1 { display: none; }
/* ---- Menu Bantuan: baris WhatsApp/Email/Telegram/Panduan disamakan
gayanya dengan apk-menu-item di menu Pengaturan (ikon bulat berwarna,
tanpa border tipis, sudut lebih membulat) — cuma berlaku di apk-mode,
web tetap pakai gaya lama (border tipis polos) lewat inline style. ---- */
body.apk-mode .apk-support-item {
border: none !important;
border-radius: 16px !important;
background: var(--apk-card-bg, #F2F4F8) !important;
margin-bottom: 8px;
}
body.apk-mode .apk-support-icon {
width: 38px !important;
height: 38px !important;
border-radius: 12px;
display: flex !important;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
body.apk-mode .apk-support-icon svg { width: 18px !important; height: 18px !important; }
body.apk-mode .apk-support-icon-wa { background: #D8F3EE; color: #0b7a70 !important; }
body.apk-mode .apk-support-icon-email { background: #F4E4BC; color: #8a6416 !important; }
body.apk-mode .apk-support-icon-tg { background: #D8F3EE; color: #0b7a70 !important; }
body.apk-mode .apk-support-icon-guide { background: #F4E4BC; color: #8a6416 !important; }
/* ============================================================
HEADER DENGAN TOMBOL KEMBALI — dipakai di halaman yang diakses
lewat drill-down dari menu Profil (bukan lewat bottom-nav langsung),
misalnya Langganan, Bantuan, Syarat & Ketentuan, dan sub-menu
Pengaturan Lanjutan. Tombol kembali bulat + judul, senada dengan
header biru lainnya — supaya tidak "nyasar" tanpa jalan pulang.
============================================================ */
.apk-page-header { display: none; }
body.apk-mode .apk-page-header {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin: 0 -12px 4px;
padding: calc(14px + env(safe-area-inset-top)) 16px 26px;
background: var(--apk-grad-texture), var(--apk-grad);
border-radius: 0;
position: relative;
overflow: hidden;
}
body.apk-mode .apk-page-header::before {
content: "";
position: absolute;
top: -50px; right: -30px;
width: 130px; height: 130px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255,255,255,.12), rgba(255,255,255,0) 70%);
pointer-events: none;
}
.apk-page-header-back {
width: 34px; height: 34px;
border-radius: 50%;
background: rgba(255,255,255,.18);
border: none;
display: flex; align-items: center; justify-content: center;
color: #fff;
flex-shrink: 0;
cursor: pointer;
position: absolute;
left: 16px; top: 50%;
transform: translateY(calc(-50% - 6px));
z-index: 2;
}
.apk-page-header-back svg { width: 18px; height: 18px; }
.apk-page-header-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
font-size: 17px;
color: #fff;
text-align: center;
position: relative;
z-index: 1;
}
/* ---- Kartu item list (warga, riwayat, dll): sudut lebih membulat,
badge & aksi biru senada ---- */
body.apk-mode .apk-item-card { border-radius: 16px; border: none; }
body.apk-mode .apk-item-card-actions .btn.small.primary,
body.apk-mode .apk-item-card-actions .btn.small:not(.secondary):not(.danger) {
background: linear-gradient(135deg, #4f7cf6, #2f5ed6);
}
/* ---- Kartu form/kartu umum: sudut membulat seragam ---- */
body.apk-mode .card { background: #fff; border-radius: 16px; border: none; box-shadow: 0 2px 10px rgba(28,43,41,.05); }
/* ---- Filter sheet: tombol & aksen biru ---- */
body.apk-mode .apk-filter-sheet-inner { border-radius: 22px 22px 0 0; }
/* ---- Badge status: lebih lembut ---- */
body.apk-mode .badge { border-radius: 8px; font-weight: 600; }
/* ---- Hero Dashboard & saldo card sudah biru (diatur sebelumnya) —
selaraskan juga heading "Menu" di dashboard ---- */
body.apk-mode main.container > h2 {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 15px;
margin-top: 18px !important;
}
/* ---- Ringkasan Warga (Tunggakan Iuran, Tunggakan Duka) — kartu "Total
Warga" disembunyikan khusus di APK (FAB + sudah mewakili tambah warga,
dan totalnya sudah kelihatan dari jumlah kartu di bawah), sisa 2 kartu
jadi 1 baris 2 kolom. ---- */
body.apk-mode #statCardTotalWarga { display: none; }
body.apk-mode #btnAdd { display: none !important; }
body.apk-mode #summaryStats { display: none; } /* digantikan kartu mengambang #apkWargaSaldoCard */
/* ---- PENGAMAN: batasi ukuran SEMUA ikon SVG di mode APK supaya tidak
pernah "meraksasa" kalau ada elemen yang belum diberi ukuran eksplisit.
Ikon yang memang sudah diatur ukurannya (badge menu, dll) tidak
terpengaruh karena aturan spesifiknya lebih diprioritaskan. ---- */
body.apk-mode svg:not([width]) { max-width: 24px; max-height: 24px; }
/* ---- Perkecil sedikit lagi font judul & teks menu ---- */
body.apk-mode .apk-menu-item-title { font-size: 13px !important; font-weight: 600 !important; }
body.apk-mode .apk-menu-item-desc { font-size: 11px !important; }
body.apk-mode .apk-menu-item-icon { width: 38px !important; height: 38px !important; flex-shrink: 0 !important; }
/* Paksa ukuran SVG apapun di dalam badge ikon — pakai atribut selector
supaya menang atas width/height inline yang menempel di tag