/* ==========================================================================
   MODERN THEME OVERRIDE — Billing RT/RW Net
   Menimpa tampilan default AdminLTE tanpa mengubah struktur/fungsi halaman.
   Cukup di-link SETELAH semua CSS AdminLTE yang sudah ada.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');

:root {
  --brand-teal:        #0E4F56;
  --brand-teal-dark:   #0A3940;
  --brand-teal-light:  #E4EEEF;
  --brand-amber:       #E8871E;
  --brand-amber-dark:  #C96F0F;
  --bg-app:            #F5F7F6;
  --surface:           #FFFFFF;
  --border-hair:       #DDE3E2;
  --text-primary:      #16262A;
  --text-secondary:    #5B6C6F;
  --success:           #2E9E5B;
  --danger:            #D64545;
  --warning:           #E8871E;
  --info:              #2E7D9E;
  --radius:            10px;
}

/* ---------- Base ---------- */
body {
  background: var(--bg-app) !important;
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.box-title, .login-box-body h3, .control-sidebar-heading {
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

a { color: var(--brand-teal); }
a:hover, a:focus { color: var(--brand-amber); }

/* ---------- Top navbar ---------- */
.main-header .navbar,
.skin-blue .main-header .navbar,
.skin-blue .wrapper .main-header .navbar {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border-hair);
  box-shadow: none;
}
.main-header .navbar .nav > li > a,
.skin-blue .main-header .navbar .nav > li > a {
  color: var(--text-primary) !important;
}
.main-header .navbar .nav > li > a:hover,
.main-header .navbar .sidebar-toggle:hover {
  background: var(--brand-teal-light) !important;
  color: var(--brand-teal) !important;
}

/* Tombol hamburger (buka/tutup sidebar) - pastikan selalu terlihat jelas.
   Sembunyikan 3 garis bawaan (rawan tampil dobel/bentrok CSS lama), ganti
   dengan satu ikon FontAwesome yang bersih dan pasti konsisten. */
.main-header .navbar .sidebar-toggle {
  color: var(--text-primary) !important;
  position: relative;
}
.main-header .navbar .sidebar-toggle .icon-bar {
  display: none !important;
}
.main-header .navbar .sidebar-toggle::before {
  font-family: "FontAwesome";
  content: "\f0c9"; /* ikon fa-bars */
  font-size: 20px;
  line-height: 1;
  color: var(--text-primary);
}
.main-header .navbar .sidebar-toggle:hover::before {
  color: var(--brand-teal);
}
.main-header .logo,
.skin-blue .main-header .logo {
  background: var(--brand-teal) !important;
  color: #fff !important;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 800;
  border-bottom: none;
}
.main-header .logo:hover { background: var(--brand-teal-dark) !important; }

/* ---------- Sidebar ---------- */
.main-sidebar, .skin-blue .main-sidebar {
  background: var(--brand-teal) !important;
}
.sidebar-menu > li > a {
  color: rgba(255,255,255,0.85) !important;
  border-left: 3px solid transparent;
  font-weight: 500;
}
.sidebar-menu > li > a:hover,
.sidebar-menu > li.active > a,
.sidebar-menu > li.menu-open > a {
  background: rgba(255,255,255,0.08) !important;
  border-left: 3px solid var(--brand-amber);
  color: #fff !important;
}
.sidebar-menu > li.active > a { font-weight: 600; }
.sidebar-menu .treeview-menu > li > a {
  color: rgba(255,255,255,0.7) !important;
}
.sidebar-menu .treeview-menu > li > a:hover,
.sidebar-menu .treeview-menu > li.active > a {
  color: #fff !important;
  background: rgba(255,255,255,0.06) !important;
}
.sidebar-menu .treeview-menu { background: rgba(0,0,0,0.12) !important; }

/* Header grup menu (UTAMA, LAYANAN INTERNET, PELANGGAN, KEUANGAN, SISTEM) */
.sidebar-menu > li.header {
  background: rgba(0,0,0,0.18) !important;
  color: rgba(255,255,255,0.55) !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 10px 15px 8px !important;
  margin-top: 4px;
}
.user-panel { border-bottom: 1px solid rgba(255,255,255,0.1); }
.user-panel .info, .user-panel .info a { color: #fff !important; }
.sidebar-form input[type="text"] { border-radius: var(--radius) 0 0 var(--radius); }

/* ---------- Content boxes / cards ---------- */
.content-wrapper, .right-side {
  background: var(--bg-app) !important;
}
.box {
  background: var(--surface);
  border: 1px solid var(--border-hair);
  border-radius: var(--radius);
  box-shadow: none;
}
.box-header {
  border-bottom: 1px solid var(--border-hair);
  padding: 16px 18px;
}
.box-header.with-border { border-bottom: 1px solid var(--border-hair); }
.box-body { padding: 18px; }
.box.box-primary { border-top: none; }
.box.box-solid.box-primary > .box-header {
  background: var(--brand-teal);
  color: #fff;
  border-radius: var(--radius) var(--radius) 0 0;
}

/* small-box / info-box (dashboard stat widgets) */
.small-box {
  border-radius: var(--radius);
  box-shadow: none;
  border: 1px solid var(--border-hair);
}
.small-box > .small-box-footer {
  background: rgba(0,0,0,0.03);
  border-radius: 0 0 var(--radius) var(--radius);
}
.small-box h3, .small-box p { color: inherit; }
.info-box {
  border-radius: var(--radius);
  box-shadow: none;
  border: 1px solid var(--border-hair);
  background: var(--surface);
}
.info-box-icon { border-radius: var(--radius) 0 0 var(--radius); }

/* callouts */
.callout { border-radius: var(--radius); border-left-width: 4px; }

/* ---------- Buttons ---------- */
.btn {
  border-radius: 8px;
  font-weight: 600;
  border: none;
  box-shadow: none;
  text-shadow: none;
}
.btn-primary, .bg-blue, .label-primary {
  background: var(--brand-teal) !important;
  color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--brand-teal-dark) !important;
}
.btn-warning, .bg-yellow {
  background: var(--brand-amber) !important;
  color: #fff !important;
  border: none;
}
.btn-warning:hover { background: var(--brand-amber-dark) !important; }
.btn-success, .bg-green { background: var(--success) !important; }
.btn-danger, .bg-red { background: var(--danger) !important; }
.btn-info, .bg-aqua { background: var(--info) !important; }
.btn-default {
  background: #EEF2F1 !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-hair) !important;
}
.btn-default:hover { background: #E4E9E8 !important; }

/* ---------- Forms ---------- */
.form-control {
  border: 1px solid var(--border-hair);
  border-radius: 8px;
  box-shadow: none;
  color: var(--text-primary);
}
.form-control:focus {
  border-color: var(--brand-teal);
  box-shadow: 0 0 0 3px var(--brand-teal-light);
}
label { color: var(--text-primary); font-weight: 600; font-size: 13px; }

/* ---------- Tables ---------- */
.table > thead > tr > th {
  border-bottom: 2px solid var(--border-hair);
  color: var(--text-secondary);
  font-weight: 700;
  font-size: 12.5px;
  text-transform: none;
}
.table > tbody > tr > td {
  border-top: 1px solid var(--border-hair);
  vertical-align: middle;
}
.table-hover > tbody > tr:hover {
  background: var(--brand-teal-light);
}
.table-bordered { border: 1px solid var(--border-hair); }
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td { border: 1px solid var(--border-hair); }

/* DataTables controls */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  border-radius: 8px;
  border: 1px solid var(--border-hair);
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--brand-teal) !important;
  border-color: var(--brand-teal) !important;
  color: #fff !important;
}

/* ---------- Badges / labels ---------- */
.label { border-radius: 6px; font-weight: 600; }
.badge { border-radius: 999px; }

/* ---------- Login pages ---------- */
.login-page, .login-img {
  background: linear-gradient(160deg, var(--brand-teal) 0%, var(--brand-teal-dark) 100%) !important;
}
.login-box-body {
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(10, 57, 64, 0.18);
  border: none;
}
.login-box-body h3 { font-weight: 800; }
.login-box .form-control { border-radius: 8px; }
.login-box .btn-primary {
  background: var(--brand-amber) !important;
  border-radius: 8px;
  font-weight: 700;
}
.login-box .btn-primary:hover { background: var(--brand-amber-dark) !important; }

/* ---------- Misc ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-app); }
::-webkit-scrollbar-thumb { background: #C7D1D0; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #AAB8B6; }

.modal-content { border-radius: var(--radius); border: none; }
.nav-tabs-custom { border-radius: var(--radius); overflow: hidden; }
.nav-tabs-custom > .nav-tabs > li.active { border-top-color: var(--brand-amber); }

/* ==========================================================================
   TAMPILAN MOBILE / ANDROID (layar <= 767px)
   ========================================================================== */
@media (max-width: 767px) {

  /* Konten utama: kurangi padding supaya tidak boros ruang di layar kecil */
  .content-wrapper > .content,
  .content-wrapper section.content {
    padding: 10px 8px !important;
  }
  .box-body { padding: 12px !important; }
  .box-header { padding: 12px 14px !important; }

  /* Judul halaman jangan kegedean di HP */
  .content-header > h1 {
    font-size: 19px !important;
  }
  .content-header > h1 > small { display: block; margin-top: 2px; }

  /* Topbar: logo & tombol menu lebih ringkas, tombol lebih besar untuk jari */
  .main-header .logo { width: 60px !important; font-size: 13px; }
  .main-header .sidebar-toggle {
    padding: 18px 18px !important;
  }
  .main-header .sidebar-toggle::before {
    font-size: 22px;
  }

  /* Sidebar: item menu dibuat lebih tinggi supaya gampang disentuh jari */
  .sidebar-menu > li > a {
    padding: 14px 15px;
    font-size: 14.5px;
  }
  .sidebar-menu .treeview-menu > li > a {
    padding: 11px 15px 11px 30px;
  }
  .sidebar-menu > li.header {
    padding: 12px 15px 8px !important;
  }

  /* Tabel: JANGAN biarkan tabel mendorong lebar seluruh halaman.
     Bungkus scroll horizontal HANYA di dalam tabelnya, bukan di body. */
  .table-responsive,
  .box-body {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  table.table, table.dataTable {
    font-size: 13px;
    white-space: nowrap;
  }

  /* Kontrol DataTables (cari/tampilkan/halaman): ditumpuk vertikal, full-width */
  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_filter,
  .dataTables_wrapper .dataTables_info,
  .dataTables_wrapper .dataTables_paginate {
    float: none !important;
    width: 100%;
    text-align: left !important;
    margin-bottom: 8px;
  }
  .dataTables_wrapper .dataTables_filter input {
    width: 100%;
    margin-left: 0 !important;
    margin-top: 4px;
  }
  .dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 6px 10px !important;
  }

  /* small-box / info-box (kartu statistik dashboard): 1 kolom penuh, rapi */
  .small-box, .info-box {
    margin-bottom: 12px;
  }
  .small-box h3 { font-size: 26px; }

  /* Tombol: full-width di HP supaya mudah disentuh, jarak antar tombol jelas */
  .box-body .btn:not(.btn-block) {
    padding: 9px 14px;
  }
  .box-footer .btn, .box-body form .btn {
    margin-bottom: 6px;
  }

  /* Form: input jangan terlalu pendek tingginya, mudah disentuh */
  .form-control {
    min-height: 40px;
    font-size: 15px; /* mencegah auto-zoom Safari/Chrome saat fokus input */
  }
  label { font-size: 12.5px; }

  /* Login page: card tidak terlalu lebar & padding pas layar kecil */
  .login-box { width: 90%; max-width: 360px; margin: 8% auto; }
  .login-box-body { padding: 20px; }

  /* Modal: mepet ke tepi layar dengan margin kecil, bukan lebar penuh kaku */
  .modal-dialog { margin: 10px; }

  /* Sembunyikan kolom "hidden-xs" bawaan AdminLTE (memang sudah didesain untuk ini) */
  .hidden-xs { display: none !important; }
}