/* Font profesional & bersih */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root{
  --bg: #f5f6f8;              /* abu muda */
  --panel: #ffffff;           /* putih */
  --text: #111827;            /* hitam lembut */
  --muted: #6b7280;           /* abu teks */
  --stroke: rgba(17,24,39,.12);

  --radius: 14px;
}

/* Base */
*{ box-sizing: border-box; }
html,body{ height:100%; }

body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.45;
}

/* Typography */
.page-title{
  font-size: 20px;
  font-weight: 700;
  margin: 0;
}
.page-sub{
  font-size: 13px;
  color: var(--muted);
}

/* Navbar */
.navbar{
  background: #0f172a !important;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.navbar-brand{
  font-weight: 700;
  font-size: 15px;
}
.navbar .nav-link{
  color: rgba(255,255,255,.75) !important;
  font-weight: 500;
  font-size: 14px;
}
.navbar .nav-link.active,
.navbar .nav-link:hover{
  color: #ffffff !important;
}
.navbar .dropdown-menu{
  border-radius: 12px;
  border: 1px solid var(--stroke);
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
  padding: 6px;
}
.navbar .dropdown-item{
  font-size: 13px;
  font-weight: 500;
  border-radius: 8px;
  padding: 8px 10px;
}
.navbar .dropdown-item:hover{
  background: rgba(17,24,39,.05);
}

/* Remove accent line (flat look) */
.accent-line{ display:none; }

/* Cards */
.card{
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(17,24,39,.05);
}
.card .border-bottom{
  border-color: var(--stroke) !important;
}

/* Buttons (SMALL & CLEAN) */
.btn{
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 12px;
}
.btn-sm{
  font-size: 12px;
  padding: 4px 10px;
}
.btn-soft{
  background: #ffffff;
  border: 1px solid rgba(17,24,39,.18);
  color: rgba(17,24,39,.85);
}
.btn-soft:hover{
  background: rgba(17,24,39,.04);
  color: #111827;
}
.btn-dark{
  background: #111827;
  border-color: #111827;
}
.btn-dark:hover{
  background: #020617;
  border-color: #020617;
}
.btn-danger{
  font-size: 12px;
  padding: 4px 10px;
}

/* Forms */
.form-control,
.form-select{
  border-radius: 10px;
  font-size: 13px;
  border: 1px solid rgba(17,24,39,.18);
  box-shadow: none !important;
}
.form-control:focus,
.form-select:focus{
  border-color: rgba(17,24,39,.40);
}

/* Tables */
.table{
  margin: 0;
}
.table thead th{
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: rgba(17,24,39,.55);
  border-bottom: 1px solid var(--stroke) !important;
  padding: 12px;
}
.table tbody td{
  font-size: 13px;
  border-top: 1px solid rgba(17,24,39,.08);
  vertical-align: middle;
  padding: 10px 12px;
}
.table-hover tbody tr:hover{
  background: rgba(17,24,39,.03);
}

/* DataTables */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select{
  font-size: 12px;
  border-radius: 10px;
  border: 1px solid rgba(17,24,39,.18);
}
.dataTables_info,
.dataTables_paginate{
  font-size: 12px;
}
div.dt-buttons .btn{
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 10px;
}

/* Kasbon highlight (abu tipis, BUKAN warna) */
.row-belum-lunas{
  background: rgba(17,24,39,.04) !important;
}
.row-belum-lunas:hover{
  background: rgba(17,24,39,.07) !important;
}

/* Badge */
.badge-soft{
  background: rgba(17,24,39,.08);
  color: rgba(17,24,39,.85);
  border: 1px solid rgba(17,24,39,.15);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 999px;
}

/* Helpers */
.text-muted{ color: var(--muted) !important; }
hr{ border-color: var(--stroke); }

/* Spacing */
.container.my-4{
  margin-top: 16px !important;
  margin-bottom: 20px !important;
}

/* Print */
@media print{
  .navbar, .btn, .dt-buttons, .dataTables_filter,
  .dataTables_length, .dataTables_paginate, .accent-line{
    display:none !important;
  }
  .container{ max-width:100% !important; }
  .card{ border:0 !important; box-shadow:none !important; }
}