/* ============================================================
   MyTELANAS — app.css
   Mobile-first • iPhone 12 Pro (390px) focus
   ============================================================ */

/* ── 1. TOKENS ─────────────────────────────────────────────── */
:root {
  --blue:    #075bc7;
  --blue2:   #1e90ff;
  --navy:    #061b3c;
  --sky:     #38bdf8;
  --soft:    #f4f8ff;
  --border:  #e5efff;
  --text:    #10233f;
  --muted:   #64748b;
  --green:   #16a34a;
  --red:     #dc2626;
  --orange:  #f59e0b;
  --shadow-sm: 0 4px 14px rgba(6,27,60,.07);
  --shadow:    0 10px 28px rgba(6,27,60,.10);
  --shadow-lg: 0 18px 44px rgba(6,27,60,.14);
  --radius:  20px;
  --radius-sm: 14px;
  --radius-xs: 10px;
}

/* ── 2. RESET ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--soft);
  color: var(--text);
  font-size: 15px;
  line-height: 1.5;
}
a { text-decoration: none; color: inherit; }
button { font-family: inherit; }

/* ── 3. UTILITY ─────────────────────────────────────────────── */
.muted    { color: var(--muted); }
.text-blue{ color: var(--blue); }
.fw9      { font-weight: 900; }
.hidden   { display: none !important; }
.mobile-only { display: none !important; }
.desktop-only { display: block !important; }
.desktop-customer-table { display: block !important; }
.mobile-customer-list,
.mobile-pagination { display: none !important; }

/* ── 4. BUTTONS ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  color: #fff;
  background: var(--navy);
  transition: opacity .15s;
  text-decoration: none;
  white-space: nowrap;
}
.btn:active { opacity: .82; }
.btn-primary { background: var(--blue); }
.btn-dark    { background: var(--navy); }
.btn-green   { background: var(--green); }
.btn-red     { background: var(--red); }

/* ── 5. FORM ELEMENTS ───────────────────────────────────────── */
.input, input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select, textarea {
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  font-size: 15px;
  font-family: inherit;
  background: #fff;
  color: var(--text);
  outline: none;
  transition: border-color .15s;
}
.input:focus,
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
select:focus, textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(7,91,199,.10);
}
textarea { min-height: 90px; resize: vertical; }
.form-group { margin-bottom: 16px; }
.form-group label {
  display: block;
  margin-bottom: 7px;
  font-weight: 900;
  font-size: 13px;
  color: var(--navy);
}
.input-hint { font-size: 12px; color: var(--muted); margin-top: 4px; }

/* ── 6. CARD ────────────────────────────────────────────────── */
.card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 18px;
}

/* ── 7. GRID ────────────────────────────────────────────────── */
.grid   { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ── 8. STAT ────────────────────────────────────────────────── */
.stat {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 20px;
  box-shadow: var(--shadow-sm);
}
.stat small { color: var(--muted); font-weight: 800; font-size: 12px; }
.stat h2    { font-size: 32px; margin-top: 8px; color: var(--blue); }

/* ── 9. BADGE ───────────────────────────────────────────────── */
.badge {
  display: inline-block;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 900;
  background: #eaf3ff;
  color: var(--blue);
}
.badge.active  { background: #dcfce7; color: #166534; }
.badge.isolir  { background: #fee2e2; color: #991b1b; }
.badge.inactive{ background: #e5e7eb; color: #374151; }
.badge.paid    { background: #dcfce7; color: #166534; }
.badge.pending { background: #fef3c7; color: #92400e; }

/* ── 10. ALERT ──────────────────────────────────────────────── */
.alert {
  background: #dff2ff;
  color: #075985;
  border-radius: 14px;
  padding: 13px 16px;
  margin-bottom: 16px;
  font-weight: 800;
  font-size: 14px;
}

/* ── 11. TABLE ──────────────────────────────────────────────── */
.table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
table  { width: 100%; border-collapse: collapse; }
th, td { padding: 12px 11px; border-bottom: 1px solid #edf2ff; text-align: left; vertical-align: top; font-size: 13px; }
th     { font-size: 11px; color: var(--muted); text-transform: uppercase; font-weight: 900; }
th a   { color: var(--muted); }

/* ── 12. ACTIONS ROW ────────────────────────────────────────── */
.actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── 13. TOPBAR ─────────────────────────────────────────────── */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 22px;
}
.topbar h1, .topbar h2 { font-size: 26px; color: var(--navy); }

/* ── 14. DESKTOP LAYOUT ─────────────────────────────────────── */
.layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  min-height: 100vh;
}
.sidebar {
  background: var(--navy);
  color: #fff;
  padding: 26px 22px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.brand          { margin-bottom: 30px; }
.brand-title    { font-size: 34px; font-weight: 900; color: #63a4ff; }
.brand-subtitle { margin-top: 7px; color: #91a7c6; font-size: 13px; font-weight: 700; }

.side-menu a,
.side-parent {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-decoration: none;
  color: #fff;
  padding: 12px 13px;
  border-radius: 13px;
  margin: 6px 0;
  font-size: 15px;
  font-weight: 900;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background .15s;
}
.side-menu a:hover, .side-parent:hover { background: rgba(255,255,255,.08); }
.side-menu a.active, .side-parent.open {
  background: var(--blue);
  box-shadow: 0 8px 22px rgba(7,91,199,.28);
}
.side-parent .chev { font-size: 20px; transition: transform .2s; }
.side-parent.open  .chev { transform: rotate(90deg); }

.side-submenu { display: none; margin: 3px 0 10px 10px; padding-left: 12px; border-left: 2px solid rgba(255,255,255,.14); }
.side-submenu.show { display: block; }
.side-submenu a { font-size: 13px; font-weight: 800; color: #dbeafe; padding: 9px 11px; margin: 4px 0; border-radius: 10px; }
.side-submenu a.active { background: #eaf3ff; color: var(--blue); }

.main {
  margin-left: 0;
  padding: 26px;
}

/* ── 15. MOBILE TOPBAR (empty placeholder, no logo) ─────────── */
.mobile-topbar { display: none; }

/* ── 15b. PAGE TOPBAR — ← Judul + search icon ──────────────── */
.pg-topbar {
  display: none; /* activated in mobile media query */
}
.pg-back {
  width: 38px; height: 38px;
  border: 0; border-radius: 13px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.22);
  color: #fff; font-size: 20px; font-weight: 900;
  cursor: pointer; display: grid; place-items: center; flex-shrink: 0;
}
.pg-title {
  flex: 1; font-size: 18px; font-weight: 900; color: #fff;
  margin: 0; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pg-search-btn {
  width: 38px; height: 38px;
  border: 0; border-radius: 13px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.22);
  color: #fff; cursor: pointer;
  display: grid; place-items: center; flex-shrink: 0;
  transition: background .15s;
}
.pg-search-btn.open,
.pg-search-btn:active { background: rgba(255,255,255,.32); }

/* ── Search panel expand ────────────────────────────────────── */
.pg-search-panel {
  display: none;
  background: #fff;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 8px 20px rgba(6,27,60,.10);
}
.pg-search-panel.open { display: block; animation: panelSlide .18s ease; }
@keyframes panelSlide { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }
.pg-search-form { padding: 14px 14px 10px; display: flex; flex-direction: column; gap: 9px; }
.pg-search-input-wrap {
  position: relative; display: flex; align-items: center;
  background: var(--soft); border: 1.5px solid var(--border);
  border-radius: 13px; overflow: hidden;
}
.pg-search-input-wrap:focus-within { border-color: var(--blue); }
.pg-search-icon { position: absolute; left: 12px; color: var(--muted); pointer-events: none; }
.pg-search-input {
  flex: 1; border: 0 !important; background: transparent !important;
  padding: 12px 38px 12px 38px !important;
  font-size: 15px !important; outline: none !important;
  box-shadow: none !important; border-radius: 0 !important;
}
.pg-search-clear {
  position: absolute; right: 10px;
  width: 24px; height: 24px; border-radius: 50%;
  background: #cbd5e1; color: #fff;
  display: grid; place-items: center; font-size: 11px; font-weight: 900;
}
.pg-filter-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pg-filter-row select {
  width: 100%; border: 1.5px solid var(--border) !important;
  border-radius: 11px !important; padding: 10px 11px !important;
  font-size: 14px !important; background: var(--soft) !important;
}
.pg-filter-actions { display: flex; gap: 8px; }
.pg-filter-actions .btn { flex: 1; justify-content: center; }
.mobile-menu-btn { display: none; }

/* ── 16. SIDEBAR DRAWER (mobile) ───────────────────────────── */
.sidebar-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(3,7,18,.52);
  z-index: 1090;
  opacity: 0;
  transition: opacity .22s;
}
.sidebar-close {
  display: none;
  position: absolute; right: 13px; top: 13px;
  width: 36px; height: 36px;
  border: 0; border-radius: 12px;
  background: rgba(255,255,255,.12);
  color: #fff; font-size: 22px; font-weight: 900;
  cursor: pointer;
}
body.sidebar-open { overflow: hidden; }
body.sidebar-open .sidebar-backdrop { display: block; opacity: 1; }

/* ── 17. LOGIN PAGE ─────────────────────────────────────────── */
body[data-page="login"],
body.page-login {
  margin: 0; min-height: 100vh;
  background: linear-gradient(135deg, var(--navy), var(--blue));
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.login-card {
  width: 100%; max-width: 420px;
  background: #fff;
  border-radius: 26px;
  padding: 32px 28px;
  box-shadow: var(--shadow-lg);
}
body[data-page="login"] .brand,
body.page-login .brand    { text-align: center; margin-bottom: 26px; }
body[data-page="login"] .brand h1,
body.page-login .brand h1 { font-size: 40px; font-weight: 900; color: var(--blue); }
body[data-page="login"] .brand p,
body.page-login .brand p  { margin: 7px 0 0; color: var(--muted); font-weight: 700; font-size: 13px; }
body[data-page="login"] .btn,
body.page-login .btn { width: 100%; justify-content: center; padding: 14px; font-size: 16px; }

/* ── 18. DASHBOARD MOBILE ───────────────────────────────────── */
.tel-mobile-dashboard { display: none; }
.desktop-dashboard-fallback { display: block; }

/* ── 19. INVOICE / PRINT ────────────────────────────────────── */
.invoice { max-width: 800px; margin: auto; background: #fff; padding: 34px; border-radius: 20px; }
.invoice-head { display: flex; justify-content: space-between; border-bottom: 2px solid var(--border); padding-bottom: 16px; margin-bottom: 16px; }

/* ── 20. PREMIUM FORM ───────────────────────────────────────── */
.premium-form-wrap { max-width: 1100px; margin: auto; }
.hero-form {
  background: linear-gradient(135deg, var(--blue), var(--navy));
  color: #fff; border-radius: 22px; padding: 26px; margin-bottom: 18px;
  box-shadow: 0 16px 40px rgba(7,91,199,.22);
}
.hero-form h2  { margin: 0 0 7px; font-size: 26px; }
.hero-form p   { opacity: .9; margin: 0; font-size: 14px; }
.section-card  { background: #fff; border: 1px solid var(--border); border-radius: 20px; padding: 22px; box-shadow: var(--shadow-sm); margin-bottom: 16px; }
.section-head  { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.section-head h3 { margin: 0; color: var(--navy); font-size: 16px; }
.section-note  { font-size: 12px; color: var(--muted); }
.advanced-toggle { background: #eaf3ff; border: 1px solid #cfe3ff; color: var(--blue); border-radius: 11px; padding: 9px 13px; font-weight: 900; cursor: pointer; font-size: 13px; }
.hidden-section  { display: none; }
.form-actions-sticky {
  position: sticky; bottom: 0;
  background: rgba(244,248,255,.94);
  backdrop-filter: blur(12px);
  padding: 14px; border-radius: 16px;
  display: flex; gap: 10px; z-index: 9;
  border: 1px solid var(--border);
}

/* ── 21. PAYMENT PUBLIC ─────────────────────────────────────── */
body.payment-public { margin: 0; min-height: 100vh; background: #edf4ff; font-family: inherit; color: var(--navy); }
body.payment-public .page { width: 100%; min-height: 100vh; background: linear-gradient(180deg,#f7fbff,#fff); padding-bottom: 34px; }
body.payment-public .hero {
  position: relative;
  background: linear-gradient(135deg,#078df4,#0042d9);
  min-height: 200px; padding: 40px 20px 80px; text-align: center; color: #fff; overflow: hidden;
}
body.payment-public .hero::before,
body.payment-public .hero::after {
  content: ""; position: absolute; left: -10%; right: -10%; height: 90px; bottom: -56px;
  background: rgba(255,255,255,.2); border-radius: 50% 50% 0 0; transform: rotate(3deg);
}
body.payment-public .hero::after { bottom: -68px; background: #f7fbff; transform: rotate(-2deg); }
body.payment-public .hero h1     { position: relative; z-index: 2; font-size: clamp(28px,4vw,44px); font-weight: 900; margin: 0; }
body.payment-public .wrap        { position: relative; z-index: 3; width: min(1100px,calc(100% - 40px)); margin: -44px auto 0; }
body.payment-public .card        { background: #fff; border: 1px solid #e5efff; border-radius: 18px; box-shadow: var(--shadow); margin-bottom: 14px; overflow: hidden; }
body.payment-public .btn-main    { width: 100%; border: 0; background: linear-gradient(135deg,#087ff0,#004ee8); color: #fff; padding: 18px; border-radius: 14px; font-size: clamp(18px,2.2vw,22px); font-weight: 900; cursor: pointer; }
body.payment-public .method-card,
body.payment-public .selected-card { display: none; padding: 22px; }
body.payment-public .qris-img { width: 210px; max-width: 100%; display: block; margin: 12px auto; border: 1px solid #e5eaf5; border-radius: 14px; padding: 8px; background: #fff; }
body.payment-public .pay-option {
  border: 1.5px solid #e3ecfb; border-radius: 16px; padding: 16px;
  display: flex; gap: 14px; align-items: center; cursor: pointer; margin-bottom: 10px; transition: border-color .18s;
}
body.payment-public .pay-option:hover { border-color: var(--blue); box-shadow: 0 8px 22px rgba(7,91,234,.10); }
body.payment-public .pay-icon { width: 54px; height: 54px; border-radius: 14px; background: #eef5ff; display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--blue); font-weight: 900; flex: 0 0 54px; }
body.payment-public .copy { border: 0; background: var(--blue); color: #fff; padding: 9px 13px; border-radius: 9px; font-weight: 900; cursor: pointer; }
body.payment-public .footer { text-align: center; color: #71809c; margin-top: 18px; font-size: 13px; }

/* ── 22. BOTTOM NAV (global desktop hidden) ─────────────────── */
.tel-bottom-nav,
.tel-bottom-nav-5,
.tel-global-bottom-nav { display: none; }

/* ── 23. PRINT ──────────────────────────────────────────────── */
@media print {
  .sidebar, .topbar, .mobile-topbar, .form-actions-sticky { display: none !important; }
  .layout { display: block; }
  .main   { padding: 0; margin: 0; }
  .invoice{ box-shadow: none; border-radius: 0; }
}

/* ============================================================
   MOBILE — max-width: 900px
   ============================================================ */
@media (max-width: 900px) {

  /* --- Layout -------------------------------------------- */
  .layout   { display: block; min-height: 100vh; }
  .main     { margin-left: 0 !important; width: 100% !important; padding: 0 0 100px !important; }

  /* --- Page topbar: activated mobile ---------------------- */
  .mobile-topbar { display: none !important; }
  .pg-topbar {
    display: flex !important;
    align-items: center;
    gap: 11px;
    position: sticky; top: 0; z-index: 900;
    padding: 12px 14px 12px;
    background: linear-gradient(135deg, var(--blue2) 0%, var(--blue) 60%, #0042d9 100%);
  }
  .pg-search-panel { position: sticky; top: 62px; z-index: 899; }

  /* --- Sidebar drawer ------------------------------------- */
  .sidebar {
    position: fixed !important;
    left: 0 !important; top: 0 !important; bottom: 0 !important;
    width: min(82vw, 300px) !important;
    height: 100vh !important;
    z-index: 1100;
    transform: translateX(-108%);
    transition: transform .24s ease;
    padding: 20px 16px !important;
    border-radius: 0 22px 22px 0;
    box-shadow: 20px 0 48px rgba(2,8,23,.26);
  }
  body.sidebar-open .sidebar { transform: translateX(0); }
  .sidebar-close { display: block; }
  .sidebar .brand { margin-bottom: 20px !important; padding-right: 42px; }
  .brand-title    { font-size: 28px !important; }
  .brand-subtitle { font-size: 11px !important; }
  .side-menu a, .side-parent { font-size: 14px !important; padding: 11px 12px !important; margin: 5px 0 !important; border-radius: 13px !important; }
  .side-submenu   { max-height: 240px; overflow-y: auto; }
  .side-submenu a { font-size: 12px !important; padding: 9px 10px !important; }

  /* --- Page topbar (non-login, non-dashboard) ------------- */
  /* old .topbar gradient replaced by .pg-topbar — hidden now */
  body.mobile-app-layout:not(.page-login):not(.page-dashboard) .topbar {
    display: none !important;
  }
  body.mobile-app-layout:not(.page-login):not(.page-dashboard) .topbar h1,
  body.mobile-app-layout:not(.page-login):not(.page-dashboard) .topbar h2 {
    color: #fff !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    margin: 0 !important;
    display: flex; align-items: center; gap: 9px;
  }
  body.mobile-app-layout:not(.page-login):not(.page-dashboard) .topbar h1::before,
  body.mobile-app-layout:not(.page-login):not(.page-dashboard) .topbar h2::before {
    content: "←";
    width: 34px; height: 34px;
    border-radius: 13px;
    display: grid; place-items: center;
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.22);
    font-size: 18px; font-weight: 900; color: #fff;
    flex-shrink: 0;
  }
  body.mobile-app-layout:not(.page-login):not(.page-dashboard) .topbar .actions {
    display: flex !important; align-items: center; gap: 8px !important;
    flex-wrap: nowrap !important;
  }
  body.mobile-app-layout:not(.page-login):not(.page-dashboard) .topbar .actions .btn {
    background: rgba(255,255,255,.15) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.28) !important;
    box-shadow: none !important;
    font-size: 12px !important;
    padding: 8px 11px !important;
    border-radius: 12px !important;
  }
  body.mobile-app-layout:not(.page-login):not(.page-dashboard) .topbar .actions .btn-primary {
    background: #fff !important;
    color: var(--blue) !important;
    border-color: #fff !important;
  }
  .btn-add, .tel-dots { display: none !important; }

  /* --- Cards & Grid --------------------------------------- */
  .card   { border-radius: 16px !important; padding: 14px !important; margin-bottom: 12px !important; }
  .grid, .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr !important; gap: 10px !important; }
  .stat   { padding: 14px !important; border-radius: 15px !important; }
  .stat h2{ font-size: 26px !important; }

  /* --- Buttons -------------------------------------------- */
  .btn { min-height: 40px; padding: 9px 12px !important; border-radius: 12px !important; font-size: 13px !important; }

  /* --- Forms ---------------------------------------------- */
  .input, input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea {
    font-size: 16px !important; /* prevent iOS zoom */
    border-radius: 12px !important;
    padding: 11px 13px !important;
  }
  form[method="get"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px !important;
  }
  form[method="get"] input[name="q"] { grid-column: 1 / -1; }
  form[method="get"] button,
  form[method="get"] a.btn { width: 100%; }

  /* --- Misc ----------------------------------------------- */
  .mobile-only { display: block !important; }
  .desktop-only { display: none !important; }
  .customer-nav, .nav-tabs { overflow-x: auto; white-space: nowrap; padding-bottom: 4px; }

  /* --- Mobile stat grid 3 cols ---------------------------- */
  .mobile-stat-grid {
    display: grid !important;
    grid-template-columns: repeat(3,1fr) !important;
    gap: 8px !important;
    padding: 0 14px !important;
    margin-bottom: 14px !important;
  }
  .mobile-stat-grid .stat, .grid .stat {
    padding: 10px 8px !important;
    border-radius: 14px !important;
    min-height: 72px;
    display: flex; flex-direction: column; justify-content: center;
  }
  .mobile-stat-grid .stat small, .grid .stat small {
    font-size: 10px !important; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .mobile-stat-grid .stat h2, .grid .stat h2 { font-size: 22px !important; margin-top: 4px !important; }

  /* --- Bottom nav ----------------------------------------- */
  .tel-bottom-nav,
  .tel-bottom-nav-5,
  .tel-global-bottom-nav {
    display: grid !important;
    position: fixed !important;
    left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: 100% !important;
    grid-template-columns: repeat(4,1fr) !important;
    background: linear-gradient(135deg, var(--blue2) 0%, var(--blue) 60%, #0042d9 100%) !important;
    border-radius: 0 !important;
    box-shadow: 0 -6px 24px rgba(6,27,60,.22) !important;
    z-index: 9999 !important;
    padding: 8px 4px calc(8px + env(safe-area-inset-bottom)) !important;
    min-height: 58px !important;
    border: 0 !important;
    margin: 0 !important;
  }
  .tel-bottom-nav a { text-align: center; color: rgba(255,255,255,.65); font-size: 11px; font-weight: 700; }
  .tel-bottom-nav a span { display: block; font-size: 20px; margin-bottom: 2px; }
  .tel-bottom-nav a.active { color: #fff; font-weight: 900; }
  .tel-bottom-nav-5 { grid-template-columns: repeat(5,1fr) !important; }
  .tel-bottom-nav-5 a:nth-child(3) span {
    width: 38px; height: 38px;
    margin: -20px auto 3px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: #fff;
    color: var(--blue);
    box-shadow: 0 6px 18px rgba(0,0,0,.22);
    font-weight: 900;
  }

  /* --- Customer list mobile -------------------------------- */
  .desktop-customer-table { display: none !important; }
  .mobile-customer-list   { display: block !important; }
  .mobile-pagination      { display: flex !important; flex-wrap: wrap; gap: 7px; padding: 0 14px 16px; }
  .mobile-pagination .btn { min-width: 40px; min-height: 38px; padding: 8px 10px !important; border-radius: 12px !important; display: grid; place-items: center; }

  /* Customer card */
  .customer-card {
    display: grid !important;
    grid-template-columns: 44px 1fr auto !important;
    align-items: center !important;
    gap: 6px !important;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 12px 14px !important;
    margin: 0 14px 10px !important;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
  }
  .customer-name { font-size: 15px; font-weight: 900; color: var(--navy); line-height: 1.2; }
  .customer-sub  { font-size: 12px; color: var(--muted); margin-top: 2px; }
  .customer-pills { display: flex !important; align-items: center !important; gap: 5px !important; flex-wrap: wrap !important; margin-top: 6px !important; }
  .customer-pill {
    display: inline-flex !important; align-items: center !important;
    padding: 4px 8px !important; border-radius: 999px !important;
    background: #f1f5f9 !important; color: #475569 !important;
    font-size: 10px !important; font-weight: 900 !important;
    white-space: nowrap; max-width: 130px; overflow: hidden; text-overflow: ellipsis;
  }
  .customer-pill.package { background: #eaf3ff !important; color: var(--blue) !important; }
  .customer-status-wrap  { display: flex !important; align-items: center !important; gap: 7px !important; }
  .customer-status { padding: 5px 9px !important; border-radius: 999px !important; font-size: 10px !important; font-weight: 900 !important; text-transform: uppercase !important; }
  .customer-status.active    { background: #dcfce7 !important; color: #15803d !important; }
  .customer-status.isolir,
  .customer-status.nonaktif  { background: #fee2e2 !important; color: #b91c1c !important; }
  .customer-avatar {
    width: 42px; height: 42px; border-radius: 14px;
    background: linear-gradient(135deg,#eaf3ff,#dbeafe);
    display: grid !important; place-items: center !important;
    color: #75a8e8; flex-shrink: 0;
  }
  .customer-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .customer-name { font-size: 15px; font-weight: 900; color: var(--navy); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .customer-phone { font-size: 12px; color: var(--muted); }
  .customer-meta { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
  .customer-arrow { color: #94a3b8 !important; font-size: 22px !important; font-weight: 300 !important; }
  .customer-actions {
    grid-column: 1 / -1 !important;
    display: none !important;
    grid-template-columns: repeat(2,1fr) !important;
    gap: 8px !important;
    padding-top: 11px !important;
    margin-top: 2px !important;
    border-top: 1px dashed #dbeafe !important;
  }
  .customer-card.show-actions .customer-actions { display: grid !important; animation: fadeIn .15s ease; }
  @keyframes fadeIn { from{opacity:0;transform:translateY(-3px)} to{opacity:1;transform:translateY(0)} }
  .customer-actions .btn {
    min-height: 40px !important; padding: 9px !important;
    border-radius: 13px !important; font-size: 12px !important;
    font-weight: 900 !important; text-align: center !important;
    display: grid !important; place-items: center !important; color: #fff !important;
  }
  .mobile-empty { margin: 12px !important; padding: 26px 16px !important; text-align: center !important; border-radius: 18px !important; background: #fff !important; color: var(--muted) !important; border: 1px solid var(--border) !important; }

  /* --- Dashboard mobile ------------------------------------ */
  body.page-dashboard .main { padding: 0 0 104px !important; background: #fff !important; }
  .tel-mobile-dashboard      { display: block; color: #111827; }
  .desktop-dashboard-fallback{ display: none !important; }

  /* hero */
  .tel-hero {
    background: linear-gradient(135deg, var(--blue2) 0%, var(--blue) 60%, #0042d9 100%);
    color: #fff;
    border-radius: 0 0 28px 28px;
    padding: 28px 18px 20px;
    box-shadow: 0 16px 32px rgba(12,24,70,.22);
  }
  .tel-hero-top   { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; }
  .tel-date       { display: flex; gap: 11px; align-items: center; }
  .tel-date .tel-icon { font-size: 26px; }
  .tel-date small { display: block; opacity: .8; font-size: 13px; }
  .tel-date b     { display: block; font-size: 16px; margin-top: 2px; }
  .tel-hero-actions { display: flex; gap: 16px; font-size: 25px; align-items: center; }
  .tel-hero-actions a, .tel-dots { color: #fff; background: transparent; border: 0; font-size: 24px; cursor: pointer; padding: 3px; }

  .tel-greeting        { margin-bottom: 18px; }
  .tel-greeting small  { font-size: 16px; opacity: .85; }
  .tel-greeting h1     { font-size: 28px; line-height: 1.15; font-weight: 500; margin: 7px 0; }
  .tel-greeting p      { font-size: 17px; letter-spacing: .4px; }

  .tel-payment-card {
    display: grid; grid-template-columns: 40px 1fr auto 20px;
    align-items: center; gap: 11px;
    background: #fff; color: var(--navy);
    border-radius: 15px; padding: 14px 12px;
    box-shadow: 0 8px 20px rgba(0,0,0,.13);
  }
  .tel-payment-card .pay-icon { width: 34px; height: 34px; border-radius: 8px; background: #1d9bf0; color: #fff; display: grid; place-items: center; font-weight: 900; }
  .tel-payment-card b     { display: block; font-size: 15px; }
  .tel-payment-card small { display: block; color: #6b7280; margin-top: 2px; font-size: 12px; }
  .tel-payment-card strong{ color: #1d8ee8; font-size: 18px; font-weight: 900; }
  .tel-payment-card em    { font-style: normal; color: #1d8ee8; font-size: 30px; line-height: 1; }

  .tel-cash-row {
    display: grid; grid-template-columns: 1fr 1fr 48px;
    align-items: center; gap: 11px; margin-top: 14px;
  }
  .tel-cash-toggle button {
    border: 0; background: transparent; color: #fff; text-align: left;
    display: grid !important; grid-template-columns: 42px 1fr !important;
    column-gap: 9px !important; align-items: center !important;
    padding: 0; cursor: pointer;
  }
  .tel-cash-toggle button small { grid-column: 2 !important; color: #fff !important; font-size: 15px !important; letter-spacing: 1px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cash-in  { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: #08a852; font-size: 22px; font-weight: 900; }
  .cash-out { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: #c4434d; font-size: 22px; font-weight: 900; }
  .tel-cash-row a { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: #2098f3; color: #fff; font-size: 38px; line-height: 1; }

  .tel-version { text-align: center; color: #999; font-size: 13px; margin: 8px 0 14px; }

  .tel-menu-section { padding: 0 16px 18px; }
  .tel-section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 11px; }
  .tel-section-head h3 { font-size: 17px; font-weight: 700; color: #111827; }
  .tel-section-head a  { color: #1d8ee8; font-size: 13px; }

  .tel-menu-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
  .tel-menu-grid-4 { grid-template-columns: repeat(4,1fr); gap: 9px; }
  .tel-menu-grid a {
    min-height: 86px; border-radius: 17px;
    background: #f8fbff; border: 1px solid var(--border);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; gap: 7px; box-shadow: var(--shadow-sm);
    font-size: 11px; font-weight: 800; color: #111827; padding: 10px 6px;
    transition: transform .14s;
  }
  .tel-menu-grid a:active { transform: scale(.96); }
  .tel-menu-grid a span { width: 42px; height: 42px; border-radius: 15px; display: grid; place-items: center; background: linear-gradient(135deg,#e0f2fe,#eff6ff); font-size: 22px; }
  .tel-menu-grid a b    { font-size: 11px; line-height: 1.2; }

  .tel-feature-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }
  .tel-feature-grid a {
    min-height: 82px; border-radius: 17px; border: 1px solid #d7e8ff;
    background: #f8fbff; display: grid;
    grid-template-columns: 40px 1fr; grid-template-rows: auto auto;
    align-items: center; gap: 3px 9px; padding: 11px;
    box-shadow: var(--shadow-sm); transition: transform .14s;
  }
  .tel-feature-grid a:active { transform: scale(.97); }
  .tel-feature-grid span { width: 40px; height: 40px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: #2b8df2; font-size: 18px; grid-row: 1/3; }
  .tel-feature-grid b    { font-size: 13px; line-height: 1.2; }
  .tel-feature-grid small{ font-size: 11px; color: var(--muted); }
  .tel-feature-grid .green span  { background: #22bd69; }
  .tel-feature-grid .purple span { background: #8b5cf6; }
  .tel-feature-grid .yellow span { background: #f5a400; }
  .tel-feature-grid .cyan span   { background: #06a6c8; }
  .tel-feature-grid .orange span { background: #f97316; }
  .tel-feature-grid .red span    { background: #e11d48; }

  /* Report */
  .tel-report { padding: 0 16px 20px !important; }
  .tel-filter { display: grid; grid-template-columns: 1fr .7fr; gap: 12px; margin-bottom: 12px; }
  .tel-filter select { height: 42px; border-radius: 9px; border: 1.5px solid var(--border); background: #fff; padding: 0 11px; font-size: 14px; }
  .tel-report-card { display: grid; grid-template-columns: 1fr 1fr; background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 13px; box-shadow: var(--shadow-sm); }
  .tel-report-card div { display: grid; grid-template-columns: 42px 1fr; align-items: center; column-gap: 9px; }
  .tel-report-card div:first-child { border-right: 1px solid #e5e7eb; }
  .tel-report-card span { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #5da8f7; color: #fff; font-size: 16px; }
  .tel-report-card div:last-child span { background: #fb7185; }
  .tel-report-card small { color: #6b7280; font-size: 12px; }
  .tel-report-card b     { grid-column: 2; font-size: 13px; color: var(--navy); margin-top: 3px; }

  /* Profile pop */
  .tel-profile-pop {
    display: none; position: absolute; right: 14px; top: 52px;
    background: #fff; border-radius: 16px; padding: 14px;
    box-shadow: var(--shadow-lg); min-width: 160px; z-index: 200;
  }
  .tel-profile-pop.show { display: block; }
  .tel-profile-pop b, .tel-profile-pop small { display: block; color: var(--navy); }
  .tel-profile-pop small { color: var(--muted); font-size: 12px; margin-top: 2px; }
  .tel-profile-pop a { display: block; padding: 9px 6px; font-size: 13px; font-weight: 800; border-top: 1px solid var(--border); margin-top: 8px; color: var(--blue); }
}

/* ── PHONE <520px ───────────────────────────────────────────── */
@media (max-width: 520px) {
  .main { padding-left: 0 !important; padding-right: 0 !important; }
  form[method="get"] { grid-template-columns: 1fr !important; }

  /* Page topbar on small screens */
  body.mobile-app-layout:not(.page-login):not(.page-dashboard) .topbar {
    padding: 8px 12px 16px !important;
  }
  body.mobile-app-layout:not(.page-login):not(.page-dashboard) .topbar h1,
  body.mobile-app-layout:not(.page-login):not(.page-dashboard) .topbar h2 {
    font-size: 16px !important;
  }
  body.mobile-app-layout:not(.page-login):not(.page-dashboard) .topbar .actions {
    flex-wrap: wrap !important;
  }

  /* Payment public */
  body.payment-public .wrap   { width: calc(100% - 22px); margin-top: -32px; }
  body.payment-public .hero   { padding: 32px 16px 62px; min-height: 170px; }
  body.payment-public .card   { border-radius: 14px; margin-bottom: 10px; }

  /* Tel menu */
  .tel-menu-grid   { gap: 9px; }
  .tel-menu-grid a { min-height: 80px; }
  .tel-menu-grid a span { width: 38px; height: 38px; font-size: 20px; }
  .tel-menu-grid-4 a    { min-height: 72px; font-size: 10px; }
  .tel-feature-grid     { gap: 9px; }
  .tel-feature-grid a   { padding: 10px; grid-template-columns: 36px 1fr; }
  .tel-feature-grid span{ width: 36px; height: 36px; font-size: 16px; }

  /* Stat 3col */
  .mobile-stat-grid .stat h2, .grid .stat h2 { font-size: 20px !important; }
}

/* ── IPHONE 12 PRO: 390px ───────────────────────────────────── */
@media (max-width: 390px) {
  .mobile-topbar   { padding: 10px 12px 6px; }
  .brand-title     { font-size: 26px !important; }
  .tel-greeting h1 { font-size: 25px; }
  .tel-payment-card{ gap: 9px; padding: 12px 10px; }
  .tel-cash-row    { grid-template-columns: 1fr 1fr 42px; }
  .tel-cash-row a  { width: 42px; height: 42px; }
  .tel-menu-section{ padding-left: 12px; padding-right: 12px; }
  .tel-report      { padding-left: 12px !important; padding-right: 12px !important; }
  .customer-card   { margin: 0 10px 10px !important; padding: 11px 12px !important; }
  .mobile-pagination{ padding: 0 10px 14px; }
  .mobile-stat-grid { padding: 0 10px !important; gap: 6px !important; }
  .mobile-stat-grid .stat, .grid .stat { min-height: 66px; padding: 8px 6px !important; }
  .mobile-stat-grid .stat small, .grid .stat small { font-size: 9px !important; }
  .mobile-stat-grid .stat h2, .grid .stat h2 { font-size: 18px !important; }
  form[method="get"] { grid-template-columns: 1fr !important; }
  .customer-actions { grid-template-columns: 1fr 1fr !important; }
}

/* ============================================================
   CUSTOMER HUB — customer_hub.php
   ============================================================ */

/* ── Info button (topbar kanan) ── */
.pg-info-btn {
  display: flex; align-items: center; gap: 5px;
  background: #f59e0b; color: #fff;
  border-radius: 20px; padding: 6px 12px;
  font-size: 13px; font-weight: 900;
  white-space: nowrap; flex-shrink: 0;
}

/* ── Notif banner ── */
.hub-notif {
  display: flex; align-items: center; gap: 10px;
  background: #eff6ff; border-bottom: 1px solid #bfdbfe;
  padding: 13px 16px; color: #1d4ed8; font-size: 14px;
}
.hub-notif-icon {
  width: 30px; height: 30px; border-radius: 50%;
  background: #3b82f6; color: #fff;
  display: grid; place-items: center; flex-shrink: 0;
}
.hub-notif b { font-weight: 900; }

/* ── Filter bulan/tahun ── */
.hub-filter-wrap {
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--border);
  background: #fff;
}
.hub-filter-form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hub-filter-label { font-size: 15px; color: var(--muted); white-space: nowrap; }
.hub-filter-selects { display: flex; align-items: center; gap: 10px; }
.hub-select-wrap { position: relative; display: flex; align-items: center; }
.hub-select {
  appearance: none; -webkit-appearance: none;
  border: 0; background: transparent;
  font-size: 17px; font-weight: 900; color: var(--navy);
  padding-right: 20px; cursor: pointer; outline: none;
}
.hub-select-chev {
  position: absolute; right: 0; pointer-events: none;
  font-size: 18px; color: var(--muted); font-weight: 400;
}

/* ── Body ── */
.hub-body { background: #f8fbff; padding-bottom: 140px; }

/* ── Section ── */
.hub-section { background: #fff; margin-bottom: 10px; padding: 16px 16px 10px; }
.hub-section-title {
  font-size: 14px; font-weight: 900; color: var(--blue);
  margin-bottom: 14px;
}
.hub-section-title.plain { color: var(--navy); }
.hub-section-title a { color: inherit; }

/* ── Stat row ── */
.hub-stat-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin-bottom: 12px;
}
.hub-stat-row-3 { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }

.hub-section {
  background: #fff;
  margin-bottom: 4px;
  padding: 14px 16px 8px;
}

.hub-stat-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  background: #fff;
  border-radius: 0;
  padding: 0;
  color: var(--navy);
  text-decoration: none;
  min-height: auto;
}

.hub-stat-label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 6px;
}

.hub-stat-mid {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 3px;
}

.hub-stat-icon {
  width: 52px;
  height: 52px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}


.hub-stat-icon.orange { background: #fff7ed; color: #ea580c; }
.hub-stat-icon.blue   { background: #eff6ff; color: #2563eb; }
.hub-stat-icon.grey   { background: #f1f5f9; color: #475569; }
.hub-stat-icon.green  { background: #f0fdf4; color: #16a34a; }
.hub-stat-icon.red-soft{ background: #fff1f2; color: #e11d48; }

.hub-stat-icon svg {
  width: 30px;
  height: 30px;
}

.hub-stat-num {
  font-size: 24px;
  font-weight: 900;
  color: var(--navy);
  line-height: 1;
}

.hub-stat-rp {
  font-size: 15px;
  color: black;
  font-weight: 800;
  line-height: 1;
}

/* ── Sticky bottom buttons ── */
.hub-actions {
  position: fixed; bottom: 0px; left: 0; right: 0;
  padding: 10px 16px 8px;
  background: rgba(248,251,255,.96);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 8px;
  z-index: 500;
}
.hub-btn {
  display: block; text-align: center;
  border: 0; border-radius: 14px; padding: 15px;
  font-size: 15px; font-weight: 900; letter-spacing: .5px;
  color: #fff; cursor: pointer; text-decoration: none;
  transition: opacity .15s;
}
.hub-btn:active { opacity: .85; }
.hub-btn-navy { background: var(--navy); }
.hub-btn-blue { background: var(--blue); }

/* Desktop: hide hub layout specifics, show normally */
@media (min-width: 901px) {
  .hub-actions { position: static; border: 0; background: transparent; backdrop-filter: none; flex-direction: row; padding: 20px 0 0; }
  .hub-btn { padding: 13px 28px; }
  .hub-body { padding-bottom: 20px; }
  .hub-filter-wrap { background: transparent; border: 0; padding: 0 0 16px; }
  .hub-section { border-radius: 18px; border: 1px solid var(--border); box-shadow: var(--shadow-sm); margin-bottom: 14px; }
}

/* ============================================================
   CUSTOMER DETAIL — customer_detail.php
   Match reference 1 → 1.2 → 1.3, content only.
   Topbar/footer global tidak disentuh.
   ============================================================ */

.det-hero {
  background: linear-gradient(180deg, var(--blue2) 0%, var(--blue) 64%, #0350b8 100%);
  padding: 12px 22px 18px;
  color: #fff;
}
.det-hero-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:14px;
}
.det-back,
.det-icon-btn {
  width:36px;
  height:36px;
  border:0;
  background:transparent;
  color:#fff;
  display:grid;
  place-items:center;
  cursor:pointer;
  padding:0;
}
.det-back { font-size:32px; font-weight:400; line-height:1; }
.det-hero-actions { display:flex; align-items:center; gap:15px; }
.det-icon-btn svg { width:22px; height:22px; opacity:.98; }
.det-hero-sub {
  text-align:center;
  color:rgba(255,255,255,.92);
  font-size:15px;
  font-weight:500;
  margin:0 0 36px;
  letter-spacing:.05px;
}
.det-profile-row {
  display:grid;
  grid-template-columns:62px 1fr auto;
  align-items:center;
  gap:12px;
}
.det-avatar {
  width:62px;
  height:62px;
  border-radius:50%;
  background:#fff;
  color:#6f6f6f;
  display:grid;
  place-items:center;
  box-shadow:0 2px 6px rgba(0,0,0,.10);
}
.det-avatar svg { width:38px; height:38px; }
.det-name {
  display:block;
  font-size:17px;
  line-height:1.08;
  font-weight:900;
  color:#fff;
  letter-spacing:.05px;
  max-width:160px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.det-phone {
  display:flex;
  align-items:center;
  gap:5px;
  color:#37a9ff;
  font-size:14px;
  line-height:1.15;
  margin-top:4px;
  font-weight:600;
}
.det-phone svg { width:15px; height:15px; }
.det-id-line {
  display:flex;
  align-items:center;
  gap:5px;
  color:#fff;
  font-size:12px;
  font-weight:800;
  margin-top:5px;
}
.det-id-badge {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#2ca7ff;
  color:#fff;
  border-radius:999px;
  padding:3px 10px 4px;
  min-height:22px;
  font-size:13px;
  line-height:1;
  font-weight:800;
}
.det-signal {
  text-align:right;
  color:#fff;
  font-size:11px;
  line-height:1.28;
  white-space:nowrap;
  opacity:.98;
}
.det-signal-arrow { font-size:21px; line-height:1; font-weight:900; }
.det-signal-total { font-size:11px; color:rgba(255,255,255,.9); }

.det-tabs {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  background:#fff;
  border-bottom:1px solid #eef2f7;
  position:sticky;
  top:0;
  z-index:80;
}
.det-tab {
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:8px 4px 6px;
  text-align:center;
  color:#2c9ce9;
  font-size:12px;
  line-height:1.05;
  font-weight:800;
  letter-spacing:.15px;
  border-bottom:3px solid transparent;
}
.det-tab.active { color:#0f8a84; border-bottom-color:#0f8a84; }

.det-body {
  background:#f2f2f2;
  padding:10px 10px 104px;
}
.det-native-card {
  position:relative;
  background:#fff;
  border-radius:14px;
  padding:15px 13px 14px;
  margin-bottom:10px;
  box-shadow:0 1px 0 rgba(15,23,42,.02);
}
.det-section-title {
  margin:0 0 12px;
  color:var(--blue);
  font-size:18px;
  line-height:1.1;
  font-weight:900;
}
.det-line-block {
  position:relative;
  padding:0 0 9px;
  margin-bottom:9px;
  border-bottom:1px solid rgba(0,0,0,.32);
}
.det-line-block.no-line { border-bottom:0; margin-bottom:0; }
.det-line-block b {
  display:block;
  color:#080808;
  font-size:12px;
  line-height:1.15;
  font-weight:900;
  margin-bottom:6px;
}
.det-line-block span {
  display:block;
  color:#2a3158;
  font-size:14px;
  line-height:1.18;
  font-weight:400;
}
.det-line-block .muted-italic { color:#777; font-style:italic; }
.det-due-grid {
  display:grid;
  grid-template-columns:1fr 42%;
  align-items:stretch;
  border-bottom:1px solid rgba(0,0,0,.32);
  margin-bottom:10px;
  padding-bottom:8px;
  gap:10px;
}
.det-due-grid .det-line-block { border:0; padding:0; margin:0; }
.det-isolir-box {
  min-height:58px;
  border-radius:12px;
  background:#ef493f;
  color:#fff;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:center;
  padding:9px 10px;
  text-align:right;
}
.det-isolir-box b { font-size:12px; line-height:1; font-weight:900; }
.det-isolir-box span { font-size:22px; line-height:1.05; font-weight:500; }
.det-small-pill {
  display:inline-flex;
  background:var(--blue);
  color:#fff;
  border-radius:999px;
  padding:8px 12px;
  font-size:10px;
  font-weight:900;
  margin-top:8px;
  box-shadow:0 2px 6px rgba(6,27,60,.14);
}
.det-row-inline {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.det-row-inline > div { min-width:0; }
.det-row-icons { display:flex; align-items:center; gap:8px; color:#2c9ce9; flex-shrink:0; }
.det-row-icons span,
.det-info-dot,
.det-mikrotik-row i {
  width:23px;
  height:23px;
  border-radius:50%;
  background:#2c9ce9;
  color:#fff;
  display:inline-grid;
  place-items:center;
  font-size:13px;
  font-weight:900;
  font-style:normal;
}
.det-row-icons b { color:#777; font-size:28px; font-weight:500; line-height:1; }
.det-refresh { color:#2c9ce9; font-size:34px; line-height:1; font-weight:500; }
.det-cost-row {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  color:#777;
  font-size:13px;
  line-height:1.24;
  margin-bottom:5px;
}
.det-cost-row b { color:#777; font-size:13px; font-weight:500; white-space:nowrap; }
.det-cost-row.total { margin-top:9px; color:#111; }
.det-cost-row.total span { color:#111; font-size:14px; font-weight:500; }
.det-cost-row.total b { color:#229eea; font-size:15px; font-weight:900; }
.det-blue-link {
  display:inline-block;
  margin-top:10px;
  color:#2c9ce9;
  font-size:13px;
  font-weight:500;
}
.det-info-dot { position:absolute; right:13px; bottom:14px; }
.det-note-card {
  background:#fff;
  border:1.5px solid var(--blue);
  border-radius:16px;
  padding:13px 14px;
  margin:10px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.det-note-card b { display:block; color:#111; font-size:14px; line-height:1; margin-bottom:8px; }
.det-note-card span { display:block; color:#777; font-size:14px; line-height:1.1; }
.det-note-card a { color:#2c9ce9; font-size:27px; line-height:1; }
.det-ok-banner {
  height:58px;
  background:#1f7ed5;
  color:#fff;
  border-radius:0;
  margin:12px -10px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  font-size:18px;
  font-weight:900;
}
.det-ok-banner span {
  width:30px;
  height:30px;
  border-radius:50%;
  background:#23c463;
  display:grid;
  place-items:center;
  font-size:18px;
}
.det-wide-btn,
.det-odp-btn {
  display:grid;
  place-items:center;
  width:100%;
  min-height:45px;
  border-radius:14px;
  background:var(--blue);
  color:#fff;
  text-align:center;
  font-size:13px;
  font-weight:900;
  letter-spacing:.2px;
  margin-bottom:10px;
}
.det-odp-btn { margin:8px 0 0; min-height:42px; background:#12205b; }
.det-mikrotik-box {
  border:1.4px solid #93c5fd;
  border-radius:15px;
  overflow:hidden;
  margin:4px 0 12px;
  background:#fff;
}
.det-mikrotik-head {
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-bottom:1px solid #bfdbfe;
  font-size:13px;
  font-weight:900;
  color:#2563eb;
}
.det-mikrotik-row {
  display:flex;
  align-items:center;
  gap:8px;
  padding:9px 12px;
  border-bottom:1px solid #edf2ff;
  color:#0f172a;
  font-size:12px;
}
.det-mikrotik-row:last-child { border:0; }
.det-mikrotik-row small { color:#777; font-size:10px; line-height:1.05; text-align:right; margin-left:auto; }
.det-arrow-btn {
  color:#60a5fa;
  font-size:14px;
  font-weight:900;
  background:#eff6ff;
  border-radius:9px;
  padding:5px 9px;
  white-space:nowrap;
}
.det-access-row {
  display:flex;
  align-items:center;
  gap:10px;
  margin:10px 0;
}
.det-access-row b { color:#111; font-size:14px; font-weight:900; }
.det-access-row span {
  background:#ef493f;
  color:#fff;
  border-radius:999px;
  padding:4px 9px;
  font-size:10px;
  font-weight:900;
}
.det-actions-wrap {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin-top:13px;
}
.det-action-btn {
  min-height:42px;
  border-radius:13px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  color:#fff;
  font-size:11px;
  font-weight:900;
  text-align:center;
  padding:8px;
}
.det-action-btn.blue{background:var(--blue);}
.det-action-btn.green{background:var(--green);}
.det-action-btn.red{background:var(--red);}
.det-action-btn.grey{background:#475569;}

.det-month-head {
  height:50px;
  background:var(--blue);
  color:#fff;
  display:grid;
  grid-template-columns:1fr auto auto;
  align-items:center;
  gap:12px;
  padding:0 18px;
  font-size:14px;
  font-weight:500;
}
.det-month-head b { color:#7cc6ff; font-size:22px; font-weight:400; }
.det-month-head i { font-style:normal; font-size:23px; line-height:1; }
.det-month-list { background:#fff; padding-bottom:80px; }
.det-month-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:58px;
  padding:0 16px 0 10px;
  border-bottom:1px solid rgba(0,0,0,.30);
  color:#111;
  font-size:17px;
  line-height:1;
  font-weight:400;
}
.det-month-row b {
  width:25px;
  height:25px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:16px;
  line-height:1;
  border:2px solid currentColor;
  color:#777;
  font-weight:900;
}
.det-month-row b.paid { color:#fff; background:#4ade72; border-color:#4ade72; }

.det-pay-list { background:#fff; padding-bottom:92px; }
.det-pay-row {
  position:relative;
  display:grid;
  grid-template-columns:33% 1fr 16px;
  gap:8px;
  align-items:center;
  padding:14px 15px 14px 18px;
  border-bottom:1px solid #e5e7eb;
}
.det-pay-left b {
  display:block;
  color:#060606;
  font-size:13px;
  line-height:1.08;
  font-weight:900;
  margin-bottom:6px;
}
.det-pay-left span {
  display:block;
  color:#777;
  font-size:12px;
  line-height:1.1;
  margin-bottom:4px;
}
.det-pay-left small { color:#777; font-size:11px; }
.det-pay-left em { color:#19b56b; font-style:normal; font-weight:800; letter-spacing:.2px; }
.det-pay-right { text-align:right; min-width:0; }
.det-pay-right b { display:block; color:#1e2a63; font-size:14px; line-height:1.1; font-weight:600; margin-bottom:5px; }
.det-pay-right span { display:block; color:#777; font-size:11px; line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.det-pay-right a { display:block; color:#2c9ce9; font-size:12px; line-height:1.2; margin-top:4px; }
.det-pay-row > i { color:#777; font-size:28px; font-style:normal; line-height:1; font-weight:400; }
.det-pay-sticky {
  position:fixed;
  left:18px;
  right:18px;
  bottom:74px;
  z-index:850;
  background:var(--blue);
  color:#fff;
  border-radius:20px;
  min-height:51px;
  display:grid;
  place-items:center;
  font-size:14px;
  font-weight:900;
  box-shadow:0 3px 10px rgba(6,27,60,.22);
}

@media(max-width:390px){
  .det-hero{padding:12px 20px 17px;}
  .det-hero-sub{font-size:14px;margin-bottom:34px;}
  .det-profile-row{grid-template-columns:58px 1fr auto;gap:10px;}
  .det-avatar{width:58px;height:58px;}
  .det-avatar svg{width:35px;height:35px;}
  .det-name{font-size:16px;max-width:145px;}
  .det-phone{font-size:13px;}
  .det-id-line{font-size:11px;}
  .det-id-badge{font-size:12px;min-height:21px;}
  .det-signal{font-size:10px;}
  .det-tab{font-size:11px;min-height:46px;}
  .det-body{padding:9px 9px 102px;}
  .det-section-title{font-size:17px;}
  .det-line-block b{font-size:11.5px;}
  .det-line-block span{font-size:13px;}
  .det-small-pill{font-size:9.5px;padding:7px 10px;}
  .det-pay-row{padding:13px 13px 13px 16px;grid-template-columns:34% 1fr 15px;}
  .det-pay-left b{font-size:12px;}
  .det-pay-right b{font-size:13px;}
  .det-month-row{font-size:16px;min-height:55px;}
}

/* ============================================================
   BILLING — billing.php
   ============================================================ */

.bill-list { padding: 10px 10px 170px; background: #f8fbff; }

/* ── Card ── */
.bill-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  margin-bottom: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: box-shadow .15s;
}
.bill-card:active { box-shadow: var(--shadow); }

.bill-card-main {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  padding: 14px 14px 10px;
}

/* Left */
.bill-card-left h2 {
  font-size: 17px; font-weight: 900; color: var(--navy);
  margin: 0 0 3px;
}
.bill-card-left p {
  font-size: 13px; color: var(--muted); margin: 0 0 8px;
}
.bill-name-tag {
  display: inline-block;
  background: #b45309; color: #fff;
  border-radius: 999px; padding: 4px 11px;
  font-size: 12px; font-weight: 900;
  margin-bottom: 8px;
}
.bill-due {
  display: block; font-size: 14px; font-weight: 900; color: var(--navy);
}

/* Right */
.bill-card-right {
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  min-width: 0;
}
.bill-code {
  background: var(--blue); color: #fff;
  border-radius: 999px; padding: 3px 11px;
  font-size: 12px; font-weight: 900;
  white-space: nowrap;
}
.bill-card-right strong {
  font-size: 20px; font-weight: 900; color: var(--navy);
  white-space: nowrap; margin-top: 4px;
}
.bill-card-right em {
  font-style: normal; font-size: 13px; color: var(--green);
}
.bill-mini-icons {
  display: flex; gap: 8px; margin-top: 6px; align-items: center;
}

/* Last payment footer */
.bill-last-pay {
  background: #f1f5f9;
  border-top: 1px solid var(--border);
  padding: 10px 14px;
  text-align: center;
}
.bill-last-pay span {
  display: block; font-size: 12px; color: var(--muted); margin-bottom: 2px;
}
.bill-last-pay b {
  display: block; font-size: 15px; font-weight: 700; color: var(--navy);
}

/* Actions (expand on tap) */
.bill-card-actions {
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 12px 14px;
  border-top: 1px dashed #bfdbfe;
  background: #f8fbff;
  animation: fadeIn .15s ease;
}
.bill-card.show-actions .bill-card-actions { display: grid; }
.bill-card-actions .btn {
  justify-content: center; gap: 5px;
  min-height: 42px; border-radius: 12px !important;
  font-size: 13px !important;
}

/* ── Total sticky bar ── */
.bill-total-bar {
  position: fixed; left: 0; right: 0; bottom: 0px; z-index: 940;
  background: var(--navy); color: #fff;
  padding: 12px 20px 14px;
  box-shadow: 0 -8px 22px rgba(6,27,60,.22);
}
.bill-total-hint {
  text-align: center; font-size: 13px;
  opacity: .75; margin-bottom: 8px;
}
.bill-total-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.bill-total-row span { font-size: 15px; font-weight: 700; }
.bill-total-row b    { font-size: 22px; font-weight: 900; white-space: nowrap; }

/* Generate form inside filter panel */
.bill-gen-form {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 10px;
  background: #f0fdf4; border: 1px solid #bbf7d0;
  border-radius: 13px; padding: 11px 13px;
}
.bill-gen-info b     { display: block; font-size: 13px; font-weight: 900; color: #15803d; }
.bill-gen-info small { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }

/* ── PRINT button ── */
.bill-print-btn {
  background: var(--navy); color: #fff;
  border-radius: 12px; padding: 8px 16px;
  font-size: 13px; font-weight: 900;
  white-space: nowrap; text-decoration: none;
  display: inline-block;
}

/* ============================================================
   DETAIL BILLING — detail_billing.php
   ============================================================ */

.dbi-wrap {
  padding: 14px 12px 140px;
  background: #f1f5f9;
  min-height: 100vh;
}

/* Customer head */
.dbi-customer-head {
  background: #2c9be9;
  color: #fff; border-radius: 14px;
  padding: 16px; margin-bottom: 12px;
  display: flex; align-items: flex-start;
  justify-content: space-between; gap: 12px;
}
.dbi-customer-head h2 {
  margin: 0; font-size: 22px; font-weight: 900; letter-spacing: .3px;
}
.dbi-customer-head p  { margin: 6px 0 0; font-size: 15px; opacity: .9; }
.dbi-nip {
  background: var(--navy); color: #fff;
  border-radius: 20px; padding: 4px 13px;
  font-size: 14px; font-weight: 900; white-space: nowrap;
}

/* Rincian card */
.dbi-card {
  background: #fff; border-radius: 14px;
  padding: 16px; margin-bottom: 10px;
  box-shadow: var(--shadow-sm);
}
.dbi-label { font-size: 14px; color: var(--muted); margin: 0 0 12px; }
.dbi-row {
  display: flex; align-items: baseline;
  justify-content: space-between; gap: 10px;
  font-size: 15px; padding: 7px 0;
  border-bottom: 1px solid #f1f5f9;
}
.dbi-row:last-of-type { border: 0; }
.dbi-row span { color: #686868; }
.dbi-row b    { font-weight: 400; color: var(--navy); white-space: nowrap; }
.dbi-row.muted b  { color: var(--muted); }
.dbi-row.big  { margin-top: 10px; font-size: 17px; }
.dbi-row.big b{ font-size: 22px; font-weight: 900; }

.dbi-month-block { margin-top: 20px; }
.dbi-month-block span  { display: block; font-size: 13px; color: var(--muted); margin-bottom: 5px; }
.dbi-month-block b     { display: block; font-size: 26px; font-weight: 400; color: var(--navy); }
.dbi-month-block small { display: block; font-size: 11px; color: var(--muted); margin-top: 4px; }

/* Total row */
.dbi-total-row {
  background: #fff; border-radius: 14px;
  padding: 14px 16px; margin-bottom: 10px;
  display: flex; align-items: center; justify-content: space-between;
  box-shadow: var(--shadow-sm); gap: 12px;
}
.dbi-total-row span { font-size: 15px; color: var(--navy); }
.dbi-total-row b    { font-size: 22px; font-weight: 900; color: #2097e4; white-space: nowrap; }

/* Discount button */
.dbi-discount-btn {
  width: 100%; background: #fff; border: 0;
  border-radius: 14px; padding: 14px 16px; margin-bottom: 10px;
  display: flex; align-items: center; justify-content: space-between;
  color: #16a34a; font-size: 15px; font-weight: 700;
  cursor: pointer; box-shadow: var(--shadow-sm);
}

/* Info note */
.dbi-note {
  background: #fff; border-radius: 14px;
  padding: 14px 16px; margin-bottom: 10px;
  text-align: center; font-size: 14px;
  color: #2596d8; line-height: 1.4;
  box-shadow: var(--shadow-sm);
}

/* QRIS button */
.dbi-qris-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: #dbeafe; color: #1d4ed8;
  border-radius: 14px; padding: 16px;
  font-size: 16px; font-weight: 900;
  margin-bottom: 10px; text-decoration: none;
  box-shadow: var(--shadow-sm); transition: opacity .15s;
}
.dbi-qris-btn:active { opacity: .8; }

/* 2 buttons row */
.dbi-two-btns {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px;
}
.dbi-two-btns .btn { justify-content: center; min-height: 46px; font-size: 12px !important; }

/* Pay now */
.dbi-pay-now {
  display: block; text-align: center;
  background: #16a34a; color: #fff;
  border-radius: 14px; padding: 18px;
  font-size: 18px; font-weight: 900;
  letter-spacing: .5px; text-decoration: none;
  margin-bottom: 10px; box-shadow: 0 8px 20px rgba(22,163,74,.28);
  transition: opacity .15s;
}
.dbi-pay-now:active { opacity: .85; }
.dbi-paid-badge {
  display: block; text-align: center;
  background: #dcfce7; color: #15803d;
  border-radius: 14px; padding: 18px;
  font-size: 18px; font-weight: 900;
  margin-bottom: 10px;
}



/* ============================================================
   CUSTOMER DETAIL V7 — status notif + bulan clickable + bayar fix
   ============================================================ */
.det-unpaid-wrap{
  display:grid;
  grid-template-columns:1fr 74px;
  gap:10px;
  align-items:center;
  margin-bottom:12px;
}
.det-unpaid-banner{
  background:#ffa600;
  color:#fff;
  border-radius:22px;
  min-height:74px;
  padding:13px 16px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.det-unpaid-banner b{font-size:18px;line-height:1.1;font-weight:900;margin-bottom:5px;}
.det-unpaid-banner span{font-size:13px;line-height:1.2;font-weight:500;}
.det-wa-bubble{
  width:70px;height:70px;border-radius:50%;
  background:#249ff0;color:#fff;display:flex;
  flex-direction:column;align-items:center;justify-content:center;
  box-shadow:0 4px 12px rgba(36,159,240,.22);
}
.det-wa-bubble span{font-size:26px;line-height:1;transform:rotate(0deg);}
.det-wa-bubble small{font-size:12px;font-weight:600;margin-top:5px;color:#249ff0;position:absolute;transform:translateY(48px);}
.det-ok-banner.top{margin:0 0 12px 0;}
.det-month-row{color:#111;text-decoration:none;}
.det-month-row:active{background:#f7fbff;}
.det-month-row b.pending{background:#fff;color:#777;border-color:#777;}
.det-pay-list .mobile-empty{margin:16px;}
@media(max-width:390px){
  .det-unpaid-wrap{grid-template-columns:1fr 66px;gap:8px;}
  .det-unpaid-banner{min-height:68px;border-radius:20px;padding:12px 14px;}
  .det-unpaid-banner b{font-size:17px;}
  .det-unpaid-banner span{font-size:12px;}
  .det-wa-bubble{width:62px;height:62px;}
  .det-wa-bubble small{font-size:11px;transform:translateY(43px);}
}

/* ============================================================
   CUSTOMER DETAIL — SMALL WA BUBBLE
   ============================================================ */

.det-wa-bubble.det-wa-bubble-small{
  width:54px;
  min-width:54px;
  height:54px;
  border-radius:18px;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  gap:2px;
  line-height:1;
}

.det-wa-bubble.det-wa-bubble-small svg{
  width:20px;
  height:20px;
  flex:0 0 auto;
}

.det-wa-bubble.det-wa-bubble-small small{
  display:block;
  font-size:9px;
  font-weight:900;
  line-height:1.05;
  white-space:nowrap;
}

@media(max-width:390px){

  .det-wa-bubble.det-wa-bubble-small{
    width:50px;
    min-width:50px;
    height:50px;
    border-radius:16px;
  }

  .det-wa-bubble.det-wa-bubble-small small{
    font-size:8.5px;
  }

}


/* ============================================================
   CUSTOMER DETAIL V8 — bayar_tagihan + refinement
   ============================================================ */
.det-wa-bubble svg{display:block;color:#fff;}
.det-wa-bubble:hover{filter:brightness(.98);}
.det-pay-row{color:inherit;text-decoration:none;}
.det-pay-right strong{display:block;color:#2c9ce9;font-size:12px;line-height:1.2;margin-top:4px;font-weight:500;}
.det-pay-right a{display:block;color:#2c9ce9;font-size:12px;line-height:1.2;margin-top:4px;}

.pay-page-native{min-height:100vh;background:#f3f3f3;color:#111827;padding-bottom:90px;}
.pay-head-native{background:#172765;color:#fff;}
.pay-head-top{height:62px;display:flex;align-items:center;gap:18px;padding:0 20px;background:#1c2e75;}
.pay-head-top button{border:0;background:transparent;font-size:28px;line-height:1;color:#000;display:grid;place-items:center;width:34px;height:34px;cursor:pointer;}
.pay-head-top h1{font-size:22px;font-weight:700;letter-spacing:.2px;margin:0;color:#fff;}
.pay-user-mini{padding:8px 20px 22px;background:#172765;}
.pay-user-mini span{display:block;color:rgba(255,255,255,.24);font-size:14px;line-height:1.2;margin-bottom:4px;}
.pay-user-mini b{display:flex;align-items:center;gap:7px;font-size:18px;font-weight:900;line-height:1.05;color:#fff;}
.pay-user-mini em{font-style:normal;background:#2c9ff0;border-radius:999px;padding:2px 10px;font-size:17px;color:#fff;font-weight:800;}
.pay-user-mini p{font-size:16px;line-height:1.2;margin:6px 0 0;color:#fff;}
.pay-native-body{display:block;padding:12px 10px 22px;background:#f3f3f3;}
.pay-box{position:relative;background:#fff;border-radius:12px;margin:10px 0;padding:14px 18px;min-height:65px;box-shadow:none;}
.pay-box span{display:block;color:#777;font-size:15px;line-height:1.15;margin-bottom:7px;font-weight:400;}
.pay-box b{display:block;color:#17203e;font-size:20px;line-height:1.1;font-weight:400;}
.pay-row{display:flex;align-items:center;justify-content:space-between;gap:15px;}
.pay-row strong{font-size:19px;color:#17203e;font-weight:400;white-space:nowrap;}
.pay-month{padding-bottom:20px;}
.pay-month i{position:absolute;right:20px;top:18px;width:22px;height:22px;border-radius:50%;background:#269eea;color:#fff;display:grid;place-items:center;font-size:15px;font-style:normal;font-weight:900;}
.pay-month b{background:#ffa800;color:#fff;border-radius:28px;padding:13px 18px;font-size:15px;font-weight:900;margin-top:10px;}
.pay-slim-row{height:44px;background:#fff;border-radius:11px;margin:8px 0;padding:0 18px;display:flex;align-items:center;justify-content:space-between;gap:10px;}
.pay-slim-row span{font-size:15px;color:#777;font-weight:400;}
.pay-slim-row b{font-size:15px;color:#17203e;font-weight:500;}
.pay-now-btn{width:100%;min-height:56px;border:0;border-radius:28px;background:#08bd5a;color:#fff;font-size:16px;font-weight:900;margin:12px 0 22px;box-shadow:0 3px 8px rgba(0,0,0,.18);cursor:pointer;}
.pay-info-text{padding:0 20px 20px;color:#555;text-align:left;}
.pay-info-text b{font-size:16px;font-weight:900;color:#555;}
.pay-info-text p{margin:6px 0 0;color:#2c9ce9;font-size:15px;line-height:1.24;text-align:center;font-weight:400;}
@media(max-width:390px){.pay-head-top h1{font-size:21px}.pay-box{padding:13px 17px}.pay-box b{font-size:19px}.pay-row strong{font-size:18px}.pay-info-text p{font-size:14px}.pay-user-mini b{font-size:17px}.pay-user-mini em{font-size:16px}}

/* ============================================================
   V9 — Bayar Tagihan 80% TELANAS Blue + Invoice Native
   ============================================================ */
.pay-page-native{
  min-height:100vh;
  background:#f2f4f8;
  color:var(--text);
  padding-bottom:90px;
}
.pay-head-native{
  background:linear-gradient(180deg,var(--blue) 0%,#0b55bd 100%);
  color:#fff;
  border-radius:0 0 0 0;
  box-shadow:0 8px 24px rgba(7,91,199,.18);
}
.pay-head-top{
  height:62px;
  display:flex;
  align-items:center;
  gap:18px;
  padding:0 20px;
  background:rgba(6,27,60,.10);
}
.pay-head-top button{
  border:0;
  background:rgba(255,255,255,.16);
  color:#fff;
  font-size:24px;
  line-height:1;
  width:38px;
  height:38px;
  border-radius:14px;
  display:grid;
  place-items:center;
  cursor:pointer;
}
.pay-head-top h1{
  font-size:21px;
  font-weight:900;
  letter-spacing:.2px;
  margin:0;
  color:#fff;
}
.pay-user-mini{
  padding:8px 20px 24px;
  background:transparent;
}
.pay-user-mini span{
  display:block;
  color:rgba(255,255,255,.55);
  font-size:13px;
  line-height:1.2;
  margin-bottom:5px;
}
.pay-user-mini b{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:19px;
  font-weight:900;
  line-height:1.05;
  color:#fff;
}
.pay-user-mini em{
  font-style:normal;
  background:var(--blue2);
  border-radius:999px;
  padding:3px 12px;
  font-size:16px;
  color:#fff;
  font-weight:900;
}
.pay-user-mini p{
  font-size:16px;
  line-height:1.2;
  margin:7px 0 0;
  color:#fff;
  letter-spacing:.4px;
}
.pay-native-body{
  display:block;
  padding:12px 10px 22px;
  background:#f2f4f8;
}
.pay-box{
  position:relative;
  background:#fff;
  border-radius:16px;
  margin:10px 0;
  padding:15px 18px;
  min-height:66px;
  box-shadow:0 3px 10px rgba(6,27,60,.035);
  border:1px solid rgba(229,239,255,.65);
}
.pay-box span{
  display:block;
  color:#777;
  font-size:14px;
  line-height:1.15;
  margin-bottom:7px;
  font-weight:500;
}
.pay-box b{
  display:block;
  color:var(--text);
  font-size:20px;
  line-height:1.1;
  font-weight:500;
}
.pay-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
}
.pay-row strong{
  font-size:19px;
  color:var(--text);
  font-weight:600;
  white-space:nowrap;
}
.pay-month{padding-bottom:20px;}
.pay-month i{
  position:absolute;
  right:20px;
  top:18px;
  width:26px;
  height:26px;
  border-radius:50%;
  background:var(--blue2);
  color:#fff;
  display:grid;
  place-items:center;
  font-size:16px;
  font-style:normal;
  font-weight:900;
}
.pay-month b{
  background:#ffab0a;
  color:#fff;
  border-radius:28px;
  padding:15px 18px;
  font-size:15px;
  font-weight:900;
  margin-top:10px;
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.05);
}
.pay-slim-row{
  min-height:48px;
  background:#fff;
  border-radius:14px;
  margin:8px 0;
  padding:0 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border:1px solid rgba(229,239,255,.65);
}
.pay-slim-row span{font-size:15px;color:#777;font-weight:500;}
.pay-slim-row b{font-size:15px;color:var(--text);font-weight:700;}
.pay-now-btn{
  width:100%;
  min-height:58px;
  border:0;
  border-radius:30px;
  background:#07bf5d;
  color:#fff;
  font-size:16px;
  font-weight:900;
  margin:14px 0 22px;
  box-shadow:0 6px 14px rgba(0,0,0,.14);
  cursor:pointer;
  letter-spacing:.2px;
}
.pay-info-text{padding:0 20px 20px;color:#555;text-align:left;}
.pay-info-text b{font-size:16px;font-weight:900;color:#555;}
.pay-info-text p{
  margin:8px 0 0;
  color:#2c9ce9;
  font-size:15px;
  line-height:1.25;
  text-align:center;
  font-weight:500;
}
@media(max-width:390px){
  .pay-head-top h1{font-size:20px}
  .pay-box{padding:14px 17px}
  .pay-box b{font-size:19px}
  .pay-row strong{font-size:18px}
  .pay-info-text p{font-size:14px}
  .pay-user-mini b{font-size:18px}
  .pay-user-mini em{font-size:15px}
}

/* Invoice public / print — TELANAS blue native */
.invoice-native-page{
  margin:0;
  min-height:100vh;
  background:#f2f4f8;
  font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
  color:var(--text);
}
.inv-native-wrap{
  width:min(520px,100%);
  min-height:100vh;
  margin:0 auto;
  background:#f2f4f8;
}
.inv-native-hero{
  min-height:132px;
  padding:28px 20px 44px;
  background:linear-gradient(180deg,var(--blue) 0%,#0b55bd 100%);
  color:#fff;
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:flex-start;
}
.inv-native-hero b{display:block;font-size:25px;font-weight:900;line-height:1.05;}
.inv-native-hero small{display:block;font-size:12px;color:rgba(255,255,255,.76);margin-top:5px;font-weight:700;}
.inv-status{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:7px 12px;font-size:11px;font-weight:900;background:rgba(255,255,255,.18);color:#fff;white-space:nowrap;}
.inv-status.paid{background:#dcfce7;color:#166534;}
.inv-status.pending{background:#fff7ed;color:#c2410c;}
.inv-card-main{
  margin:-28px 12px 24px;
  background:#fff;
  border-radius:22px;
  padding:18px;
  box-shadow:0 10px 28px rgba(6,27,60,.10);
  border:1px solid rgba(229,239,255,.75);
}
.inv-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px;}
.inv-title-row small,.inv-user-box small{display:block;color:var(--muted);font-size:12px;font-weight:800;margin-bottom:4px;}
.inv-title-row h1{font-size:20px;line-height:1.1;color:var(--blue);font-weight:900;margin:0;}
.inv-print-btn{border:0;background:var(--blue);color:#fff;border-radius:14px;padding:10px 16px;font-size:12px;font-weight:900;cursor:pointer;}
.inv-user-box{background:#f7fbff;border:1px solid var(--border);border-radius:17px;padding:13px 14px;margin-bottom:14px;}
.inv-user-box b{display:flex;gap:7px;align-items:center;font-size:17px;color:var(--text);font-weight:900;line-height:1.15;}
.inv-user-box em{font-style:normal;background:var(--blue2);color:#fff;border-radius:999px;padding:2px 9px;font-size:12px;font-weight:900;}
.inv-user-box span{display:block;margin-top:5px;color:var(--text);font-size:14px;font-weight:700;}
.inv-user-box p{margin:7px 0 0;color:var(--muted);font-size:12px;line-height:1.35;}
.inv-line-row{display:flex;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid #edf2ff;}
.inv-line-row span{font-size:13px;color:var(--muted);font-weight:800;}
.inv-line-row b{text-align:right;font-size:13px;color:var(--text);font-weight:900;}
.inv-total-box{margin:16px 0;background:#eaf4ff;border-radius:18px;padding:15px;display:flex;align-items:center;justify-content:space-between;gap:12px;}
.inv-total-box span{font-size:13px;color:var(--muted);font-weight:900;}
.inv-total-box strong{font-size:22px;color:var(--blue);font-weight:900;white-space:nowrap;}
.inv-note-box{background:#fff7ed;border:1px solid #fed7aa;border-radius:16px;padding:13px 14px;color:#9a3412;}
.inv-note-box b,.inv-note-box span{display:block;font-size:12px;line-height:1.45;}
.inv-note-box b{font-size:13px;margin-bottom:2px;}
.inv-pay-btn{display:block;margin-top:16px;background:#08bd5a;color:#fff;text-align:center;border-radius:28px;padding:15px;font-size:14px;font-weight:900;box-shadow:0 5px 12px rgba(0,0,0,.12);}
.inv-paid-ok{margin-top:16px;background:#dcfce7;color:#166534;text-align:center;border-radius:18px;padding:14px;font-size:14px;font-weight:900;}
@media print{
  .invoice-native-page{background:#fff;}
  .inv-native-wrap{width:100%;background:#fff;}
  .inv-native-hero{background:#075bc7 !important;-webkit-print-color-adjust:exact;print-color-adjust:exact;}
  .inv-card-main{box-shadow:none;margin:-28px 0 0;border-radius:0;border:0;}
  .inv-print-btn{display:none;}
}

/* ============================================================
   PAYMENT PUBLIC 95% — TELANAS BLUE
   ============================================================ */
body.payment-public.pay95{margin:0;background:#f4f8ff;color:#10233f;font-family:'Segoe UI',system-ui,-apple-system,sans-serif;}
.pay95-page{min-height:100vh;background:linear-gradient(180deg,#eaf4ff 0%,#f8fbff 44%,#fff 100%);padding-bottom:26px;}
.pay95-hero{background:linear-gradient(135deg,var(--blue2),var(--blue) 58%,#0064dd);color:#fff;padding:15px 14px 74px;border-radius:0 0 30px 30px;box-shadow:0 15px 34px rgba(7,91,199,.22);}
.pay95-brand{display:flex;align-items:center;gap:10px;margin-bottom:24px;}
.pay95-brand button{width:36px;height:36px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.15);color:#fff;border-radius:13px;font-size:19px;font-weight:900;}
.pay95-brand b{display:block;font-size:17px;font-weight:900;letter-spacing:.2px;}
.pay95-brand span{display:block;font-size:11px;color:rgba(255,255,255,.78);margin-top:1px;}
.pay95-title{text-align:center;}
.pay95-title small{font-size:13px;color:rgba(255,255,255,.82);font-weight:800;}
.pay95-title h1{font-size:32px;line-height:1.05;margin:7px 0 11px;font-weight:900;letter-spacing:-.7px;}
.pay95-status{display:inline-flex;border-radius:999px;padding:7px 13px;font-size:11px;font-weight:900;background:#fff;color:var(--blue);box-shadow:0 8px 18px rgba(0,0,0,.12);}
.pay95-status.paid{color:#15803d}.pay95-status.unpaid{color:#b45309}
.pay95-wrap{width:min(520px,calc(100% - 22px));margin:-50px auto 0;position:relative;z-index:2;}
.pay95-card{background:#fff;border:1px solid #e3eeff;border-radius:20px;padding:15px;margin-bottom:11px;box-shadow:0 7px 20px rgba(6,27,60,.07);}
.pay95-user{display:grid;grid-template-columns:46px 1fr;gap:12px;align-items:center;}
.pay95-user-icon{width:46px;height:46px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,#e0f2fe,#eff6ff);color:var(--blue);font-size:24px;font-weight:900;}
.pay95-user small,.pay95-row span,.pay95-va small{display:block;font-size:11px;color:#64748b;font-weight:800;}
.pay95-user b{display:block;font-size:15px;line-height:1.15;color:#0f2a56;font-weight:900;}
.pay95-user span{display:block;font-size:12px;color:#64748b;margin-top:3px;}
.pay95-section-title{font-size:13px;font-weight:900;color:#075bc7;margin-bottom:12px;display:flex;align-items:center;justify-content:space-between;}
.pay95-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid #f0f5ff;}
.pay95-row:last-child{border-bottom:0;}
.pay95-row b{font-size:13px;color:#10233f;text-align:right;font-weight:900;line-height:1.25;}
.pay95-total{margin-top:12px;border-radius:16px;background:linear-gradient(135deg,#eff6ff,#dbeafe);padding:13px 14px;display:flex;justify-content:space-between;align-items:center;gap:12px;}
.pay95-total span{font-size:12px;font-weight:900;color:#075bc7;}
.pay95-total strong{font-size:20px;font-weight:900;color:#075bc7;letter-spacing:-.3px;}
.pay95-method{width:100%;border:1.5px solid #e5efff;background:#fff;border-radius:17px;padding:12px;margin-bottom:9px;display:grid;grid-template-columns:42px 1fr;gap:11px;text-align:left;align-items:center;}
.pay95-method.active{border-color:var(--blue);background:#f0f7ff;box-shadow:0 8px 18px rgba(7,91,199,.10);}
.pay95-method span{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:#eaf3ff;color:var(--blue);font-weight:900;}
.pay95-method b{display:block;font-size:13px;color:#10233f;font-weight:900;}
.pay95-method small{display:block;font-size:11px;color:#64748b;margin-top:2px;}
.pay95-qris{text-align:center;padding:4px 0 8px;}
.pay95-qris img{width:190px;max-width:80%;display:block;margin:0 auto 8px;border:1px solid #e5efff;border-radius:18px;padding:8px;background:#fff;}
.pay95-qris small{font-size:12px;color:#64748b;font-weight:800;}
.pay95-va{border-radius:16px;background:#f8fbff;border:1px dashed #bfdbfe;padding:13px;text-align:center;margin-bottom:10px;}
.pay95-va b{display:block;font-size:21px;color:var(--blue);font-weight:900;letter-spacing:.5px;margin:4px 0;}
.pay95-va button{border:0;background:var(--blue);color:#fff;border-radius:12px;padding:9px 14px;font-size:12px;font-weight:900;}
.pay95-va em{display:block;font-style:normal;color:#64748b;font-size:12px;margin-top:7px;font-weight:800;}
.pay95-paid-ok{color:#15803d;font-size:14px;font-weight:900;text-align:center;background:#f0fdf4;border-color:#bbf7d0;}
@media(max-width:390px){.pay95-hero{padding-bottom:68px}.pay95-title h1{font-size:29px}.pay95-card{border-radius:18px;padding:14px}.pay95-total strong{font-size:18px}.pay95-qris img{width:175px}}

/* ============================================================
   PAYMENTS ADMIN — BLUE TELANAS MOBILE
   ============================================================ */
.pay-search-panel{display:none;background:#fff;border-bottom:1px solid var(--border);padding:10px 14px;box-shadow:0 8px 18px rgba(6,27,60,.08);}
body.pay-search-open .pay-search-panel{display:block;position:sticky;top:62px;z-index:890;}
.pay-search-panel input{width:100%;border:1.5px solid var(--border);background:#f8fbff;border-radius:14px;padding:12px 14px;font-size:14px;outline:none;}
.payments-page{background:#f8fbff;padding:10px 10px 104px;min-height:calc(100vh - 62px);}
.payment-card{background:#fff;border:1px solid #e5efff;border-radius:18px;margin-bottom:10px;overflow:hidden;box-shadow:0 5px 16px rgba(6,27,60,.06);}
.payment-card-main{display:grid;grid-template-columns:44px 1fr auto;gap:10px;align-items:center;padding:13px;cursor:pointer;}
.payment-icon{width:44px;height:44px;border-radius:15px;display:grid;place-items:center;font-size:13px;font-weight:900;background:#eaf3ff;color:var(--blue);}
.payment-icon.cash{background:#eaf3ff;color:var(--blue)}
.payment-icon.online{background:#f0f9ff;color:#0284c7}
.payment-info{min-width:0;}
.payment-info b{display:block;font-size:14px;font-weight:900;color:#10233f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.15;}
.payment-info span{display:block;font-size:11px;color:#64748b;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.payment-info small{display:block;font-size:11px;color:#94a3b8;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.payment-amount{text-align:right;min-width:96px;}
.payment-amount strong{display:block;font-size:14px;font-weight:900;color:var(--blue);line-height:1.1;}
.payment-amount em{display:inline-flex;margin-top:5px;border-radius:999px;background:#dcfce7;color:#15803d;font-size:10px;font-weight:900;padding:4px 8px;font-style:normal;}
.payment-actions{display:none;grid-template-columns:1fr 1fr;gap:8px;padding:10px 13px 13px;border-top:1px dashed #dbeafe;background:#f8fbff;}
.payment-card.show-actions .payment-actions{display:grid;}
.payment-actions .btn{font-size:12px;min-height:38px;border-radius:12px;}
@media(min-width:901px){.payments-page{padding:18px 22px 40px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.payment-card{margin:0}.pay-search-panel{max-width:520px}}
@media(max-width:390px){.payments-page{padding:9px 8px 96px}.payment-card-main{grid-template-columns:40px 1fr auto;padding:12px;gap:8px}.payment-icon{width:40px;height:40px;border-radius:14px}.payment-amount{min-width:88px}.payment-amount strong{font-size:13px}.payment-info b{font-size:13px}}

/* bayar_tagihan blue tuning */
.pay-head-native{background:linear-gradient(135deg,var(--blue2),var(--blue) 60%,#0064dd)!important;}
.pay-now-btn,.det-btn-navy{background:linear-gradient(135deg,var(--blue2),var(--blue))!important;}
.pay-user-mini em,.pay-box strong,.pay-box b,.pay-slim-row b{color:var(--blue)!important;}


/* ============================================================
   HOLD ACTION UX — tap detail, hold action + strip kecil
   ============================================================ */
.customer-actions,
.bill-card-actions,
.payment-actions{
  grid-template-columns:repeat(auto-fit,minmax(112px,1fr));
}
.customer-actions .btn,
.bill-card-actions .btn,
.payment-actions .btn{
  width:100%;
}
.customer-card,
.bill-card,
.payment-card{
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
}
.hold-action-strip{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:1200;
  height:26px;
  background:var(--blue);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:10px;
  line-height:1;
  font-weight:800;
  letter-spacing:.2px;
}
.mobile-customer-list,
.bill-list,
.payments-page{
  padding-bottom:46px;
}
.bill-total-bar{
  bottom:26px;
}
@media(max-width:390px){
  .customer-actions,
  .bill-card-actions,
  .payment-actions{
    grid-template-columns:repeat(auto-fit,minmax(96px,1fr));
    gap:7px;
  }
  .hold-action-strip{
    height:24px;
    font-size:10px;
  }
  .bill-total-bar{
    bottom:24px;
  }
}

/* ============================================================
   WA BLAST TEMPLATE SETTINGS — 90% mobile native
   ============================================================ */
.wa-page{background:#f8fbff;padding:12px 12px 70px;}
.wa-hero-card{background:linear-gradient(135deg,var(--blue2),var(--blue));color:#fff;border-radius:20px;padding:16px;display:flex;justify-content:space-between;align-items:center;box-shadow:var(--shadow);margin-bottom:12px;}
.wa-hero-card span{display:block;font-size:11px;opacity:.85;font-weight:800;text-transform:uppercase;letter-spacing:.4px;}
.wa-hero-card b{display:block;font-size:18px;font-weight:900;margin-top:2px;}
.wa-hero-card small{display:block;font-size:12px;opacity:.82;margin-top:4px;line-height:1.25;}
.wa-hero-icon{width:46px;height:46px;border-radius:16px;background:rgba(255,255,255,.18);display:grid;place-items:center;font-weight:900;border:1px solid rgba(255,255,255,.22);}
.wa-settings-native{background:#fff;border:1px solid var(--border);border-radius:18px;margin-bottom:12px;box-shadow:var(--shadow-sm);overflow:hidden;}
.wa-settings-native summary{cursor:pointer;padding:14px 15px;font-size:14px;font-weight:900;color:var(--blue);list-style:none;border-bottom:1px solid #edf4ff;}
.wa-settings-native summary::-webkit-details-marker{display:none;}
.wa-settings-form{padding:14px;}
.wa-settings-grid{gap:12px!important;}
.wa-wide{grid-column:1/-1;}
.wa-template-box{min-height:240px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px!important;line-height:1.35;white-space:pre-wrap;}
.wa-var-help{background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe;border-radius:14px;padding:10px 12px;font-size:11px;font-weight:700;line-height:1.45;margin-bottom:12px;}
.wa-filter-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0;}
.wa-chip{background:#fff;border:1px solid var(--border);color:var(--muted);border-radius:999px;padding:10px 8px;text-align:center;font-size:12px;font-weight:900;}
.wa-chip.active{background:var(--blue);color:#fff;border-color:var(--blue);}
.wa-invoice-list{display:block;}
.wa-list-head{display:flex;justify-content:space-between;align-items:center;gap:10px;background:#fff;border:1px solid var(--border);border-radius:16px;padding:12px;margin-bottom:10px;}
.wa-list-head b{font-size:14px;color:var(--navy);}
.wa-check-all{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:900;color:var(--muted);padding:0 4px 10px;}
.wa-inv-card{display:grid;grid-template-columns:24px 1fr auto;gap:10px;align-items:center;background:#fff;border:1px solid var(--border);border-radius:16px;padding:12px;margin-bottom:9px;box-shadow:var(--shadow-sm);}
.wa-inv-card input{width:18px;height:18px;}
.wa-inv-info{min-width:0;}
.wa-inv-info b{display:block;font-size:14px;font-weight:900;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.wa-inv-info span{display:block;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px;}
.wa-inv-info small{display:block;font-size:11px;color:#64748b;margin-top:4px;}
.wa-inv-side{text-align:right;}
.wa-inv-side strong{display:block;font-size:13px;font-weight:900;color:var(--blue);}
.wa-inv-side em{display:inline-block;margin-top:3px;font-style:normal;border-radius:999px;padding:3px 7px;font-size:9px;font-weight:900;}
.wa-inv-side em.paid{background:#dcfce7;color:#166534;}
.wa-inv-side em.unpaid{background:#fef3c7;color:#92400e;}
.wa-inv-side small{display:block;color:var(--muted);font-size:10px;margin-top:3px;}
@media(max-width:520px){.wa-page{padding-left:10px;padding-right:10px}.wa-template-box{min-height:250px}.wa-list-head{align-items:flex-start;flex-direction:column}.wa-list-head .btn{width:100%;}.wa-inv-card{grid-template-columns:22px 1fr;}.wa-inv-side{grid-column:2;text-align:left;display:flex;gap:8px;align-items:center;flex-wrap:wrap}.wa-inv-side small{display:inline-block;margin:0}}


/* CUSTOMER FORM data tambahan rapi kebawah */
.data-extra-stack{display:block;}
.data-extra-stack .form-group{margin-bottom:12px;}

/* DETAIL BILLING adjustment */
.dbi-adjust-box{background:#fff;border:1px solid var(--border);border-radius:16px;margin:12px 0;overflow:hidden;}
.dbi-adjust-box summary{list-style:none;cursor:pointer;}
.dbi-adjust-box summary::-webkit-details-marker{display:none;}
.dbi-adjust-form{display:grid;gap:9px;padding:12px 14px;border-top:1px solid var(--border);}
.dbi-adjust-form label{font-size:12px;font-weight:900;color:var(--blue);}
.dbi-adjust-form .btn{width:100%;}


/* ============================================================
   V19 — Billing form & temporary adjustment polish
   ============================================================ */
.customer-billing-form-card .data-extra-section{padding-top:6px;}
.customer-billing-form-card .form-group{margin-bottom:14px;}
.customer-form-subtitle{
  margin:18px 0 10px;
  padding:9px 12px;
  border-radius:13px;
  background:#eaf3ff;
  color:var(--blue);
  font-size:13px;
  font-weight:900;
}
.customer-billing-form-card textarea{min-height:105px;}
.dbi-adjust-applied b{display:flex;align-items:center;justify-content:flex-end;gap:8px;}
.dbi-remove-adjust{
  width:22px;height:22px;border-radius:999px;
  display:inline-grid;place-items:center;
  background:#fee2e2;color:#b91c1c;
  font-size:16px;font-weight:900;line-height:1;
}
.dbi-adjust-fields{display:flex;flex-direction:column;gap:7px;margin-top:8px;}
.dbi-adjust-form button{margin-top:10px;width:100%;}
.pay95-row b{max-width:55%;text-align:right;}

/* ============================================================
   INVOICE PRINT SUCCESS — TELANAS v20
   ============================================================ */
.invoice-native-page{
  background:#eef6ff;
  min-height:100vh;
  color:var(--text);
}
.inv-native-wrap{
  width:min(430px,100%);
  margin:0 auto;
  padding:18px 14px 100px;
}
.inv-success-top{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:18px 10px 14px;
  color:var(--blue);
}
.inv-check{
  width:58px;
  height:58px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#dcfce7;
  color:#16a34a;
  font-size:34px;
  font-weight:900;
  box-shadow:0 8px 24px rgba(22,163,74,.18);
  margin-bottom:8px;
}
.inv-success-top b{
  font-size:22px;
  font-weight:900;
  line-height:1;
}
.inv-success-top span{
  font-size:13px;
  color:#64748b;
  margin-top:5px;
  font-weight:700;
}
.inv-card-main.inv-receipt-card{
  background:#fff;
  border:1px solid #dbeafe;
  border-radius:24px;
  padding:18px;
  box-shadow:0 12px 30px rgba(7,91,199,.10);
}
.inv-brand-center{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:2px 0 15px;
  border-bottom:1px dashed #dbeafe;
  margin-bottom:14px;
}
.inv-logo-dot{
  width:48px;
  height:48px;
  border-radius:17px;
  background:linear-gradient(135deg,var(--blue2),var(--blue));
  color:#fff;
  display:grid;
  place-items:center;
  font-size:24px;
  font-weight:900;
  margin-bottom:8px;
}
.inv-brand-center b{
  font-size:19px;
  font-weight:900;
  color:var(--blue);
  letter-spacing:.4px;
}
.inv-brand-center span{
  font-size:11px;
  color:#64748b;
  font-weight:800;
}
.inv-title-row.clean{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:12px;
}
.inv-title-row.clean small,
.inv-user-box small,
.inv-section-label{
  display:block;
  color:#64748b;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.3px;
}
.inv-title-row.clean h1{
  font-size:17px;
  line-height:1.1;
  color:#0f172a;
  margin-top:3px;
}
.inv-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  padding:5px 10px;
  font-size:10px;
  font-weight:900;
  background:#e0f2fe;
  color:var(--blue);
}
.inv-status.paid{background:#dcfce7;color:#15803d;}
.inv-status.pending{background:#fef3c7;color:#92400e;}
.inv-status.inactive{background:#e5e7eb;color:#374151;}
.inv-user-box{
  background:#f8fbff;
  border:1px solid #e5efff;
  border-radius:18px;
  padding:13px;
  margin-bottom:14px;
}
.inv-user-box b{
  display:block;
  font-size:15px;
  line-height:1.2;
  color:#0f172a;
  margin-top:4px;
}
.inv-user-box b em{
  font-style:normal;
  font-size:10px;
  color:#fff;
  background:var(--blue);
  border-radius:999px;
  padding:3px 7px;
  vertical-align:middle;
  margin-left:4px;
}
.inv-user-box span,
.inv-user-box p{
  display:block;
  margin-top:3px;
  color:#64748b;
  font-size:12px;
  font-weight:700;
}
.inv-section-label{
  margin:10px 0 6px;
  color:var(--blue);
}
.inv-line-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  border-bottom:1px solid #eef4ff;
  padding:10px 0;
}
.inv-line-row span{
  font-size:13px;
  color:#64748b;
  font-weight:800;
}
.inv-line-row b{
  font-size:13px;
  color:#0f172a;
  font-weight:900;
  text-align:right;
}
.inv-line-row.minus b{color:#dc2626;}
.inv-total-box{
  margin-top:14px;
  border-radius:20px;
  padding:15px;
  background:linear-gradient(135deg,var(--blue2),var(--blue));
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.inv-total-box span{
  font-size:12px;
  font-weight:800;
  opacity:.9;
}
.inv-total-box strong{
  font-size:21px;
  line-height:1;
  font-weight:900;
}
.inv-thanks{
  text-align:center;
  color:#64748b;
  font-size:12px;
  line-height:1.45;
  font-weight:700;
  padding:16px 8px 4px;
}
.inv-thanks b{
  display:block;
  color:var(--blue);
  margin-top:8px;
  font-size:12px;
  font-weight:900;
}
.inv-action-row{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:9999;
  width:min(430px,100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:rgba(238,246,255,.95);
  backdrop-filter:blur(12px);
  border-top:1px solid #dbeafe;
}
.inv-action-btn{
  min-height:42px;
  border:0;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:900;
  color:#fff;
  text-decoration:none;
  cursor:pointer;
}
.inv-action-btn.primary{background:#0f172a;}
.inv-action-btn.whatsapp{background:#16a34a;}
.inv-action-btn.blue{background:var(--blue);}
.dbi-refresh-icon{
  width:38px!important;
  min-width:38px!important;
  height:38px!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  border-radius:13px!important;
  font-size:24px!important;
  line-height:1!important;
  background:rgba(255,255,255,.18)!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.24)!important;
}
@media print{
  body.invoice-native-page{background:#fff!important;}
  .inv-native-wrap{width:100%;max-width:430px;padding:0!important;}
  .inv-success-top,.inv-action-row,.no-print{display:none!important;}
  .inv-card-main.inv-receipt-card{box-shadow:none!important;border:0!important;border-radius:0!important;}
}

/* ============================================================
   V21 Invoice Print + Detail Billing fixes
   ============================================================ */
.inv-card-main.inv-receipt-card{
  margin-top:12px !important;
}
.inv-total-box strong{
  color:#fff !important;
  text-shadow:0 1px 1px rgba(0,0,0,.12);
}
.inv-total-box span{
  color:#fff !important;
  opacity:.92 !important;
}
.dbi-paid-badge{
  display:block;
  text-align:center;
  text-decoration:none;
  background:#dcfce7;
  color:#15803d;
  border-radius:18px;
  padding:15px;
  font-size:14px;
  font-weight:900;
  margin-top:12px;
}
@media print{
  .inv-action-row{display:none!important;}
  .inv-card-main.inv-receipt-card{margin-top:0!important;box-shadow:none!important;border:0!important;}
}

/* ============================================================
   DASHBOARD POLISH V23 — notif, user code, money responsive
   ============================================================ */
@media (max-width:900px){
  .tel-date{min-width:0;}
  .tel-cal-icon{
    width:40px;height:40px;border-radius:14px;
    display:grid;place-items:center;
    background:rgba(255,255,255,.16);
    border:1px solid rgba(255,255,255,.22);
    color:#fff;font-size:0!important;flex-shrink:0;
  }
  .tel-date small{font-size:12px!important;opacity:.82;}
  .tel-date b{font-size:14px!important;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:210px;}
  .tel-bell{
    position:relative;border:0;background:transparent;color:#fff;
    font-size:23px;line-height:1;cursor:pointer;padding:3px;
  }
  .tel-bell span{
    position:absolute;right:-5px;top:-5px;min-width:18px;height:18px;
    padding:0 5px;border-radius:999px;background:#ef4444;color:#fff;
    border:2px solid rgba(255,255,255,.8);
    font-size:9px;font-weight:900;display:grid;place-items:center;
  }
  .tel-notif-pop{
    display:none;position:absolute;right:44px;top:54px;
    width:min(310px,calc(100vw - 28px));
    background:#fff;border-radius:18px;padding:14px;
    box-shadow:var(--shadow-lg);z-index:230;color:var(--navy);
  }
  .tel-notif-pop.show{display:block;}
  .tel-notif-pop>b{display:block;font-size:14px;font-weight:900;color:var(--navy);}
  .tel-notif-pop>small{display:block;font-size:11px;color:var(--muted);margin:2px 0 9px;}
  .tel-notif-pop a{display:block;padding:10px 4px;border-top:1px solid #edf2ff;}
  .tel-notif-pop a span{display:block;font-size:13px;font-weight:900;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .tel-notif-pop a em{display:block;font-style:normal;font-size:11px;color:var(--blue);font-weight:800;margin-top:2px;}
  .tel-notif-empty{padding:12px 4px;color:var(--muted);font-size:12px;border-top:1px solid #edf2ff;}
  .tel-greeting h1{font-size:25px!important;font-weight:700!important;}
  .tel-greeting .user-code{display:inline-block;font-size:13px;font-weight:900;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.25);padding:3px 8px;border-radius:999px;vertical-align:middle;}
  .tel-payment-card strong{font-size:16px!important;max-width:112px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .tel-cash-row{grid-template-columns:1fr 1fr!important;gap:8px!important;}
  .tel-cash-toggle button{
    min-width:0;border-radius:16px;background:rgba(255,255,255,.10)!important;
    padding:9px!important;border:1px solid rgba(255,255,255,.15)!important;
  }
  .tel-cash-toggle button small{
    font-size:12px!important;letter-spacing:0!important;max-width:100%!important;
  }
  .tel-cash-toggle button b{
    font-size:12px!important;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .cash-in,.cash-out{width:36px!important;height:36px!important;border-radius:12px!important;font-size:19px!important;}
}
@media (max-width:390px){
  .tel-date b{max-width:170px;font-size:13px!important;}
  .tel-payment-card strong{font-size:15px!important;max-width:98px;}
  .tel-cash-toggle button{grid-template-columns:36px 1fr!important;column-gap:7px!important;}
  .tel-cash-toggle button small{font-size:11px!important;}
}

.psb-topbar{display:flex!important;align-items:center;gap:11px;position:sticky;top:0;z-index:900;padding:12px 14px;background:linear-gradient(135deg,var(--blue2,#073b91) 0%,var(--blue,#075bc7) 60%,#0042d9 100%)}
.psb-topbar .pg-title{color:#fff;font-size:18px;font-weight:900;margin:0}
.psb-topbar .pg-back{color:#fff;background:rgba(255,255,255,.14);border:0;border-radius:13px;width:38px;height:38px;font-weight:900}
.customer-wizard-wrap{max-width:980px;margin:auto;padding:14px 14px 120px}
.tel-wizard-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 14px}
.tel-step{border:0;border-radius:16px;padding:11px 6px;background:#eaf3ff;color:#075bc7;font-weight:900;box-shadow:var(--shadow-sm,0 6px 18px rgba(8,47,120,.08))}
.tel-step span{display:block;font-size:11px;margin-top:2px}
.tel-step.active{background:#075bc7;color:#fff}
.tel-wizard-page{display:none}
.tel-wizard-page.active{display:block}
.tel-wizard-page.section-card{padding:14px!important}
.tel-input-action{display:flex;gap:8px;align-items:stretch}
.tel-input-action .input,.tel-input-action textarea{flex:1}
.tel-input-action .btn,.tel-icon-btn{width:70px;min-width:40px;padding:0!important;border-radius:14px!important;font-size:18px!important}
.tel-prorata-preview{margin-top:8px;border-radius:14px;background:#eaf3ff;color:#075bc7;padding:12px;font-weight:900}
.psb-addfee-btn{width:100%;border:1.5px dashed #93c5fd;background:#eff6ff;color:#075bc7;border-radius:15px;padding:13px;font-weight:900;font-size:15px}.psb-remove-fee{border:0;background:#ffebee;color:#d50000;width:28px;height:28px;border-radius:50%;font-weight:900;cursor:pointer}
.psb-extra-fee{display:none}.psb-extra-fee.show{display:block}
.psb-check-card{background:#f8fbff;border:1px solid var(--border,#dbe7ff);border-radius:15px;padding:12px}
.psb-check{display:flex;align-items:center;gap:8px;font-weight:900}
.tel-advanced-ftth{border:1px solid var(--border,#dbe7ff);border-radius:16px;padding:13px;margin-top:12px;background:#f8fbff}
.tel-advanced-ftth summary{font-weight:900;color:#075bc7;cursor:pointer}
.tel-wizard-actions{display:grid!important;grid-template-columns:1fr 1fr;gap:8px}
.tel-wizard-actions .btn{width:100%;min-height:44px}
.tel-wizard-actions.step-1 .psb-next-btn,.tel-wizard-actions.step-2 .psb-next-btn{grid-column:1/-1}
.tel-wizard-actions.step-3{grid-template-columns:1fr 1fr!important}
.tel-wizard-actions.step-3 .psb-clear-btn,.tel-wizard-actions.step-3 .psb-next-btn{display:none!important}
.tel-wizard-actions.step-3 .psb-save-btn{display:inline-flex!important}
@media(max-width:900px){.customer-wizard-wrap{padding:12px 12px 120px}.tel-wizard-steps{position:sticky;top:62px;z-index:20;background:#f4f8ff;padding:8px 0}}