/* ==========================================================================
   KEYPEDIA CORP — Admin Theme
   Override untuk AdminLTE 3 + Bootstrap 5
   Cukup taruh file ini di /assets/theme.css dan panggil di header.php
   PALING BAWAH (setelah adminlte.min.css) supaya menang prioritas.
   ========================================================================== */

:root {
  /* Permukaan & garis */
  --kp-bg:            #f5f6fa;
  --kp-surface:       #ffffff;
  --kp-border:        #ebecf2;
  --kp-border-soft:   #f1f2f7;

  /* Teks */
  --kp-ink:           #1e2a4a;
  --kp-ink-2:         #5b6580;
  --kp-muted:         #8a93a8;

  /* Warna utama */
  --kp-brand:         #4f46e5;
  --kp-brand-600:     #4338ca;
  --kp-brand-soft:    #eef0ff;

  /* Sidebar */
  --kp-side-1:        #141834;
  --kp-side-2:        #1d2350;
  --kp-side-text:     #9aa3c0;
  --kp-side-active:   #4f46e5;

  /* Status */
  --kp-green:         #12a87c;
  --kp-amber:         #f59e0b;
  --kp-rose:          #f43f5e;
  --kp-sky:           #0ea5e9;
  --kp-violet:        #8b5cf6;

  /* Bentuk */
  --kp-radius:        16px;
  --kp-radius-sm:     12px;
  --kp-shadow:        0 1px 2px rgba(20, 24, 52, .04), 0 8px 24px -12px rgba(20, 24, 52, .10);
  --kp-sidebar-w:     262px;
}

/* --------------------------------------------------------------------------
   1. DASAR
   -------------------------------------------------------------------------- */
body,
body.hold-transition {
  font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background-color: var(--kp-bg) !important;
  color: var(--kp-ink-2);
  font-size: 14px;
  letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased;
}

.wrapper { background-color: var(--kp-bg); }

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5 {
  color: var(--kp-ink);
  font-weight: 700;
  letter-spacing: -.02em;
}

a { color: var(--kp-brand); text-decoration: none; }
a:hover { color: var(--kp-brand-600); }

::selection { background: var(--kp-brand-soft); color: var(--kp-brand-600); }

/* Scrollbar halus */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d4d8e4; border-radius: 99px; border: 2px solid var(--kp-bg); }
::-webkit-scrollbar-thumb:hover { background: #bcc2d4; }

/* --------------------------------------------------------------------------
   2. SIDEBAR
   -------------------------------------------------------------------------- */
.main-sidebar,
.main-sidebar .sidebar,
aside.main-sidebar.sidebar-dark-primary {
  width: var(--kp-sidebar-w);
  background: linear-gradient(180deg, var(--kp-side-1) 0%, var(--kp-side-2) 100%) !important;
  box-shadow: none !important;
  border-right: 1px solid rgba(255, 255, 255, .05);
}

/* Brand / logo */
.main-sidebar .brand-link {
  background: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, .06) !important;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left !important;
}
.brand-mark {
  width: 40px; height: 40px;
  flex: 0 0 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 17px;
  box-shadow: 0 6px 16px -6px rgba(99, 102, 241, .8);
}
.brand-copy { line-height: 1.25; overflow: hidden; }
.brand-copy .brand-name {
  display: block;
  color: #fff; font-weight: 700; font-size: 15px; letter-spacing: -.02em;
  white-space: nowrap;
}
.brand-copy .brand-sub {
  display: block;
  color: #7c85a8; font-size: 11.5px; font-weight: 500;
  white-space: nowrap;
}

/* Panel user */
.main-sidebar .user-panel {
  border-bottom: 1px solid rgba(255, 255, 255, .06) !important;
  padding: 0 20px 16px;
  margin: 16px 0 12px !important;
  align-items: center;
  gap: 10px;
}
.user-avatar {
  width: 36px; height: 36px; flex: 0 0 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .09);
  color: #cdd3e8;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px;
}
.main-sidebar .user-panel .info { padding: 0; line-height: 1.3; overflow: hidden; }
.main-sidebar .user-panel .info b { color: #fff; font-size: 13.5px; display: block; white-space: nowrap; }
.main-sidebar .user-panel .info small { color: #6f789c; font-size: 11px; }

/* Judul kelompok menu */
.nav-heading {
  color: #5c648a;
  font-size: 11px;
  font-weight: 600;
  padding: 16px 24px 7px;
  margin: 0;
  white-space: nowrap;
}

/* Item menu */
.nav-sidebar { padding: 0 12px 24px; }
.nav-sidebar .nav-item { margin-bottom: 2px; }

.nav-sidebar .nav-link,
aside.main-sidebar .nav-sidebar > .nav-item > .nav-link {
  color: var(--kp-side-text) !important;
  border-radius: 10px !important;
  padding: 9px 12px;
  font-size: 13.5px;
  font-weight: 500;
  display: flex;
  align-items: center;
  transition: background-color .15s ease, color .15s ease;
}
.nav-sidebar .nav-link .nav-icon {
  font-size: 15px;
  width: 22px;
  margin-right: 10px;
  text-align: center;
  opacity: .85;
}
.nav-sidebar .nav-link p { margin: 0; }

.nav-sidebar .nav-link:hover,
aside.main-sidebar .nav-sidebar > .nav-item > .nav-link:hover {
  background-color: rgba(255, 255, 255, .06) !important;
  color: #e6e9f5 !important;
}

.nav-sidebar .nav-link.active,
aside.main-sidebar .nav-sidebar > .nav-item > .nav-link.active,
.nav-pills .nav-link.active {
  background-color: var(--kp-side-active) !important;
  color: #fff !important;
  font-weight: 600;
  box-shadow: 0 8px 20px -10px rgba(79, 70, 229, .9);
}
.nav-sidebar .nav-link.active .nav-icon { opacity: 1; }

/* Saat sidebar diciutkan */
.sidebar-collapse .brand-copy,
.sidebar-collapse .nav-heading,
.sidebar-collapse .user-panel .info { display: none; }

/* --------------------------------------------------------------------------
   3. TOPBAR
   -------------------------------------------------------------------------- */
.main-header.navbar {
  background: var(--kp-surface) !important;
  border-bottom: 1px solid var(--kp-border) !important;
  padding: 0 24px;
  min-height: 68px;
  box-shadow: none !important;
}
.main-header .nav-link { color: var(--kp-ink-2) !important; }

/* Tombol ikon bulat di topbar */
.topbar-btn {
  width: 38px; height: 38px;
  border-radius: 11px;
  border: 1px solid var(--kp-border);
  background: #fbfbfd;
  color: var(--kp-ink-2);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px;
  transition: background-color .15s ease, color .15s ease;
}
.topbar-btn:hover { background: var(--kp-brand-soft); color: var(--kp-brand); }

/* Kotak pencarian */
.topbar-search { position: relative; max-width: 330px; width: 100%; }
.topbar-search i {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--kp-muted); font-size: 13px; pointer-events: none;
}
.topbar-search input {
  width: 100%;
  height: 40px;
  border: 1px solid var(--kp-border);
  background: #f7f8fc;
  border-radius: 11px;
  padding: 0 14px 0 38px;
  font-size: 13.5px;
  color: var(--kp-ink);
  outline: none;
  transition: border-color .15s ease, background-color .15s ease;
}
.topbar-search input::placeholder { color: var(--kp-muted); }
.topbar-search input:focus {
  background: #fff;
  border-color: #c7c9f5;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, .10);
}

/* Remah jejak / judul kecil di kiri topbar */
.topbar-crumb { font-size: 13px; color: var(--kp-muted); font-weight: 500; }
.topbar-crumb strong { color: var(--kp-ink); font-weight: 600; }

/* Avatar di kanan topbar */
.topbar-avatar {
  width: 38px; height: 38px; border-radius: 11px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff; font-weight: 700; font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center;
}

/* --------------------------------------------------------------------------
   4. AREA KONTEN
   -------------------------------------------------------------------------- */
/* Jarak konten dari sidebar HANYA berlaku di layar desktop (>=992px).
   Di bawah itu, AdminLTE menjadikan sidebar sebagai overlay yang
   nyembunyi total, jadi konten TIDAK BOLEH digeser -- dia harus full
   width. Kalau margin ini dipaksa di semua ukuran layar, sidebar yang
   harusnya off-canvas malah membuat celah gelap di kiri dan konten
   jadi sempit, persis masalah yang muncul di versi mobile. */
@media (min-width: 992px) {
  body .content-wrapper,
  body .main-header.navbar,
  body .main-footer {
    margin-left: var(--kp-sidebar-w) !important;
    transition: margin-left .3s ease-in-out;
  }
  body.sidebar-collapse .content-wrapper,
  body.sidebar-collapse .main-header.navbar,
  body.sidebar-collapse .main-footer {
    margin-left: 4.6rem !important;
  }
}

@media (max-width: 991.98px) {
  body .content-wrapper,
  body .main-header.navbar,
  body .main-footer {
    margin-left: 0 !important;
  }
  /* AdminLTE bawaan menyembunyikan sidebar pakai margin-left negatif
     sebesar LEBAR ASLINYA (250px). Karena sidebar kita lebih lebar
     (262px), kalau tidak ditimpa presisi, sisa 12px-nya akan terus
     nongol di kiri layar. Di sini kita paksa pakai --kp-sidebar-w yang
     sama persis, dan pakai !important supaya pasti menang dibanding
     rule bawaan AdminLTE yang levelnya lebih spesifik. */
  .main-sidebar,
  .main-sidebar::before {
    margin-left: calc(-1 * var(--kp-sidebar-w)) !important;
    transition: margin-left .3s ease-in-out !important;
  }
  body.sidebar-open .main-sidebar,
  body.sidebar-open .main-sidebar::before {
    margin-left: 0 !important;
  }
  /* Cegah body ikut ter-scroll ke samping gara-gara elemen yang melebar */
  body { overflow-x: hidden; }
}

.content-wrapper {
  background-color: var(--kp-bg) !important;
  padding-bottom: 24px;
}

/* Grafik: kunci tingginya supaya Chart.js tidak memanjang tanpa batas */
.chart-box { position: relative; height: 320px; width: 100%; }
.chart-box > canvas { position: absolute; inset: 0; }
.content-header { padding: 24px 24px 4px; }
.content-header h1 { font-size: 22px; font-weight: 700; }
.content { padding: 12px 24px 0; }
.container-fluid { padding-left: 0; padding-right: 0; }
.content .container-fluid,
.content-header .container-fluid { padding-left: 0; padding-right: 0; }

/* --------------------------------------------------------------------------
   5. SPANDUK SAMBUTAN
   -------------------------------------------------------------------------- */
.hero-banner {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  padding: 26px 30px;
  margin-bottom: 22px;
  background: linear-gradient(110deg, #1e1b4b 0%, #312e81 45%, #4c1d95 100%);
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.hero-banner::after {
  content: '';
  position: absolute; right: -60px; top: -90px;
  width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle, rgba(139, 92, 246, .45), transparent 65%);
  pointer-events: none;
}
.hero-avatar {
  width: 62px; height: 62px; flex: 0 0 62px;
  border-radius: 50%;
  background: linear-gradient(135deg, #818cf8, #a78bfa);
  color: #fff; font-size: 24px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 28px -10px rgba(129, 140, 248, .9);
}
.hero-text { flex: 1 1 320px; position: relative; z-index: 1; }
.hero-text h2 {
  color: #fff; font-size: 24px; font-weight: 700; margin: 0 0 6px;
}
.hero-meta {
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  color: #bfc2e8; font-size: 13px;
}
.hero-meta span { display: inline-flex; align-items: center; gap: 7px; }
.hero-meta i { font-size: 12px; opacity: .85; }
.hero-actions { display: flex; gap: 10px; position: relative; z-index: 1; }

.btn-hero-ghost, .btn-hero-solid {
  border-radius: 11px;
  padding: 10px 18px;
  font-size: 13.5px;
  font-weight: 600;
  border: 0;
  display: inline-flex; align-items: center; gap: 8px;
  transition: transform .12s ease, background-color .15s ease;
}
.btn-hero-ghost {
  background: rgba(255, 255, 255, .13);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .18);
}
.btn-hero-ghost:hover { background: rgba(255, 255, 255, .22); color: #fff; }
.btn-hero-solid { background: #6366f1; color: #fff; }
.btn-hero-solid:hover { background: #4f46e5; color: #fff; }

/* --------------------------------------------------------------------------
   6. KARTU STATISTIK
   -------------------------------------------------------------------------- */
.stat-card {
  background: var(--kp-surface);
  border: 1px solid var(--kp-border);
  border-radius: var(--kp-radius);
  padding: 18px;
  height: 100%;
  display: flex; gap: 14px; align-items: flex-start;
  box-shadow: var(--kp-shadow);
  transition: border-color .15s ease, transform .15s ease;
}
.stat-card:hover { border-color: #dcdef0; }

.stat-ico {
  width: 42px; height: 42px; flex: 0 0 42px;
  border-radius: var(--kp-radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
}
.stat-body { min-width: 0; flex: 1; }
.stat-value {
  color: var(--kp-ink);
  font-size: 24px; font-weight: 800; line-height: 1.15;
  letter-spacing: -.03em;
  margin: 0 0 2px;
  word-break: break-word;
}
.stat-value .unit { font-size: 14px; font-weight: 600; color: var(--kp-muted); }
.stat-label { color: var(--kp-ink-2); font-size: 13px; font-weight: 500; margin: 0; }
.stat-foot {
  margin-top: 9px; font-size: 11.5px; font-weight: 600;
  display: flex; align-items: center; gap: 6px;
}
.stat-foot .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.stat-note { color: var(--kp-muted); font-size: 11px; font-weight: 500; display: block; margin-top: 3px; }

/* Warna lembut untuk kotak ikon & catatan */
.tint-indigo { background: #eef0ff; color: #4f46e5; }
.tint-green  { background: #e7f8f1; color: #12a87c; }
.tint-amber  { background: #fff4e3; color: #e59009; }
.tint-rose   { background: #fdecef; color: #f43f5e; }
.tint-sky    { background: #e6f5fe; color: #0ea5e9; }
.tint-violet { background: #f3edfe; color: #8b5cf6; }
.tint-teal   { background: #e5f7f4; color: #0d9488; }
.tint-slate  { background: #eef0f6; color: #64748b; }

.text-indigo { color: #4f46e5 !important; }
.text-green2 { color: #12a87c !important; }
.text-amber2 { color: #e59009 !important; }
.text-rose2  { color: #f43f5e !important; }
.text-sky2   { color: #0ea5e9 !important; }
.text-violet2{ color: #8b5cf6 !important; }
.text-teal2  { color: #0d9488 !important; }
.text-slate2 { color: #64748b !important; }

/* --------------------------------------------------------------------------
   7. KARTU / PANEL
   -------------------------------------------------------------------------- */
.card {
  background: var(--kp-surface);
  border: 1px solid var(--kp-border) !important;
  border-radius: var(--kp-radius) !important;
  box-shadow: var(--kp-shadow) !important;
  margin-bottom: 22px;
}
/* AdminLTE menaruh garis warna di atas kartu -- kita hilangkan */
.card.card-outline,
.card.card-primary, .card.card-success, .card.card-danger,
.card.card-warning, .card.card-info, .card.card-secondary {
  border-top: 1px solid var(--kp-border) !important;
}

.card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--kp-border-soft) !important;
  padding: 18px 20px;
  border-radius: var(--kp-radius) var(--kp-radius) 0 0 !important;
  min-height: auto;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
}
.card-title {
  color: var(--kp-ink);
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -.02em;
  float: none;
  margin: 0;
}
.card-subtitle, .card-header .subtitle {
  display: block;
  color: var(--kp-muted); font-size: 12.5px; font-weight: 500; margin-top: 3px;
}
.card-body { padding: 20px; }
.card-footer {
  background: #fbfbfd !important;
  border-top: 1px solid var(--kp-border-soft) !important;
  border-radius: 0 0 var(--kp-radius) var(--kp-radius) !important;
  padding: 14px 20px;
}
.card-tools .btn { margin-left: 4px; }

/* --------------------------------------------------------------------------
   8. TABEL
   -------------------------------------------------------------------------- */
.table {
  color: var(--kp-ink-2);
  font-size: 13.5px;
  margin-bottom: 0;
  border-color: var(--kp-border-soft);
}
.table > thead > tr > th,
.table thead th {
  background: #fafbfd;
  color: var(--kp-muted) !important;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .02em;
  border-bottom: 1px solid var(--kp-border) !important;
  border-top: 0 !important;
  padding: 13px 14px;
  white-space: nowrap;
}
.table > tbody > tr > td,
.table tbody td {
  padding: 13px 14px;
  border-top: 1px solid var(--kp-border-soft) !important;
  vertical-align: middle;
}
.table tbody tr:hover { background: #fafbff; }
.table-striped > tbody > tr:nth-of-type(odd) > * { background: #fcfcfe; --bs-table-accent-bg: transparent; }
.table-bordered, .table-bordered th, .table-bordered td { border-color: var(--kp-border-soft) !important; }
.table-responsive { border-radius: var(--kp-radius-sm); }

/* --------------------------------------------------------------------------
   9. TOMBOL
   -------------------------------------------------------------------------- */
.btn {
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 600;
  padding: 9px 16px;
  letter-spacing: -.01em;
  border-width: 1px;
  box-shadow: none !important;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn-sm { padding: 6px 11px; font-size: 12.5px; border-radius: 9px; }
.btn-lg { padding: 12px 22px; font-size: 15px; border-radius: 12px; }

.btn-primary { background: var(--kp-brand); border-color: var(--kp-brand); }
.btn-primary:hover, .btn-primary:focus { background: var(--kp-brand-600); border-color: var(--kp-brand-600); }
.btn-success { background: var(--kp-green); border-color: var(--kp-green); }
.btn-success:hover { background: #0e8f69; border-color: #0e8f69; }
.btn-warning { background: var(--kp-amber); border-color: var(--kp-amber); color: #fff; }
.btn-warning:hover { background: #d98708; border-color: #d98708; color: #fff; }
.btn-danger { background: var(--kp-rose); border-color: var(--kp-rose); }
.btn-danger:hover { background: #e11d48; border-color: #e11d48; }
.btn-info { background: var(--kp-sky); border-color: var(--kp-sky); color: #fff; }
.btn-info:hover { background: #0284c7; border-color: #0284c7; color: #fff; }
.btn-secondary { background: #64748b; border-color: #64748b; }

.btn-outline-primary { color: var(--kp-brand); border-color: #d6d8fa; }
.btn-outline-primary:hover { background: var(--kp-brand); border-color: var(--kp-brand); }
.btn-light, .btn-default {
  background: #fff; border-color: var(--kp-border); color: var(--kp-ink-2);
}
.btn-light:hover, .btn-default:hover { background: #f5f6fa; border-color: #dcdef0; color: var(--kp-ink); }

/* --------------------------------------------------------------------------
   10. FORMULIR
   -------------------------------------------------------------------------- */
.form-control, .form-select, .custom-select, textarea.form-control {
  border: 1px solid var(--kp-border);
  border-radius: 10px;
  padding: 9px 13px;
  font-size: 13.5px;
  color: var(--kp-ink);
  background-color: #fff;
  box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus, .form-select:focus, .custom-select:focus {
  border-color: #c7c9f5;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, .10);
}
.form-control::placeholder { color: var(--kp-muted); }
.form-control-sm { padding: 6px 10px; font-size: 12.5px; border-radius: 9px; }
label, .form-label {
  color: var(--kp-ink);
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 6px;
}
.input-group-text {
  background: #f7f8fc;
  border-color: var(--kp-border);
  color: var(--kp-ink-2);
  border-radius: 10px;
  font-size: 13px;
}
.form-check-input:checked { background-color: var(--kp-brand); border-color: var(--kp-brand); }

/* --------------------------------------------------------------------------
   11. LENCANA & LAINNYA
   -------------------------------------------------------------------------- */
.badge {
  border-radius: 7px;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 9px;
  letter-spacing: -.01em;
}
.badge.bg-primary, .badge-primary { background: var(--kp-brand-soft) !important; color: var(--kp-brand) !important; }
.badge.bg-success, .badge-success { background: #e7f8f1 !important; color: var(--kp-green) !important; }
.badge.bg-warning, .badge-warning { background: #fff4e3 !important; color: #b8730a !important; }
.badge.bg-danger,  .badge-danger  { background: #fdecef !important; color: var(--kp-rose) !important; }
.badge.bg-info,    .badge-info    { background: #e6f5fe !important; color: #0284c7 !important; }
.badge.bg-secondary, .badge-secondary { background: #eef0f6 !important; color: #64748b !important; }

.alert { border: 0; border-radius: var(--kp-radius-sm); font-size: 13.5px; padding: 13px 16px; }
.alert-success { background: #e7f8f1; color: #0b7a58; }
.alert-danger  { background: #fdecef; color: #be123c; }
.alert-warning { background: #fff4e3; color: #b8730a; }
.alert-info    { background: #e6f5fe; color: #0369a1; }

.modal-content { border: 0; border-radius: 18px; box-shadow: 0 30px 70px -25px rgba(20, 24, 52, .35); }
.modal-header { border-bottom: 1px solid var(--kp-border-soft); padding: 18px 22px; }
.modal-title { font-size: 16px; font-weight: 700; color: var(--kp-ink); }
.modal-body { padding: 22px; }
.modal-footer { border-top: 1px solid var(--kp-border-soft); padding: 14px 22px; }

.dropdown-menu {
  border: 1px solid var(--kp-border);
  border-radius: 13px;
  box-shadow: 0 16px 40px -18px rgba(20, 24, 52, .28);
  padding: 6px;
  font-size: 13.5px;
}
.dropdown-item { border-radius: 8px; padding: 8px 11px; color: var(--kp-ink-2); }
.dropdown-item:hover { background: var(--kp-brand-soft); color: var(--kp-brand); }

.pagination .page-link {
  border: 1px solid var(--kp-border);
  color: var(--kp-ink-2);
  border-radius: 9px !important;
  margin: 0 3px;
  font-size: 13px;
  padding: 7px 12px;
}
.pagination .page-item.active .page-link { background: var(--kp-brand); border-color: var(--kp-brand); color: #fff; }

/* Kotak kecil bawaan AdminLTE, kalau masih ada di halaman lain */
.small-box { border-radius: var(--kp-radius); box-shadow: var(--kp-shadow) !important; }
.small-box > .inner { padding: 18px; }
.small-box h3 { font-size: 24px; font-weight: 800; letter-spacing: -.03em; }
.small-box p { font-size: 13px; }
.small-box .icon > i { font-size: 52px; opacity: .22; }

/* Footer */
.main-footer {
  background: transparent !important;
  border-top: 1px solid var(--kp-border) !important;
  margin-left: var(--kp-sidebar-w);
  color: var(--kp-muted);
  font-size: 12.5px;
  padding: 18px 24px;
}
.main-footer a { color: var(--kp-ink-2); font-weight: 600; }

/* SweetAlert2 disamakan */
.swal2-popup { border-radius: 18px !important; font-family: inherit !important; font-size: 14px !important; }
.swal2-title { color: var(--kp-ink) !important; font-size: 19px !important; font-weight: 700 !important; }
.swal2-html-container { color: var(--kp-ink-2) !important; font-size: 14px !important; }
.swal2-styled { border-radius: 10px !important; font-weight: 600 !important; padding: 10px 20px !important; }
.swal2-styled.swal2-confirm { background: var(--kp-brand) !important; }

/* --------------------------------------------------------------------------
   12. HALAMAN LOGIN / LUPA PASSWORD
   (berlaku kalau assets/theme.css juga dipanggil di login.php)
   -------------------------------------------------------------------------- */
body.login-page, body.register-page {
  background: linear-gradient(135deg, #141834 0%, #312e81 55%, #4c1d95 100%) !important;
  min-height: 100vh;
  align-items: center;
}
.login-box, .register-box { width: 400px; max-width: 94vw; }
.login-box .card, .register-box .card {
  border: 0 !important;
  border-radius: 20px !important;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .6) !important;
}
.login-box .card-body, .register-box .card-body { padding: 32px 30px; }
.login-box-msg, .register-box-msg {
  color: var(--kp-muted);
  font-size: 13.5px;
  padding: 0 0 20px;
}
.login-logo, .register-logo a { color: #fff !important; font-weight: 800; letter-spacing: -.02em; }
.login-page .btn-primary, .register-page .btn-primary { padding: 11px; font-size: 14px; }

/* --------------------------------------------------------------------------
   13. LAYAR KECIL
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .content-wrapper, .main-footer { margin-left: 0; }
  .topbar-search { display: none; }
  .content-header, .content { padding-left: 16px; padding-right: 16px; }
  .hero-banner { padding: 22px; }
  .hero-text h2 { font-size: 20px; }
  .hero-actions { width: 100%; }
  .hero-actions .btn-hero-ghost, .hero-actions .btn-hero-solid { flex: 1; justify-content: center; }
}
@media (max-width: 575.98px) {
  .topbar-crumb { display: none; }
  .stat-value { font-size: 20px; }
}

/* Aksesibilitas: fokus keyboard tetap terlihat */
a:focus-visible, button:focus-visible, .btn:focus-visible,
.form-control:focus-visible, .nav-link:focus-visible {
  outline: 2px solid var(--kp-brand);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* --------------------------------------------------------------------------
   14. DAFTAR TRANSAKSI (Log Order, Piutang, dst.)
   Komponen bersama supaya halaman daftar tampil sama dengan dashboard.
   -------------------------------------------------------------------------- */
.toolbar-card {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px; margin-bottom: 18px;
  background: var(--kp-surface);
  border: 1px solid var(--kp-border);
  border-radius: var(--kp-radius);
  box-shadow: var(--kp-shadow);
}
.toolbar-right { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.toolbar-right form { display: flex; gap: 8px; margin: 0; }
.toolbar-right .form-select { width: auto; }

.search-field { position: relative; flex: 1 1 260px; max-width: 420px; }
.search-field > i {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  color: var(--kp-muted); font-size: 13px; pointer-events: none;
}
.search-field .form-control { padding-left: 36px; }

.tgl-jam .tgl { color: var(--kp-ink); font-weight: 600; white-space: nowrap; }
.tgl-jam .jam { color: var(--kp-muted); font-size: 12px; }

.table .col-invoice { color: var(--kp-brand); font-weight: 700; white-space: nowrap; }
.table .col-customer { color: var(--kp-ink); font-weight: 600; }
.table .col-money { color: var(--kp-ink); font-weight: 700; white-space: nowrap; }
.table .col-paid { color: var(--kp-green); font-weight: 700; white-space: nowrap; }
.table .col-due { color: var(--kp-rose); font-weight: 700; white-space: nowrap; }

.items-chip {
  display: inline-block; max-width: 100%;
  background: #f7f8fc; border: 1px solid var(--kp-border-soft); border-radius: 10px;
  padding: 6px 10px; font-size: 12px; line-height: 1.5; color: var(--kp-ink-2);
}

/* Baris terbaru diberi penanda tipis di kiri */
.table tbody tr.row-latest > td:first-child { box-shadow: inset 3px 0 0 var(--kp-brand); }

.icon-btn {
  width: 32px; height: 32px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--kp-border); color: var(--kp-ink-2);
  font-size: 13px; cursor: pointer; text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.icon-btn:hover { background: var(--kp-brand-soft); border-color: #d6d8fa; color: var(--kp-brand); }
.icon-btn.danger:hover { background: #fdecef; border-color: #f9c9d2; color: var(--kp-rose); }
.aksi-group { display: flex; gap: 6px; }

.status-dropdown { display: flex; align-items: center; gap: 6px; }
.status-select { width: auto; min-width: 124px; font-weight: 700; font-size: 12.5px; padding: 6px 30px 6px 10px; }
.status-indicator { display: none; color: var(--kp-brand); font-size: 14px; }
.status-indicator.show { display: inline-block; }

/* Ringkasan angka di dalam modal (Bayar Piutang, dll.) */
.info-panel { background: #f7f8fc; border: 1px solid var(--kp-border-soft); border-radius: var(--kp-radius-sm); padding: 14px 16px; }
.info-row { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; font-size: 13.5px; }
.info-row span:first-child { color: var(--kp-muted); }
.info-row strong { color: var(--kp-ink); }

.empty-state { text-align: center; color: var(--kp-muted); padding: 44px 0; }
.empty-state i { display: block; font-size: 2.4rem; margin-bottom: 10px; }
.empty-state strong { color: var(--kp-ink); }

/* --------------------------------------------------------------------------
   15. LOGIN: kolom input gabungan ikon + isian
   -------------------------------------------------------------------------- */
.login-logo { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 22px; text-align: left; }
.login-logo .brand-copy .brand-name { font-size: 18px; }
.login-card-body .input-group .form-control { border-right: 0; border-radius: 10px 0 0 10px; }
.login-card-body .input-group-append .input-group-text {
  background: #fff; border-left: 0; border-radius: 0 10px 10px 0; color: var(--kp-muted);
}
.login-card-body .input-group:focus-within .form-control,
.login-card-body .input-group:focus-within .input-group-text { border-color: #c7c9f5; }

/* --------------------------------------------------------------------------
   16. PERBAIKAN SIDEBAR (tinggi, gulir, dan lebar)
   Sebelumnya lebar 262px dipaksa juga ke .sidebar di dalam <aside> yang
   sudah punya garis tepi, sehingga isinya 1px lebih lebar dan muncul bilah
   gulir horizontal di dasar sidebar. Tinggi area gulir juga dihitung
   AdminLTE untuk logo setinggi 57px, padahal logo kita ~78px, jadi dasar
   menu terpotong di bawah layar. Di sini <aside> dijadikan kolom: logo di
   atas, daftar menu mengisi sisa tinggi dan bisa digulir sendiri.
   -------------------------------------------------------------------------- */
body .main-sidebar {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: auto !important;   /* tinggi diatur lewat top:0 + bottom:0 (aman untuk browser HP) */
  top: 0;
  bottom: 0;
  z-index: 1040;
}
body .main-sidebar .brand-link { flex: 0 0 auto; width: 100% !important; }
body .main-sidebar .sidebar {
  flex: 1 1 auto;
  min-height: 0;
  width: auto !important;
  height: auto !important;
  border-right: 0 !important;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
body .main-sidebar .nav-sidebar { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
#sidebar-overlay { z-index: 1039; }

/* --------------------------------------------------------------------------
   17. TABLET & HP
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .main-header.navbar { padding: 0 12px; min-height: 60px; }
  .main-header .navbar-nav { flex-wrap: nowrap; }
  /* Area sentuh menu sidebar lebih lega */
  .nav-sidebar .nav-link { padding: 12px; }
  .card-header { padding: 14px 16px; }
  .card-body { padding: 16px; }
  .modal-body { padding: 18px; }
}

@media (max-width: 575.98px) {
  /* 16px mencegah iOS memperbesar layar otomatis saat kolom isian disentuh */
  .form-control, .form-select, .form-control-sm, textarea.form-control,
  .topbar-search input { font-size: 16px; }

  .content-header { padding: 18px 16px 2px; }
  .content-header h1 { font-size: 19px; }
  .stat-card { padding: 14px; gap: 12px; }
  .table > thead > tr > th, .table > tbody > tr > td { padding: 10px 12px; }
  .modal-dialog { margin: .75rem; }

  /* Toolbar halaman daftar (Log Order, dst.) jadi satu kolom */
  .toolbar-card { padding: 12px; }
  .search-field { flex-basis: 100%; max-width: none; }
  .toolbar-right, .toolbar-right form { width: 100%; }
  .toolbar-right .form-select { flex: 1 1 0; min-width: 0; }
  .toolbar-right .btn { width: 100%; }
}