/* ==========================================================================
   Koperasi BIS — Admin Prototype
   Hand-built Bootstrap-5-compatible layer (grid, utilities, components).
   Class names follow Bootstrap 5 conventions on purpose: this file is a
   drop-in stand-in so the real bootstrap.min.css/js can replace it later
   without touching any markup.
   ========================================================================== */

:root{
  --bg:#F3F4EE;
  --surface:#FFFFFF;
  --surface-2:#EEF0E8;
  --ink:#161E19;
  --ink-soft:#4B564E;
  --ink-faint:#828C80;
  --line:#DDE1D5;
  --line-strong:#C7CDBB;
  --accent:#1F6F52;
  --accent-strong:#154C38;
  --accent-soft:#E1EDE5;
  --gold:#A8792A;
  --gold-soft:#F4EAD3;
  --danger:#B3432B;
  --danger-soft:#F6E2DC;
  --info:#2B5B8C;
  --info-soft:#E1EAF3;
  --radius:6px;
  --font-display:"Fraunces","Iowan Old Style",ui-serif,Georgia,serif;
  --font-body:"Inter",ui-sans-serif,system-ui,-apple-system,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --sidebar-w:236px;
  --topbar-h:58px;
}

*,*::before,*::after{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6{margin:0 0 .4rem; font-weight:600; text-wrap:balance;}
p{margin:0 0 .6rem;}
a{color:var(--accent); text-decoration:none;}
a:hover{text-decoration:underline;}
img{max-width:100%;}
button{font-family:inherit;}
[hidden]{display:none !important;}
.tnum{font-variant-numeric:tabular-nums;}
::selection{background:var(--accent-soft);}

/* ---------------------------------------------------------------------- */
/* App shell: sidebar + topbar + content                                  */
/* ---------------------------------------------------------------------- */
.app-shell{min-height:100%;}

.sidebar{
  position:fixed; inset-block:0; left:0;
  width:var(--sidebar-w);
  background:var(--accent-strong);
  color:#EAF3EE;
  display:flex; flex-direction:column;
  z-index:40;
  transition:transform .2s ease;
}
.sidebar .brand{
  display:flex; align-items:center; gap:10px;
  padding:18px 18px 16px;
  border-bottom:1px solid rgba(234,243,238,.14);
}
.sidebar .brand-mark{
  width:32px;height:32px;border-radius:7px;
  background:rgba(234,243,238,.12);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display); font-weight:650; font-size:15px;
  color:#EAF3EE; flex:none;
}
.sidebar .brand-text .name{font-family:var(--font-display); font-weight:600; font-size:15px; line-height:1.15; color:#fff;}
.sidebar .brand-text .role{font-family:var(--font-mono); font-size:10px; letter-spacing:.04em; color:#B9D3C4; text-transform:uppercase;}

.sidebar nav{padding:14px 10px; overflow-y:auto; flex:1;}
.sidebar .nav-section-label{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  color:#8FB6A3; padding:10px 10px 6px;
}
.sidebar .nav-link{
  display:flex; align-items:center; gap:10px;
  padding:9px 10px; border-radius:6px;
  color:#D8E9DF; font-size:13.5px; font-weight:500;
  margin-bottom:2px;
}
.sidebar .nav-link .ic{width:16px; height:16px; flex:none; opacity:.85;}
.sidebar .nav-link:hover{background:rgba(234,243,238,.08); text-decoration:none; color:#fff;}
.sidebar .nav-link.active{background:#fff; color:var(--accent-strong); font-weight:600;}
.sidebar .nav-link.active .ic{opacity:1;}
.sidebar .foot{padding:14px 18px; border-top:1px solid rgba(234,243,238,.14); font-size:11.5px; color:#9FC2B0;}

.sidebar-backdrop{
  position:fixed; inset:0; background:rgba(10,15,12,.4); z-index:35; display:none;
}

.main-col{margin-left:var(--sidebar-w); min-height:100%; display:flex; flex-direction:column;}

.topbar{
  position:sticky; top:0; z-index:20;
  height:var(--topbar-h);
  background:var(--surface);
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:14px;
  padding-inline:20px;
}
.topbar .page-title{font-weight:600; font-size:16px; flex:1; min-width:0;}
.sidebar-toggle{
  display:none; border:1px solid var(--line); background:var(--surface);
  width:34px; height:34px; border-radius:6px; align-items:center; justify-content:center; flex:none;
  cursor:pointer;
}
.sidebar-toggle span, .sidebar-toggle span::before, .sidebar-toggle span::after{
  content:""; display:block; width:16px; height:2px; background:var(--ink); border-radius:2px; position:relative;
}
.sidebar-toggle span::before{position:absolute; top:-5px;}
.sidebar-toggle span::after{position:absolute; top:5px;}

.content{padding:22px 22px 60px; flex:1; min-width:0;}

.user-chip{display:flex; align-items:center; gap:9px;}
.user-chip .avatar{
  width:30px;height:30px;border-radius:50%;
  background:var(--accent-soft); color:var(--accent-strong);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:12px; flex:none;
}
.user-chip .who{line-height:1.15;}
.user-chip .who .n{font-size:12.5px; font-weight:600; color:var(--ink);}
.user-chip .who .r{font-size:10.5px; color:var(--ink-faint);}

@media (max-width:900px){
  .sidebar{transform:translateX(-100%);}
  .sidebar.show{transform:translateX(0);}
  .sidebar-backdrop.show{display:block;}
  .main-col{margin-left:0;}
  .sidebar-toggle{display:inline-flex;}
}

/* ---------------------------------------------------------------------- */
/* Grid                                                                    */
/* ---------------------------------------------------------------------- */
.container-fluid{width:100%; padding-inline:0;}
.row{display:flex; flex-wrap:wrap; gap:16px;}
.row.g-2{gap:8px;}
.row.g-3{gap:16px;}
.row.g-4{gap:24px;}
[class^="col"]{min-width:0;}
.col-12{flex:0 0 100%; max-width:100%;}
@media (min-width:768px){
  .col-md-3{flex:0 0 calc(25% - 12px); max-width:calc(25% - 12px);}
  .col-md-4{flex:0 0 calc(33.3333% - 10.667px); max-width:calc(33.3333% - 10.667px);}
  .col-md-5{flex:0 0 calc(41.6667% - 9.6px); max-width:calc(41.6667% - 9.6px);}
  .col-md-6{flex:0 0 calc(50% - 8px); max-width:calc(50% - 8px);}
  .col-md-7{flex:0 0 calc(58.3333% - 6.4px); max-width:calc(58.3333% - 6.4px);}
  .col-md-8{flex:0 0 calc(66.6667% - 5.333px); max-width:calc(66.6667% - 5.333px);}
  .col-md-9{flex:0 0 calc(75% - 4px); max-width:calc(75% - 4px);}
  .col-md-12{flex:0 0 100%; max-width:100%;}
}

/* ---------------------------------------------------------------------- */
/* Utilities (subset)                                                      */
/* ---------------------------------------------------------------------- */
.d-flex{display:flex;} .d-block{display:block;} .d-none{display:none;} .d-inline-flex{display:inline-flex;}
@media (max-width:767px){ .d-md-none-below{display:none;} }
@media (min-width:768px){ .d-md-none{display:none;} .d-md-flex{display:flex;} }
.flex-wrap{flex-wrap:wrap;} .flex-column{flex-direction:column;} .flex-1{flex:1;}
.align-items-center{align-items:center;} .align-items-start{align-items:flex-start;}
.justify-content-between{justify-content:space-between;} .justify-content-end{justify-content:flex-end;} .justify-content-center{justify-content:center;}
.gap-1{gap:.25rem;} .gap-2{gap:.5rem;} .gap-3{gap:1rem;} .gap-4{gap:1.5rem;}
.w-100{width:100%;} .h-100{height:100%;}
.position-relative{position:relative;}
.text-center{text-align:center;} .text-end{text-align:right;}
.text-muted{color:var(--ink-faint);}
.text-accent{color:var(--accent);}
.text-danger{color:var(--danger);}
.fw-500{font-weight:500;} .fw-600{font-weight:600;} .fw-700{font-weight:700;}
.small,small{font-size:12px;}
.mb-0{margin-bottom:0;} .mb-1{margin-bottom:.25rem;} .mb-2{margin-bottom:.5rem;} .mb-3{margin-bottom:1rem;} .mb-4{margin-bottom:1.5rem;}
.mt-0{margin-top:0;} .mt-1{margin-top:.25rem;} .mt-2{margin-top:.5rem;} .mt-3{margin-top:1rem;} .mt-4{margin-top:1.5rem;}
.me-1{margin-right:.25rem;} .me-2{margin-right:.5rem;} .ms-1{margin-left:.25rem;} .ms-2{margin-left:.5rem;}
.p-0{padding:0;} .py-2{padding-block:.5rem;} .py-3{padding-block:1rem;}
.rounded{border-radius:var(--radius);} .rounded-pill{border-radius:100px;}
.border{border:1px solid var(--line);}
.overflow-auto{overflow:auto;}
.text-truncate{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

/* ---------------------------------------------------------------------- */
/* Buttons                                                                 */
/* ---------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  font-size:13.5px; font-weight:600; line-height:1;
  padding:9px 14px; border-radius:6px; border:1px solid transparent;
  cursor:pointer; transition:background .12s ease, border-color .12s ease, color .12s ease;
  white-space:nowrap;
}
.btn:hover{text-decoration:none;}
.btn-sm{padding:6px 10px; font-size:12.5px;}
.btn-primary{background:var(--accent); border-color:var(--accent); color:#fff;}
.btn-primary:hover{background:var(--accent-strong); border-color:var(--accent-strong); color:#fff;}
.btn-outline-secondary{background:var(--surface); border-color:var(--line-strong); color:var(--ink-soft);}
.btn-outline-secondary:hover{border-color:var(--ink-faint); color:var(--ink); background:var(--surface-2);}
.btn-outline-primary{background:transparent; border-color:var(--accent); color:var(--accent);}
.btn-outline-primary:hover{background:var(--accent-soft);}
.btn-danger{background:var(--danger); border-color:var(--danger); color:#fff;}
.btn-danger:hover{background:#8f3421; border-color:#8f3421; color:#fff;}
.btn-light{background:var(--surface-2); border-color:var(--surface-2); color:var(--ink-soft);}
.btn-light:hover{background:var(--line);}
.btn-link{background:transparent; border-color:transparent; color:var(--accent); padding:2px 4px; font-weight:600;}
.btn:disabled{opacity:.5; cursor:not-allowed;}

/* ---------------------------------------------------------------------- */
/* Cards                                                                   */
/* ---------------------------------------------------------------------- */
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:8px;
  box-shadow:0 1px 0 rgba(22,30,25,.03);
}
.card-body{padding:18px;}
.card-header{padding:14px 18px; border-bottom:1px solid var(--line); font-weight:600; display:flex; align-items:center; justify-content:space-between; gap:10px;}
.card-title{font-size:14px; font-weight:600; margin-bottom:2px;}
.card-subtitle{font-size:12px; color:var(--ink-faint); margin-bottom:10px;}
.card-footer{padding:12px 18px; border-top:1px solid var(--line); background:var(--surface-2); border-radius:0 0 8px 8px;}

.stat-card .label{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:8px;}
.stat-card .value{font-family:var(--font-mono); font-size:24px; font-weight:600; color:var(--ink); line-height:1.1;}
.stat-card .delta{font-size:11.5px; color:var(--ink-faint); margin-top:6px;}
.stat-card .delta.up{color:var(--accent);}

/* ---------------------------------------------------------------------- */
/* Tables                                                                  */
/* ---------------------------------------------------------------------- */
.table-responsive{overflow-x:auto;}
table.table{width:100%; border-collapse:collapse; font-size:13px;}
table.table th, table.table td{padding:10px 12px; text-align:left; border-bottom:1px solid var(--line); vertical-align:middle;}
table.table thead th{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-faint); background:var(--surface-2); font-weight:600; border-bottom:1px solid var(--line-strong);
}
table.table tbody tr:hover{background:var(--surface-2);}
table.table td.num, table.table th.num{font-family:var(--font-mono); text-align:right;}

/* ---------------------------------------------------------------------- */
/* Badges / progress                                                       */
/* ---------------------------------------------------------------------- */
.badge{display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600; padding:3px 9px; border-radius:100px; line-height:1.5;}
.badge-success{background:var(--accent-soft); color:var(--accent-strong);}
.badge-warning{background:var(--gold-soft); color:#7A5A1E;}
.badge-secondary{background:var(--surface-2); color:var(--ink-soft);}
.badge-info{background:var(--info-soft); color:var(--info);}
.badge-danger{background:var(--danger-soft); color:var(--danger);}
.badge .dot{width:6px; height:6px; border-radius:50%; background:currentColor;}

.progress{height:8px; background:var(--surface-2); border-radius:100px; overflow:hidden;}
.progress-bar{height:100%; background:var(--accent); border-radius:100px;}
.progress-bar.gold{background:var(--gold);}

/* ---------------------------------------------------------------------- */
/* Forms                                                                   */
/* ---------------------------------------------------------------------- */
.form-label{display:block; font-size:12.5px; font-weight:600; color:var(--ink-soft); margin-bottom:5px;}
.form-control, .form-select{
  width:100%; font-size:13.5px; font-family:inherit; color:var(--ink);
  padding:9px 11px; border:1px solid var(--line-strong); border-radius:6px; background:var(--surface);
}
.form-control:focus, .form-select:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);}
.form-text{font-size:11.5px; color:var(--ink-faint); margin-top:4px;}
textarea.form-control{resize:vertical; min-height:80px;}
.form-check{display:flex; align-items:center; gap:8px;}
.form-check-input{width:16px; height:16px; accent-color:var(--accent);}
.form-check-label{font-size:13px; color:var(--ink-soft);}
.input-group{display:flex;}
.input-group .form-control{border-radius:6px 0 0 6px;}
.input-group-text{
  display:flex; align-items:center; padding:0 11px; background:var(--surface-2);
  border:1px solid var(--line-strong); border-left:none; border-radius:0 6px 6px 0; font-size:13px; color:var(--ink-faint);
}
.field-row{display:flex; flex-wrap:wrap; gap:14px; margin-bottom:14px;}
.field-row > div{flex:1 1 200px;}

/* ---------------------------------------------------------------------- */
/* Nav pills / tabs                                                        */
/* ---------------------------------------------------------------------- */
.nav-pills{display:flex; flex-wrap:wrap; gap:6px; border-bottom:1px solid var(--line); padding-bottom:12px; margin-bottom:16px;}
.nav-pills .nav-link{
  padding:7px 13px; border-radius:100px; font-size:13px; font-weight:600; color:var(--ink-soft);
  background:var(--surface-2); cursor:pointer; border:1px solid transparent;
}
.nav-pills .nav-link.active{background:var(--accent); color:#fff;}
.tab-pane{display:none;}
.tab-pane.active{display:block;}

/* ---------------------------------------------------------------------- */
/* Dropdown                                                                 */
/* ---------------------------------------------------------------------- */
.dropdown{position:relative;}
.dropdown-toggle{cursor:pointer;}
.dropdown-menu{
  display:none; position:absolute; right:0; top:calc(100% + 6px);
  background:var(--surface); border:1px solid var(--line); border-radius:8px;
  box-shadow:0 8px 24px rgba(22,30,25,.12); min-width:190px; padding:6px; z-index:50;
}
.dropdown-menu.show{display:block;}
.dropdown-item{
  display:block; width:100%; text-align:left; padding:8px 10px; border-radius:5px;
  font-size:13px; color:var(--ink-soft); background:none; border:none; cursor:pointer;
}
.dropdown-item:hover{background:var(--surface-2); color:var(--ink); text-decoration:none;}
.dropdown-item.active{background:var(--accent-soft); color:var(--accent-strong); font-weight:600;}

/* ---------------------------------------------------------------------- */
/* Modal                                                                    */
/* ---------------------------------------------------------------------- */
.modal-backdrop{position:fixed; inset:0; background:rgba(14,18,15,.45); z-index:60; display:none;}
.modal-backdrop.show{display:block;}
.modal{
  position:fixed; inset:0; z-index:61; display:none;
  align-items:flex-start; justify-content:center; overflow-y:auto; padding:5vh 16px;
}
.modal.show{display:flex;}
.modal-dialog{width:100%; max-width:560px; margin:auto;}
.modal-content{background:var(--surface); border-radius:10px; border:1px solid var(--line); overflow:hidden;}
.modal-header{padding:16px 18px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:10px;}
.modal-title{font-size:15px; font-weight:600;}
.modal-body{padding:18px; max-height:65vh; overflow-y:auto;}
.modal-footer{padding:14px 18px; border-top:1px solid var(--line); display:flex; justify-content:flex-end; gap:8px;}
.btn-close{
  width:26px; height:26px; border-radius:6px; border:none; background:var(--surface-2); cursor:pointer;
  position:relative; flex:none;
}
.btn-close::before,.btn-close::after{
  content:""; position:absolute; left:50%; top:50%; width:12px; height:1.6px; background:var(--ink-faint);
}
.btn-close::before{transform:translate(-50%,-50%) rotate(45deg);}
.btn-close::after{transform:translate(-50%,-50%) rotate(-45deg);}

/* ---------------------------------------------------------------------- */
/* Toast                                                                    */
/* ---------------------------------------------------------------------- */
.toast-wrap{position:fixed; right:18px; bottom:18px; z-index:80; display:flex; flex-direction:column; gap:8px;}
.toast{
  background:var(--ink); color:#fff; padding:11px 15px; border-radius:8px; font-size:13px;
  box-shadow:0 8px 20px rgba(0,0,0,.2); opacity:0; transform:translateY(6px); transition:opacity .18s ease, transform .18s ease;
  max-width:320px;
}
.toast.show{opacity:1; transform:translateY(0);}

/* ---------------------------------------------------------------------- */
/* Misc                                                                     */
/* ---------------------------------------------------------------------- */
.divider{height:1px; background:var(--line); border:none; margin:18px 0;}
.eyebrow{font-family:var(--font-mono); font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--accent); font-weight:600; margin-bottom:4px;}
.page-lead{color:var(--ink-soft); font-size:13.5px; max-width:70ch; margin-bottom:18px;}
.empty-state{padding:34px 20px; text-align:center; color:var(--ink-faint);}
.avatar-sm{width:26px;height:26px;border-radius:50%; background:var(--surface-2); display:inline-flex; align-items:center; justify-content:center; font-size:10.5px; font-weight:700; color:var(--ink-soft);}

/* ---------------------------------------------------------------------- */
/* Detail rows (read-only label:value, used in Detail Anggota modal)       */
/* ---------------------------------------------------------------------- */
.detail-row{display:flex; justify-content:space-between; align-items:flex-start; gap:16px; padding:7px 0; border-bottom:1px dashed var(--line); font-size:13px;}
.detail-row .k{color:var(--ink-faint); flex:0 0 42%;}
.detail-row .v{font-weight:600; text-align:right; flex:1;}

/* ---------------------------------------------------------------------- */
/* Print — formulir pendaftaran filled PDF (via browser print dialog)      */
/* ---------------------------------------------------------------------- */
#print-area{display:none;}
@media print{
  body *{visibility:hidden;}
  #print-area, #print-area *{visibility:visible !important; display:revert;}
  #print-area{display:block !important; position:absolute; top:0; left:0; width:100%; padding:28px;}
}