/**
 * Koperasi Baik — Aplikasi Frontend (/koperasi)
 * Sistem desain: "buku besar yang hangat" — institusional, tenang, presisi.
 * Self-contained; warna utama (--kb-primary) tetap dari Pengaturan (white-label).
 */

/* ============================================================
 * TOKEN
 * ========================================================== */
:root {
	--kb-primary: #0F766E;
	--kb-accent: #F59E0B;
	--kb-primary-soft: color-mix(in srgb, var(--kb-primary) 8%, #fff);
	--kb-primary-line: color-mix(in srgb, var(--kb-primary) 22%, #fff);
	--kb-primary-ink: color-mix(in srgb, var(--kb-primary) 82%, #0b1220);
	--kb-bg: #f6f5f1;
	--kb-surface: #ffffff;
	--kb-ink: #1c1917;
	--kb-ink-soft: #57534e;
	--kb-ink-faint: #a8a29e;
	--kb-line: #e7e5df;
	--kb-line-soft: #f0eee9;
	--kb-pos: #15803d;
	--kb-pos-soft: #dcfce7;
	--kb-neg: #b91c1c;
	--kb-neg-soft: #fee2e2;
	--kb-warn: #a16207;
	--kb-warn-soft: #fef3c7;
	--kb-info: #1e40af;
	--kb-info-soft: #dbeafe;
	--kb-radius: 14px;
	--kb-radius-sm: 10px;
	--kb-radius-lg: 20px;
	--kb-shadow-sm: 0 1px 2px rgba(28,25,23,.04), 0 1px 3px rgba(28,25,23,.06);
	--kb-shadow: 0 2px 4px rgba(28,25,23,.04), 0 4px 16px rgba(28,25,23,.06);
	--kb-shadow-lg: 0 8px 40px rgba(28,25,23,.12);
	--kb-sidebar-w: 256px;
	--kb-content-max: 1080px;
	--kb-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

.kbapp-body {
	margin: 0;
	background: var(--kb-bg);
	font-family: var(--kb-font);
	color: var(--kb-ink);
	font-size: 15px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.kbapp-strong,
.kbapp-balance-value,
.kbapp-kpi-value,
.kbapp-list li > span:last-child { font-variant-numeric: tabular-nums; }

a { color: var(--kb-primary-ink); }

/* ============================ LOGIN ============================ */
.kbapp-login-wrap {
	min-height: 100vh;
	width: 100%;
	display: flex; flex-direction: column;
	align-items: center; justify-content: center;
	padding: 24px;
	box-sizing: border-box;
	background:
		radial-gradient(900px 480px at 12% 0%, var(--kb-primary-soft), transparent 55%),
		radial-gradient(680px 480px at 100% 100%, color-mix(in srgb, var(--kb-accent) 9%, transparent), transparent 55%),
		var(--kb-bg);
}
.kbapp-login-card {
	background: var(--kb-surface);
	width: 100%; max-width: 400px;
	border: 1px solid var(--kb-line);
	border-radius: var(--kb-radius-lg);
	box-shadow: var(--kb-shadow-lg);
	text-align: left;
	overflow: hidden;
}
/* Header bermerek (gradien) di dalam kartu. */
.kbapp-login-card h1 {
	position: relative;
	margin: 0;
	padding: 32px 36px 26px;
	font-size: 23px; font-weight: 760; letter-spacing: -.02em;
	color: #fff;
	background: linear-gradient(140deg, var(--kb-primary), color-mix(in srgb, var(--kb-primary) 74%, #0b1220));
	overflow: hidden;
}
.kbapp-login-card h1::after {
	content: "";
	position: absolute; right: -60px; top: -70px;
	width: 200px; height: 200px;
	background: radial-gradient(circle, rgba(255,255,255,.14), transparent 62%);
	pointer-events: none;
}
.kbapp-login-logo {
	display: block; max-height: 46px; max-width: 180px; width: auto;
	margin: 32px 36px 0;
}
/* Bila ada logo, rapatkan judul di bawahnya. */
.kbapp-login-logo + h1 { padding-top: 16px; }
.kbapp-login-card > .kbapp-muted {
	margin: 0;
	padding: 18px 36px 0;
	color: var(--kb-ink-soft);
}
.kbapp-login-card form { padding: 8px 36px 4px; }
.kbapp-login-card label {
	display: block; font-size: 13px; font-weight: 600;
	color: var(--kb-ink-soft); margin: 16px 0 6px;
}
.kbapp-login-card input[type="text"],
.kbapp-login-card input[type="email"],
.kbapp-login-card input[type="tel"],
.kbapp-login-card input[type="number"],
.kbapp-login-card input[type="date"],
.kbapp-login-card input[type="password"] {
	width: 100%; padding: 12px 14px;
	border: 1px solid var(--kb-line);
	border-radius: var(--kb-radius-sm);
	font-size: 15px; background: #fcfcfb;
	transition: border-color .15s, box-shadow .15s;
	box-sizing: border-box;
}
.kbapp-login-card input:focus {
	outline: none; border-color: var(--kb-primary);
	box-shadow: 0 0 0 3px var(--kb-primary-soft); background: #fff;
}
/* Alert & pesan di dalam kartu diberi margin samping. */
.kbapp-login-card .kbapp-alert,
.kbapp-login-card .kbapp-flash { margin-left: 36px; margin-right: 36px; }
/* Tautan bawah (lupa sandi / kembali) dipusatkan & diberi ruang. */
.kbapp-login-card > .kbapp-small,
.kbapp-login-card > p.kbapp-muted.kbapp-small {
	text-align: center;
	padding: 4px 36px 32px;
	margin: 0;
}
.kbapp-login-card > .kbapp-small a { font-weight: 600; }

/* ============================ TOMBOL ============================ */
.kbapp-btn {
	width: 100%; margin-top: 22px; padding: 13px 18px;
	background: var(--kb-primary); color: #fff;
	border: none; border-radius: var(--kb-radius-sm);
	font-size: 15px; font-weight: 650; font-family: inherit;
	cursor: pointer; transition: filter .15s, transform .05s;
}
.kbapp-btn:hover { filter: brightness(1.07); }
.kbapp-btn:active { transform: translateY(1px); }
.kbapp-btn-ghost {
	display: inline-block; padding: 10px 16px;
	border: 1px solid var(--kb-line); border-radius: var(--kb-radius-sm);
	color: var(--kb-ink-soft); text-decoration: none; font-weight: 600; background: #fff;
}
.kbapp-btn-ghost:hover { border-color: var(--kb-ink-faint); }
.kbapp-alert {
	background: var(--kb-neg-soft); color: var(--kb-neg);
	padding: 11px 14px; border-radius: var(--kb-radius-sm);
	font-size: 13.5px; margin: 18px 0 4px;
	border: 1px solid color-mix(in srgb, var(--kb-neg) 20%, #fff);
}

/* ============================ SHELL ============================ */
.kbapp { min-height: 100vh; }
.kbapp-topbar {
	display: none; align-items: center; gap: 12px;
	padding: 12px 18px; background: var(--kb-surface);
	border-bottom: 1px solid var(--kb-line);
	position: sticky; top: 0; z-index: 30;
}
.kbapp-brand { font-weight: 700; font-size: 16px; letter-spacing: -.01em; }
.kbapp-topbar .kbapp-user { margin-left: auto; }
.kbapp-burger {
	display: none; flex-direction: column; gap: 4px;
	background: none; border: none; cursor: pointer; padding: 6px;
}
.kbapp-burger span { display: block; width: 22px; height: 2px; background: var(--kb-ink); border-radius: 2px; }

.kbapp-shell { display: flex; align-items: stretch; position: relative; min-height: 100vh; }

.kbapp-sidebar {
	width: var(--kb-sidebar-w); flex-shrink: 0;
	background: var(--kb-surface); border-right: 1px solid var(--kb-line);
	display: flex; flex-direction: column; justify-content: space-between;
	position: sticky; top: 0; height: 100vh;
}
.kbapp-sidebar-brand {
	padding: 20px 22px 14px;
	border-bottom: 1px solid var(--kb-line-soft);
	display: flex;
	align-items: center;
	min-height: 60px;
}
.kbapp-brand-text { font-size: 16px; font-weight: 750; letter-spacing: -.01em; color: var(--kb-ink); }
.kbapp-brand-logo { max-height: 40px; max-width: 180px; width: auto; height: auto; display: block; }
.kbapp-topbar .kbapp-brand-logo { max-height: 32px; }
.kbapp-sidenav { padding: 12px; overflow-y: auto; flex: 1; }
.kbapp-nav-item {
	display: flex; align-items: center; gap: 12px;
	padding: 10px 14px; margin: 2px 0;
	color: var(--kb-ink-soft); text-decoration: none;
	font-size: 14.5px; font-weight: 550;
	border-radius: var(--kb-radius-sm);
	transition: background .12s, color .12s;
}
.kbapp-nav-item:hover { background: var(--kb-line-soft); color: var(--kb-ink); }
.kbapp-nav-item.is-active { color: var(--kb-primary-ink); background: var(--kb-primary-soft); font-weight: 650; }
.kbapp-nav-ic { font-size: 16px; line-height: 1; width: 22px; text-align: center; filter: saturate(.9); }
.kbapp-nav-label { flex: 1; }
.kbapp-nav-badge {
	background: var(--kb-neg); color: #fff; font-size: 11px; font-weight: 700;
	min-width: 20px; height: 20px; border-radius: 999px;
	display: inline-flex; align-items: center; justify-content: center; padding: 0 6px;
}

.kbapp-main {
	flex: 1; min-width: 0;
	padding: 32px 40px 48px;
	max-width: var(--kb-content-max); margin: 0 auto; width: 100%;
}
.kbapp-title { font-size: 24px; font-weight: 720; letter-spacing: -.02em; margin: 0 0 22px; color: var(--kb-ink); }

.kbapp-user { display: inline-flex; align-items: center; gap: 12px; font-size: 13.5px; color: var(--kb-ink-soft); }
.kbapp-user-name { font-weight: 600; color: var(--kb-ink); }
.kbapp-logout {
	color: var(--kb-ink-soft); text-decoration: none; font-weight: 600;
	padding: 6px 12px; border: 1px solid var(--kb-line); border-radius: 999px;
	transition: border-color .12s, color .12s;
}
.kbapp-logout:hover { color: var(--kb-neg); border-color: color-mix(in srgb, var(--kb-neg) 30%, #fff); }

.kbapp-scrim { display: none; position: fixed; inset: 0; background: rgba(28,25,23,.45); z-index: 20; }

/* ============================ KARTU & DAFTAR ============================ */
.kbapp-card {
	background: var(--kb-surface); border: 1px solid var(--kb-line);
	border-radius: var(--kb-radius); padding: 22px 24px;
	margin-bottom: 20px; box-shadow: var(--kb-shadow-sm);
}
.kbapp-card h3 { margin: 0 0 14px; font-size: 15px; font-weight: 680; letter-spacing: -.01em; color: var(--kb-ink); }
.kbapp-list { list-style: none; margin: 0; padding: 0; }
.kbapp-list li {
	display: flex; justify-content: space-between; align-items: center;
	gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--kb-line-soft);
}
.kbapp-list li:first-child { padding-top: 2px; }
.kbapp-list li:last-child { border-bottom: none; padding-bottom: 2px; }
.kbapp-strong { font-weight: 680; color: var(--kb-ink); }
.kbapp-muted { color: var(--kb-ink-soft); font-size: 13.5px; }
.kbapp-small { font-size: 12.5px; }

/* ============================ SALDO (signature) ============================ */
.kbapp-balance {
	position: relative; overflow: hidden;
	background: linear-gradient(135deg, var(--kb-primary), color-mix(in srgb, var(--kb-primary) 78%, #0b1220));
	color: #fff; border-radius: var(--kb-radius-lg);
	padding: 26px 28px; display: flex; flex-direction: column; gap: 8px;
	margin-bottom: 22px; box-shadow: var(--kb-shadow);
}
.kbapp-balance::after {
	content: ""; position: absolute; right: -60px; top: -60px;
	width: 220px; height: 220px;
	background: radial-gradient(circle, rgba(255,255,255,.10), transparent 62%);
	pointer-events: none;
}
.kbapp-balance-label {
	font-size: 13px; opacity: .82; letter-spacing: .01em;
	text-transform: uppercase; font-weight: 600;
	display: inline-flex; align-items: center; gap: 8px;
}
.kbapp-balance-label::before {
	content: ""; width: 18px; height: 3px; border-radius: 3px;
	background: var(--kb-accent); display: inline-block; opacity: .9;
}
.kbapp-balance-value { font-size: 34px; font-weight: 780; letter-spacing: -.03em; line-height: 1.1; }

/* ============================ AKSI CEPAT ============================ */
.kbapp-quick { display: flex; gap: 14px; margin-bottom: 20px; }
.kbapp-quick-item {
	flex: 1; background: var(--kb-surface); border: 1px solid var(--kb-line);
	border-radius: var(--kb-radius); padding: 20px 12px; text-align: center;
	text-decoration: none; color: var(--kb-ink-soft); font-size: 13.5px; font-weight: 600;
	display: flex; flex-direction: column; gap: 10px; align-items: center;
	transition: border-color .12s, transform .08s, box-shadow .12s;
}
.kbapp-quick-item:hover {
	border-color: var(--kb-primary-line); transform: translateY(-2px);
	box-shadow: var(--kb-shadow); color: var(--kb-ink);
}
.kbapp-quick-ic { font-size: 24px; }

/* ============================ KPI ============================ */
.kbapp-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; }
@media (max-width: 1100px) { .kbapp-kpi-grid { grid-template-columns: repeat(2, 1fr); } }
.kbapp-kpi {
	background: var(--kb-surface); border: 1px solid var(--kb-line);
	border-radius: var(--kb-radius); padding: 18px 20px;
	display: flex; flex-direction: column; gap: 6px;
	box-shadow: var(--kb-shadow-sm); position: relative;
}
.kbapp-kpi::before {
	content: ""; position: absolute; left: 0; top: 16px; bottom: 16px;
	width: 3px; border-radius: 3px; background: var(--kb-accent);
}
.kbapp-kpi-label { font-size: 12px; color: var(--kb-ink-soft); text-transform: uppercase; letter-spacing: .03em; font-weight: 600; }
.kbapp-kpi-value { font-size: 22px; font-weight: 740; letter-spacing: -.02em; color: var(--kb-ink); }

/* ============================ TAG ============================ */
.kbapp-tag { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 650; letter-spacing: .01em; white-space: nowrap; }
.kbapp-tag-active { background: var(--kb-info-soft); color: var(--kb-info); }
.kbapp-tag-paid { background: var(--kb-pos-soft); color: var(--kb-pos); }
.kbapp-tag-pending { background: var(--kb-warn-soft); color: var(--kb-warn); }
.kbapp-tag-rejected { background: var(--kb-neg-soft); color: var(--kb-neg); }
.kbapp-in { color: var(--kb-pos); }
.kbapp-out { color: var(--kb-neg); }

/* ============================ FORM ============================ */
.kbapp-form label { display: block; font-size: 13px; font-weight: 600; color: var(--kb-ink-soft); margin: 16px 0 6px; }
.kbapp-form input[type="text"],
.kbapp-form input[type="number"],
.kbapp-form input[type="password"],
.kbapp-form input[type="email"],
.kbapp-form input[type="tel"],
.kbapp-form input[type="date"],
.kbapp-form textarea,
.kbapp-form select {
	width: 100%; padding: 11px 13px;
	border: 1px solid var(--kb-line); border-radius: var(--kb-radius-sm);
	font-size: 15px; font-family: inherit; background: #fcfcfb; color: var(--kb-ink);
	transition: border-color .15s, box-shadow .15s;
}
.kbapp-form input:focus, .kbapp-form textarea:focus, .kbapp-form select:focus {
	outline: none; border-color: var(--kb-primary);
	box-shadow: 0 0 0 3px var(--kb-primary-soft); background: #fff;
}
.kbapp-form .kbapp-btn { width: auto; min-width: 200px; }
.kbapp-req { color: var(--kb-neg); }
.kbapp-radio { display: flex; gap: 20px; margin-top: 4px; }
.kbapp-radio label { display: flex !important; align-items: center; gap: 7px; font-weight: 500 !important; color: var(--kb-ink) !important; margin: 0 !important; cursor: pointer; }
.kbapp-radio input { width: auto; }
.kbapp-check { display: flex !important; align-items: center; gap: 9px; font-weight: 500 !important; color: var(--kb-ink) !important; margin-top: 14px !important; cursor: pointer; }
.kbapp-check input { width: auto !important; }
.kbapp-sim, .kbapp-loan-sim {
	background: var(--kb-primary-soft); border: 1px solid var(--kb-primary-line);
	border-radius: var(--kb-radius-sm); padding: 13px 15px;
	font-size: 13.5px; color: var(--kb-primary-ink); margin-top: 14px; line-height: 1.7;
}
.kbapp-sim:empty, .kbapp-loan-sim:empty { display: none; }
.kbapp-details summary {
	cursor: pointer; font-weight: 680; font-size: 14.5px; color: var(--kb-primary-ink);
	list-style: none; padding: 4px 0; user-select: none;
}
.kbapp-details summary::-webkit-details-marker { display: none; }
.kbapp-details summary::before { content: "+"; display: inline-block; margin-right: 8px; font-weight: 700; }
.kbapp-details[open] summary::before { content: "\2212"; }
.kbapp-details[open] summary { margin-bottom: 6px; }

/* ============================ FLASH ============================ */
.kbapp-flash { padding: 13px 16px; border-radius: var(--kb-radius-sm); font-size: 14px; font-weight: 550; margin-bottom: 20px; border: 1px solid transparent; }
.kbapp-flash-ok { background: var(--kb-pos-soft); color: var(--kb-pos); border-color: color-mix(in srgb, var(--kb-pos) 22%, #fff); }
.kbapp-flash-err { background: var(--kb-neg-soft); color: var(--kb-neg); border-color: color-mix(in srgb, var(--kb-neg) 22%, #fff); }

/* ============================ PERSETUJUAN ============================ */
.kbapp-approve-row {
	display: flex; justify-content: space-between; align-items: center;
	gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--kb-line-soft); flex-wrap: wrap;
}
.kbapp-approve-row:last-child { border-bottom: none; }
.kbapp-approve-actions { display: flex; gap: 8px; align-items: center; }
.kbapp-btn-sm {
	padding: 8px 15px; border: none; border-radius: var(--kb-radius-sm);
	font-size: 13px; font-weight: 650; font-family: inherit; cursor: pointer;
	transition: filter .12s, background .12s;
}
.kbapp-btn-ok { background: var(--kb-primary); color: #fff; }
.kbapp-btn-ok:hover { filter: brightness(1.07); }
.kbapp-btn-no { background: var(--kb-line-soft); color: var(--kb-neg); }
.kbapp-btn-no:hover { background: var(--kb-neg-soft); }

/* ============================ PINJAMAN AKTIF ============================ */
.kbapp-loan-active { padding: 16px 0; border-bottom: 1px solid var(--kb-line-soft); }
.kbapp-loan-active:last-child { border-bottom: none; }
.kbapp-loan-active-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.kbapp-pay-form { display: flex; gap: 8px; max-width: 420px; }
.kbapp-pay-form input {
	flex: 1; min-width: 0; padding: 9px 12px;
	border: 1px solid var(--kb-line); border-radius: var(--kb-radius-sm);
	font-size: 14px; background: #fcfcfb;
}
.kbapp-pay-form input:focus { outline: none; border-color: var(--kb-primary); box-shadow: 0 0 0 3px var(--kb-primary-soft); background: #fff; }

/* ============================ SEGERA/INFO ============================ */
.kbapp-soon {
	background: #fcfcfb; border: 1px dashed var(--kb-line);
	border-radius: var(--kb-radius-sm); padding: 15px 17px;
	color: var(--kb-ink-soft); font-size: 13.5px; line-height: 1.6;
}

/* ============================ KREDIT ============================ */
.kbapp-credit { text-align: center; padding: 16px; color: var(--kb-ink-faint); font-size: 11.5px; border-top: 1px solid var(--kb-line-soft); }
.kbapp-credit a { color: var(--kb-ink-faint); }


/* Header konten (desktop): judul + user/logout sejajar. */
.kbapp-main-head {
	display: flex; align-items: center; justify-content: space-between;
	gap: 16px; margin-bottom: 22px;
}
.kbapp-main-head .kbapp-title { margin: 0; }
.kbapp-user-desktop { flex-shrink: 0; }


/* Kartu pendaftaran: lebih lebar & bisa di-scroll bila form panjang. */
.kbapp-daftar-card { max-width: 480px; }
.kbapp-daftar-card select,
.kbapp-daftar-card textarea,
.kbapp-daftar-card input[type="email"],
.kbapp-daftar-card input[type="tel"],
.kbapp-daftar-card input[type="date"] {
	width: 100%; padding: 12px 14px;
	border: 1px solid var(--kb-line);
	border-radius: var(--kb-radius-sm);
	font-size: 15px; background: #fcfcfb; font-family: inherit;
	box-sizing: border-box;
	transition: border-color .15s, box-shadow .15s;
}
.kbapp-daftar-card select:focus,
.kbapp-daftar-card textarea:focus,
.kbapp-daftar-card input:focus {
	outline: none; border-color: var(--kb-primary);
	box-shadow: 0 0 0 3px var(--kb-primary-soft); background: #fff;
}
.kbapp-daftar-card form { padding-bottom: 12px; }
.kbapp-login-wrap { overflow-y: auto; }


/* ===================== POTENSI SHU (anggota) ===================== */
.kbapp-shu-card { border-left: 3px solid var(--kb-accent); }
.kbapp-shu-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.kbapp-shu-title { font-weight: 700; color: var(--kb-ink); }
.kbapp-shu-value { font-size: 26px; font-weight: 760; color: var(--kb-primary-ink); letter-spacing: -.02em; margin: 2px 0 10px; }
.kbapp-shu-break li { padding: 6px 0; }
.kbapp-shu-note { font-size: 12px; color: var(--kb-ink-soft); background: #faf9f6; border-radius: 8px; padding: 9px 11px; margin: 12px 0 0; }

/* ===================== WAWASAN & CHART (pengurus) ===================== */
.kbapp-insight-card { border-left: 3px solid var(--kb-primary); }
.kbapp-insight-list { list-style: none; margin: 0; padding: 0; }
.kbapp-insight-list li { position: relative; padding: 6px 0 6px 20px; font-size: 14px; color: var(--kb-ink); }
.kbapp-insight-list li::before { content: "→"; position: absolute; left: 0; color: var(--kb-primary); font-weight: 700; }

.kbapp-chart-wrap { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.kbapp-donut { flex: 0 0 auto; }
.kbapp-legend { list-style: none; margin: 0; padding: 0; flex: 1 1 200px; }
.kbapp-legend li { padding: 5px 0; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.kbapp-legend-dot { width: 12px; height: 12px; border-radius: 3px; display: inline-block; flex: 0 0 auto; }

.kbapp-barchart { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.kbapp-bar-row { display: grid; grid-template-columns: 110px 1fr auto; align-items: center; gap: 10px; }
.kbapp-bar-label { font-size: 13px; color: var(--kb-ink-soft); }
.kbapp-bar-track { height: 12px; background: #eee; border-radius: 999px; overflow: hidden; }
.kbapp-bar-fill { display: block; height: 100%; border-radius: 999px; transition: width .3s; }
.kbapp-bar-value { font-size: 13px; font-weight: 600; white-space: nowrap; }

/* ===================== VERIFIKASI SETORAN (pengurus) ===================== */
.kbapp-verif-item { display: flex; justify-content: space-between; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--kb-line); flex-wrap: wrap; }
.kbapp-verif-item:last-child { border-bottom: none; }
.kbapp-verif-info { flex: 1 1 200px; }
.kbapp-verif-actions { display: flex; gap: 8px; align-items: flex-start; }
.kbapp-proof-thumb { max-width: 120px; max-height: 120px; border-radius: 8px; border: 1px solid var(--kb-line); object-fit: cover; }
.kbapp-btn-sm { padding: 7px 14px; font-size: 13px; }

@media (max-width: 560px) {
	.kbapp-bar-row { grid-template-columns: 90px 1fr; }
	.kbapp-bar-value { grid-column: 2; text-align: right; }
}


/* ===================== EXPORT LAPORAN ===================== */
.kbapp-export-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.kbapp-export-grid form { margin: 0; }


/* ===================== KELOLA ANGGOTA (pengurus) ===================== */
.kbapp-member-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--kb-line); flex-wrap: wrap; }
.kbapp-member-row:last-child { border-bottom: none; }
.kbapp-member-main { flex: 1 1 200px; line-height: 1.5; }
.kbapp-member-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.kbapp-member-actions form { margin: 0; }
.kbapp-btn-danger { display: inline-block; padding: 7px 14px; font-size: 13px; border: 1px solid #dc2626; background: #fff; color: #dc2626; border-radius: var(--kb-radius-sm); cursor: pointer; font-weight: 600; transition: background .15s, color .15s; }
.kbapp-btn-danger:hover { background: #dc2626; color: #fff; }

/* Tab Pengaturan (wp-admin) */
.kopbaik-tab-panel h2:first-child { margin-top: 4px; }


/* ===================== REMINDER (WhatsApp) ===================== */
.kbapp-btn-wa { display: inline-block; padding: 7px 14px; font-size: 13px; border: 1px solid #25D366; background: #25D366; color: #fff; border-radius: var(--kb-radius-sm); text-decoration: none; font-weight: 600; transition: opacity .15s; }
.kbapp-btn-wa:hover { opacity: .88; color: #fff; }
.kbapp-form-inline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kbapp-form-inline input[type="number"] { padding: 8px 10px; border: 1px solid var(--kb-line); border-radius: var(--kb-radius-sm); font-size: 14px; }


/* ===================== PANDUAN (dalam app) ===================== */
.kbapp-guide-intro { margin: 0; color: var(--kb-ink); font-size: 15px; }
.kbapp-guide { display: flex; flex-direction: column; gap: 10px; }
.kbapp-guide-item { padding: 0; overflow: hidden; }
.kbapp-guide-item > summary { list-style: none; cursor: pointer; padding: 16px 18px; font-weight: 650; color: var(--kb-ink); display: flex; align-items: center; justify-content: space-between; }
.kbapp-guide-item > summary::-webkit-details-marker { display: none; }
.kbapp-guide-item > summary::after { content: "+"; font-size: 20px; color: var(--kb-primary); font-weight: 400; line-height: 1; }
.kbapp-guide-item[open] > summary::after { content: "\2212"; }
.kbapp-guide-item[open] > summary { border-bottom: 1px solid var(--kb-line); }
.kbapp-guide-body { padding: 14px 18px 18px; color: var(--kb-ink-soft); font-size: 14px; line-height: 1.65; }
.kbapp-guide-body p { margin: 0 0 10px; }
.kbapp-guide-body p:last-child { margin-bottom: 0; }
.kbapp-guide-body strong { color: var(--kb-primary); }
.kbapp-guide-list { margin: 0; padding-left: 18px; }
.kbapp-guide-list li { margin-bottom: 8px; }


/* ===================== PENGATURAN IDENTITAS (app) ===================== */
.kbapp-color-row { display: inline-flex; align-items: center; gap: 10px; }
.kbapp-color-row input[type="color"] { width: 48px; height: 34px; padding: 0; border: 1px solid var(--kb-line); border-radius: 8px; background: none; cursor: pointer; }

/* ============================ RESPONSIF ============================ */
@media (max-width: 900px) {
	.kbapp-topbar { display: flex; }
	.kbapp-burger { display: flex; }
	.kbapp-sidebar-brand { display: none; }
	.kbapp-sidebar {
		position: fixed; top: 0; left: 0; bottom: 0; height: 100vh; z-index: 25;
		transform: translateX(-100%); transition: transform .24s ease;
		box-shadow: 2px 0 24px rgba(28,25,23,.14); padding-top: 8px;
	}
	.kbapp-nav-open .kbapp-sidebar { transform: translateX(0); }
	.kbapp-nav-open .kbapp-scrim { display: block; }
	.kbapp-main { padding: 24px 22px 40px; }
	.kbapp-user-desktop { display: none; }
	.kbapp-main-head { margin-bottom: 18px; }
}
@media (max-width: 560px) {
	.kbapp-main { padding: 18px 16px 36px; }
	.kbapp-title { font-size: 20px; margin-bottom: 16px; }
	.kbapp-card { padding: 18px; }
	.kbapp-balance { padding: 22px; }
	.kbapp-balance-value { font-size: 28px; }
	.kbapp-kpi-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
	.kbapp-quick { gap: 10px; }
	.kbapp-form .kbapp-btn { width: 100%; }
	.kbapp-approve-row { flex-direction: column; align-items: stretch; }
	.kbapp-approve-actions { justify-content: flex-end; }
	.kbapp-user-name { display: none; }
}
@media (min-width: 1440px) {
	:root { --kb-content-max: 1160px; }
	.kbapp-main { padding-top: 40px; }
}
:where(a, button, input, select, textarea, summary):focus-visible { outline: 2px solid var(--kb-primary); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }