/* =====================================================================
   theme-tetanggaku.css  v1
   Tema tampilan ala TetanggaKu: teal #0D9488, latar putih/abu terang,
   bayangan lembut, kartu rounded, tombol pill.
   MURNI CSS: tidak mengubah HTML/PHP/JS. Hapus <link> file ini = kembali ke tampilan lama.
   Semua selector diawali "html body" agar menang atas <style> inline tiap halaman.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ---------- 1. TOKEN (warna lama halaman & Bootstrap 5.3 ikut dialihkan) ---------- */
html body {
  --tk-primary:#0D9488; --tk-primary-700:#0F766E; --tk-primary-50:#F0FDFA; --tk-primary-100:#CCFBF1;
  --tk-ink:#0F172A; --tk-text:#475569; --tk-muted:#94A3B8; --tk-line:#E8EEF3; --tk-bg:#F6F8FA;
  --tk-radius:16px; --tk-radius-sm:12px;
  --tk-shadow:0 4px 24px -6px rgba(15,23,42,.08), 0 1px 3px rgba(15,23,42,.04);
  --tk-shadow-lg:0 18px 48px -12px rgba(15,23,42,.20);
  --tk-font:'Plus Jakarta Sans','Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;

  --primary:#0D9488; --success:#059669; --info:#0EA5E9; --warning:#F59E0B;
  --danger:#EF4444; --secondary:#64748B; --dark:#0F172A; --light:#F6F8FA;

  --bs-primary:#0D9488;   --bs-primary-rgb:13,148,136;
  --bs-success:#059669;   --bs-success-rgb:5,150,105;
  --bs-info:#0EA5E9;      --bs-info-rgb:14,165,233;
  --bs-warning:#F59E0B;   --bs-warning-rgb:245,158,11;
  --bs-danger:#EF4444;    --bs-danger-rgb:239,68,68;
  --bs-secondary:#64748B; --bs-secondary-rgb:100,116,139;
  --bs-dark:#0F172A;      --bs-dark-rgb:15,23,42;
  --bs-body-color:#475569; --bs-body-bg:#F6F8FA; --bs-border-color:#E8EEF3;
  --bs-link-color:#0D9488; --bs-link-hover-color:#0F766E;
}

/* ---------- 2. DASAR ---------- */
html body { background:var(--tk-bg); color:var(--tk-text); -webkit-font-smoothing:antialiased; }
/* Font seragam, KECUALI ikon Font Awesome & kode */
html body *:not(i):not([class*="fa-"]):not(code):not(pre):not(kbd):not(.swal2-icon):not(.swal2-icon *) {
  font-family:var(--tk-font) !important;
}
html body h1, html body h2, html body h3, html body h4, html body h5, html body h6 { color:var(--tk-ink); letter-spacing:-.01em; }
html body a { color:var(--tk-primary); }
html body a:hover { color:var(--tk-primary-700); }

/* ---------- 3. TOP NAV (putih, bayangan tipis) ---------- */
html body .top-nav { background:#fff; color:var(--tk-ink); border-bottom:1px solid var(--tk-line); box-shadow:0 1px 12px rgba(15,23,42,.05); }
html body .nav-toggle { background:transparent; color:var(--tk-text); border-right:1px solid var(--tk-line); }
html body .nav-toggle:hover { background:var(--tk-primary-50); color:var(--tk-primary); }
html body .nav-brand, html body .nav-brand .brand-name { color:var(--tk-primary-700); font-weight:800; }
html body .nav-brand:hover { color:var(--tk-primary); background:transparent; }
html body .nav-brand i, html body .nav-brand .company-logo { color:var(--tk-primary); }
html body .nav-brand .brand-subtitle { color:var(--tk-muted); }
html body .profile-dropdown { color:var(--tk-ink); border-radius:999px; }
html body .profile-dropdown:hover { background:var(--tk-primary-50); }
html body .profile-dropdown span { color:var(--tk-ink); font-weight:600; }
html body .profile-img { background:var(--tk-primary-100); color:var(--tk-primary-700); }

/* ---------- 4. SIDEBAR (putih; menu aktif = pil teal muda + garis kiri) ---------- */
html body .sidebar { background:#fff; border-right:1px solid var(--tk-line); box-shadow:none; }
html body .sidebar.show { box-shadow:var(--tk-shadow-lg); }
html body .sidebar-menu li { border-bottom:0; }
html body .sidebar-menu a {
  color:var(--tk-text); font-weight:600; font-size:13.5px;
  margin:3px 12px; padding:11px 14px; border-radius:var(--tk-radius-sm);
  border-left:3px solid transparent; transition:background .2s, color .2s;
}
html body .sidebar-menu a:hover { background:var(--tk-primary-50); color:var(--tk-primary-700); }
html body .sidebar-menu a.active {
  background:#DDF3EF; color:var(--tk-primary-700); border-left-color:var(--tk-primary);
}
html body .sidebar-menu .menu-icon { color:var(--tk-muted); }
html body .sidebar-menu a:hover .menu-icon, html body .sidebar-menu a.active .menu-icon { color:var(--tk-primary); }
html body .sidebar.collapsed .sidebar-menu a { margin:3px 10px; }
html body .submenu { background:transparent; }
html body .submenu a { font-weight:500; font-size:13px; white-space:normal; line-height:1.35; color:var(--tk-text); padding:9px 14px 9px 46px; margin:2px 12px; }
html body .submenu a:hover { background:var(--tk-primary-50); color:var(--tk-primary-700); }
/* Grup submenu yang sedang aktif terbuka otomatis (sidebar.php memberi style="display:block") */
html body .sidebar:not(.collapsed) .submenu[style*="display:block"] { max-height:500px; }
/* Blok profil di sidebar (warna putih bawaan ditulis inline di sidebar.php) */
html body .user-profile-section { border-bottom-color:var(--tk-line) !important; }
html body .user-profile-section h6 { color:var(--tk-ink) !important; font-weight:700 !important; }
html body .user-profile-section small { color:var(--tk-muted) !important; }
html body .user-avatar { border-color:var(--tk-primary) !important; box-shadow:0 0 0 4px var(--tk-primary-100); }
html body .user-avatar div[style*="1ABB9C"] { background:var(--tk-primary) !important; }
/* Saat sidebar menciut: avatar mengecil, nama disembunyikan (ukuran aslinya ditulis inline di sidebar.php) */
html body .sidebar.collapsed .user-profile-section { padding:12px 0 !important; margin-bottom:6px !important; }
html body .sidebar.collapsed .user-avatar { width:40px !important; height:40px !important; margin:0 auto !important; }
html body .sidebar.collapsed .user-info { display:none; }
html body .sidebar-footer { background:#F8FAFC; border-top:1px solid var(--tk-line); }
html body .sidebar-footer a { color:var(--tk-muted); }
html body .sidebar-footer a:hover { color:var(--tk-primary); background:var(--tk-primary-50); }

/* ---------- 5. HEADER HALAMAN & KARTU ---------- */
html body .page-title { background:#fff; border:1px solid var(--tk-line); border-radius:var(--tk-radius); box-shadow:var(--tk-shadow); padding:18px 24px; }
html body .page-title h1 { color:var(--tk-ink); font-weight:800; letter-spacing:-.02em; }
html body .page-subtitle { color:var(--tk-text); }
html body .card, html body .content-card, html body .stat-card, html body .resource-card {
  background:#fff; border:1px solid var(--tk-line); border-radius:var(--tk-radius); box-shadow:var(--tk-shadow);
}
html body .resource-card { background:#F8FAFC; box-shadow:none; }
html body .card-header { background:transparent; border-bottom:1px solid var(--tk-line); border-radius:var(--tk-radius) var(--tk-radius) 0 0 !important; }
html body .card-header h5, html body .card-header h3 { color:var(--tk-ink); font-weight:700; }
html body .card-footer { background:transparent; border-top:1px solid var(--tk-line); }
html body .content-card:hover, html body .stat-card:hover { box-shadow:0 10px 32px -10px rgba(15,23,42,.14); transform:translateY(-2px); }
/* Kartu statistik: aksen garis kiri tebal -> kartu bersih (warna dibawa ikon) */
html body .stat-card.border-start { border:1px solid var(--tk-line) !important; }
html body .icon-circle { border-radius:14px; }
html body .stat-card h6 { color:var(--tk-muted); letter-spacing:.06em; }
html body .stat-card h3 { color:var(--tk-ink); font-weight:800; }
html body .table-responsive { border-radius:var(--tk-radius); }

/* Baris judul + tombol aksi di header halaman: boleh turun baris agar tidak melebar di HP */
@media (max-width: 992px) {
  html body .page-title .d-flex.justify-content-between { flex-wrap:wrap; gap:14px; }
  html body .page-title .d-flex.gap-2 { flex-wrap:wrap; }
}
html body .modal-title i { color:var(--tk-primary); }

/* ---------- 6. TOMBOL (pil) ---------- */
html body .btn {
  border-radius:24px; font-weight:600; text-transform:none; letter-spacing:0; line-height:1.35;
  padding:9px 18px; transition:background .2s, box-shadow .2s, transform .15s;
}
html body .btn-sm, html body .btn-group-sm > .btn { padding:6px 12px; }
html body .btn-primary, html body .btn-login {
  background:var(--tk-primary); border-color:var(--tk-primary); color:#fff;
  box-shadow:0 8px 18px -8px rgba(13,148,136,.65);
}
html body .btn-primary:hover, html body .btn-login:hover {
  background:var(--tk-primary-700); border-color:var(--tk-primary-700); color:#fff; transform:translateY(-1px);
}
html body .btn-success { background:#059669; border-color:#059669; color:#fff; }
html body .btn-success:hover { background:#047857; border-color:#047857; }
html body .btn-warning { background:#FBBF24; border-color:#FBBF24; color:#422006; }
html body .btn-warning:hover { background:#F59E0B; border-color:#F59E0B; color:#422006; }
html body .btn-danger { background:#EF4444; border-color:#EF4444; color:#fff; }
html body .btn-danger:hover { background:#DC2626; border-color:#DC2626; }
html body .btn-info { background:#0EA5E9; border-color:#0EA5E9; color:#fff; }
html body .btn-info:hover { background:#0284C7; border-color:#0284C7; color:#fff; }
html body .btn-secondary { background:#E2E8F0; border-color:#E2E8F0; color:var(--tk-ink); }
html body .btn-secondary:hover { background:#CBD5E1; border-color:#CBD5E1; color:var(--tk-ink); }
html body .btn-outline-primary { color:var(--tk-primary); border-color:var(--tk-primary); background:#fff; }
html body .btn-outline-primary:hover { background:var(--tk-primary); color:#fff; }
html body .btn:focus-visible, html body .form-control:focus, html body .form-select:focus { outline:0; box-shadow:0 0 0 4px rgba(13,148,136,.18); }
/* Grup tombol aksi di tabel: pil terpisah, bukan blok menempel */
html body .btn-group { gap:6px; flex-wrap:wrap; }
html body .btn-group > .btn, html body .btn-group > .btn:not(:first-child), html body .btn-group > .btn:not(:last-child) {
  border-radius:24px !important; margin-left:0 !important;
}

/* Tombol bulk WA di atas tabel tagihan: beri jarak dari tepi kartu */
html body #bulk-send-wa { margin:14px 0 4px 16px; }

/* ---------- 7. FORM ---------- */
html body .form-control, html body .form-select, html body .input-group-text {
  border:1px solid #DCE3EA; border-radius:var(--tk-radius-sm); background-color:#fff; color:var(--tk-ink);
}
html body .form-control:focus, html body .form-select:focus { border-color:var(--tk-primary); }
html body .form-label { color:var(--tk-ink); font-weight:600; }
html body .input-group > .form-control:not(:last-child), html body .input-group > .input-group-text:not(:last-child) { border-top-right-radius:0; border-bottom-right-radius:0; }
html body .input-group > .form-control:not(:first-child) { border-top-left-radius:0; border-bottom-left-radius:0; }
html body .input-group > .input-group-text:first-child { border-top-right-radius:0; border-bottom-right-radius:0; }

/* ---------- 8. TABEL (header terang, baris lega) ---------- */
html body .table thead th {
  background:#F8FAFC; color:var(--tk-muted); font-size:11.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; border-bottom:1px solid var(--tk-line); border-top:0;
}
html body .table tbody td { border-top:1px solid #F1F5F9; color:var(--tk-text); }
html body .table tbody tr:hover { background:rgba(13,148,136,.04); }
html body .table tbody td strong { color:var(--tk-ink); }

/* ---------- 9. BADGE & PENANDA (pil lembut) ---------- */
html body .badge { border-radius:999px; font-weight:700; font-size:11.5px; padding:5px 11px; letter-spacing:.01em; text-transform:none; }
html body .badge.badge-success, html body .badge.bg-success { background-color:#D1FAE5 !important; color:#047857 !important; }
html body .badge.badge-warning, html body .badge.bg-warning { background-color:#FEF3C7 !important; color:#B45309 !important; }
html body .badge.badge-danger,  html body .badge.bg-danger  { background-color:#FEE2E2 !important; color:#B91C1C !important; }
html body .badge.badge-info,    html body .badge.bg-info    { background-color:#E0F2FE !important; color:#0369A1 !important; }
html body .badge.badge-dark,    html body .badge.bg-dark    { background-color:#E2E8F0 !important; color:#334155 !important; }
html body .badge.bg-primary                                  { background-color:#CCFBF1 !important; color:#0F766E !important; }
html body .days-indicator, html body .pppoe-status { border-radius:999px; font-weight:700; }
html body .days-critical { background:#FEE2E2; color:#B91C1C; }
html body .days-warning  { background:#FEF3C7; color:#B45309; }
html body .days-normal   { background:#D1FAE5; color:#047857; }
html body .pppoe-active   { background:#D1FAE5; color:#047857; }
html body .pppoe-isolated { background:#FEE2E2; color:#B91C1C; }

/* Utilitas warna teks (halaman memaksa warna Gentelella dengan !important) */
html body .text-primary   { color:var(--tk-primary) !important; }
html body .text-success   { color:#059669 !important; }
html body .text-info      { color:#0EA5E9 !important; }
html body .text-warning   { color:#D97706 !important; }
html body .text-danger    { color:#DC2626 !important; }
html body .text-dark      { color:var(--tk-ink) !important; }
html body .text-muted     { color:var(--tk-muted) !important; }

/* ---------- 10. ALERT, MODAL, PAGINASI, PROGRESS, DROPDOWN ---------- */
html body .alert { border:1px solid transparent; border-radius:14px; }
html body .alert-info    { background:#F0FDFA; color:#0F766E; border-color:#CCFBF1; }
html body .alert-success { background:#ECFDF5; color:#047857; border-color:#D1FAE5; }
html body .alert-warning { background:#FFFBEB; color:#B45309; border-color:#FDE68A; }
html body .alert-danger  { background:#FEF2F2; color:#B91C1C; border-color:#FECACA; }

html body .modal-content { border:0; border-radius:20px; box-shadow:var(--tk-shadow-lg); overflow:hidden; }
html body .modal-header { background:#fff !important; color:var(--tk-ink) !important; border-bottom:1px solid var(--tk-line); }
html body .modal-header .modal-title { color:var(--tk-ink); font-weight:700; }
html body .modal-header .btn-close { filter:none; opacity:.55; }
html body .modal-footer { border-top:1px solid var(--tk-line); }

html body .pagination { gap:4px; }
html body .pagination .page-link { border:1px solid var(--tk-line); border-radius:999px !important; color:var(--tk-text); min-width:38px; text-align:center; }
html body .pagination .page-item.active .page-link { background:var(--tk-primary); border-color:var(--tk-primary); color:#fff; }
html body .pagination .page-link:hover { background:var(--tk-primary-50); color:var(--tk-primary-700); }

html body .progress { background:#EEF2F6; border-radius:999px; }
html body .progress-bar { border-radius:999px; }
html body .list-group-item { border-color:var(--tk-line); }

html body .dropdown-menu { border:1px solid var(--tk-line); border-radius:14px; box-shadow:var(--tk-shadow-lg); padding:6px; }
html body .dropdown-menu .dropdown-item { border-radius:10px; color:var(--tk-text); font-weight:500; }
html body .dropdown-menu .dropdown-item:hover { background:var(--tk-primary-50); color:var(--tk-primary-700); }

/* SweetAlert2 (dipakai tombol Kirim WA) */
html body .swal2-popup { border-radius:20px !important; box-shadow:var(--tk-shadow-lg) !important; }
html body .swal2-styled.swal2-confirm { background-color:var(--tk-primary) !important; border-radius:999px !important; box-shadow:none !important; }
html body .swal2-styled.swal2-cancel  { background-color:#E2E8F0 !important; color:var(--tk-ink) !important; border-radius:999px !important; }

/* ---------- 11. FOOTER ---------- */
html body .footer { background:#fff; border-top:1px solid var(--tk-line); color:var(--tk-muted); }
html body .footer-links a { color:var(--tk-muted); }
html body .footer-links a:hover { color:var(--tk-primary); }

/* ---------- 12. HALAMAN LOGIN (login.php memuat file ini sendiri) ---------- */
html body:has(.login-container) { background:linear-gradient(180deg,#F0FDFA 0%,#FFFFFF 70%); }
html body .login-card { border:1px solid var(--tk-line); border-radius:24px; box-shadow:var(--tk-shadow-lg); }
html body .login-title, html body .login-subtitle { color:var(--tk-ink); }
html body .btn-login { height:46px; font-size:15px; }
html body .login-footer, html body .protected-footer small { color:var(--tk-muted); }
html body .protected-footer::before { background:linear-gradient(90deg,transparent,var(--tk-line),transparent); }

/* ---------- 13. SCROLLBAR HALUS ---------- */
html body .sidebar::-webkit-scrollbar { width:6px; }
html body .sidebar::-webkit-scrollbar-thumb { background:#D5DEE6; border-radius:999px; }