/* =========================================================
   Koperasi Online Mandiri - tema (di atas Bootstrap 5.3)
   Mobile-first. Font sistem agar tetap cepat tanpa internet.
   ========================================================= */
:root {
    --kop-green-900: #12432d;
    --kop-green-700: #1b6b47;
    --kop-green-600: #217a52;
    --kop-green-100: #e3f1e8;
    --kop-cream: #f6f3ea;
    --kop-ink: #1d2b24;
    --kop-muted: #66746c;
    --kop-amber: #e0a526;
    --kop-radius: 1rem;

    --bs-primary: var(--kop-green-700);
    --bs-primary-rgb: 27, 107, 71;
    --bs-link-color: var(--kop-green-700);
    --bs-link-color-rgb: 27, 107, 71;
    --bs-link-hover-color: var(--kop-green-900);
    --bs-body-bg: var(--kop-cream);
    --bs-body-color: var(--kop-ink);
    --bs-border-radius: .65rem;
    --bs-body-font-size: 1rem;
}

body { background: var(--kop-cream); color: var(--kop-ink); -webkit-text-size-adjust: 100%; }
h1, h2, h3, h4, h5 { letter-spacing: -.01em; }
.text-muted, .text-body-secondary { color: var(--kop-muted) !important; }
.tabular { font-variant-numeric: tabular-nums; }
.min-w-0 { min-width: 0; }
.admin-user { color: rgba(255, 255, 255, .6); }

.btn-primary {
    --bs-btn-bg: var(--kop-green-700); --bs-btn-border-color: var(--kop-green-700);
    --bs-btn-hover-bg: var(--kop-green-900); --bs-btn-hover-border-color: var(--kop-green-900);
    --bs-btn-active-bg: var(--kop-green-900); --bs-btn-active-border-color: var(--kop-green-900);
    --bs-btn-disabled-bg: var(--kop-green-700); --bs-btn-disabled-border-color: var(--kop-green-700);
}
.btn-outline-primary {
    --bs-btn-color: var(--kop-green-700); --bs-btn-border-color: var(--kop-green-700);
    --bs-btn-hover-bg: var(--kop-green-700); --bs-btn-hover-border-color: var(--kop-green-700);
    --bs-btn-active-bg: var(--kop-green-900); --bs-btn-active-border-color: var(--kop-green-900);
}
.btn { min-height: 2.5rem; font-weight: 600; }
.btn-lg { min-height: 3.25rem; }
.form-control, .form-select { min-height: 2.9rem; }
.form-control:focus, .form-select:focus, .btn:focus-visible {
    border-color: var(--kop-green-600);
    box-shadow: 0 0 0 .25rem rgba(33, 122, 82, .22);
}
.form-label { font-weight: 600; margin-bottom: .3rem; }
.form-text { color: var(--kop-muted); }

.card { border: 0; border-radius: var(--kop-radius); box-shadow: 0 1px 2px rgba(18, 67, 45, .08), 0 6px 18px rgba(18, 67, 45, .05); }
.card-header { background: transparent; border-bottom: 1px solid rgba(18, 67, 45, .08); font-weight: 700; }

/* PIN: angka besar berjarak agar mudah dibaca & diketik */
.pin-input {
    letter-spacing: .6em; text-align: center; font-size: 1.5rem; font-weight: 700;
    padding-left: .6em; font-variant-numeric: tabular-nums;
}
.pin-input::placeholder { letter-spacing: .6em; opacity: .35; }

.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Kop (header lembaga) ---------- */
.kop { display: flex; align-items: center; gap: .9rem; }
.kop-logo {
    flex: 0 0 auto; width: 3.5rem; height: 3.5rem; border-radius: .9rem; overflow: hidden;
    background: var(--kop-green-100); color: var(--kop-green-700);
    display: grid; place-items: center; font-size: 1.75rem;
}
.kop-logo img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.kop-name { font-size: 1.2rem; font-weight: 800; margin: 0; line-height: 1.2; }
.kop-meta { font-size: .8rem; color: var(--kop-muted); line-height: 1.4; margin-top: .15rem; }
.kop-compact .kop-logo { width: 2.5rem; height: 2.5rem; font-size: 1.25rem; border-radius: .65rem; }
.kop-compact .kop-name { font-size: 1rem; }

/* ---------- Halaman masuk / daftar ---------- */
.auth-body {
    min-height: 100vh; min-height: 100dvh;
    background:
        radial-gradient(1200px 500px at 50% -10%, rgba(33, 122, 82, .18), transparent 60%),
        var(--kop-cream);
}
.auth-wrap { max-width: 460px; margin: 0 auto; padding: 1.25rem 1rem 2.5rem; }
.auth-wrap.wide { max-width: 680px; }
.auth-head { padding: 1rem 0 1.25rem; }

/* ---------- Portal anggota ---------- */
.member-topbar { background: #fff; border-bottom: 1px solid rgba(18, 67, 45, .08); position: sticky; top: 0; z-index: 1020; }
.member-main { max-width: 720px; margin: 0 auto; padding: 0 1rem 6.5rem; }
.hero {
    background: linear-gradient(145deg, var(--kop-green-700), var(--kop-green-900));
    color: #fff; border-radius: 0 0 1.5rem 1.5rem; margin: 0 -1rem 1rem; padding: 1.25rem 1.25rem 3.75rem;
}
.hero .hello { font-size: 1.35rem; font-weight: 800; margin: 0; }
.hero .sub { color: rgba(255, 255, 255, .8); font-size: .9rem; }
.hero .chip {
    display: inline-flex; align-items: center; gap: .4rem; background: rgba(255, 255, 255, .14);
    border-radius: 999px; padding: .3rem .75rem; font-size: .85rem; font-weight: 600;
}
.stat-stack { margin-top: -3rem; }
.stat-card .label { font-size: .8rem; color: var(--kop-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.stat-card .value { font-size: 1.6rem; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; }
.stat-card .hint { font-size: .8rem; color: var(--kop-muted); }
.stat-card .breakdown { font-size: .85rem; }
.stat-icon {
    width: 2.5rem; height: 2.5rem; border-radius: .75rem; display: grid; place-items: center;
    background: var(--kop-green-100); color: var(--kop-green-700); font-size: 1.2rem; flex: 0 0 auto;
}
.stat-icon.amber { background: #fbf0d3; color: #8a6100; }
.stat-icon.red { background: #fbe1e1; color: #a12a2a; }

.quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.quick-btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem;
    min-height: 6.25rem; padding: .9rem .5rem; text-align: center; text-decoration: none;
    background: #fff; color: var(--kop-ink); border-radius: var(--kop-radius); font-weight: 700; font-size: .95rem;
    box-shadow: 0 1px 2px rgba(18, 67, 45, .08), 0 6px 18px rgba(18, 67, 45, .05);
    transition: transform .12s ease, box-shadow .12s ease;
}
.quick-btn i { font-size: 1.75rem; color: var(--kop-green-700); }
.quick-btn:hover, .quick-btn:focus-visible { transform: translateY(-2px); color: var(--kop-green-900); }
.quick-btn.primary { background: var(--kop-green-700); color: #fff; }
.quick-btn.primary i { color: #fff; }
.quick-btn.primary:hover { color: #fff; background: var(--kop-green-900); }

.tx-row { display: flex; align-items: center; gap: .75rem; padding: .75rem 0; border-bottom: 1px solid rgba(18, 67, 45, .08); }
.tx-row:last-child { border-bottom: 0; }
.tx-ico { width: 2.25rem; height: 2.25rem; border-radius: 50%; display: grid; place-items: center; background: var(--kop-green-100); color: var(--kop-green-700); flex: 0 0 auto; }
.tx-ico.out { background: #fbe9e0; color: #a1471f; }

.bottom-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; background: #fff;
    border-top: 1px solid rgba(18, 67, 45, .1); padding-bottom: env(safe-area-inset-bottom);
}
.bottom-nav .inner { max-width: 720px; margin: 0 auto; display: grid; grid-template-columns: repeat(6, 1fr); }
.bottom-nav a, .bottom-nav button {
    display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .55rem .25rem;
    font-size: .68rem; font-weight: 600; color: var(--kop-muted); text-decoration: none; background: none; border: 0;
}
.bottom-nav i { font-size: 1.35rem; }
.bottom-nav .active { color: var(--kop-green-700); }

/* ---------- Admin ---------- */
.admin-shell { display: flex; min-height: 100vh; }
.admin-side {
    width: 17rem; flex: 0 0 17rem; background: var(--kop-green-900); color: #dbe9e1;
    display: none; flex-direction: column; padding: 1rem .75rem; position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.admin-side .brand { padding: .25rem .5rem 1rem; color: #fff; }
.admin-side .brand .kop-logo { background: rgba(255, 255, 255, .12); color: #fff; }
.admin-side .brand .kop-meta { color: rgba(255, 255, 255, .6); }
.admin-nav .nav-link {
    color: #cfe0d6; border-radius: .6rem; padding: .6rem .75rem; display: flex; align-items: center; gap: .65rem; font-weight: 600;
}
.admin-nav .nav-link:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.admin-nav .nav-link.active { background: rgba(255, 255, 255, .16); color: #fff; }
.admin-nav .nav-link.disabled { opacity: .5; }
.admin-nav .nav-section { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: rgba(255, 255, 255, .45); padding: 1rem .75rem .35rem; }
.admin-main { flex: 1 1 auto; min-width: 0; }
.admin-topbar { background: #fff; border-bottom: 1px solid rgba(18, 67, 45, .08); position: sticky; top: 0; z-index: 1020; }
.admin-content { padding: 1rem; max-width: 1200px; }
@media (min-width: 992px) {
    .admin-side { display: flex; }
    .admin-content { padding: 1.5rem 2rem 3rem; }
}
.offcanvas.admin-offcanvas { background: var(--kop-green-900); color: #dbe9e1; width: 17rem; }

.kpi .value { font-size: clamp(1rem, 4.4vw, 1.5rem); font-weight: 800; font-variant-numeric: tabular-nums; }
@media (min-width: 576px) { .kpi .value { font-size: clamp(1rem, 3vw, 1.5rem); } }
/* Lebar kartu mengikuti sisa ruang di samping sidebar; nilai tidak boleh terpotong. */
@media (min-width: 1200px) { .kpi .value { font-size: clamp(.9rem, calc((100vw - 736px) / 32.8), 1.5rem); } }
.kpi .label { font-size: .78rem; color: var(--kop-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.table > :not(caption) > * > * { padding: .7rem .75rem; vertical-align: middle; }
.table thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--kop-muted); border-bottom-width: 1px; white-space: nowrap; }
.doc-thumb { display: block; border-radius: .75rem; overflow: hidden; border: 1px solid rgba(18, 67, 45, .15); background: #fff; }
.doc-thumb img { width: 100%; max-height: 22rem; object-fit: contain; display: block; background: #f1f1f1; }
.pin-reveal { font-size: 2.25rem; font-weight: 800; letter-spacing: .3em; font-variant-numeric: tabular-nums; }

/* ---------- Pesan sesi akan berakhir ---------- */
.idle-warning {
    position: fixed; left: 50%; bottom: 5.5rem; transform: translateX(-50%); z-index: 2000;
    max-width: calc(100% - 2rem); box-shadow: 0 8px 28px rgba(0, 0, 0, .25);
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; scroll-behavior: auto !important; }
}
@media print {
    .admin-side, .admin-topbar, .bottom-nav, .member-topbar, .no-print, .idle-warning, .offcanvas { display: none !important; }
    body { background: #fff; }
    .admin-shell { display: block; }
    .admin-content { padding: 0; max-width: none; }
    .card { box-shadow: none; border: 1px solid #ccc; }
    .table { font-size: .8rem; }
    a { color: inherit; text-decoration: none; }
}
.report-table td, .report-table th { padding-top: .35rem; padding-bottom: .35rem; }
.report-table .kind-section td { background: var(--kop-green-100); font-weight: 700; }
.report-table .kind-total td { font-weight: 700; border-top: 1px solid rgba(18, 67, 45, .35); }
.report-table .kind-grand td { font-weight: 800; border-top: 2px solid var(--kop-green-900); background: #f3f8f5; }
.report-table .kind-sub td { color: var(--kop-muted); font-size: .85rem; }
.journal-lines .form-control, .journal-lines .form-select { min-height: 2.4rem; }
.report-table .kind-entry td { background: #f6f8f7; font-weight: 600; border-top: 1px solid rgba(18, 67, 45, .18); }
.report-table td { white-space: normal; }
.action-card { transition: box-shadow .15s ease, transform .15s ease; }
.action-card:hover { box-shadow: 0 .4rem 1rem rgba(18, 67, 45, .12); transform: translateY(-1px); }
.report-table.report-wide { min-width: 44rem; }
.report-table td.text-nowrap { white-space: nowrap; }