/* =========================================================
   KAVLINGKU — Design tokens
   Palette: warm paper neutrals + deep emerald (land/growth)
   + antique gold (money/rupiah accent). Type: Manrope display,
   Inter body/data.
   ========================================================= */
:root{
  --bg: #F6F4EF;
  --surface: #FFFFFF;
  --surface-muted: #EFECE3;
  --border: #E6E2D6;
  --border-soft: #EEEBE1;

  --ink: #17190F;
  --ink-soft: #6E6B60;
  --ink-faint: #9A968A;

  --primary: #0E6B4F;
  --primary-dark: #093F2E;
  --primary-soft: #E0F1E8;
  --primary-ring: rgba(14,107,79,.18);

  --gold: #B98A1E;
  --gold-soft: #FBF1D9;

  --danger: #BF4530;
  --danger-soft: #FBEAE5;
  --warning: #C9821A;
  --warning-soft: #FBF0DC;
  --info: #2C6E93;
  --info-soft: #E3EEF4;

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 26px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(23,25,15,.05), 0 1px 1px rgba(23,25,15,.04);
  --shadow-md: 0 6px 20px rgba(23,25,15,.08);
  --shadow-lg: 0 16px 40px rgba(23,25,15,.14);

  --font-display: 'Manrope', system-ui, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

*{box-sizing:border-box}
html{-webkit-tap-highlight-color:transparent;}
body{
  background:var(--bg);
  font-family:var(--font-body);
  color:var(--ink);
  font-size:15px;
  -webkit-font-smoothing:antialiased;
}
a{text-decoration:none; color:var(--primary);}
h1,h2,h3,h4,h5,h6,.fw-bold,.fw-semibold{font-family:var(--font-display);}
h4.fw-bold{letter-spacing:-0.01em;}
::selection{background:var(--primary-soft); color:var(--primary-dark);}

:focus-visible{outline:2px solid var(--primary); outline-offset:2px; border-radius:6px;}

/* =========================================================
   Shell layout
   ========================================================= */
.app-shell{display:flex; min-height:100vh;}

/* Sidebar (desktop) */
.app-sidebar{
  width:264px; position:fixed; top:0; left:0; bottom:0; padding:22px 16px;
  background:linear-gradient(175deg, var(--primary-dark) 0%, #0B4A37 55%, #0E5A42 100%);
  color:#fff;
  z-index:40;
}
.sidebar-brand{display:flex; align-items:center; gap:12px; padding:6px 8px 24px;}
.brand-mark{
  width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.12); color:#B7E8C9; flex:0 0 auto;
}
.brand-mark-sm{width:30px; height:30px; border-radius:9px; background:var(--primary-soft); color:var(--primary);}
.brand-title{font-family:var(--font-display); font-weight:800; font-size:1.08rem; line-height:1.15; letter-spacing:-0.01em;}
.brand-sub{font-size:.72rem; color:#A9DCC0; font-weight:500;}

.sidebar-nav{display:flex; flex-direction:column; gap:3px;}
.sidebar-nav a{
  color:#DCF3E6; padding:11px 14px; border-radius:var(--r-md); font-size:.9rem; font-weight:600;
  display:flex; align-items:center; gap:11px; transition:background .15s ease, color .15s ease;
}
.sidebar-nav a i{font-size:1.05rem; width:20px; text-align:center; opacity:.85;}
.sidebar-nav a:hover{background:rgba(255,255,255,.08); color:#fff;}
.sidebar-nav a.active{background:#fff; color:var(--primary-dark); box-shadow:var(--shadow-sm);}
.sidebar-nav a.active i{opacity:1;}

.sidebar-user{border-top:1px solid rgba(255,255,255,.14); padding-top:16px; font-size:.85rem; margin-top:12px;}
.sidebar-user .fw-semibold{font-family:var(--font-display);}

/* Main content area */
.app-main{flex:1; margin-left:264px; display:flex; flex-direction:column; min-height:100vh;}
.app-content{padding:26px 30px 48px; flex:1; max-width:1280px; width:100%; margin:0 auto;}
@media (max-width:991.98px){
  .app-main{margin-left:0}
  .app-content{padding:16px 14px 104px;}
}

/* Topbar mobile */
.app-topbar{
  background:rgba(246,244,239,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border-soft); padding:13px 16px;
  display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; z-index:35;
}

/* Bottom nav mobile — floating dock */
.app-bottomnav{
  position:fixed; left:12px; right:12px; bottom:calc(10px + env(safe-area-inset-bottom));
  background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--r-xl);
  display:flex; z-index:50; box-shadow:var(--shadow-lg); padding:6px;
}
.app-bottomnav a{
  flex:1; text-align:center; padding:8px 2px; color:var(--ink-faint); font-size:.66rem; font-weight:600;
  display:flex; flex-direction:column; align-items:center; gap:3px; border-radius:var(--r-lg);
  transition:background .15s ease, color .15s ease;
}
.app-bottomnav a i{font-size:1.2rem}
.app-bottomnav a.active{color:var(--primary); background:var(--primary-soft);}

/* =========================================================
   Cards
   ========================================================= */
.card-section{
  background:var(--surface); border-radius:var(--r-lg); padding:22px; border:1px solid var(--border-soft);
  box-shadow:var(--shadow-sm);
}
.stat-card{
  background:var(--surface); border-radius:var(--r-lg); padding:18px 20px; border:1px solid var(--border-soft);
  box-shadow:var(--shadow-sm); height:100%; position:relative; overflow:hidden;
}
.stat-card .stat-label{font-size:.72rem; color:var(--ink-soft); font-weight:700; text-transform:uppercase; letter-spacing:.05em;}
.stat-card .stat-value{font-family:var(--font-display); font-size:1.5rem; font-weight:800; margin-top:4px; color:var(--ink); letter-spacing:-0.01em;}
.stat-card .stat-icon{
  width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; background:var(--primary-soft); color:var(--primary);
}
.stat-card.stat-money .stat-icon{background:var(--gold-soft); color:var(--gold);}

.kavling-grid-card{
  border-radius:var(--r-lg); border:1px solid var(--border-soft); padding:16px; background:var(--surface); height:100%;
  transition:transform .15s ease, box-shadow .15s ease; box-shadow:var(--shadow-sm);
}
@media (hover:hover){ .kavling-grid-card:hover, .card-section a:hover .kavling-grid-card{transform:translateY(-2px); box-shadow:var(--shadow-md);} }

/* =========================================================
   Buttons
   ========================================================= */
.btn{border-radius:var(--r-pill); font-weight:600; font-size:.88rem; padding:.55rem 1.15rem;}
.btn-sm{padding:.4rem .85rem; font-size:.8rem;}
.btn-brand{background:var(--primary); border-color:var(--primary); color:#fff;}
.btn-brand:hover, .btn-brand:focus{background:var(--primary-dark); border-color:var(--primary-dark); color:#fff;}
.btn-outline-success{color:var(--primary); border-color:var(--primary);}
.btn-outline-success:hover{background:var(--primary); border-color:var(--primary);}
.btn-outline-secondary{color:var(--ink-soft); border-color:var(--border);}
.btn-outline-secondary:hover{background:var(--ink-soft); border-color:var(--ink-soft);}
.btn-outline-danger{color:var(--danger); border-color:#E9C9C0;}
.btn-outline-danger:hover{background:var(--danger); border-color:var(--danger);}
.btn-danger{background:var(--danger); border-color:var(--danger);}
.btn-check:checked + .btn-outline-success{background:var(--primary); border-color:var(--primary); color:#fff;}

.fab-bayar{
  position:fixed; right:18px; bottom:100px; z-index:45; border-radius:var(--r-pill); box-shadow:var(--shadow-lg);
  padding:14px 22px; font-weight:700;
}
@media (min-width:992px){ .fab-bayar{ bottom:24px; } }

/* =========================================================
   Forms & inputs — sized generously for mobile touch
   ========================================================= */
label.form-label{font-weight:600; font-size:.82rem; color:var(--ink-soft); margin-bottom:.35rem;}
.form-control, .form-select{
  border-radius:var(--r-md); border:1.5px solid var(--border); padding:.62rem .85rem;
  font-size:1rem; background:var(--surface); color:var(--ink); min-height:48px;
}
textarea.form-control{min-height:unset;}
.form-control:focus, .form-select:focus{
  border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-ring);
}
.input-group-text{border-radius:var(--r-md) 0 0 var(--r-md); background:var(--surface-muted); border:1.5px solid var(--border); border-right:none;}
.form-text{font-size:.76rem; color:var(--ink-faint);}
.btn-group .btn{border-radius:var(--r-pill) !important; margin:0 3px;}
.btn-group{gap:0;}

.nominal-quick{display:grid; grid-template-columns:repeat(3,1fr); gap:8px;}
.nominal-quick button{
  min-width:0; width:100%; padding:.7rem .3rem; font-size:.82rem; border-radius:var(--r-md); font-weight:700;
}
@media (min-width:576px){ .nominal-quick{grid-template-columns:repeat(3,1fr);} }

/* Prevent iOS zoom on focus */
@media (max-width:991.98px){
  input, select, textarea{font-size:16px !important;}
}

/* =========================================================
   Tables
   ========================================================= */
.table{font-size:.9rem;}
.table thead th{
  font-family:var(--font-display); font-size:.68rem; text-transform:uppercase; color:var(--ink-faint);
  letter-spacing:.06em; border-bottom:1.5px solid var(--border-soft); font-weight:700; padding-bottom:10px;
}
.table td{vertical-align:middle; border-color:var(--border-soft);}
.table-hover tbody tr:hover{background:var(--surface-muted);}

/* =========================================================
   Badges
   ========================================================= */
.badge{font-weight:700; font-size:.68rem; padding:.42em .7em; border-radius:var(--r-pill); letter-spacing:.02em;}
.text-bg-success{background:var(--primary-soft) !important; color:var(--primary-dark) !important;}
.text-bg-primary{background:var(--info-soft) !important; color:var(--info) !important;}
.text-bg-warning{background:var(--warning-soft) !important; color:var(--warning) !important;}
.text-bg-danger{background:var(--danger-soft) !important; color:var(--danger) !important;}
.text-bg-info{background:var(--gold-soft) !important; color:var(--gold) !important;}
.text-bg-secondary{background:var(--surface-muted) !important; color:var(--ink-soft) !important;}

/* =========================================================
   Progress bar
   ========================================================= */
.progress{height:10px; border-radius:var(--r-pill); background:var(--surface-muted);}
.progress-bar.bg-success{background:linear-gradient(90deg, var(--primary), #14875F) !important;}

/* =========================================================
   Alerts
   ========================================================= */
.alert{border-radius:var(--r-md); border:1px solid transparent; font-size:.88rem;}
.alert-success{background:var(--primary-soft); color:var(--primary-dark); border-color:#CDE9D9;}
.alert-danger{background:var(--danger-soft); color:var(--danger); border-color:#F0D2C9;}
.alert-warning{background:var(--warning-soft); color:var(--warning); border-color:#F2DFB6;}
.alert-info{background:var(--info-soft); color:var(--info); border-color:#CFE1EA;}
.alert-light{background:var(--surface-muted); border-color:var(--border-soft); color:var(--ink-soft);}

/* =========================================================
   Modals — bottom sheet on mobile
   ========================================================= */
.modal-content{border-radius:var(--r-lg); border:none; box-shadow:var(--shadow-lg);}
.modal-header{border-bottom:1px solid var(--border-soft); padding:18px 22px;}
.modal-header .modal-title{font-family:var(--font-display); font-weight:800; font-size:1.05rem;}
.modal-body{padding:20px 22px;}
.modal-footer{border-top:1px solid var(--border-soft); padding:16px 22px;}

@media (max-width:767.98px){
  .modal.fade .modal-dialog{transition:transform .28s cubic-bezier(.32,.72,0,1); transform:translateY(100%);}
  .modal.show .modal-dialog{transform:translateY(0);}
  .modal-dialog{
    position:fixed; margin:0; left:0; right:0; bottom:0; max-width:100%; width:100%;
  }
  .modal-content{
    border-radius:var(--r-xl) var(--r-xl) 0 0; max-height:92vh; overflow-y:auto;
    padding-top:6px;
  }
  .modal-content::before{
    content:''; display:block; width:40px; height:4px; background:var(--border); border-radius:var(--r-pill);
    margin:8px auto 4px;
  }
}

/* =========================================================
   Dropdown
   ========================================================= */
.dropdown-menu{border-radius:var(--r-md); border:1px solid var(--border-soft); box-shadow:var(--shadow-md); padding:6px;}
.dropdown-item{border-radius:8px; font-size:.86rem; padding:.5rem .7rem;}
.dropdown-item:hover{background:var(--surface-muted);}
.dropdown-item.text-danger:hover{background:var(--danger-soft);}

/* =========================================================
   Login page
   ========================================================= */
.login-shell{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(255,255,255,.10), transparent),
    linear-gradient(160deg, var(--primary-dark) 0%, #0B4A37 50%, #0E5A42 100%);
}
.login-card{width:100%; max-width:400px; background:var(--surface); border-radius:var(--r-xl); padding:36px 30px; box-shadow:var(--shadow-lg);}

/* =========================================================
   Misc
   ========================================================= */
.text-muted{color:var(--ink-faint) !important;}
hr{border-color:var(--border-soft);}

@media print{
  .no-print{display:none !important;}
  body{background:#fff}
}