/* =====================================================================
   KOPERASI MAJU BERSAMA — Design System
   Single source of truth for the Koperasi UI. Layered on top of
   Bootstrap 5 / Tabler (apps.min.css). Change a token here and it
   propagates everywhere.

   Namespaced `kp-*` so it never collides with Tabler's own classes.
   ===================================================================== */

:root {
    /* ---- Brand / Koperasi greens --------------------------------- */
    --kp-forest-950: #08251a;   /* deepest — login button, card back */
    --kp-forest-900: #0d2a1c;
    --kp-forest-800: #123524;
    --kp-forest-700: #17492f;
    --kp-forest-600: #1a6b41;   /* PRIMARY */
    --kp-forest-500: #21855a;   /* primary hover / accents */
    --kp-forest-400: #2e8b57;   /* links, highlights */
    --kp-forest-300: #4caf7d;
    --kp-forest-200: #a7d9bf;
    --kp-forest-100: #dcefe4;   /* soft tint bg */
    --kp-forest-50:  #eef6f1;

    /* Chart / accent green used on the design mockups */
    --kp-green:      #16a34a;
    --kp-green-soft: #22c55e;
    --kp-gold:       #c8a44d;   /* member-card accent swoosh */

    /* ---- Semantic ------------------------------------------------ */
    --kp-primary: var(--kp-forest-600);
    --kp-primary-hover: #155534;
    --kp-accent: var(--kp-forest-400);

    /* ---- Status -------------------------------------------------- */
    --kp-success: #16a34a;  --kp-success-bg: #dcfce7;  --kp-success-fg: #15803d;
    --kp-info:    #2563eb;  --kp-info-bg:    #dbeafe;  --kp-info-fg:    #1d4ed8;
    --kp-sky:     #0284c7;  --kp-sky-bg:     #e0f2fe;  --kp-sky-fg:     #0369a1;
    --kp-warning: #d97706;  --kp-warning-bg: #fef3c7;  --kp-warning-fg: #b45309;
    --kp-danger:  #dc2626;  --kp-danger-bg:  #fee2e2;  --kp-danger-fg:  #b91c1c;
    --kp-purple:  #7c3aed;  --kp-purple-bg:  #ede9fe;  --kp-purple-fg:  #6d28d9;
    --kp-orange:  #f97316;  --kp-orange-bg:  #ffedd5;  --kp-orange-fg:  #c2410c;
    --kp-gray:    #6b7280;  --kp-gray-bg:    #f1f3f5;  --kp-gray-fg:    #4b5563;

    /* ---- Neutrals ------------------------------------------------ */
    --kp-page-bg:   #f6f8f7;
    --kp-card-bg:   #ffffff;
    --kp-border:    #e8ebe9;
    --kp-border-strong: #dce1de;
    /* Tinggi bersama topbar dan blok brand sidebar. Keduanya wajib memakai
       nilai ini agar garis bawahnya menyatu menjadi satu garis lurus. */
    --kp-topbar-h:  64px;
    --kp-text:      #16261c;
    --kp-text-strong: #0f1a13;
    --kp-text-muted: #667085;
    --kp-text-soft: #98a2b3;

    /* ---- Shape & shadow ------------------------------------------ */
    --kp-radius-sm: 8px;
    --kp-radius:    12px;
    --kp-radius-lg: 16px;
    --kp-radius-pill: 999px;
    --kp-shadow-sm: 0 1px 2px rgba(16,24,40,.05);
    --kp-shadow:    0 1px 3px rgba(16,24,40,.07), 0 1px 2px rgba(16,24,40,.04);
    --kp-shadow-md: 0 4px 12px rgba(16,24,40,.08);
    --kp-shadow-lg: 0 12px 28px rgba(16,24,40,.12);

    --kp-font: 'Public Sans', 'Inter Var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* =====================================================================
   Tabler re-tint — turns the stock blue shell green.
   Only touches colour tokens; layout/behaviour of the existing sidebar
   and navbar is untouched.
   ===================================================================== */
:root,
[data-bs-theme=light] {
    --tblr-primary: #1a6b41;
    --tblr-primary-rgb: 26, 107, 65;
    --tblr-primary-fg: #ffffff;
    --tblr-primary-lt: #eef6f1;
    --tblr-link-color: #1a6b41;
    --tblr-link-hover-color: #155534;
    --tblr-navbar-active-bg: rgba(26, 107, 65, .08);
    --tblr-body-bg: var(--kp-page-bg);
}

.btn-primary {
    --tblr-btn-bg: var(--kp-forest-600);
    --tblr-btn-border-color: var(--kp-forest-600);
    --tblr-btn-hover-bg: var(--kp-primary-hover);
    --tblr-btn-hover-border-color: var(--kp-primary-hover);
    --tblr-btn-active-bg: var(--kp-primary-hover);
    --tblr-btn-active-border-color: var(--kp-primary-hover);
}

.text-primary { color: var(--kp-forest-600) !important; }
.text-blue     { color: var(--kp-forest-600) !important; }
.bg-primary    { background-color: var(--kp-forest-600) !important; }

/* ---- Sidebar brand lockup --------------------------------------------
   Tabler's .navbar-brand is sized for a single logo image; three lines of
   text need real vertical room, so drop the fixed height and give the block
   its own padding plus a rule separating it from the first menu item. */
.kp-brand {
    /* Tinggi dikunci sama dengan topbar supaya blok brand sejajar dengan
       header di sebelahnya. Blok ini tidak lagi memakai garis bawah — pemisah
       dari menu cukup lewat jarak pada .nav-menu-app. */
    display: flex;
    align-items: center;
    /* Selebar rail (dulu utilitas w-100 di markup); di bilah atas ponsel
       lebarnya dilepas lagi — lihat bagian "Tampilan ponsel & tablet". */
    width: 100%;
    height: var(--kp-topbar-h) !important;
    min-height: var(--kp-topbar-h);
    /* Left inset matches the nav pills below (0.75rem margin + 0.75rem padding)
       so the wordmark lines up with the menu icons instead of hugging the edge. */
    padding: 0 1rem 0 1.5rem !important;
    /* Tanpa margin-bottom: jarak ke menu pertama dimiliki <ul> (padding-top
       pada .nav-menu-app) supaya ikut tergulir bersama menunya. */
    margin: 0;
    /* Tanpa garis bawah: Tabler memberi .navbar-brand border sendiri, jadi
       harus ditiadakan secara eksplisit. */
    border-bottom: 0;
}
.kp-brand__text { display: block; line-height: 1.25; }
.kp-brand__line1,
.kp-brand__line2 {
    display: block; font-weight: 800; letter-spacing: .01em;
    color: var(--kp-forest-700); white-space: normal;
}
.kp-brand__line1 { font-size: .72rem; }
.kp-brand__line2 { font-size: .84rem; }
.kp-brand__tagline {
    /* Margin ditekan agar tiga baris tetap lega di dalam tinggi topbar. */
    display: block; margin-top: 4px;
    font-size: .62rem; font-weight: 500; line-height: 1.3;
    color: var(--kp-text-muted);
}
.kp-brand__acronym { font-size: .9rem; font-weight: 800; letter-spacing: .02em; color: var(--kp-forest-700); }
/* Rail terlipat: akronim dipusatkan. */
.navbar-vertical.collapsed .kp-brand { padding: 0 !important; }
.navbar-vertical.collapsed .kp-brand > a { justify-content: center; }

/* ---- Topbar ------------------------------------------------------------
   Selector di-scope ke header karena sidebar juga memakai kelas .navbar;
   tanpa itu tinggi ini akan ikut mengunci tinggi rail sidebar. */
header.navbar {
    min-height: var(--kp-topbar-h);
}

/* ---- Batas kanan sidebar ----------------------------------------------
   Tabler menggambar batas ini dengan inset box-shadow. Shadow inset dilukis
   di bawah konten, sehingga tertutup latar putih blok brand serta <ul> menu,
   dan garisnya tampak putus atau hilang.

   Border sungguhan berada di luar padding box, jadi tidak bisa ditimpa anak
   elemen dan garisnya utuh dari atas sampai bawah. Warnanya sama dengan garis
   bawah topbar supaya keduanya bertemu rapi di sudut. */
.navbar-vertical {
    box-shadow: none;
    border-right: 1px solid var(--tblr-border-color);
}

/* ---- Sidebar scrolling -------------------------------------------------
   Blok brand adalah KEPALA TETAP, bukan elemen sticky di dalam rail yang
   menggulir. Versi sticky sempat dipakai dan menimbulkan tulisan brand
   bertumpuk dengan baris menu saat digulir: apa pun yang membentuk konteks
   penumpukan sendiri (submenu yang terbuka, baris aktif) bisa tergambar di
   atasnya, dan celah sekecil apa pun di atas blok itu membuat menu terlihat
   menembusnya.

   Susunannya kini: rail = kolom flex setinggi layar, brand tidak menyusut,
   dan HANYA daftar menunya yang menggulir. Dengan begitu tidak ada lagi
   tumpang tindih yang mungkin terjadi — bukan sekadar ditutupi latar putih.

   Scrollbar-nya disembunyikan sepenuhnya — menu tetap dapat digulir dengan
   roda tetikus, sentuhan, maupun tombol panah; hanya batangnya yang tidak
   digambar. overflow-y tetap auto, sebab `hidden` akan mematikan pengguliran
   sehingga menu bawah tidak terjangkau pada layar pendek. */
@media (min-width: 992px) {
    .navbar-vertical > .container-fluid {
        display: flex;
        flex-direction: column;
        /* min-height:0 wajib: tanpa itu anak flex menolak menyusut dan
           daftar menunya meluber keluar rail, bukan menggulir. */
        height: 100%;
        min-height: 0;
        flex-wrap: nowrap;
    }

    .navbar-vertical > .container-fluid > .kp-brand { flex: none; }

    .navbar-vertical > .container-fluid > .navbar-collapse {
        flex: 1 1 auto;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        /* Firefox */
        scrollbar-width: none;
        /* Edge lama / IE */
        -ms-overflow-style: none;
    }

    /* Chrome, Safari, Edge berbasis Chromium */
    .navbar-vertical > .container-fluid > .navbar-collapse::-webkit-scrollbar {
        width: 0;
        height: 0;
        display: none;
    }
}

/* Rail sendiri tidak lagi perlu menggulir: isinya sudah dipaskan setinggi rail.
   Tabler menyetel `overflow-y: scroll` dan skrip sidebar menyetel `overflow-y:
   auto` sebagai gaya inline, jadi keduanya tidak bisa ditimpa dari sini —
   batang scrollbar-nya tetap disembunyikan supaya tidak ada gutter kosong. */
.navbar-vertical {
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.navbar-vertical::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* The menu list is plain content inside that scroller — no box, no scrollbar. */
/* padding-top adalah satu-satunya pemisah antara blok brand dan menu pertama
   sejak garis bawah brand dihapus. */
.nav-menu-app { overflow: visible; border: 0; padding-top: 18px; }

/* Latar brand tetap solid: pada layar sempit (<992px) susunannya kembali
   mengalir biasa dan blok ini menempel di atas menu. */
.navbar-vertical .kp-brand { background-color: #fff; }

/* ---- Sidebar nav — same treatment as the Forestry project ---------------
   Top-level active row is a solid green pill with white text; submenus render
   flat (no floating card) with a light tint on the active child.
   Tabler paints the active row itself via `background: var(--tblr-navbar-active-bg)`,
   so retarget its variables rather than fighting them. */
.navbar-vertical {
    --tblr-navbar-active-bg: transparent;
    --tblr-navbar-active-color: var(--kp-text);
}

/* Base top-level link: consistent spacing + rounded, pill-like shape */
.navbar-vertical .navbar-nav > .nav-item > .nav-link,
.navbar-vertical .navbar-nav > .nav-item > .d-flex > .nav-link {
    border-radius: 8px;
    margin: 2px .75rem;
    padding: .5rem .75rem;
    color: var(--kp-text);
    transition: background-color .15s ease, color .15s ease;
}
/* Our single-level items wrap the link in a .d-flex — collapse its margin so
   the pill keeps the same inset as the dropdown rows. */
.navbar-vertical .navbar-nav > .nav-item > .d-flex { margin: 0; }

/* Hover on a non-active top-level link */
.navbar-vertical .navbar-nav > .nav-item:not(.active) > .nav-link:hover,
.navbar-vertical .navbar-nav > .nav-item:not(.active) > .d-flex > .nav-link:hover {
    background-color: var(--kp-forest-50);
    color: var(--kp-primary-hover);
}

/* Active top-level item — solid green pill, white content */
.navbar-vertical .nav-item.active > .nav-link,
.navbar-vertical .nav-item.active > .d-flex > .nav-link,
.navbar-vertical .nav-item.active > .nav-link:hover,
.navbar-vertical .nav-item.active > .d-flex > .nav-link:hover {
    background-color: var(--kp-forest-600);
    color: #fff;
}
.navbar-vertical .nav-item.active > .nav-link:hover,
.navbar-vertical .nav-item.active > .d-flex > .nav-link:hover { background-color: var(--kp-primary-hover); }
.navbar-vertical .nav-item.active > .nav-link .nav-link-title,
.navbar-vertical .nav-item.active > .nav-link .nav-link-icon,
.navbar-vertical .nav-item.active > .nav-link .nav-link-icon i,
.navbar-vertical .nav-item.active > .d-flex > .nav-link .nav-link-title,
.navbar-vertical .nav-item.active > .d-flex > .nav-link .nav-link-icon,
.navbar-vertical .nav-item.active > .d-flex > .nav-link .nav-link-icon i { color: #fff; }

/* Consistent icon gutter so titles line up */
.navbar-vertical .nav-link-icon { display: inline-flex; align-items: center; justify-content: center; min-width: 1.25rem; }
.navbar-vertical .nav-link-icon i { font-size: 1.15rem; line-height: 1; }

/* Submenu container: flat & integrated, not a floating card */
.navbar-vertical .navbar-collapse .dropdown-menu {
    background: transparent; border: 0; box-shadow: none;
    padding: .125rem 0; margin: .125rem 0 .25rem;
}
.navbar-vertical .navbar-collapse .dropdown-menu-columns { background-color: transparent !important; color: inherit !important; }

/* Submenu rows */
.navbar-vertical .navbar-collapse .dropdown-menu .dropdown-item,
.navbar-vertical .navbar-collapse .dropdown-menu .dropdown-item .nav-link-title { color: var(--kp-text); }
.navbar-vertical .navbar-collapse .dropdown-menu .dropdown-item {
    border-radius: 8px;
    margin: 2px .75rem 2px .75rem;
    padding-top: .4rem; padding-bottom: .4rem;
    width: auto;
    transition: background-color .15s ease, color .15s ease;
}
.navbar-vertical .navbar-collapse .dropdown-menu .dropdown-item:hover { background-color: var(--kp-forest-50); }
.navbar-vertical .navbar-collapse .dropdown-menu .dropdown-item:hover,
.navbar-vertical .navbar-collapse .dropdown-menu .dropdown-item:hover .nav-link-title { color: var(--kp-primary-hover); }

.navbar-vertical .navbar-collapse .dropdown-menu .dropdown-item.active { background-color: var(--kp-forest-50); }
.navbar-vertical .navbar-collapse .dropdown-menu .dropdown-item.active,
.navbar-vertical .navbar-collapse .dropdown-menu .dropdown-item.active .nav-link-title,
.navbar-vertical .navbar-collapse .dropdown-menu .dropdown-item.active .nav-link-icon {
    color: var(--kp-forest-600);
    font-weight: 600;
}

/* Submenu rows: rounded pill so the tint reads as a selection, not a band. */
.navbar-vertical .dropdown-item.sidebar-item.active { border-radius: 6px; }

/* (sidebar .dropdown-menu-columns is handled in the nav block above) */

/* =====================================================================
   Page scope — every Koperasi page wraps its content in `.kp-app`
   ===================================================================== */
.kp-app {
    font-family: var(--kp-font);
    color: var(--kp-text);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
/* Breathing room under the sticky topbar. Classic Tabler pages get this from
   .page-header; kp-* pages render their own heading, so add it here. */
.page-body .kp-app { padding-top: 22px; padding-bottom: 8px; }
@media (max-width: 991.98px) { .page-body .kp-app { padding-top: 14px; } }
.kp-app *, .kp-app *::before, .kp-app *::after { box-sizing: border-box; }
.kp-app a { text-decoration: none; }

/* =====================================================================
   Page header
   ===================================================================== */
/* flex-wrap + max-width pada blok aksi: deretan tombol yang lebih lebar dari
   sisa ruang turun ke baris sendiri lalu membungkus, bukan mendorong halaman
   melebar ke samping (halaman Iuran Wajib punya lima tombol). */
.kp-pagehead { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 12px 18px; margin-bottom: 20px; }
.kp-pagehead > :first-child { min-width: 0; }
.kp-pagehead__title { font-size: 1.6rem; font-weight: 800; color: var(--kp-text-strong); margin: 0; letter-spacing: -.01em; }
.kp-pagehead__sub { color: var(--kp-text-muted); font-size: .88rem; margin: 4px 0 0; }
.kp-pagehead__actions { margin-left: auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; flex: none; max-width: 100%; align-items: center; }

/* =====================================================================
   Layout helpers
   ===================================================================== */
.kp-grid { display: grid; gap: 16px; }
/* Kisi dua kolom 2 : 1 untuk halaman ringkasan. Semua kartu berada di satu
   kisi, jadi tepi kolomnya sejajar di setiap baris dan tinggi kartu sebaris
   selalu sama; di layar sempit turun menjadi satu kolom. */
.kp-grid--2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
@media (max-width: 1100px) {
    .kp-grid--2-1 { grid-template-columns: minmax(0, 1fr); }
}
.kp-row  { display: flex; gap: 16px; align-items: stretch; flex-wrap: wrap; }
.kp-col  { flex: 1 1 0; min-width: 0; }
.kp-row > * > .kp-card:only-child { height: 100%; }
.kp-row > .kp-card { height: 100%; }
.kp-mb    { margin-bottom: 16px; }
.kp-mt    { margin-top: 14px; }
.kp-mt-sm { margin-top: 8px; }
.kp-flex    { display: flex; }
.kp-between { justify-content: space-between; }
.kp-center  { align-items: center; }
.kp-gap-sm  { gap: 8px; }
.kp-gap     { gap: 12px; }
.kp-wrap    { flex-wrap: wrap; }
.kp-w-100   { width: 100%; }
.kp-ms-auto { margin-left: auto; }
.kp-text-green  { color: var(--kp-forest-500); }
.kp-text-muted  { color: var(--kp-text-muted); }
.kp-text-soft   { color: var(--kp-text-soft); }
.kp-text-danger { color: var(--kp-danger); }
.kp-fw-700 { font-weight: 700; }
.kp-fw-800 { font-weight: 800; }
.kp-fs-xs  { font-size: .72rem; }
.kp-fs-sm  { font-size: .8rem; }
.kp-fs-lg  { font-size: 1.15rem; }
.kp-nowrap { white-space: nowrap; }
.kp-tr     { text-align: right; }
.kp-tc     { text-align: center; }

.kp-section-link { color: var(--kp-forest-500); font-size: .8rem; font-weight: 600; }
.kp-section-link:hover { text-decoration: underline; color: var(--kp-forest-600); }

/* =====================================================================
   Cards
   ===================================================================== */
.kp-card {
    background: var(--kp-card-bg);
    border: 1px solid var(--kp-border);
    border-radius: var(--kp-radius-lg);
    box-shadow: var(--kp-shadow);
}
.kp-card__body { padding: 18px; }
.kp-card__head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 16px 18px; border-bottom: 1px solid var(--kp-border);
}
.kp-card__head--plain { border-bottom: none; padding-bottom: 4px; }
.kp-card__title { font-size: .98rem; font-weight: 700; color: var(--kp-text-strong); margin: 0; }
.kp-card__foot { padding: 12px 18px; border-top: 1px solid var(--kp-border); }

/* =====================================================================
   Stat cards — icon on the RIGHT (dashboard) or LEFT (list pages)
   ===================================================================== */
/* minmax(0,1fr), not 1fr: a bare `1fr` refuses to shrink below the track's
   min-content width, so a long value like "Rp -941,28 Jt" pushes the whole row
   wider than its container and the last tile falls off the edge. */
.kp-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.kp-stats--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.kp-stats--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.kp-stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kp-stats--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.kp-stat {
    background: #fff; border: 1px solid var(--kp-border);
    border-radius: var(--kp-radius-lg); padding: 16px;
    display: flex; align-items: center; gap: 14px; box-shadow: var(--kp-shadow-sm);
}
.kp-stat__icon {
    width: 44px; height: 44px; border-radius: 12px; flex: none;
    display: grid; place-items: center; font-size: 1.35rem;
}
.kp-stat__body { min-width: 0; flex: 1 1 auto; }
.kp-stat__label { font-size: .75rem; color: var(--kp-text-muted); font-weight: 500; }
/* Currency must never wrap mid-amount ("Rp 5,58" / "M" on two lines reads as a
   broken number). Clip instead, and let the tighter variants shrink the type. */
.kp-stat__value {
    font-size: 1.4rem; font-weight: 800; color: var(--kp-text-strong);
    line-height: 1.15; margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kp-stat__sub   { font-size: .7rem; color: var(--kp-text-soft); margin-top: 3px; }
.kp-stat .kp-trend { white-space: normal; }
/* icon pushed to the right edge (dashboard KPI band) */
.kp-stat--right .kp-stat__icon { order: 2; margin-left: auto; }

/* Dense variants — 5 and 6 tiles across leave roughly 100–120px for the text
   column, so the stock 1.4rem value overflows. Scale the whole tile down. */
.kp-stats--5 .kp-stat,
.kp-stats--6 .kp-stat { padding: 13px; gap: 10px; }
.kp-stats--5 .kp-stat__icon,
.kp-stats--6 .kp-stat__icon { width: 36px; height: 36px; border-radius: 10px; font-size: 1.1rem; }
.kp-stats--5 .kp-stat__label,
.kp-stats--6 .kp-stat__label { font-size: .69rem; line-height: 1.3; }
.kp-stats--5 .kp-stat__value,
.kp-stats--6 .kp-stat__value { font-size: clamp(.95rem, .95vw, 1.15rem); }
.kp-stats--5 .kp-trend,
.kp-stats--6 .kp-trend { font-size: .65rem; line-height: 1.35; }

/* Tinted icon helpers — reused by stat cards, list icons, mini cards */
.kp-tint-green  { background: var(--kp-success-bg); color: var(--kp-success-fg); }
.kp-tint-blue   { background: var(--kp-info-bg);    color: var(--kp-info-fg); }
.kp-tint-sky    { background: var(--kp-sky-bg);     color: var(--kp-sky-fg); }
.kp-tint-amber  { background: var(--kp-warning-bg); color: var(--kp-warning-fg); }
.kp-tint-red    { background: var(--kp-danger-bg);  color: var(--kp-danger-fg); }
.kp-tint-purple { background: var(--kp-purple-bg);  color: var(--kp-purple-fg); }
.kp-tint-orange { background: var(--kp-orange-bg);  color: var(--kp-orange-fg); }
.kp-tint-gray   { background: var(--kp-gray-bg);    color: var(--kp-gray-fg); }

/* Trend indicator (↑ 8,21% dari bulan lalu) */
.kp-trend { font-size: .7rem; font-weight: 600; display: inline-flex; align-items: center; gap: 3px; }
.kp-trend--up   { color: var(--kp-success); }
.kp-trend--down { color: var(--kp-danger); }
.kp-trend--flat { color: var(--kp-text-muted); }

/* =====================================================================
   Buttons
   ===================================================================== */
.kp-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-family: var(--kp-font);
    font-size: .82rem; font-weight: 600;
    padding: 9px 16px; border-radius: var(--kp-radius-sm);
    border: 1px solid transparent; cursor: pointer;
    transition: background .15s, box-shadow .15s, border-color .15s, color .15s;
    white-space: nowrap; line-height: 1.15;
}
.kp-btn i { font-size: 1.05rem; }
.kp-btn--primary { background: var(--kp-primary); color: #fff; box-shadow: var(--kp-shadow-sm); }
.kp-btn--primary:hover { background: var(--kp-primary-hover); color: #fff; }
.kp-btn--dark { background: var(--kp-forest-800); color: #fff; }
.kp-btn--dark:hover { background: var(--kp-forest-900); color: #fff; }
.kp-btn--ghost { background: #fff; color: var(--kp-text); border-color: var(--kp-border-strong); }
.kp-btn--ghost:hover { background: var(--kp-forest-50); border-color: var(--kp-forest-300); color: var(--kp-forest-600); }
.kp-btn--outline { background: #fff; color: var(--kp-forest-600); border-color: var(--kp-forest-300); }
.kp-btn--outline:hover { background: var(--kp-forest-50); }
.kp-btn--sm   { padding: 7px 12px; font-size: .78rem; }
.kp-btn--icon { padding: 9px; width: 38px; }
.kp-btn--block { width: 100%; }
.kp-btn:disabled, .kp-btn.is-loading { opacity: .72; cursor: progress; pointer-events: none; }
/* Tombol yang sedang memproses (partials/form-proses): lebarnya dikunci agar
   tidak melompat saat labelnya berganti jadi "Menyimpan…", dan spinner Tabler
   (.spinner-border, dari apps.min.css) disamakan dengan ukuran ikon tombol. */
.kp-btn.is-loading { min-width: var(--kp-btn-w, auto); }
.kp-btn .spinner-border { width: 1.05rem; height: 1.05rem; border-width: 2px; }

/* Row action buttons in tables */
.kp-rowbtn {
    width: 30px; height: 30px; border-radius: 7px;
    display: inline-grid; place-items: center;
    border: 1px solid var(--kp-border-strong); background: #fff;
    color: var(--kp-text-muted); font-size: 1rem; cursor: pointer;
}
.kp-rowbtn:hover { background: var(--kp-forest-50); border-color: var(--kp-forest-300); color: var(--kp-forest-600); }
.kp-rowbtn--bare { border-color: transparent; background: transparent; }
.kp-rowbtn--green { color: var(--kp-forest-500); }
/* Varian terisi (bukan outline) — dipakai tombol Invoice pada jadwal angsuran. */
.kp-rowbtn--biru {
    background: var(--kp-info);
    border-color: var(--kp-info);
    color: #fff;
}
.kp-rowbtn--biru:hover {
    background: var(--kp-info-fg);
    border-color: var(--kp-info-fg);
    color: #fff;
}

/* =====================================================================
   Filter bar / form controls
   ===================================================================== */
/* align-items:flex-end — isian tanpa label (kotak pencarian) dan tombol
   sejajar dengan dasar isian berlabel, bukan melayang di tengah baris. */
.kp-filterbar {
    display: flex; align-items: flex-end; gap: 10px 12px; flex-wrap: wrap;
    background: #fff; border: 1px solid var(--kp-border);
    border-radius: var(--kp-radius-lg); padding: 12px 14px; margin-bottom: 16px;
    box-shadow: var(--kp-shadow-sm);
}
/* Kotak pencarian mengambil porsi terbesar dari sisa ruang, isian lain berbagi
   rata — tanpa ini lebar tiap kolom mengikuti opsi terpanjangnya sehingga
   barisnya terlihat tidak beraturan dan placeholder pencarian terpotong.
   min-width:0 membuat <select> boleh menyusut di bawah lebar opsi terpanjang,
   jadi pada layar sempit isian mengecil lebih dulu sebelum berpindah baris. */
.kp-filterbar .kp-search-field { flex: 2 1 200px; min-width: 170px; }
.kp-filterbar .kp-field { flex: 1 1 132px; min-width: 0; max-width: 200px; }
.kp-filterbar .kp-field .kp-select { width: 100%; min-width: 0; }
.kp-filterbar .kp-field .kp-input { width: 100%; }
/* Tombol Terapkan/Reset selalu menempel di ujung kanan bar. */
.kp-filterbar__aksi { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.kp-field { display: flex; flex-direction: column; gap: 5px; }
.kp-field[hidden] { display: none; }
.kp-field__label { font-size: .72rem; font-weight: 600; color: var(--kp-text-muted); }
.kp-input, .kp-select, .kp-textarea {
    font-family: var(--kp-font);
    font-size: .82rem; color: var(--kp-text);
    background: #fff; border: 1px solid var(--kp-border-strong);
    border-radius: var(--kp-radius-sm); padding: 8px 12px; min-height: 38px; outline: none;
    transition: border-color .15s, box-shadow .15s;
}
/* Isian tidak pernah lebih lebar dari wadahnya (isian berkas punya lebar
   bawaan sendiri dan bisa meluber di layar sempit). */
.kp-input, .kp-select, .kp-textarea { max-width: 100%; }
.kp-input:focus, .kp-select:focus, .kp-textarea:focus {
    border-color: var(--kp-forest-300); box-shadow: 0 0 0 3px rgba(46,139,87,.12);
}
.kp-input::placeholder { color: var(--kp-text-soft); }
/* Isian otomatis yang tidak bisa diubah (mis. Nomor KTA, bulan & tahun pendaftaran). */
/* background-color (bukan shorthand) agar panah .kp-select tidak ikut hilang. */
.kp-input:disabled, .kp-select:disabled, .kp-textarea:disabled { background-color: #f4f6f5; color: var(--kp-text-muted); cursor: not-allowed; }
/* Isian terkunci yang nilainya ditentukan sistem (mis. Jumlah pembayaran iuran =
   total tagihan). readonly, bukan disabled, agar angkanya tetap bisa disalin. */
.kp-input[readonly], .kp-textarea[readonly] { background-color: #f4f6f5; color: var(--kp-text-muted); }
.kp-input[readonly]:focus, .kp-textarea[readonly]:focus { border-color: var(--kp-border-strong); box-shadow: none; }
.kp-select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23667085'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpolyline%20points%3D'6%209%2012%2015%2018%209'%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat; background-position: right 10px center; background-size: 16px;
    padding-right: 32px; cursor: pointer;
}
.kp-textarea { min-height: 92px; resize: vertical; }
.kp-search-field { flex: 1 1 240px; position: relative; }
.kp-search-field > i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--kp-text-soft); font-size: 1.05rem; }
.kp-search-field .kp-input { width: 100%; padding-left: 36px; }
.kp-formgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.kp-formgrid .kp-input, .kp-formgrid .kp-select, .kp-formgrid .kp-textarea { width: 100%; }
.kp-form-full { grid-column: 1 / -1; }
/* Galat satu isian, tepat di bawah isiannya (mis. penarikan melebihi saldo). */
.kp-field__galat { font-size: .74rem; font-weight: 600; line-height: 1.4; color: var(--kp-danger-fg); }
.kp-field__galat[hidden] { display: none; }
.kp-input.is-invalid, .kp-input.is-invalid:focus { border-color: var(--kp-danger); box-shadow: 0 0 0 3px rgba(220,38,38,.12); }

/* ---------------------------------------------------------------------
   Kotak saldo pada modal "Catat Mutasi Simpanan": muncul begitu anggota
   dipilih — spinner selagi dimuat, lalu saldo rekeningnya.
   display:flex menimpa atribut hidden, jadi [hidden] ditangani sendiri.
   --------------------------------------------------------------------- */
.kp-saldobox {
    display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 11px 14px;
    background: var(--kp-forest-50); border: 1px solid var(--kp-forest-100); border-radius: var(--kp-radius);
    font-size: .8rem; line-height: 1.4; color: var(--kp-text);
}
.kp-saldobox[hidden] { display: none; }
.kp-saldobox .spinner-border { flex: none; width: 1.1rem; height: 1.1rem; border-width: 2px; color: var(--kp-forest-600); }
.kp-saldobox > i { flex: none; font-size: 1.15rem; }
.kp-saldobox__ikon {
    flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
    background: #fff; color: var(--kp-forest-600); font-size: 1.1rem;
}
.kp-saldobox__isi { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.kp-saldobox__label { font-size: .72rem; font-weight: 600; color: var(--kp-text-muted); }
.kp-saldobox__meta { font-size: .76rem; color: var(--kp-text-muted); overflow-wrap: anywhere; }
.kp-saldobox__nilai { flex: none; font-size: 1.08rem; font-weight: 800; color: var(--kp-text-strong); font-variant-numeric: tabular-nums; }
.kp-saldobox__ulang {
    flex: none; padding: 0; border: 0; background: none; font: inherit; font-weight: 700;
    color: inherit; text-decoration: underline; cursor: pointer;
}
/* Saldo gagal dimuat, atau rekeningnya sudah ditutup. */
.kp-saldobox--peringatan { background: var(--kp-warning-bg); border-color: #f3d9a4; color: var(--kp-warning-fg); }
.kp-saldobox--peringatan .kp-saldobox__ikon { color: var(--kp-warning-fg); }
.kp-saldobox--peringatan .kp-saldobox__label,
.kp-saldobox--peringatan .kp-saldobox__meta { color: inherit; }

/* ---------------------------------------------------------------------
   Foto anggota (partials/unggah-foto) — kotak pratinjau dengan tombol
   unggah/kamera melayang di dalamnya. Dipakai form pendaftaran & modal
   ubah anggota.

   Kotaknya menempati kolom kanan pada tiga baris pertama kisi isian:
   tingginya kira-kira sama dengan tiga isian, jadi isian di kolom kiri
   tidak ikut merenggang. `[hidden]` diberi aturan sendiri karena display
   di atasnya akan menang melawan atribut itu.
   --------------------------------------------------------------------- */
.kp-formgrid__foto { grid-column: 2; grid-row: 1 / span 3; }

/* flex:1 (bukan height:100%) agar kotaknya mengisi sisa tinggi sel setelah
   label isian, tanpa melebihi tinggi selnya. */
.kp-fotoup { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; min-height: 0; }
.kp-fotoup__frame {
    position: relative; flex: 1 1 auto; min-height: 190px; overflow: hidden;
    display: grid; place-items: center;
    border: 1px dashed var(--kp-border-strong); border-radius: var(--kp-radius);
    background: var(--kp-forest-50);
    transition: border-color .15s, background .15s;
}
/* Kotak berisi foto: tepinya menjadi utuh dan latarnya netral. */
.kp-fotoup--isi .kp-fotoup__frame { border-style: solid; border-color: var(--kp-border); background: #f4f6f4; }

/* Foto KTA berupa potret 3:4, jadi `contain` dipakai supaya wajah tidak
   terpotong oleh kotak yang lebih lebar daripada fotonya. */
.kp-fotoup__img, .kp-fotoup__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.kp-fotoup__video { background: #101410; }

/* Bingkai 3:4 di tengah bidikan kamera = bagian yang benar-benar terpotret. */
.kp-fotoup__panduan {
    position: absolute; top: 10px; bottom: 44px; left: 50%; transform: translateX(-50%);
    aspect-ratio: 3 / 4; max-width: calc(100% - 20px);
    border: 2px dashed rgba(255, 255, 255, .85); border-radius: 8px; pointer-events: none;
}

.kp-fotoup__kosong { display: grid; gap: 6px; place-items: center; color: var(--kp-text-soft); font-size: .76rem; }
.kp-fotoup__kosong i { font-size: 1.9rem; }

/* Toolbar melayang di dalam kotak, supaya isian foto tetap ringkas. */
.kp-fotoup__bar {
    position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%);
    display: flex; align-items: center; gap: 4px; padding: 4px;
    background: rgba(255, 255, 255, .94); border: 1px solid var(--kp-border);
    border-radius: 999px; box-shadow: var(--kp-shadow-sm); backdrop-filter: blur(4px);
}
.kp-fotoup__btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border: 0; border-radius: 999px; cursor: pointer;
    font-family: var(--kp-font); font-size: .74rem; font-weight: 600;
    background: transparent; color: var(--kp-text); white-space: nowrap;
    transition: background .15s, color .15s;
}
.kp-fotoup__btn:hover { background: var(--kp-forest-50); color: var(--kp-forest-700); }
.kp-fotoup__btn i { font-size: 1rem; }
.kp-fotoup__btn--ikon { padding: 6px 8px; }
.kp-fotoup__btn--utama { background: var(--kp-primary); color: #fff; }
.kp-fotoup__btn--utama:hover { background: var(--kp-primary-hover); color: #fff; }

.kp-fotoup__ket { font-size: .7rem; color: var(--kp-text-soft); }
.kp-fotoup [hidden] { display: none; }

/* ---------------------------------------------------------------------
   Modal berisi form panjang (mis. Ubah Data Anggota). Isinya memakai
   kartu yang sama dengan halaman form, jadi latar badan modal disamakan
   dengan latar halaman supaya kartunya tetap terbaca sebagai kartu.
   --------------------------------------------------------------------- */
.kp-modalform .modal-content { border: 0; border-radius: var(--kp-radius-lg); overflow: hidden; }
.kp-modalform .modal-header {
    align-items: flex-start; gap: 12px; padding: 16px 20px;
    background: #fff; border-bottom: 1px solid var(--kp-border);
}
.kp-modalform .modal-title { font-size: 1rem; font-weight: 800; color: var(--kp-text-strong); }
.kp-modal__sub { margin: 3px 0 0; font-size: .78rem; color: var(--kp-text-muted); }
.kp-modalform .modal-body { background: var(--kp-page-bg); padding: 18px 20px; }
.kp-modalform .modal-footer {
    padding: 12px 20px; gap: 8px; background: #fff; border-top: 1px solid var(--kp-border);
}
.kp-modalform .kp-card__body { padding-top: 14px; }
@media (min-width: 1400px) {
    .kp-modalform .modal-xl { max-width: 1240px; }
}

/* Radio / checkbox rows (opsi pencetakan) */
.kp-radio-row { display: flex; align-items: center; gap: 9px; padding: 6px 0; font-size: .82rem; color: var(--kp-text); cursor: pointer; }
.kp-radio { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--kp-border-strong); flex: none; position: relative; }
.kp-radio-row.is-checked .kp-radio { border-color: var(--kp-forest-600); }
.kp-radio-row.is-checked .kp-radio::after {
    content: ""; position: absolute; inset: 2px; border-radius: 50%; background: var(--kp-forest-600);
}
.kp-radio-row input[type="checkbox"], .kp-radio-row input[type="radio"] { width: 16px; height: 16px; margin: 0; accent-color: var(--kp-forest-600); }
/* `label.kp-radio` membungkus input asli + teks (form produk, berita, deposito,
   boolean di Pengaturan). Tanpa ini ia mewarisi lingkaran 16px `.kp-radio` di
   atas sehingga teksnya tumpang tindih ("AktiNonaktif"). */
label.kp-radio {
    width: auto; height: auto; border: 0; border-radius: 0;
    display: inline-flex; align-items: center; gap: 8px; margin: 0;
    font-size: .84rem; color: var(--kp-text); cursor: pointer;
}
label.kp-radio input { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--kp-forest-600); }
label.kp-radio + label.kp-radio { margin-left: 12px; }

/* Unggah berkas + pratinjau — dipakai bersama partials/unggah-dokumen
   (KTP & Kartu Keluarga) dan partials/unggah-foto (foto KTA) agar ketiga
   kartunya seragam. `[hidden]` diberi aturan sendiri karena display di
   atasnya akan menang melawan atribut itu. */
.kp-ktp__preview {
    display: flex; flex-direction: column; gap: 10px; margin-top: 10px; padding: 10px;
    border: 1px solid var(--kp-border); border-radius: 10px; background: #fafbfa;
}
.kp-ktp__preview[hidden], .kp-ktp [hidden] { display: none; }
.kp-ktp__label { font-size: .74rem; font-weight: 600; color: var(--kp-text-muted); word-break: break-word; }
.kp-ktp__imglink { display: block; }
.kp-ktp__img { display: block; width: 100%; max-height: 220px; object-fit: contain; border: 1px solid var(--kp-border); border-radius: 8px; background: #fff; }
.kp-ktp__pdf { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--kp-text); word-break: break-all; }
.kp-ktp__pdf i { flex: none; font-size: 1.7rem; color: #dc2626; }
.kp-ktp__aksi { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* Tombol hapus dipisahkan ke tepi kanan baris aksi — aksi merusak tidak
   berdampingan rapat dengan Pratinjau/Unduh yang aman ditekan. */
.kp-ktp__hapus { margin-left: auto; }
.kp-ktp__ocr { padding: 8px 10px; border-radius: 8px; font-size: .78rem; line-height: 1.45; }
.kp-ktp__ocr--info { background: var(--kp-info-bg); color: var(--kp-info-fg); }
.kp-ktp__ocr--sukses { background: var(--kp-success-bg); color: var(--kp-success-fg); }
.kp-ktp__ocr--galat { background: var(--kp-danger-bg); color: var(--kp-danger-fg); }

/* Kamera dokumen (partials/unggah-dokumen) — panel pratinjau kamera di dalam
   kartu dokumen, sejajar dengan tombol Kamera pada kotak Foto Anggota. */
.kp-ktp__alat { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.kp-ktp__kamera {
    display: flex; flex-direction: column; gap: 8px; margin-top: 10px; padding: 10px;
    border: 1px solid var(--kp-border); border-radius: 10px; background: #fafbfa;
}
.kp-ktp__kamerabox {
    position: relative; aspect-ratio: 4 / 3; max-height: 260px; overflow: hidden;
    border-radius: 8px; background: #101410;
}
.kp-ktp__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }

/* Bingkai panduan posisi dokumen. Sisi yang dibatasi mengikuti bentuknya:
   bingkai yang lebih lebar dari bidikan 4:3 dibatasi lebarnya, yang lebih
   tinggi dibatasi tingginya — sisi lainnya dihitung dari `aspect-ratio`
   (dipasang inline per jenis dokumen), jadi rasionya tidak melenceng. */
.kp-ktp__panduan {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    border: 2px dashed rgba(255, 255, 255, .85); border-radius: 6px; pointer-events: none;
}
.kp-ktp__panduan--mendatar { width: calc(100% - 16px); height: auto; }
.kp-ktp__panduan--tegak { height: calc(100% - 16px); width: auto; }

.kp-ktp__kameraket { font-size: .7rem; color: var(--kp-text-soft); line-height: 1.45; }

/* Pemilih ikon (radio bergambar) — mis. form unit usaha */
.kp-iconpick { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; }
.kp-iconpick input { position: absolute; opacity: 0; pointer-events: none; }
.kp-iconpick label {
    display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 0; padding: 9px 4px 7px;
    border: 1px solid var(--kp-border-strong); border-radius: 10px; background: #fff; cursor: pointer;
    font-size: .68rem; color: var(--kp-text-muted); transition: border-color .15s, background-color .15s, color .15s;
}
.kp-iconpick label i { font-size: 1.35rem; }
.kp-iconpick label:hover { border-color: var(--kp-forest-300); }
.kp-iconpick input:checked + label { border-color: var(--kp-forest-500); background: var(--kp-forest-50); color: var(--kp-forest-700); box-shadow: 0 0 0 3px rgba(46, 139, 87, .12); }
.kp-iconpick input:focus-visible + label { outline: 2px solid var(--kp-forest-400); outline-offset: 2px; }

/* Stepper number input */
.kp-stepper-input { display: inline-flex; align-items: stretch; border: 1px solid var(--kp-border-strong); border-radius: var(--kp-radius-sm); overflow: hidden; }
.kp-stepper-input input { width: 64px; border: none; outline: none; text-align: center; font-size: .84rem; padding: 8px 4px; }
.kp-stepper-input .kp-stepper-btns { display: flex; flex-direction: column; border-left: 1px solid var(--kp-border-strong); }
.kp-stepper-input .kp-stepper-btns button {
    border: none; background: #fff; cursor: pointer; width: 22px; flex: 1 1 0;
    display: grid; place-items: center; color: var(--kp-text-muted); font-size: .6rem; padding: 0;
}
.kp-stepper-input .kp-stepper-btns button:first-child { border-bottom: 1px solid var(--kp-border-strong); }
.kp-stepper-input .kp-stepper-btns button:hover { background: var(--kp-forest-50); color: var(--kp-forest-600); }

/* =====================================================================
   Tables
   ===================================================================== */
/* ---------------------------------------------------------------------
   Kartu produk berjajar (mis. jenis pinjaman pada Informasi Pinjaman).
   Tingginya mengikuti kartu tertinggi dan tombol aksinya menempel di dasar,
   sehingga seluruh tombol sejajar walau keterangan tiap produk beda panjang.
   --------------------------------------------------------------------- */
.kp-produkkartu { display: flex; flex-direction: column; height: 100%; }
.kp-produkkartu .kp-card__body { display: flex; flex-direction: column; flex: 1 1 auto; }
.kp-produkkartu__aksi { margin-top: auto; padding-top: 14px; }
/* Keterangan syarat dijaga tingginya agar barisnya tidak bergeser-geser. */
.kp-produkkartu__syarat { align-items: flex-start; }

.kp-tablecard { background: #fff; border: 1px solid var(--kp-border); border-radius: var(--kp-radius-lg); box-shadow: var(--kp-shadow); overflow: hidden; }
.kp-table-wrap { overflow-x: auto; }
.kp-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.kp-table thead th {
    background: #f8faf9; color: var(--kp-text-muted);
    font-weight: 700; font-size: .73rem; text-align: left;
    padding: 12px 14px; white-space: nowrap;
    border-bottom: 1px solid var(--kp-border);
}
/* Judul kolom angka mengikuti perataan isinya (aturan di atas lebih spesifik dari .kp-tr/.kp-tc). */
.kp-table thead th.kp-tr { text-align: right; }
.kp-table thead th.kp-tc { text-align: center; }
.kp-table tbody td { padding: 12px 14px; border-bottom: 1px solid var(--kp-border); color: var(--kp-text); vertical-align: middle; }
.kp-table tbody tr:last-child td { border-bottom: none; }
.kp-table tbody tr:hover { background: #fafcfb; }
.kp-table tfoot td { padding: 12px 14px; font-weight: 700; background: #f8faf9; border-top: 1px solid var(--kp-border); }
/* Nominal tidak pernah terpenggal menjadi "Rp" di satu baris dan angkanya di
   baris berikut (terlihat pada invoice di layar sempit). */
.kp-table td.kp-tr, .kp-table td.kp-text-right { white-space: nowrap; }
.kp-table__link { color: var(--kp-forest-500); font-weight: 700; }
.kp-table__link:hover { text-decoration: underline; }
.kp-table__muted { color: var(--kp-text-muted); }
.kp-table--tight tbody td { padding: 9px 12px; }
.kp-table--tight thead th { padding: 10px 12px; }

.kp-tablefoot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--kp-border); background: #fff; flex-wrap: wrap; }
.kp-tablefoot__info { font-size: .78rem; color: var(--kp-text-muted); }

/* Member cell — avatar + name + phone */
.kp-usercell { display: flex; align-items: center; gap: 10px; }
.kp-usercell img, .kp-avatar {
    width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none;
    background: var(--kp-forest-100); color: var(--kp-forest-700);
    display: grid; place-items: center; font-size: .75rem; font-weight: 700;
}
.kp-avatar--lg { width: 96px; height: 96px; font-size: 1.8rem; }
.kp-avatar--md { width: 44px; height: 44px; font-size: .9rem; }
.kp-usercell__name { font-size: .82rem; font-weight: 600; color: var(--kp-text); line-height: 1.2; }
.kp-usercell__meta { font-size: .72rem; color: var(--kp-text-muted); }

/* Checkbox in table header/rows */
.kp-check { width: 15px; height: 15px; border-radius: 4px; border: 1.5px solid var(--kp-border-strong); background: #fff; cursor: pointer; accent-color: var(--kp-forest-600); }

/* =====================================================================
   Badges / pills / tags
   ===================================================================== */
.kp-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px; border-radius: var(--kp-radius-pill);
    font-size: .71rem; font-weight: 600; white-space: nowrap;
}
.kp-badge i { font-size: .82rem; }
.kp-badge--success { background: var(--kp-success-bg); color: var(--kp-success-fg); }
.kp-badge--info    { background: var(--kp-info-bg);    color: var(--kp-info-fg); }
.kp-badge--sky     { background: var(--kp-sky-bg);     color: var(--kp-sky-fg); }
.kp-badge--warning { background: var(--kp-warning-bg); color: var(--kp-warning-fg); }
.kp-badge--danger  { background: var(--kp-danger-bg);  color: var(--kp-danger-fg); }
.kp-badge--purple  { background: var(--kp-purple-bg);  color: var(--kp-purple-fg); }
.kp-badge--orange  { background: var(--kp-orange-bg);  color: var(--kp-orange-fg); }
.kp-badge--gray    { background: var(--kp-gray-bg);    color: var(--kp-gray-fg); }

.kp-tag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 6px; font-size: .71rem; font-weight: 600; }

/* =====================================================================
   Pagination
   ===================================================================== */
.kp-pagination { display: flex; align-items: center; gap: 5px; }
.kp-page {
    min-width: 30px; height: 30px; padding: 0 8px;
    display: grid; place-items: center; border-radius: 7px;
    border: 1px solid var(--kp-border-strong); background: #fff;
    color: var(--kp-text-muted); font-size: .78rem; font-weight: 600; cursor: pointer;
}
.kp-page:hover { background: var(--kp-forest-50); border-color: var(--kp-forest-300); color: var(--kp-forest-600); }
.kp-page.is-active { background: var(--kp-primary); border-color: var(--kp-primary); color: #fff; }
.kp-page.is-dots { border-color: transparent; cursor: default; }
.kp-page.is-dots:hover { background: transparent; color: var(--kp-text-muted); }

/* =====================================================================
   Tabs (underline)
   ===================================================================== */
.kp-tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--kp-border); margin-bottom: 18px; overflow-x: auto; }
.kp-tab {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 12px 2px; font-size: .85rem; font-weight: 600;
    color: var(--kp-text-muted); cursor: pointer;
    border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
}
.kp-tab:hover { color: var(--kp-text); }
.kp-tab.is-active { color: var(--kp-forest-600); border-bottom-color: var(--kp-forest-600); }
/* Isi tab detail anggota sedang diambil (pindah tab tanpa memuat ulang):
   ikon tabnya berganti spinner dan panelnya diredupkan sedikit. */
.kp-tab .spinner-border { width: .95rem; height: .95rem; border-width: 2px; }
[data-tab-panel] { transition: opacity .15s; }
[data-tab-panel].is-memuat { opacity: .6; pointer-events: none; }

/* Pill tabs (Semua / Wajib / Pokok / Sukarela / Deposito) */
.kp-pilltabs { display: flex; gap: 6px; flex-wrap: wrap; }
.kp-pilltab {
    padding: 6px 14px; border-radius: var(--kp-radius-pill);
    font-size: .78rem; font-weight: 600; color: var(--kp-text-muted);
    background: transparent; border: 1px solid transparent; cursor: pointer;
}
.kp-pilltab:hover { background: var(--kp-forest-50); color: var(--kp-forest-600); }
.kp-pilltab.is-active { background: var(--kp-forest-600); color: #fff; }

/* =====================================================================
   Info grid (key/value) & definition rows
   ===================================================================== */
.kp-infogrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.kp-info__label { font-size: .72rem; color: var(--kp-text-muted); margin-bottom: 2px; }
.kp-info__value { font-size: .85rem; font-weight: 600; color: var(--kp-text); }
.kp-info--full { grid-column: 1 / -1; }

/* label left / value right, stacked rows (Informasi Keanggotaan) */
.kp-deflist { display: flex; flex-direction: column; }
.kp-defrow { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 8px 0; font-size: .8rem; }
.kp-defrow + .kp-defrow { border-top: 1px solid var(--kp-border); }
.kp-defrow__label { color: var(--kp-text-muted); flex: none; }
/* min-width:0 + overflow-wrap: nilai panjang tanpa spasi (email, tautan)
   dipenggal di dalam barisnya, bukan meluber keluar kartu. */
.kp-defrow__value { color: var(--kp-text); font-weight: 600; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.kp-deflist--plain .kp-defrow + .kp-defrow { border-top: none; }

/* =====================================================================
   Mini cards (ringkasan keuangan)
   ===================================================================== */
.kp-minicards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.kp-minicards--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.kp-mini__value { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kp-mini { border: 1px solid var(--kp-border); border-radius: var(--kp-radius); padding: 14px; display: flex; gap: 10px; align-items: flex-start; }
.kp-mini__icon { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-size: 1rem; flex: none; }
.kp-mini__label { font-size: .72rem; color: var(--kp-text-muted); }
.kp-mini__value { font-size: 1.05rem; font-weight: 800; color: var(--kp-text-strong); line-height: 1.2; margin-top: 2px; }
.kp-mini__sub   { font-size: .7rem; margin-top: 3px; }
.kp-mini__link  { font-size: .74rem; font-weight: 600; color: var(--kp-forest-500); margin-top: 6px; display: inline-flex; align-items: center; gap: 4px; }

/* =====================================================================
   List rows (aktivitas terbaru, pengumuman, top produk)
   ===================================================================== */
.kp-listrow { display: flex; align-items: flex-start; gap: 11px; padding: 11px 0; border-bottom: 1px solid var(--kp-border); }
.kp-listrow:last-child { border-bottom: none; }
.kp-listrow__icon { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-size: 1rem; flex: none; }
.kp-listrow__body { min-width: 0; flex: 1 1 auto; }
.kp-listrow__title { font-size: .81rem; font-weight: 600; color: var(--kp-text); }
.kp-listrow__meta  { font-size: .73rem; color: var(--kp-text-muted); margin-top: 2px; line-height: 1.4; }
.kp-listrow__right { margin-left: auto; text-align: right; flex: none; }
.kp-listrow__time  { font-size: .7rem; color: var(--kp-text-soft); white-space: nowrap; }
/* Baris dua-baris yang nilainya (nominal / panah) lebih enak rata tengah. */
.kp-listrow--tengah { align-items: center; }
/* Nomor peringkat di tempat ikon (mis. Penyimpan Teratas). */
.kp-peringkat { font-size: .82rem; font-weight: 800; }

/* =====================================================================
   Legend list (donut side legends)
   ===================================================================== */
.kp-legend { display: flex; flex-direction: column; gap: 2px; }
.kp-legend__item { display: flex; align-items: center; gap: 8px; font-size: .78rem; padding: 5px 0; color: var(--kp-text); }
.kp-legend__dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.kp-legend__label { flex: 1 1 auto; min-width: 0; }
.kp-legend__value { color: var(--kp-text-muted); font-weight: 600; white-space: nowrap; }
.kp-legend__value small { display: block; font-weight: 500; font-size: .68rem; color: var(--kp-text-soft); }

/* Donut centre overlay (Apex donuts render their own labels; this is for
   CSS-only conic donuts used in a couple of small widgets) */
.kp-donut { width: 140px; height: 140px; border-radius: 50%; display: grid; place-items: center; position: relative; flex: none; }
.kp-donut::before { content: ""; position: absolute; inset: 26px; background: #fff; border-radius: 50%; }
.kp-donut__label { position: relative; text-align: center; }
.kp-donut__value { font-size: 1.15rem; font-weight: 800; color: var(--kp-text-strong); line-height: 1.1; }
.kp-donut__cap   { font-size: .68rem; color: var(--kp-text-muted); }

/* =====================================================================
   Progress bars
   ===================================================================== */
.kp-bar { height: 7px; border-radius: 999px; background: var(--kp-gray-bg); overflow: hidden; display: flex; }
.kp-bar > span { height: 100%; border-radius: 999px; display: block; background: var(--kp-forest-500); }
.kp-bar--lg { height: 10px; }

/* =====================================================================
   Timeline (Riwayat Aktivitas / History)
   ===================================================================== */
.kp-timeline { position: relative; padding-left: 20px; }
.kp-timeline::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px; background: var(--kp-border); }
.kp-timeline__item { position: relative; display: flex; gap: 12px; padding: 10px 0; }
.kp-timeline__item::before {
    content: ""; position: absolute; left: -19px; top: 16px;
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--kp-forest-500); border: 2px solid #fff; box-shadow: 0 0 0 2px var(--kp-forest-100);
}
.kp-timeline__item--blue::before   { background: var(--kp-info); box-shadow: 0 0 0 2px var(--kp-info-bg); }
.kp-timeline__item--amber::before  { background: var(--kp-warning); box-shadow: 0 0 0 2px var(--kp-warning-bg); }
.kp-timeline__item--purple::before { background: var(--kp-purple); box-shadow: 0 0 0 2px var(--kp-purple-bg); }
.kp-timeline__time { flex: none; width: 92px; font-size: .73rem; color: var(--kp-text-muted); line-height: 1.4; }
.kp-timeline__body { flex: 1 1 auto; min-width: 0; }

/* =====================================================================
   Callout / info banner
   ===================================================================== */
.kp-callout { display: flex; gap: 11px; align-items: flex-start; background: var(--kp-forest-50); border: 1px solid var(--kp-forest-100); border-radius: var(--kp-radius); padding: 13px 15px; font-size: .8rem; color: var(--kp-text); line-height: 1.5; }
.kp-callout i { color: var(--kp-forest-600); font-size: 1.05rem; flex: none; margin-top: 1px; }

/* ---------------------------------------------------------------------
   Halaman Kartu Anggota — kepala kartu berisi pemilih anggota (Select2)
   dan status keanggotaan.
   --------------------------------------------------------------------- */
.kp-kartubar { flex-wrap: wrap; row-gap: 10px; }
.kp-kartubar__pilih { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
/* Tautan verifikasi bisa panjang; dipenggal agar tidak mendorong lebar kartu. */
.kp-kartubar__qr { word-break: break-all; }

/* Select2 disamakan dengan .kp-select (partial Koperasi::partials.select2).
   Kelasnya dipasang lewat opsi selectionCssClass (→ .select2-selection) dan
   dropdownCssClass (→ .select2-dropdown) — select2 4.1 sudah tidak mengenal
   containerCssClass — supaya select2 di halaman Merdeka Base (Manajemen User)
   tidak ikut berubah. Selektornya sengaja berawalan .select2-container--bootstrap-5
   dan cukup panjang: tema bootstrap-5 dimuat SETELAH berkas ini, dan blok
   <style> di layout mengecilkan teks select2 ke .65rem. */
.select2-container--bootstrap-5 .select2-selection--single.kp-select2 {
    display: flex; align-items: center;
    min-height: 38px; padding: 0 32px 0 12px;
    font-family: var(--kp-font); font-size: .82rem; color: var(--kp-text);
    border: 1px solid var(--kp-border-strong); border-radius: var(--kp-radius-sm);
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%23667085'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpolyline%20points%3D'6%209%2012%2015%2018%209'%2F%3E%3C%2Fsvg%3E");
    background-position: right 10px center; background-size: 16px;
}
.select2-container--bootstrap-5 .select2-selection--single.kp-select2 .select2-selection__rendered {
    flex: 1 1 auto; min-width: 0; height: auto; padding: 0;
    font-size: .82rem; line-height: 1.4; color: var(--kp-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.select2-container--bootstrap-5 .select2-selection--single.kp-select2 .select2-selection__rendered .select2-selection__placeholder { color: var(--kp-text-soft); }
/* Kotak pilihan tetap utuh saat terbuka (tema bawaan memotong tepi bawahnya
   untuk menempelkan dropdown); dropdown-nya melayang terpisah di bawah. */
.select2-container--bootstrap-5.select2-container--focus .select2-selection.select2-selection--single.kp-select2,
.select2-container--bootstrap-5.select2-container--open .select2-selection.select2-selection--single.kp-select2 {
    border: 1px solid var(--kp-forest-300); border-radius: var(--kp-radius-sm);
    box-shadow: 0 0 0 3px rgba(46,139,87,.12);
}
.select2-container--bootstrap-5 .select2-dropdown.kp-select2__dropdown.select2-dropdown--below,
.select2-container--bootstrap-5 .select2-dropdown.kp-select2__dropdown.select2-dropdown--above {
    border: 1px solid var(--kp-border); border-radius: var(--kp-radius);
    box-shadow: var(--kp-shadow-lg); font-family: var(--kp-font);
}
.select2-dropdown--below.kp-select2__dropdown { margin-top: 6px; }
.select2-dropdown--above.kp-select2__dropdown { margin-top: -6px; }
.select2-container--bootstrap-5 .select2-dropdown.kp-select2__dropdown .select2-search { padding: 8px; border-bottom: 1px solid var(--kp-border); }
.select2-container--bootstrap-5 .select2-dropdown.kp-select2__dropdown .select2-search .select2-search__field {
    min-height: 36px; padding: 7px 10px 7px 34px;
    font-size: .82rem; color: var(--kp-text);
    border: 1px solid var(--kp-border-strong); border-radius: var(--kp-radius-sm);
    background: #fff url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%2398a2b3'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'11'%20cy%3D'11'%20r%3D'7'%2F%3E%3Cline%20x1%3D'21'%20y1%3D'21'%20x2%3D'16.65'%20y2%3D'16.65'%2F%3E%3C%2Fsvg%3E") no-repeat left 10px center / 16px;
}
.select2-container--bootstrap-5 .select2-dropdown.kp-select2__dropdown .select2-search .select2-search__field:focus {
    border-color: var(--kp-forest-300); box-shadow: 0 0 0 3px rgba(46,139,87,.12);
}
.select2-container--bootstrap-5 .select2-dropdown.kp-select2__dropdown .select2-results__options .select2-results__option {
    padding: 8px 12px; font-size: .82rem; color: var(--kp-text);
}
.select2-container--bootstrap-5 .select2-dropdown.kp-select2__dropdown .select2-results__options .select2-results__option.select2-results__option--selected,
.select2-container--bootstrap-5 .select2-dropdown.kp-select2__dropdown .select2-results__options .select2-results__option[aria-selected="true"]:not(.select2-results__option--highlighted) {
    background: var(--kp-forest-50); color: var(--kp-forest-700); font-weight: 600;
}
.select2-container--bootstrap-5 .select2-dropdown.kp-select2__dropdown .select2-results__options .select2-results__option.select2-results__option--highlighted {
    background: var(--kp-forest-600); color: #fff;
}
.select2-container--bootstrap-5 .select2-dropdown.kp-select2__dropdown .select2-results__options .select2-results__option.select2-results__message {
    padding: 14px 12px; text-align: center; color: var(--kp-text-muted); font-style: italic;
}
/* Pemilih yang dikunci (mis. Kanal pada modal mutasi simpanan) disamakan
   dengan .kp-select:disabled. background-color saja agar panahnya tetap ada. */
.select2-container--bootstrap-5.select2-container--disabled .select2-selection--single.kp-select2 {
    background-color: #f4f6f5; cursor: not-allowed;
}
.select2-container--bootstrap-5.select2-container--disabled .select2-selection--single.kp-select2 .select2-selection__rendered {
    color: var(--kp-text-muted);
}

/* Empty state */
.kp-empty { text-align: center; padding: 26px 16px; }
.kp-empty__icon { width: 52px; height: 52px; border-radius: 14px; margin: 0 auto 12px; display: grid; place-items: center; font-size: 1.5rem; background: var(--kp-forest-50); color: var(--kp-forest-500); }
.kp-empty__title { font-size: .85rem; font-weight: 700; color: var(--kp-text); }
.kp-empty__text  { font-size: .76rem; color: var(--kp-text-muted); margin-top: 4px; line-height: 1.5; }

/* Tips list (checkmark bullets) */
.kp-tips { display: flex; flex-direction: column; gap: 9px; }
.kp-tips__item { display: flex; gap: 8px; align-items: flex-start; font-size: .76rem; color: var(--kp-text); line-height: 1.45; }
.kp-tips__item i { color: var(--kp-forest-500); font-size: .95rem; flex: none; margin-top: 1px; }

/* =====================================================================
   Dashboard
   ===================================================================== */

/* ---- Welcome hero -----------------------------------------------------
   Photo fills the panel; a left-to-right green scrim keeps the copy legible
   over whatever part of the image sits behind it. */
.kp-hero {
    position: relative; overflow: hidden;
    border-radius: var(--kp-radius-lg);
    min-height: 200px; display: flex; align-items: center;
    background-size: cover; background-position: center;
    box-shadow: var(--kp-shadow);
}
.kp-hero::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg,
        rgba(13, 42, 28, .93) 0%,
        rgba(23, 73, 47, .82) 34%,
        rgba(26, 107, 65, .35) 58%,
        rgba(26, 107, 65, 0) 78%);
}
.kp-hero__inner { position: relative; z-index: 2; padding: 30px 34px; max-width: 560px; color: #fff; }
.kp-hero__eyebrow { font-size: .82rem; font-weight: 600; opacity: .92; margin-bottom: 8px; }
.kp-hero__title { font-size: 1.9rem; font-weight: 800; line-height: 1.18; margin: 0; letter-spacing: -.01em; }
.kp-hero__sub { font-size: .92rem; opacity: .9; margin: 12px 0 0; line-height: 1.5; max-width: 380px; }

/* ---- Chart card footer (Net Cash Flow / Selisih) ---------------------- */
.kp-chartfoot {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 13px 18px; border-top: 1px solid var(--kp-border);
    font-size: .82rem; color: var(--kp-text-muted); font-weight: 600;
}
.kp-chartfoot b { font-size: .92rem; color: var(--kp-text-strong); font-weight: 800; }

/* ---- SHU legend: percentage badge + label + amount -------------------- */
.kp-shulegend { display: flex; flex-direction: column; gap: 12px; }
.kp-shulegend__row { display: flex; align-items: center; gap: 11px; }
.kp-shulegend__pct { font-size: .82rem; font-weight: 800; min-width: 34px; flex: none; }
.kp-shulegend__label { font-size: .82rem; font-weight: 700; color: var(--kp-text); line-height: 1.25; }
.kp-shulegend__value { font-size: .74rem; color: var(--kp-text-muted); }

/* ---- Agenda: date chip + detail --------------------------------------- */
.kp-agenda { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--kp-border); }
.kp-agenda:last-child { border-bottom: none; }
.kp-agenda__date {
    width: 46px; flex: none; text-align: center; border-radius: 10px;
    background: var(--kp-forest-50); border: 1px solid var(--kp-forest-100);
    padding: 6px 0; line-height: 1.1;
}
.kp-agenda__day { display: block; font-size: 1.05rem; font-weight: 800; color: var(--kp-forest-700); }
.kp-agenda__month { display: block; font-size: .6rem; font-weight: 700; letter-spacing: .06em; color: var(--kp-forest-500); margin-top: 2px; }
.kp-agenda__title { font-size: .82rem; font-weight: 700; color: var(--kp-text); }
.kp-agenda__meta { font-size: .73rem; color: var(--kp-text-muted); margin-top: 3px; line-height: 1.45; }

/* ---- Approval queue rows ---------------------------------------------- */
.kp-approval { display: flex; align-items: center; gap: 11px; padding: 12px 0; border-bottom: 1px solid var(--kp-border); }
.kp-approval:last-child { border-bottom: none; }
.kp-approval__body { min-width: 0; flex: 1 1 auto; }
.kp-approval__name { font-size: .82rem; font-weight: 700; color: var(--kp-text); }
.kp-approval__meta { font-size: .73rem; color: var(--kp-text-muted); margin-top: 2px; }
.kp-approval__amount { font-size: .78rem; font-weight: 700; color: var(--kp-text); }
.kp-approval__actions { display: flex; gap: 6px; flex: none; }
.kp-approve-btn {
    width: 30px; height: 30px; border-radius: 7px; border: 1px solid transparent;
    display: grid; place-items: center; cursor: pointer; font-size: 1rem;
}
.kp-approve-btn--yes { background: var(--kp-success-bg); color: var(--kp-success-fg); }
.kp-approve-btn--yes:hover { background: var(--kp-success); color: #fff; }
.kp-approve-btn--no { background: var(--kp-danger-bg); color: var(--kp-danger-fg); }
.kp-approve-btn--no:hover { background: var(--kp-danger); color: #fff; }

/* ---- Compact stat card with an inline sparkline ----------------------- */
.kp-sparkstat {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px; border-bottom: 1px solid var(--kp-border);
}
.kp-sparkstat:last-child { border-bottom: none; }
.kp-sparkstat__icon { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-size: 1rem; flex: none; }
.kp-sparkstat__body { min-width: 0; flex: 1 1 auto; }
.kp-sparkstat__label { font-size: .74rem; color: var(--kp-text-muted); font-weight: 500; }
.kp-sparkstat__value { font-size: 1.3rem; font-weight: 800; color: var(--kp-text-strong); line-height: 1.15; }
.kp-sparkstat__sub { font-size: .7rem; color: var(--kp-text-soft); }
.kp-sparkstat__note { font-size: .7rem; margin-top: 2px; }
.kp-sparkstat__chart { width: 84px; flex: none; }

/* ---- News card (Info Operasional) ------------------------------------- */
.kp-newscard__img {
    width: 100%; height: 140px; object-fit: cover;
    border-radius: var(--kp-radius); display: block;
}
.kp-newscard__title { font-size: .9rem; font-weight: 800; color: var(--kp-text-strong); margin: 12px 0 0; line-height: 1.35; }
.kp-newscard__body { font-size: .78rem; color: var(--kp-text-muted); margin: 6px 0 0; line-height: 1.5; }
.kp-newscard__ago { font-size: .7rem; color: var(--kp-text-soft); margin-top: 8px; }

@media (max-width: 1200px) {
    .kp-hero__title { font-size: 1.5rem; }
    .kp-hero::before { background: linear-gradient(90deg, rgba(13,42,28,.94) 0%, rgba(23,73,47,.86) 55%, rgba(26,107,65,.35) 100%); }
}

/* =====================================================================
   Member profile header (detail anggota)
   ===================================================================== */
.kp-profile { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
/* Tumbuh dua kali lebih cepat daripada kolom kanan: sisa ruang lebih berguna
   untuk nama & alamat yang panjang, sedangkan kisi kanan hanya butuh basisnya. */
.kp-profile__id { display: flex; gap: 16px; align-items: flex-start; flex: 2 1 320px; min-width: 0; }
.kp-profile__name { font-size: 1.35rem; font-weight: 800; color: var(--kp-text-strong); margin: 0; display: inline-flex; align-items: center; gap: 10px; }
.kp-profile__code { color: var(--kp-forest-500); font-weight: 700; font-size: .85rem; margin-top: 2px; }
/* Tombol kecil "Ubah Nomor KTA" di samping nomor KTA — hanya untuk peran ber-hak `anggota.nomor`. */
.kp-profile__ubah {
    display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; vertical-align: middle;
    padding: 2px 9px; border: 1px solid var(--kp-border-strong); border-radius: 999px;
    background: #fff; color: var(--kp-text-muted); font-size: .7rem; font-weight: 600; cursor: pointer;
}
.kp-profile__ubah:hover { background: var(--kp-forest-50); border-color: var(--kp-forest-300); color: var(--kp-forest-600); }
.kp-profile__meta { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; }
.kp-profile__meta div { display: flex; align-items: center; gap: 8px; font-size: .78rem; color: var(--kp-text-muted); }
.kp-profile__meta i { font-size: .95rem; color: var(--kp-text-soft); flex: none; }
.kp-profile__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 12px; flex: 1 1 520px; }
/* Nilai rupiah penuh (mis. "Rp 1.000.000") lebih lebar daripada kartu ini,
   sehingga aturan ellipsis pada .kp-mini__value memotongnya menjadi "Rp 1.00...".
   Di panel profil nilainya dibiarkan membungkus, bukan dipotong. */
.kp-profile__stats .kp-mini__value { white-space: normal; overflow: visible; text-overflow: clip; }
/* Kolom kanan kepala profil: kartu statistik di atas, rating di bawahnya.
   Basis 700px = lebar yang benar-benar dibutuhkan empat kartu (4 x 165 + 3 x 12).
   Dengan basis yang lebih kecil, flexbox memberi kolom ini ruang kurang dari
   kebutuhan kisinya, isinya meluap ke kanan, lalu menabrak tombol aksi di
   sebelahnya (pernah terjadi pada layar 1401-1750px). Bila satu baris tidak
   cukup, yang turun adalah tombol aksinya - bukan kisinya yang meluap. */
.kp-profile__sisi { flex: 1 1 700px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
/* Tombol aksi: menempel ke kanan, termasuk ketika turun ke baris berikutnya. */
.kp-profile__aksi { flex: none; margin-left: auto; }
/* Di dalam kolom, flex-basis 520px milik .kp-profile__stats terbaca sebagai TINGGI. */
.kp-profile__sisi > .kp-profile__stats { flex: none; }

/* ---------------------------------------------------------------------
   Rating anggota (partials/anggota-rating): empat donat sejajar dengan
   empat kartu statistik di atasnya — keseluruhan, saldo simpanan,
   kepatuhan pinjaman, kepatuhan iuran wajib.

   Warna cincin = tingkatnya, jalurnya langkah terang dari warna yang sama.
   Keempat warna sudah diuji terpisah di bawah simulasi buta warna (semua
   pasangan ΔE ≥ 8); amber di bawah kontras 3:1 terhadap putih, karena itu
   tingkat selalu ditemani angka skor, ikon, dan labelnya. Teks tetap
   berwarna teks, bukan warna tingkat.
   --------------------------------------------------------------------- */
.kp-rating__kisi { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 12px; }
.kp-rating__butir {
    /* Bawaan = belum dinilai: jalur abu-abu tanpa busur. */
    --kp-rating-isi: var(--kp-text-soft); --kp-rating-jalur: var(--kp-gray-bg); --kp-rating-ikon: var(--kp-text-soft);
    display: flex; align-items: center; gap: 12px; min-width: 0;
    border: 1px solid var(--kp-border); border-radius: var(--kp-radius); padding: 12px 14px;
}
.kp-rating__butir--utama { background: var(--kp-page-bg); }
.kp-rating--sangat_baik { --kp-rating-isi: var(--kp-forest-500); --kp-rating-jalur: var(--kp-forest-100); --kp-rating-ikon: var(--kp-forest-600); }
.kp-rating--baik        { --kp-rating-isi: var(--kp-sky);        --kp-rating-jalur: var(--kp-sky-bg);     --kp-rating-ikon: var(--kp-sky-fg); }
.kp-rating--cukup       { --kp-rating-isi: #f59e0b;              --kp-rating-jalur: var(--kp-warning-bg); --kp-rating-ikon: var(--kp-warning-fg); }
.kp-rating--buruk       { --kp-rating-isi: var(--kp-danger);     --kp-rating-jalur: var(--kp-danger-bg);  --kp-rating-ikon: var(--kp-danger-fg); }
.kp-rating__donat { flex: none; width: 56px; height: 56px; }
.kp-rating__jalur, .kp-rating__isi { fill: none; stroke-width: 3.6; }
.kp-rating__jalur { stroke: var(--kp-rating-jalur); }
.kp-rating__isi { stroke: var(--kp-rating-isi); stroke-linecap: round; }
/* Satuan viewBox (36): 11 ≈ 17px pada donat 56px. */
.kp-rating__angka { font-size: 11px; font-weight: 800; fill: var(--kp-text-strong); }
.kp-rating__teks { min-width: 0; }
.kp-rating__label { font-size: .72rem; color: var(--kp-text-muted); }
.kp-rating__tingkat { display: flex; align-items: center; gap: 5px; margin-top: 1px; font-size: .92rem; font-weight: 800; line-height: 1.25; color: var(--kp-text-strong); }
.kp-rating__tingkat i { flex: none; font-size: 1rem; color: var(--kp-rating-ikon); }
.kp-rating--kosong .kp-rating__tingkat { font-weight: 700; color: var(--kp-text-muted); }
.kp-rating__rinci { margin-top: 2px; font-size: .7rem; line-height: 1.35; color: var(--kp-text-muted); }
.kp-rating__kaki { margin-top: 8px; font-size: .7rem; color: var(--kp-text-muted); }
/* Empat kolom (layar lebar): kartunya sempit — teks di samping donat akan
   terpenggal tiap kata — jadi donat naik ke atas dan teksnya di tengah.
   Di bawah 1400px kisinya dua/satu kolom dan kartunya cukup lebar untuk
   tata letak menyamping di atas. */
@media (min-width: 1401px) {
    .kp-rating__butir { flex-direction: column; gap: 8px; padding: 14px 10px; text-align: center; }
    .kp-rating__donat { width: 64px; height: 64px; }
    .kp-rating__tingkat { justify-content: center; }
}
/* Varian kompak untuk wadah sempit (modal rating di halaman Pengajuan): lebar
   wadahnya tidak mengikuti lebar layar, jadi selalu dua kolom dengan donat di
   samping teks — termasuk di layar lebar, tempat aturan di atas berlaku. */
.kp-rating--kompak .kp-rating__kisi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kp-rating--kompak .kp-rating__butir { flex-direction: row; gap: 12px; padding: 12px 14px; text-align: left; }
.kp-rating--kompak .kp-rating__donat { width: 56px; height: 56px; }
.kp-rating--kompak .kp-rating__tingkat { justify-content: flex-start; }
@media (max-width: 640px) {
    .kp-rating--kompak .kp-rating__kisi { grid-template-columns: minmax(0, 1fr); }
}

/* =====================================================================
   Kartu Anggota (member card preview)
   ===================================================================== */
.kp-memcard {
    position: relative; width: 100%; max-width: 380px; aspect-ratio: 85.6 / 54;
    border-radius: 16px; overflow: hidden; color: #fff;
    background: linear-gradient(135deg, var(--kp-forest-700) 0%, var(--kp-forest-900) 100%);
    box-shadow: var(--kp-shadow-lg); padding: 18px 20px;
    display: flex; flex-direction: column; justify-content: space-between;
}
.kp-memcard::after {
    content: ""; position: absolute; right: -18%; top: -30%; width: 70%; height: 180%;
    background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02));
    border-left: 3px solid var(--kp-gold);
    border-radius: 50% 0 0 50%; transform: rotate(-8deg); pointer-events: none;
}
.kp-memcard--blue { background: linear-gradient(135deg, #1e3a8a 0%, #0f213f 100%); }
.kp-memcard__brand { display: flex; align-items: center; gap: 9px; position: relative; z-index: 2; }
.kp-memcard__brand-mark { width: 26px; height: 26px; border-radius: 7px; background: rgba(255,255,255,.14); display: grid; place-items: center; font-size: .95rem; }
.kp-memcard__brand-text { font-size: .62rem; font-weight: 800; letter-spacing: .04em; line-height: 1.2; }
.kp-memcard__kind { font-size: .82rem; font-weight: 800; letter-spacing: .06em; position: relative; z-index: 2; margin-top: 2px; }
.kp-memcard__no-label { font-size: .55rem; opacity: .75; letter-spacing: .06em; }
.kp-memcard__no { font-size: 1.4rem; font-weight: 800; line-height: 1.1; }
.kp-memcard__name-label { font-size: .55rem; opacity: .75; letter-spacing: .06em; margin-top: 7px; }
.kp-memcard__name { font-size: .95rem; font-weight: 700; }
.kp-memcard__dates { display: flex; gap: 26px; position: relative; z-index: 2; }
.kp-memcard__dates div span { display: block; font-size: .53rem; opacity: .72; letter-spacing: .04em; }
.kp-memcard__dates div b { font-size: .72rem; font-weight: 700; }
.kp-memcard__photo {
    position: absolute; right: 20px; top: 20px; z-index: 3;
    width: 76px; height: 92px; border-radius: 8px; object-fit: cover;
    border: 2px solid rgba(255,255,255,.6); background: var(--kp-forest-100);
}
.kp-memcard__qr {
    position: absolute; right: 20px; bottom: 18px; z-index: 3;
    width: 62px; height: 62px; border-radius: 6px; background: #fff; padding: 4px;
}
.kp-memcard__body { position: relative; z-index: 2; }

/* Template picker swatch */
.kp-template-opt { display: flex; align-items: center; gap: 10px; }
.kp-template-swatch { width: 34px; height: 22px; border-radius: 4px; flex: none; background: linear-gradient(135deg, var(--kp-forest-600), var(--kp-forest-900)); }
.kp-template-swatch--blue { background: linear-gradient(135deg, #2563eb, #0f213f); }

/* =====================================================================
   Emblem koperasi (auth.components.emblem.emblem)
   Warna lewat custom property agar satu SVG bisa dipakai di latar terang
   maupun gelap.
   ===================================================================== */
/* Logo koperasi: gambar PNG berlatar putih di dalam lingkaran putih. */
.kp-emblem {
    display: grid; place-items: center; flex: none;
    border-radius: 50%; overflow: hidden; background: #fff;
}
/* Lambangnya bulat dan PNG-nya sudah bermargin putih, jadi boleh memenuhi lingkaran. */
.kp-emblem img { width: 100%; height: 100%; object-fit: contain; user-select: none; }

/* =====================================================================
   Login page
   Split layout: panel identitas koperasi (kiri) + form di panel putih (kanan).
   Di bawah 992px panel kiri disembunyikan dan diganti .kp-login__mobile-brand.
   ===================================================================== */
.kp-login {
    --kp-login-gold: #e3c983;   /* emas terang — terbaca di atas hijau tua */
    min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(460px, .85fr);
    font-family: var(--kp-font); color: var(--kp-text); background: #fff;
}
.kp-login a:focus-visible, .kp-login button:focus-visible { outline: 2px solid var(--kp-forest-400); outline-offset: 2px; }

/* ---- Panel kiri -------------------------------------------------- */
.kp-login__visual {
    position: relative; isolation: isolate; overflow: hidden;
    display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
    padding: 44px 56px 36px; color: #fff;
    background-color: var(--kp-forest-900); background-size: cover; background-position: center;
}
/* Tint hijau di atas foto agar teks putih selalu terbaca dan panel terasa
   sebagai warna brand, bukan foto. */
.kp-login__visual::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background:
        linear-gradient(0deg, rgba(8, 37, 26, .88) 0%, rgba(8, 37, 26, 0) 40%),
        linear-gradient(115deg, rgba(8, 37, 26, .95) 0%, rgba(13, 42, 28, .78) 45%, rgba(23, 73, 47, .38) 100%);
}

.kp-login__brand { display: flex; align-items: center; gap: 16px; }
.kp-login__brand .kp-emblem { width: 60px; height: 60px; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); border-radius: 50%; }
.kp-login__brand-name { display: block; font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .72); }
.kp-login__brand-name strong { display: block; font-size: 1.55rem; font-weight: 800; letter-spacing: .02em; line-height: 1.1; color: #fff; }
.kp-login__tagline { display: block; margin-top: 3px; font-size: .8rem; font-weight: 500; color: var(--kp-login-gold); }

.kp-login__hero { max-width: 600px; }
.kp-login__eyebrow {
    display: inline-flex; align-items: center; gap: 8px; margin-bottom: 20px;
    padding: 6px 13px; border-radius: var(--kp-radius-pill);
    background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16);
    font-size: .78rem; font-weight: 600; color: #f3e7c4;
}
.kp-login__eyebrow i { font-size: 1rem; color: var(--kp-login-gold); }
.kp-login__headline { font-size: clamp(2.2rem, 3.3vw, 3.25rem); font-weight: 800; line-height: 1.08; letter-spacing: -.02em; margin: 0 0 16px; color: #fff; }
.kp-login__headline span { color: var(--kp-login-gold); }
.kp-login__lead { max-width: 500px; font-size: 1.02rem; line-height: 1.6; color: rgba(255, 255, 255, .8); margin: 0 0 32px; }

.kp-login__pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.kp-login__pillar {
    padding: 16px; border-radius: 14px;
    background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .13);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.kp-login__pillar > i {
    display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 12px;
    border-radius: 10px; background: rgba(227, 201, 131, .16); color: var(--kp-login-gold); font-size: 1.4rem;
}
.kp-login__pillar b { display: block; margin-bottom: 3px; font-size: .9rem; font-weight: 700; color: #fff; }
.kp-login__pillar small { display: block; font-size: .78rem; line-height: 1.45; color: rgba(255, 255, 255, .68); }

.kp-login__contact { display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: .8rem; color: rgba(255, 255, 255, .7); }
.kp-login__contact span { display: inline-flex; align-items: center; gap: 7px; }
.kp-login__contact i { font-size: 1rem; color: var(--kp-login-gold); }

/* ---- Panel kanan (form) ------------------------------------------ */
.kp-login__panel { display: flex; flex-direction: column; padding: 30px 56px 26px; background: #fff; }
.kp-login__form-wrap { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; width: 100%; max-width: 410px; margin: 0 auto; padding: 36px 0; }

.kp-login__mobile-brand { display: none; align-items: center; gap: 12px; margin-bottom: 28px; }
.kp-login__mobile-brand .kp-emblem { width: 46px; height: 46px; }
.kp-login__mobile-brand strong { display: block; font-size: 1.05rem; font-weight: 800; color: var(--kp-forest-700); line-height: 1.2; }
.kp-login__mobile-brand span { display: block; font-size: .76rem; color: var(--kp-text-muted); }

.kp-login__welcome { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--kp-forest-500); }
.kp-login__welcome::before { content: ""; width: 24px; height: 3px; border-radius: 3px; background: var(--kp-gold); }
.kp-login__title { font-size: 1.9rem; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; color: var(--kp-text-strong); margin: 0 0 8px; }
.kp-login__sub { font-size: .92rem; line-height: 1.55; color: var(--kp-text-muted); margin: 0 0 28px; }

.kp-login__alert {
    display: flex; align-items: flex-start; gap: 10px; margin-bottom: 20px; padding: 12px 14px;
    border-radius: 10px; border: 1px solid #fecaca; background: var(--kp-danger-bg); color: var(--kp-danger-fg); font-size: .85rem;
}
.kp-login__alert i { flex: none; margin-top: 1px; font-size: 1.1rem; }

.kp-login__sub b { font-weight: 700; color: var(--kp-forest-700); }

/* Pilihan metode masuk (Kartu Anggota | Email) — radio asli disembunyikan,
   label-nya tampil sebagai kartu pilihan berikon + keterangan agar jelas
   bagi anggota awam. */
.kp-login__switch { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; min-width: 0; margin: 0 0 22px; padding: 0; border: 0; }
.kp-login__switch input { position: absolute; opacity: 0; pointer-events: none; }
.kp-login__switch label {
    position: relative; display: flex; align-items: center; gap: 11px; margin: 0; padding: 12px 14px;
    border: 1.5px solid var(--kp-border-strong); border-radius: 14px; background: #fff; cursor: pointer;
    transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.kp-login__switch label:hover { border-color: var(--kp-forest-300); }
.kp-login__switch-icon {
    flex: none; display: grid; place-items: center; width: 40px; height: 40px;
    border-radius: 11px; background: #f1f4f2; color: var(--kp-text-muted); font-size: 1.35rem;
    transition: background-color .15s, color .15s;
}
.kp-login__switch-text { min-width: 0; }
.kp-login__switch-text b { display: block; font-size: .92rem; font-weight: 700; line-height: 1.2; color: var(--kp-text-strong); }
.kp-login__switch-text small { display: block; margin-top: 2px; font-size: .74rem; color: var(--kp-text-muted); }
.kp-login__switch-check {
    position: absolute; top: 7px; right: 8px; font-size: 1.05rem; color: var(--kp-forest-500);
    opacity: 0; transform: scale(.6); transition: opacity .15s, transform .15s;
}
.kp-login__switch input:checked + label { border-color: var(--kp-forest-500); background: var(--kp-forest-50); box-shadow: 0 0 0 3px rgba(46, 139, 87, .12); }
.kp-login__switch input:checked + label .kp-login__switch-icon { background: var(--kp-forest-600); color: #fff; }
.kp-login__switch input:checked + label .kp-login__switch-check { opacity: 1; transform: scale(1); }
.kp-login__switch input:focus-visible + label { outline: 2px solid var(--kp-forest-400); outline-offset: 2px; }

.kp-login__field { margin-bottom: 18px; }

/* Nomor anggota tampil kapital & renggang seperti di kartu (server juga meng-uppercase). */
.kp-login__input--nomor { text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.kp-login__input--nomor::placeholder { text-transform: none; letter-spacing: normal; font-weight: 400; }

/* Petunjuk letak nomor pada kartu anggota fisik */
.kp-login__cardhint {
    display: flex; align-items: center; gap: 14px; margin-top: 10px; padding: 10px 12px;
    border: 1px solid var(--kp-forest-100); border-radius: 12px; background: var(--kp-forest-50);
}
.kp-login__cardhint[hidden] { display: none; }
.kp-login__cardhint-text { font-size: .82rem; line-height: 1.45; color: #2c4437; }
.kp-login__cardhint-text b { font-weight: 700; color: var(--kp-forest-700); }
.kp-login__minicard {
    position: relative; flex: none; width: 104px; height: 66px; padding: 8px 9px; overflow: hidden;
    border-radius: 8px; background: linear-gradient(135deg, var(--kp-forest-600) 0%, var(--kp-forest-900) 100%);
    box-shadow: 0 4px 10px rgba(8, 37, 26, .25);
}
.kp-login__minicard::before { content: ""; display: block; width: 36px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .55); }
.kp-login__minicard-label { display: block; margin-top: 8px; font-size: 6px; line-height: 1; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .8); }
.kp-login__minicard-no {
    display: inline-block; margin-top: 3px; padding: 1px 4px;
    border: 1.5px dashed var(--kp-login-gold); border-radius: 4px; background: rgba(227, 201, 131, .18);
    font-size: 11px; font-weight: 800; line-height: 1.2; letter-spacing: .02em; color: #fff;
}
.kp-login__minicard-name { display: block; width: 42px; height: 3px; margin-top: 5px; border-radius: 2px; background: rgba(255, 255, 255, .4); }
.kp-login__minicard-photo { position: absolute; top: 8px; right: 8px; width: 18px; height: 22px; border-radius: 3px; background: rgba(255, 255, 255, .25); }
.kp-login__minicard-qr { position: absolute; right: 8px; bottom: 7px; width: 14px; height: 14px; border-radius: 2px; background: rgba(255, 255, 255, .9); }

.kp-login__sso[hidden] { display: none; }
.kp-login__label { display: block; margin-bottom: 7px; font-size: .84rem; font-weight: 600; color: var(--kp-text-strong); }
.kp-login__control { position: relative; }
.kp-login__control-icon {
    position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
    font-size: 1.15rem; color: var(--kp-text-soft); pointer-events: none; transition: color .15s;
}
.kp-login__control:focus-within .kp-login__control-icon { color: var(--kp-forest-500); }
.kp-login__input {
    width: 100%; height: 50px; padding: 0 48px 0 46px;
    border: 1px solid var(--kp-border-strong); border-radius: 12px; background: #f9fbfa;
    font-family: var(--kp-font); font-size: .95rem; color: var(--kp-text); outline: none;
    transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.kp-login__input::placeholder { color: #a7b0ab; }
.kp-login__input:hover { border-color: #c9d2cd; }
.kp-login__input:focus { background: #fff; border-color: var(--kp-forest-400); box-shadow: 0 0 0 4px rgba(46, 139, 87, .14); }
.kp-login__input.is-invalid { border-color: #f3a9a9; background: #fffafa; }
.kp-login__eye {
    position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
    display: grid; place-items: center; width: 36px; height: 36px; padding: 0;
    border: 0; border-radius: 8px; background: none; color: var(--kp-text-soft); font-size: 1.15rem; cursor: pointer;
}
.kp-login__eye:hover { background: var(--kp-forest-50); color: var(--kp-forest-600); }

.kp-login__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 2px 0 24px; font-size: .85rem; }
.kp-login__check { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--kp-text-muted); cursor: pointer; }
.kp-login__check input { width: 16px; height: 16px; margin: 0; accent-color: var(--kp-forest-600); cursor: pointer; }
.kp-login__forgot { font-weight: 600; color: var(--kp-forest-600); text-decoration: none; }
.kp-login__forgot:hover { color: var(--kp-forest-800); text-decoration: underline; }

.kp-login__btn {
    width: 100%; height: 50px; border-radius: 12px; border: 1px solid transparent;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    font-family: var(--kp-font); font-size: .97rem; font-weight: 600; text-decoration: none; cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
}
.kp-login__btn--primary { background: var(--kp-forest-600); color: #fff; box-shadow: 0 10px 22px -10px rgba(26, 107, 65, .7); }
.kp-login__btn--primary:hover { background: var(--kp-primary-hover); color: #fff; }
.kp-login__btn--primary i { font-size: 1.15rem; transition: transform .15s; }
.kp-login__btn--primary:hover i { transform: translateX(3px); }

.kp-login__divider { display: flex; align-items: center; gap: 14px; margin: 24px 0; font-size: .8rem; color: var(--kp-text-soft); }
.kp-login__divider::before, .kp-login__divider::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--kp-border); }

.kp-login__sso-row { display: flex; gap: 12px; }
.kp-login__btn--sso { flex: 1 1 0; height: 48px; background: #fff; color: var(--kp-text); border-color: var(--kp-border-strong); font-weight: 500; }
.kp-login__btn--sso:hover { color: var(--kp-text); border-color: #c3cec8; background: #fbfdfc; box-shadow: var(--kp-shadow-md); }
.kp-login__btn--sso img { width: 20px; height: 20px; object-fit: contain; }

.kp-login__note { margin: 24px 0 0; text-align: center; font-size: .84rem; color: var(--kp-text-muted); }
.kp-login__note b { font-weight: 700; color: var(--kp-forest-700); }
.kp-login__copy { text-align: center; font-size: .75rem; color: var(--kp-text-soft); }

@media (max-width: 1279.98px) {
    .kp-login { grid-template-columns: minmax(0, 1fr) minmax(430px, 1fr); }
    .kp-login__visual { padding: 36px 40px 30px; }
    .kp-login__panel { padding: 26px 40px 22px; }
    .kp-login__pillars { grid-template-columns: 1fr; gap: 10px; }
    .kp-login__pillar { display: flex; align-items: center; gap: 14px; padding: 12px 14px; }
    .kp-login__pillar > i { margin-bottom: 0; flex: none; }
}
@media (max-width: 991.98px) {
    .kp-login { grid-template-columns: 1fr; }
    .kp-login__visual { display: none; }
    .kp-login__mobile-brand { display: flex; }
    .kp-login__panel { min-height: 100vh; padding: 20px 16px; background: linear-gradient(180deg, var(--kp-forest-50) 0, #fff 260px); }
    .kp-login__form-wrap { padding: 28px 0; }
}
@media (max-width: 420px) {
    .kp-login__title { font-size: 1.6rem; }
    /* Kartu pilihan terlalu sempit untuk ikon + teks berdampingan. */
    .kp-login__switch label { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; }
    .kp-login__minicard { width: 88px; height: 56px; }
}

/* =====================================================================
   Topbar bits used by the shared navbar
   ===================================================================== */
.kp-topsearch {
    display: flex; align-items: center; gap: 9px;
    background: #f4f6f5; border: 1px solid var(--kp-border);
    border-radius: var(--kp-radius-pill);
    padding: 7px 8px 7px 15px; min-width: 300px; color: var(--kp-text-soft);
}
.kp-topsearch input { border: none; background: none; outline: none; font-size: .82rem; width: 100%; color: var(--kp-text); font-family: var(--kp-font); }
.kp-topsearch kbd {
    background: #fff; border: 1px solid var(--kp-border-strong); border-radius: 6px;
    font-size: .68rem; padding: 3px 7px; color: var(--kp-text-muted); font-family: var(--kp-font); flex: none;
}
.kp-iconbtn {
    position: relative; width: 36px; height: 36px; border-radius: 50%;
    display: grid; place-items: center;
    background: #fff; border: 1px solid var(--kp-border);
    color: var(--kp-text-muted); font-size: 1.15rem; cursor: pointer;
}
.kp-iconbtn:hover { background: var(--kp-forest-50); color: var(--kp-forest-600); }
.kp-iconbtn__badge {
    position: absolute; top: -4px; right: -4px;
    min-width: 17px; height: 17px; padding: 0 4px;
    background: var(--kp-danger); color: #fff;
    border-radius: 999px; font-size: .6rem; font-weight: 700;
    display: grid; place-items: center; border: 2px solid #fff;
}

/* The sidebar itself is stock Tabler — this theme only re-tints its active
   states (see the Tabler re-tint block near the top of this file). */

/* =====================================================================
   Responsive
   ===================================================================== */
/* Six tiles need ~150px each to hold a rupiah amount on one line; below that
   they fold to three, then two, rather than shrinking the type further. */
@media (max-width: 1600px) {
    .kp-stats--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Kisi KPI di DALAM kartu (Tagihan Anggota pada Dashboard Pengurus) hanya
   selebar kolom induknya, bukan selebar halaman: empat kartu berjajar di
   layar laptop tinggal ±170px dan nominalnya terpotong ("Rp 50....").
   Di bawah 1201px aturan umum sudah menjadikannya dua kolom. */
@media (min-width: 1201px) and (max-width: 1600px) {
    .kp-card__body > .kp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1400px) {
    .kp-stats--5, .kp-minicards--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .kp-profile__stats, .kp-rating__kisi { grid-template-columns: repeat(2, minmax(150px, 1fr)); }
}
@media (max-width: 1200px) {
    .kp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kp-stats--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kp-minicards, .kp-minicards--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kp-login__main { grid-template-columns: 1fr; padding: 32px; }
    .kp-login__card { justify-self: center; }
    .kp-login__headline { font-size: 2.4rem; }
}
@media (max-width: 992px) {
    /* nowrap wajib: pada flex kolom yang masih `wrap`, lebar tiap "baris"
       mengikuti isi terlebarnya (tabel) — bukan lebar layar — sehingga seluruh
       halaman meluber ke samping. `!important` menimpa flex-basis yang ditulis
       inline di view (mis. `flex:1 1 70%`, `flex:0 0 260px`), yang pada arah
       kolom akan terbaca sebagai TINGGI. */
    .kp-row { flex-direction: column; flex-wrap: nowrap; }
    .kp-row > * { flex: 0 0 auto !important; max-width: none !important; min-width: 0; }
    .kp-formgrid { grid-template-columns: 1fr; }
    /* Kisi label–nilai tetap dua kolom di layar sempit: isinya pendek, dan satu
       kolom membuat kartu rincian dua kali lebih panjang. minmax(0,…) supaya
       nilai panjang membungkus di dalam kolomnya, bukan melebarkan kisi. */
    .kp-infogrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kp-info__value { overflow-wrap: anywhere; }
    /* Kisi satu kolom: kotak foto ikut mengalir, bukan dipaksa ke kolom 2. */
    .kp-formgrid__foto { grid-column: auto; grid-row: auto; }
    .kp-fotoup__frame { min-height: 240px; }
    .kp-profile__stats, .kp-rating__kisi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    /* Kisi KPI, kepala halaman, dan tombolnya diatur di bagian
       "Tampilan ponsel & tablet" pada akhir berkas. */
    .kp-login__card { padding: 28px 22px; }
    .kp-login__headline { font-size: 2rem; }
    .kp-profile__stats, .kp-rating__kisi { grid-template-columns: 1fr; }
}

/* Print — member card page */
@media print {
    .kp-noprint, .navbar, .navbar-vertical, .footer, header.navbar { display: none !important; }
    .page-wrapper { margin-left: 0 !important; }

    /* Notifikasi SweetAlert tidak boleh ikut tercetak — popup-nya berada di
       luar .kp-screenonly (ditempel langsung ke <body>), jadi tanpa aturan ini
       hasil cetak berisi popup, bukan isi halaman. Kelas swal2-shown juga
       mengunci scroll <html>/<body> sehingga isi halaman bisa terpotong. */
    .swal2-container, .swal2-backdrop-show { display: none !important; }
    html.swal2-shown, body.swal2-shown, body.swal2-height-auto {
        overflow: visible !important;
        height: auto !important;
    }
}

/* =====================================================================
   Kartu anggota — lembar cetak
   Lembar ini tersembunyi di layar dan hanya muncul saat mencetak, sementara
   seluruh antarmuka (.kp-screenonly) disembunyikan. Ukurannya mengikuti
   standar ID-1 / CR80 sehingga hasil cetak sesuai kartu fisik.
   ===================================================================== */
.kp-printsheet { display: none; }

@media print {
    .kp-screenonly { display: none !important; }

    .kp-printsheet {
        display: flex !important;
        flex-wrap: wrap;
        align-content: flex-start;
        gap: 8mm;
    }
    .kp-printsheet .kp-memcard {
        width: 85.6mm;
        max-width: 85.6mm;
        border-radius: 3mm;
        box-shadow: none;
        break-inside: avoid;
        page-break-inside: avoid;
        /* Gradien dan warna kartu harus tetap tercetak, bukan dipucatkan. */
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    @page { margin: 12mm; }
}

/* =====================================================================
   Utilitas tambahan
   ===================================================================== */
.kp-text-right { text-align: right; }

/* ---------------------------------------------------------------------
   Pemilih periode (panah bulan + isian bulan & tahun).

   Dibuat menonjol sebagai satu pil bertumpu latar hijau muda, karena inilah
   kendali utama tabel: seluruh isi tabel dan KPI mengikuti periode di sini.
   --------------------------------------------------------------------- */
.kp-periode {
    display: inline-flex; align-items: center; gap: 4px; flex: none;
    padding: 4px 4px 4px 11px;
    background: var(--kp-forest-50);
    border: 1px solid var(--kp-forest-200);
    border-radius: 999px;
}
.kp-periode__ikon {
    display: inline-flex; margin-right: 2px;
    color: var(--kp-forest-600); font-size: 1.05rem;
}
.kp-periode .kp-select {
    border: 0; background-color: transparent; box-shadow: none;
    min-height: 32px; padding: 4px 26px 4px 8px;
    font-size: .85rem; font-weight: 700; color: var(--kp-forest-700);
    /* Panah hijau agar menyatu dengan pilnya, bukan abu bawaan .kp-select. */
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'%231a6b41'%20stroke-width%3D'2.5'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpolyline%20points%3D'6%209%2012%2015%2018%209'%2F%3E%3C%2Fsvg%3E");
    background-position: right 6px center; background-size: 14px;
    min-width: 0; cursor: pointer;
}
.kp-periode .kp-select:hover { background-color: rgba(255, 255, 255, .7); border-radius: 8px; }
.kp-periode .kp-select:focus { background-color: #fff; border-radius: 8px; box-shadow: 0 0 0 3px rgba(26, 107, 65, .16); }
.kp-periode select[name="bulan"] { width: 132px; }
.kp-periode select[name="tahun"] { width: 92px; }
.kp-periode__nav {
    width: 32px; height: 32px; flex: none; border-radius: 50%;
    display: inline-grid; place-items: center;
    background: #fff; border: 1px solid var(--kp-forest-200);
    color: var(--kp-forest-700); font-size: 1.05rem;
    transition: background-color .15s, color .15s, border-color .15s;
}
.kp-periode__nav:hover {
    background: var(--kp-forest-600); border-color: var(--kp-forest-600); color: #fff;
}
.kp-periode__nav:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(26, 107, 65, .2); }

/* Tombol peringatan — dipakai saat isinya memang perlu ditindaklanjuti,
   mis. "Tunggakan" pada halaman Iuran Wajib ketika ada anggota menunggak. */
.kp-btn--danger {
    background: var(--kp-danger-bg); border-color: #f4c7c7; color: var(--kp-danger-fg);
}
.kp-btn--danger:hover { background: #fcd8d8; border-color: #efb2b2; color: #991b1b; }
/* Angka kecil di dalam tombol (jumlah anggota menunggak). */
.kp-btn__hitung {
    display: inline-grid; place-items: center; min-width: 20px; height: 20px;
    padding: 0 6px; margin-left: 2px; border-radius: 999px;
    background: var(--kp-danger); color: #fff;
    font-size: .68rem; font-weight: 800; line-height: 1;
}

/* Varian callout untuk peringatan (mis. iuran wajib sedang nonaktif). */
.kp-callout--warning {
    background: var(--kp-warning-bg);
    border-color: #f3d9a4;
    color: var(--kp-warning-fg);
}

/* =====================================================================
   Invoice iuran wajib — tampil sebagai pratinjau di layar, dan menjadi
   satu-satunya isi saat dicetak (sisanya disembunyikan @media print umum).
   ===================================================================== */
.kp-invoice {
    background: #fff; border: 1px solid var(--kp-border);
    border-radius: var(--kp-radius-lg); box-shadow: var(--kp-shadow-sm);
    padding: 28px 30px; max-width: 900px; margin: 0 auto;
}
.kp-invoice__head {
    display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
    padding-bottom: 18px; border-bottom: 2px solid var(--kp-forest-600);
}
.kp-invoice__brand { font-size: 1.05rem; font-weight: 800; color: var(--kp-forest-700); }
.kp-invoice__meta { font-size: .76rem; color: var(--kp-text-muted); line-height: 1.6; }
.kp-invoice__title { text-align: right; }
.kp-invoice__label {
    font-size: .7rem; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--kp-text-muted); margin-bottom: 4px;
}
.kp-invoice__no { font-size: 1.15rem; font-weight: 800; color: var(--kp-text-strong); margin-bottom: 6px; }
.kp-invoice__party { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 18px 0; }
.kp-invoice__nama { font-size: .95rem; font-weight: 700; color: var(--kp-text); }
.kp-invoice__baris {
    display: flex; justify-content: space-between; gap: 24px;
    font-size: .8rem; padding: 3px 0; min-width: 250px;
}
.kp-invoice__baris span { color: var(--kp-text-muted); }
.kp-invoice__tabel { margin-top: 6px; }
.kp-invoice__tabel tfoot td { background: #f8faf9; font-weight: 700; }
.kp-invoice__sisa td {
    font-size: .92rem; font-weight: 800;
    color: var(--kp-forest-700); background: var(--kp-forest-50) !important;
}
.kp-invoice__bagian { margin-top: 22px; }
.kp-invoice__catatan {
    margin-top: 22px; padding: 12px 14px; font-size: .8rem;
    background: var(--kp-forest-50); border-radius: var(--kp-radius-sm);
}
.kp-invoice__catatan p { margin: 0; color: var(--kp-text); }
.kp-invoice__ttd {
    display: flex; justify-content: space-between; align-items: flex-end;
    gap: 24px; flex-wrap: wrap; margin-top: 28px;
}
.kp-invoice__ttd-kotak { text-align: center; min-width: 200px; font-size: .8rem; }
.kp-invoice__ttd-garis { height: 52px; border-bottom: 1px solid var(--kp-border-strong); margin-bottom: 6px; }

@media print {
    /* Kertas sudah menjadi bingkainya, jadi kartunya dilepas saat dicetak. */
    .kp-invoice { border: 0; box-shadow: none; padding: 0; max-width: none; }
    .kp-invoice__sisa td { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* =====================================================================
   Kartu profil "Informasi Saya" (anggota/saya.blade.php)

   Satu panel hero hijau yang utuh — foto, identitas, dan ringkasan
   keanggotaan duduk di atas latar yang sama (mengikuti warna KTA), lalu
   info kontak sebagai petak ikon di bawahnya. Tidak ada elemen yang
   menumpang di sambungan dua latar, supaya susunannya terbaca rapi.
   ===================================================================== */
.kp-mecard {
    background: #fff; border: 1px solid var(--kp-border);
    border-radius: var(--kp-radius-lg); box-shadow: var(--kp-shadow);
    overflow: hidden;
}
.kp-mecard__hero {
    display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
    padding: 24px 26px;
    color: #fff;
    /* Tekstur titik halus di atas gradasi: dekoratif tapi jelas disengaja. */
    background:
        radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1.4px) 0 0 / 16px 16px,
        linear-gradient(120deg, var(--kp-forest-800) 0%, var(--kp-forest-600) 60%, var(--kp-forest-500) 100%);
}
.kp-mecard__foto {
    flex: none; width: 92px; height: 92px; border-radius: 50%; overflow: hidden;
    border: 3px solid rgba(255, 255, 255, .85);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
    background: var(--kp-forest-100);
    display: grid; place-items: center;
}
.kp-mecard__foto img { width: 100%; height: 100%; object-fit: cover; }
.kp-mecard__foto span { font-size: 2.1rem; font-weight: 800; color: var(--kp-forest-700); }
.kp-mecard__identitas { flex: 1 1 280px; min-width: 0; }
.kp-mecard__nama {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
    margin: 0 0 8px; font-size: 1.45rem; font-weight: 800; line-height: 1.2;
    color: #fff;
}
.kp-mecard__sub { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.kp-mecard__no {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: 999px;
    background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .24);
    font-size: .8rem; font-weight: 800; letter-spacing: .03em;
}
.kp-mecard__koperasi { font-size: .78rem; color: rgba(255, 255, 255, .75); }

/* Ringkasan di kanan: dua blok transparan yang sejajar dengan identitas. */
.kp-mecard__stat { flex: none; display: flex; gap: 10px; }
.kp-mecard__statitem {
    display: flex; flex-direction: column; gap: 2px;
    min-width: 150px; padding: 10px 14px; border-radius: var(--kp-radius);
    background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18);
}
.kp-mecard__statlabel {
    font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    color: rgba(255, 255, 255, .7);
}
.kp-mecard__statnilai { font-size: 1rem; font-weight: 800; color: #fff; }

.kp-mecard__petak { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kp-mecard__item { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 16px 22px; }
.kp-mecard__item + .kp-mecard__item { border-left: 1px solid var(--kp-border); }
.kp-mecard__ikon {
    flex: none; width: 38px; height: 38px; border-radius: 11px;
    display: grid; place-items: center; font-size: 1.1rem;
}
.kp-mecard__teks { display: flex; flex-direction: column; min-width: 0; }
.kp-mecard__item-label { font-size: .7rem; font-weight: 600; color: var(--kp-text-muted); }
/* Membungkus, bukan dipotong "…": email panjang harus tetap terbaca utuh. */
.kp-mecard__item-nilai {
    font-size: .86rem; font-weight: 700; color: var(--kp-text);
    overflow-wrap: anywhere;
}
.kp-mecard__item-nilai--kosong { font-weight: 500; font-style: italic; color: var(--kp-text-soft); }

@media (max-width: 1100px) {
    .kp-mecard__stat { width: 100%; }
    .kp-mecard__statitem { flex: 1 1 0; }
    .kp-mecard__petak { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kp-mecard__item:nth-child(3) { border-left: 0; }
    .kp-mecard__item:nth-child(n + 3) { border-top: 1px solid var(--kp-border); }
}
@media (max-width: 640px) {
    .kp-mecard__hero { padding: 20px; }
    .kp-mecard__statitem { min-width: 0; }
    .kp-mecard__petak { grid-template-columns: minmax(0, 1fr); }
    .kp-mecard__item + .kp-mecard__item { border-left: 0; border-top: 1px solid var(--kp-border); }
}

/* =====================================================================
   Pinjaman Saya (pinjaman/saya.blade.php)

   Satu blok per pinjaman milik anggota: identitas, angka pokok, lalu
   progres pelunasan — mengikuti mockup "Ringkasan tabs pinjaman anggota".
   ===================================================================== */
.kp-pinjamanku { padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; }
.kp-pinjamanku + .kp-pinjamanku { border-top: 1px solid var(--kp-border); }
.kp-pinjamanku__head { display: flex; align-items: center; gap: 12px; }
.kp-pinjamanku__id { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.kp-pinjamanku__link { flex: none; display: inline-flex; align-items: center; gap: 4px; }
.kp-pinjamanku__angka { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.kp-pinjamanku__progres {
    padding: 12px 14px; border-radius: var(--kp-radius);
    background: var(--kp-gray-bg);
}
.kp-pinjamanku__nilai { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; font-size: .86rem; }
.kp-pinjamanku__progres .kp-bar { background: #fff; }

/* Tagihan berikutnya: nominal besar + tanggal jatuh tempo. */
.kp-tagihanku { display: flex; align-items: center; gap: 12px; }
.kp-tagihanku .kp-mini__icon { width: 44px; height: 44px; border-radius: 12px; font-size: 1.25rem; }
.kp-tagihanku__nilai { font-size: 1.35rem; font-weight: 800; line-height: 1.2; color: var(--kp-text-strong); }

@media (max-width: 1200px) {
    .kp-pinjamanku__angka { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .kp-pinjamanku__head { flex-wrap: wrap; }
    .kp-pinjamanku__link { margin-left: 46px; }
    .kp-pinjamanku__nilai { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}

/* =====================================================================
   Keuangan — pemasukan & pengeluaran kas (keuangan/*.blade.php)
   ===================================================================== */
/* Varian callout untuk keadaan batal / galat. */
.kp-callout--danger { background: var(--kp-danger-bg); border-color: #fbc7c7; color: var(--kp-danger-fg); }
.kp-callout--danger i { color: var(--kp-danger-fg); }

/* Penanda "(opsional)" di sebelah label isian. */
.kp-opsional { font-weight: 500; color: var(--kp-text-soft); }

/* Rekap per kategori: nama + nilai, lalu batang porsinya. */
.kp-kaskat { display: flex; flex-direction: column; gap: 14px; }
.kp-kaskat__head { display: flex; align-items: center; gap: 8px; font-size: .8rem; margin-bottom: 6px; }
.kp-kaskat__head i { flex: none; font-size: 1rem; }
.kp-kaskat__label { flex: 1 1 auto; min-width: 0; font-weight: 600; color: var(--kp-text); }
.kp-kaskat__nilai { flex: none; font-weight: 700; color: var(--kp-text); white-space: nowrap; }
.kp-kaskat__meta { font-size: .7rem; color: var(--kp-text-soft); margin-top: 4px; }

/* Ikon lampiran pada tabel daftar. */
.kp-kaslampiran { display: inline-flex; gap: 4px; }
.kp-kaslampiran .kp-rowbtn { width: 28px; height: 28px; }

/* Modal Detail. */
.kp-kasdetail__kepala { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 18px; margin-bottom: 16px; }
.kp-kasdetail__kepala > div:first-child { flex: 1 1 260px; min-width: 0; }
.kp-kasdetail__jumlah { font-size: 1.6rem; font-weight: 800; line-height: 1.2; color: var(--kp-text-strong); }
.kp-kasdetail__jumlah--pemasukan { color: var(--kp-success-fg); }
.kp-kasdetail__jumlah--pengeluaran { color: #c2410c; }
.kp-kasdetail__label { font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--kp-text-soft); margin-bottom: 6px; }
.kp-kasdetail__teks { white-space: pre-line; word-break: break-word; font-size: .84rem; line-height: 1.6; color: var(--kp-text); }
.kp-kasdetail__info td:first-child { width: 38%; color: var(--kp-text-muted); }
.kp-kasdetail__info td { white-space: normal; word-break: break-word; }
.kp-kasdetail__berkas + .kp-kasdetail__berkas { margin-top: 14px; }
.kp-kasdetail__img { display: block; width: 100%; max-height: 260px; object-fit: contain; border: 1px solid var(--kp-border); border-radius: 8px; background: #fff; }

/* ---------- Ahli Waris (Anggota › Ahli Waris) ---------- */
.kp-waris-ikon { width: 52px; height: 52px; flex: none; border-radius: 14px; display: grid; place-items: center; font-size: 1.6rem; background: var(--kp-forest-50); color: var(--kp-forest-600); }
.kp-waris-placeholder { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border: 1px dashed var(--kp-border-strong); border-radius: var(--kp-radius); font-size: .8rem; color: var(--kp-text-muted); }
.kp-waris-placeholder > i { font-size: 1.3rem; color: var(--kp-text-soft); }
.kp-waris-pewaris { border: 1px solid var(--kp-border); border-radius: var(--kp-radius); padding: 16px; background: #fbfcfb; }
.kp-waris-pewaris__profil { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.kp-waris-pewaris__nama { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 1rem; font-weight: 700; color: var(--kp-text-strong); }
.kp-waris-alih { border-top: 1px solid var(--kp-border); padding-top: 12px; }
.kp-waris-alih__judul { display: flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 700; color: var(--kp-forest-600); }
.kp-waris-alih__grup { margin-top: 10px; font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--kp-text-soft); }
.kp-waris-alih__baris { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px dashed var(--kp-border); font-size: .8rem; }
.kp-waris-alih__baris > b { white-space: nowrap; }
.kp-waris-alih__kosong { padding: 6px 0; font-size: .78rem; color: var(--kp-text-muted); }
.kp-waris-dok ol, .kp-waris-alur { margin: 6px 0 0; padding-left: 18px; font-size: .78rem; line-height: 1.55; color: var(--kp-text); }
.kp-waris-alur li + li, .kp-waris-dok li + li { margin-top: 6px; }
.kp-waris-panah { width: 28px; padding-left: 0 !important; padding-right: 0 !important; text-align: center; color: var(--kp-text-soft); }
.kp-waris-ktp { padding: 14px 16px; border: 1px solid var(--kp-border); border-radius: var(--kp-radius); background: #fbfcfb; }
/* KTP & KK berdampingan: kedua kotak setinggi kolom terpanjang. */
.kp-row > .kp-col > .kp-waris-ktp { height: 100%; }
.kp-waris-ringkas { display: flex; align-items: center; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--kp-border); }
.kp-waris-ringkas > div { flex: 1 1 0; min-width: 0; }
.kp-waris-ringkas__panah { flex: none; font-size: 1.3rem; color: var(--kp-forest-500); }

/* Wizard bertahap (form Daftarkan Ahli Waris). Garis penghubung digambar
   ::after tiap langkah kecuali yang terakhir; hijau bila langkahnya selesai. */
.kp-wizard { display: flex; margin: 0; padding: 0; list-style: none; }
.kp-wizard__item { flex: 1 1 0; position: relative; min-width: 0; }
.kp-wizard__item:not(:last-child)::after { content: ''; position: absolute; top: 18px; left: calc(50% + 26px); right: calc(-50% + 26px); height: 2px; border-radius: 2px; background: var(--kp-border-strong); }
.kp-wizard__item--selesai:not(:last-child)::after { background: var(--kp-forest-500); }
.kp-wizard__tombol { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; padding: 0 6px; border: 0; background: none; font: inherit; text-align: center; cursor: pointer; }
.kp-wizard__tombol:disabled { cursor: default; }
.kp-wizard__bulat { width: 38px; height: 38px; margin-bottom: 4px; border-radius: 50%; display: grid; place-items: center; font-size: .9rem; font-weight: 700; background: #fff; border: 2px solid var(--kp-border-strong); color: var(--kp-text-muted); transition: background .15s, border-color .15s; }
.kp-wizard__centang { display: none; font-size: 1.1rem; }
.kp-wizard__item--aktif .kp-wizard__bulat { background: var(--kp-forest-600); border-color: var(--kp-forest-600); color: #fff; box-shadow: 0 0 0 4px var(--kp-forest-50); }
.kp-wizard__item--selesai .kp-wizard__bulat { background: var(--kp-forest-50); border-color: var(--kp-forest-500); color: var(--kp-forest-600); }
.kp-wizard__item--selesai .kp-wizard__angka { display: none; }
.kp-wizard__item--selesai .kp-wizard__centang { display: block; }
.kp-wizard__judul { font-size: .82rem; font-weight: 700; color: var(--kp-text-muted); }
.kp-wizard__item--aktif .kp-wizard__judul, .kp-wizard__item--selesai .kp-wizard__judul { color: var(--kp-text-strong); }
.kp-wizard__sub { font-size: .7rem; color: var(--kp-text-soft); }
.kp-wizard__tombol:focus-visible { outline: 2px solid var(--kp-forest-500); outline-offset: 4px; border-radius: 8px; }
.kp-wizard-nav { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }

/* NIK pegawai (SOP No. 8, YYYY.MM.G.NNN): pratinjau berketerangan per ruas di
   form Tambah Pegawai, dan sel NIK di daftar Karyawan. Ruas yang belum terisi
   memakai warna redup (bukan hanya warna: teks penanda YYYY/MM/G/NNN). */
.kp-nik { padding: 14px 16px; border: 1px dashed var(--kp-forest-500); border-radius: 12px; background: var(--kp-forest-50); }
.kp-nik__judul { margin-bottom: 8px; font-size: .78rem; font-weight: 700; color: var(--kp-text-muted); }
.kp-nik__ruas { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 2px 6px; }
.kp-nik__bagian { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.kp-nik__angka, .kp-nik__titik { font-size: 1.4rem; font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; }
.kp-nik__angka { letter-spacing: .04em; color: var(--kp-text-strong); }
.kp-nik__bagian--kosong .kp-nik__angka, .kp-nik__titik { color: var(--kp-text-soft); }
.kp-nik__ket { font-size: .66rem; color: var(--kp-text-muted); white-space: nowrap; }
.kp-nik__catatan { margin-top: 8px; font-size: .72rem; color: var(--kp-text-muted); }
.kp-nik-sel { font-weight: 700; color: var(--kp-text-strong); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 640px) {
    /* Keempat ruas tetap satu baris pada lebar 360px. */
    .kp-nik { padding: 12px; }
    .kp-nik__ruas { flex-wrap: nowrap; gap: 2px 3px; }
    .kp-nik__angka, .kp-nik__titik { font-size: 1.15rem; }
    .kp-nik__ket { font-size: .58rem; }
}

/* =====================================================================
   Tampilan ponsel & tablet

   Diletakkan paling akhir supaya menang atas aturan dasar komponen di
   atasnya tanpa menaikkan spesifisitas. Titik hentinya:

     ≤ 991.98px  sidebar berubah menjadi bilah atas (mengikuti
                 `navbar-expand-lg` milik Tabler) dan topbar disembunyikan;
                 baris kartu `.kp-row` turun menjadi satu kolom.
     ≤ 640px     ponsel: kisi KPI dua kolom, filter & tombol selebar layar,
                 jarak dalam kartu dirapatkan, sasaran sentuh diperbesar.

   Tampilan ≥ 992px tidak disentuh bagian ini.
   ===================================================================== */
:root { --kp-mobilebar-h: 56px; }

/* Tabel selalu menggulir di dalam kartunya sendiri, dengan momentum di iOS. */
.kp-table-wrap { -webkit-overflow-scrolling: touch; }

/* Tautan "Kembali" versi ponsel (main/index.blade.php). Di layar lebar tombol
   kembalinya ada di topbar, jadi tautan ini berkelas d-lg-none. */
.kp-mobileback {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
    font-family: var(--kp-font); font-size: .82rem; font-weight: 600;
    color: var(--kp-forest-600); text-decoration: none;
}
.kp-mobileback i { font-size: 1.05rem; }
.kp-mobileback + .kp-app { padding-top: 8px; }

/* Sasaran gulir otomatis di ponsel (partial pengaturan/navigasi): berhenti di
   bawah bilah atas yang menempel, bukan tertutup olehnya. */
[data-kp-isi-pengaturan] { scroll-margin-top: calc(var(--kp-mobilebar-h) + 12px); }

@media (max-width: 991.98px) {
    /* ---- Bilah atas: tombol menu · nama koperasi · avatar akun ----------
       Menempel di atas layar agar menu selalu terjangkau. `overflow` harus
       visible (skrip sidebar menyetel overflow-y:auto secara inline) — tanpa
       itu dropdown akun terpotong di dalam bilah. */
    .navbar-vertical.navbar-expand-lg {
        position: sticky; top: 0; z-index: 1030;
        min-height: 0; padding: 0;
        border-right: 0; border-bottom: 1px solid var(--tblr-border-color);
        overflow: visible !important;
    }
    .navbar-vertical.navbar-expand-lg > .container-fluid {
        min-height: var(--kp-mobilebar-h); padding: 0; gap: 0;
    }
    .navbar-vertical .navbar-toggler {
        order: 1; flex: none; display: grid; place-items: center;
        width: 40px; height: 40px; margin: 0 4px 0 8px; padding: 0; border-radius: 10px;
    }
    .navbar-vertical .navbar-toggler:hover,
    .navbar-vertical .navbar-toggler[aria-expanded="true"] { background: var(--kp-forest-50); }
    .navbar-vertical .kp-brand {
        order: 2; flex: 1 1 0; width: auto; min-width: 0;
        height: var(--kp-mobilebar-h) !important; min-height: 0;
        padding: 0 !important; background-color: transparent;
    }
    .navbar-vertical .kp-brand > a { min-width: 0; }
    .kp-brand__text { min-width: 0; }
    .kp-brand__line1, .kp-brand__line2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .kp-brand__line1 { font-size: .62rem; }
    .kp-brand__line2 { font-size: .9rem; }
    .kp-brand__tagline { display: none; }
    .kp-mobileuser { order: 3; flex: none; margin: 0 12px 0 8px; }
    .kp-mobileuser > a { border-radius: 50%; }
    .kp-mobileuser > a:focus-visible { outline: 2px solid var(--kp-forest-400); outline-offset: 2px; }

    /* Daftar menu: selebar layar di bawah bilah, menggulir sendiri bila lebih
       tinggi dari layar (bilahnya sticky, jadi tanpa batas tinggi menu paling
       bawah tidak akan pernah terjangkau). */
    .navbar-vertical.navbar-expand-lg > .container-fluid > .navbar-collapse {
        order: 4; flex: 0 0 100%;
        max-height: calc(100vh - var(--kp-mobilebar-h));
        max-height: calc(100dvh - var(--kp-mobilebar-h));
        overflow-y: auto; overscroll-behavior: contain;
        border-top: 1px solid var(--kp-border);
    }
    .nav-menu-app { padding: 8px 0 14px; }
    /* Ikon menu membawa utilitas `d-md-none d-lg-inline-block` (bawaan Tabler
       untuk navbar mendatar), sehingga pada 768–991px ikonnya hilang padahal
       menunya masih berbentuk daftar menurun. */
    .navbar-vertical .nav-link-icon { display: inline-flex !important; }
    /* Baris menu sedikit lebih tinggi agar mudah disentuh. */
    .navbar-vertical .navbar-nav > .nav-item > .nav-link,
    .navbar-vertical .navbar-nav > .nav-item > .d-flex > .nav-link { padding: .65rem .75rem; }
    .navbar-vertical .navbar-collapse .dropdown-menu .dropdown-item { padding-top: .55rem; padding-bottom: .55rem; }

    /* ---- Isi halaman ---------------------------------------------------- */
    .kp-pagehead__title { font-size: 1.4rem; }
    .kp-hero__inner { padding: 24px 22px; }

    /* Kartu produk (Informasi Pinjaman) & sejenisnya tidak perlu setinggi
       saudaranya ketika sudah bertumpuk satu kolom. */
    .kp-row > * > .kp-card:only-child, .kp-row > .kp-card { height: auto; }

    /* Kisi KPI di rentang ini dua kolom; bila jumlah kartunya ganjil, kartu
       terakhir melebar agar tidak menyisakan petak kosong. */
    .kp-stats > :last-child:nth-child(odd),
    .kp-minicards > :last-child:nth-child(odd),
    .kp-profile__stats > :last-child:nth-child(odd) { grid-column: 1 / -1; }

    /* ---- Tabel -----------------------------------------------------------
       Tetap berbentuk tabel dan digulir ke samping di dalam kartunya: baris
       tetap bisa dibandingkan, dan tabel panjang (jadwal angsuran, laporan)
       tidak berubah menjadi ratusan baris kartu.

       Isi selnya tidak membungkus. Tanpa ini peramban memampatkan dulu semua
       kolom selebar layar — tanggal, nama, dan nomor dokumen terpenggal tiap
       kata dan barisnya jadi tinggi — baru kemudian menggulir. Kolom berisi
       kalimat panjang ditandai `.kp-td-teks` di view agar tetap membungkus
       pada lebar yang wajar. Hanya untuk tabel di dalam .kp-table-wrap; tabel
       tanpa pembungkus gulir (invoice, rincian di modal) tetap membungkus. */
    .kp-table-wrap > .kp-table th,
    .kp-table-wrap > .kp-table td { white-space: nowrap; }
    .kp-table-wrap > .kp-table td.kp-td-teks { white-space: normal; min-width: 220px; }
    .kp-table-wrap > .kp-table td .kp-empty { white-space: normal; }
}

@media (max-width: 640px) {
    /* Jarak tepi layar: bawaan Tabler (8px) terlalu rapat untuk kartu. */
    .page-body > .container-xl, .footer > .container-xl { padding-left: 12px; padding-right: 12px; }
    .page-body .kp-app { padding-top: 12px; }

    /* ---- Kepala halaman -------------------------------------------------- */
    .kp-pagehead { gap: 12px; margin-bottom: 16px; }
    .kp-pagehead__title { font-size: 1.3rem; }
    .kp-pagehead__sub { font-size: .82rem; }
    /* Tombol aksi berbagi satu baris selebar layar; tombol tunggal jadi penuh. */
    .kp-pagehead__actions { width: 100%; justify-content: flex-start; gap: 8px; }
    /* Hanya tombol yang melebar — badge status di blok yang sama (mis. pada
       detail pinjaman) tetap seukuran isinya. */
    .kp-pagehead__actions > .kp-btn,
    .kp-pagehead__actions > form,
    .kp-pagehead__actions > .dropdown { flex: 1 1 auto; }
    .kp-pagehead__actions > form > .kp-btn,
    .kp-pagehead__actions > .dropdown > .kp-btn { width: 100%; }

    /* ---- Wizard bertahap: subjudul disembunyikan, tombol navigasi penuh -- */
    .kp-wizard__sub { display: none; }
    .kp-wizard__judul { font-size: .72rem; }
    .kp-wizard__item:not(:last-child)::after { left: calc(50% + 22px); right: calc(-50% + 22px); }
    .kp-wizard-nav > .kp-btn { flex: 1 1 auto; justify-content: center; }
    .kp-waris-ringkas { flex-direction: column; align-items: stretch; gap: 8px; }
    .kp-waris-ringkas__panah { transform: rotate(90deg); align-self: center; }

    /* ---- Kartu ----------------------------------------------------------- */
    .kp-card__body { padding: 14px; }
    .kp-card__head { padding: 13px 14px; flex-wrap: wrap; gap: 8px 12px; }
    .kp-card__foot { padding: 12px 14px; }
    .kp-chartfoot { padding: 12px 14px; }

    /* ---- Kartu KPI: dua kolom, ikon di atas teksnya ----------------------
       Satu kolom membuat enam kartu KPI memakan dua layar sebelum isi halaman
       terlihat. Nilai boleh membungkus di antara "Rp" dan angkanya — dipotong
       elipsis justru menyembunyikan angkanya. */
    .kp-stats, .kp-stats--6, .kp-stats--5, .kp-stats--3, .kp-stats--2,
    .kp-minicards, .kp-minicards--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .kp-stat, .kp-stats--5 .kp-stat, .kp-stats--6 .kp-stat {
        flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px;
    }
    .kp-stat__icon, .kp-stats--5 .kp-stat__icon, .kp-stats--6 .kp-stat__icon {
        width: 34px; height: 34px; border-radius: 10px; font-size: 1.05rem;
    }
    .kp-stat--right .kp-stat__icon { order: 0; margin-left: 0; }
    .kp-stat__body { width: 100%; }
    .kp-stat__label, .kp-stats--5 .kp-stat__label, .kp-stats--6 .kp-stat__label { font-size: .72rem; line-height: 1.3; }
    .kp-stat__value, .kp-stats--5 .kp-stat__value, .kp-stats--6 .kp-stat__value {
        font-size: 1.12rem; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere;
    }
    .kp-mini { flex-direction: column; gap: 8px; padding: 12px; }
    .kp-mini__value { font-size: 1rem; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }

    /* Donat + legenda: di ponsel legendanya turun ke bawah donat, sebab di
       sampingnya tinggal ±150px dan label + nilainya saling berdesakan.
       `!important` menimpa `flex:1 1 auto` yang ditulis inline di view. */
    .kp-donutrow { flex-wrap: wrap; justify-content: center; }
    .kp-donutrow > :last-child { flex: 1 1 220px !important; min-width: 0; }

    /* ---- Filter ---------------------------------------------------------- */
    .kp-filterbar { padding: 12px; gap: 10px; }
    .kp-filterbar .kp-search-field { flex: 1 1 100%; min-width: 0; }
    .kp-filterbar .kp-field,
    .kp-filterbar > .kp-select, .kp-filterbar > .kp-input { flex: 1 1 calc(50% - 5px); min-width: 0; max-width: none; }
    .kp-filterbar > .kp-btn { flex: 1 1 calc(50% - 5px); }
    .kp-filterbar__aksi { flex: 1 1 100%; flex-wrap: wrap; margin-left: 0; }
    .kp-filterbar__aksi > * { flex: 1 1 0; }
    /* Kotak centang (mis. "Menunggak saja") mendapat barisnya sendiri. */
    .kp-filterbar__aksi > label { flex: 1 1 100%; }
    .kp-filterbar .kp-periode { flex: 1 1 100%; justify-content: space-between; }

    /* ---- Isian -----------------------------------------------------------
       16px: di bawah itu Safari iOS memperbesar halaman tiap kali isian
       disentuh, dan pengguna harus mencubit layar untuk kembali. */
    .kp-input, .kp-select, .kp-textarea { font-size: 16px; min-height: 42px; }
    /* Blok <style> di layout mengecilkan input[type=date] ke .65rem dengan
       spesifisitas lebih tinggi dari .kp-input. */
    .kp-app input[type="date"].kp-input, .modal input[type="date"].kp-input { font-size: 16px; }
    .kp-periode .kp-select { font-size: .85rem; min-height: 34px; }
    .kp-formgrid { gap: 12px; }
    /* Select2 (pemilih anggota) disamakan dengan isian lain; kotak carinya
       juga 16px karena di situlah pengguna mengetik. */
    .select2-container--bootstrap-5 .select2-selection--single.kp-select2 { min-height: 42px; }
    .select2-container--bootstrap-5 .select2-selection--single.kp-select2 .select2-selection__rendered,
    .select2-container--bootstrap-5 .select2-dropdown.kp-select2__dropdown .select2-search .select2-search__field { font-size: 16px; }
    .select2-container--bootstrap-5 .select2-dropdown.kp-select2__dropdown .select2-results__options .select2-results__option { padding: 10px 12px; font-size: .9rem; }

    /* ---- Tombol & sasaran sentuh ------------------------------------------ */
    .kp-btn { padding: 10px 14px; }
    .kp-btn--sm { padding: 8px 12px; }
    .kp-rowbtn, .kp-approve-btn { width: 36px; height: 36px; }
    .kp-page { min-width: 36px; height: 36px; }

    /* ---- Tabel (jarak sel; aturan gulirnya ada di blok ≤991.98px) --------- */
    .kp-table thead th { padding: 10px 12px; }
    .kp-table tbody td, .kp-table tfoot td { padding: 10px 12px; }
    /* Kaki tabel: keterangan, nomor halaman, lalu pemilih jumlah baris —
       masing-masing satu baris di tengah. */
    .kp-tablefoot { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 14px; }
    .kp-tablefoot > * { justify-content: center; text-align: center; }
    .kp-tablefoot > .kp-flex { flex-direction: column; gap: 10px; }
    .kp-tablefoot .kp-select { font-size: 16px !important; min-height: 38px !important; }
    .kp-pagination { flex-wrap: wrap; justify-content: center; }

    /* ---- Kepala detail anggota ---------------------------------------------
       Statistik dan rating masing-masing dua kolom (bukan satu), supaya tab
       dan isinya tidak terdorong dua layar ke bawah. Kartu rating memakai
       susunan menurun yang sama dengan layar ≥1401px. */
    .kp-profile { gap: 14px; }
    .kp-profile__id { flex-basis: 100%; gap: 12px; }
    .kp-profile__name { font-size: 1.15rem; flex-wrap: wrap; gap: 6px 10px; }
    .kp-avatar--lg { width: 72px; height: 72px; font-size: 1.4rem; }
    .kp-profile__sisi { flex-basis: 100%; }
    .kp-profile__stats, .kp-rating__kisi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .kp-rating__butir { flex-direction: column; gap: 8px; padding: 12px 8px; text-align: center; }
    .kp-rating__tingkat { justify-content: center; }
    .kp-profile > .kp-flex { width: 100%; }
    .kp-profile > .kp-flex > .kp-btn { flex: 1 1 auto; }

    /* ---- Tab ------------------------------------------------------------- */
    .kp-tabs { gap: 18px; scrollbar-width: none; }
    .kp-tabs::-webkit-scrollbar { display: none; }

    /* ---- Modal -----------------------------------------------------------
       Lebar & tepi dialognya sudah diurus Bootstrap (8px di bawah 576px);
       yang dirapatkan di sini hanya jarak dalamnya. */
    .kp-modalform .modal-header { padding: 14px; }
    .kp-modalform .modal-body { padding: 12px; }
    .kp-modalform .modal-footer { padding: 10px 14px; }
    .modal-footer > .kp-btn { flex: 1 1 auto; }

    /* ---- Lain-lain ------------------------------------------------------- */
    .kp-hero { min-height: 0; }
    .kp-hero__inner { padding: 20px 18px; }
    .kp-hero__title { font-size: 1.3rem; }
    .kp-hero__sub { font-size: .84rem; margin-top: 8px; }
    .kp-hero::before { background: linear-gradient(90deg, rgba(13,42,28,.94) 0%, rgba(23,73,47,.88) 60%, rgba(26,107,65,.6) 100%); }

    .kp-callout { padding: 12px; }
    /* Baris label–nilai: nilai yang tidak muat di samping labelnya (email,
       alamat) turun ke baris sendiri, bukan dipenggal per huruf. */
    .kp-defrow { flex-wrap: wrap; gap: 2px 14px; }
    .kp-defrow__value { flex: 1 1 auto; }
    /* Sama seperti .kp-input: 16px mencegah Safari iOS memperbesar halaman. */
    .kp-login__input { font-size: 16px; }
    /* Linimasa: tanggal + jam naik ke baris sendiri di atas isinya. Dijadikan
       flex ber-gap karena <br> di antaranya disembunyikan — tanpa gap tanggal
       dan jamnya menempel ("12 Okt 202623:19"). */
    .kp-timeline__item { flex-wrap: wrap; }
    .kp-timeline__time { width: 100%; display: flex; gap: 6px; }
    .kp-timeline__time br { display: none; }

    .kp-invoice { padding: 18px 16px; }
    .kp-invoice__title { text-align: left; }
    .kp-invoice__baris { min-width: 0; gap: 12px; }
    .kp-invoice__ttd-kotak { flex: 1 1 140px; min-width: 0; }
}