/* =========================================
REMOVE WHITE BACKGROUND STRIP
========================================= */

html,
body{

  background:
  linear-gradient(
    135deg,
    #eef4ff 0%,
    #dbeafe 45%,
    #c7d2fe 100%
  ) !important;

}

/* wrapper utama */

.main-wrapper,
.app-wrapper,
.wrapper,
.content-wrapper{

  background:transparent !important;

}

/* section atas */

header::before,
header::after{
  display:none !important;
}

/* hilangkan layer putih */

.top-bg,
.bg-top,
.hero-bg{
  display:none !important;
}

/* Scroll responsif untuk mobile */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* === Glass / Transparan Table Style === */
.transparent-table {
  width: 100%;
  border-collapse: collapse;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  color: #fff;
  background: rgba(255, 255, 255, 0.1); /* transparan putih */
  backdrop-filter: blur(10px); /* efek blur kaca */
  border-radius: 12px;
  box-shadow: 0 0 10px rgba(255,255,255,0.2);
  overflow: hidden;
}

.transparent-table th, 
.transparent-table td {
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 12px;
  text-align: left;
}

.transparent-table th {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  font-weight: 600;
}

.transparent-table tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.05);
}

.transparent-table tr:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* === Responsif (mobile view) === */
@media (max-width: 768px) {
  .transparent-table thead {
    display: none;
  }
  .transparent-table tr {
    display: block;
    margin-bottom: 12px;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 10px;
    background: rgba(255,255,255,0.05);
    padding: 10px;
  }
  .transparent-table td {
    display: flex;
    justify-content: space-between;
    text-align: left;
    border: none;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    font-size: 13px;
  }
  .transparent-table td::before {
    content: attr(data-label);
    font-weight: bold;
    color: #ffd700;
  }
}

.btn-action {
  padding: 6px 12px;
  margin: 2px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  color: #4c4c4cff;
  font-size: 13px;
  transition: 0.3s;
}

.btn-action.bayar {
  background-color: rgba(0, 200, 83, 0.7);
}
.btn-action.bayar:hover {
  background-color: rgba(0, 200, 83, 1);
}

.btn-action.tidak-bayar {
  background-color: rgba(229, 57, 53, 0.7);
}
.btn-action.tidak-bayar:hover {
  background-color: rgba(229, 57, 53, 1);
}

.btn-action.bukti {
  background-color: rgba(33, 150, 243, 0.7);
}
.btn-action.bukti:hover {
  background-color: rgba(33, 150, 243, 1);
}

select {
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  border: none;
  outline: none;
  font-size: 14px;
  color: #fff; /* warna teks tetap putih */
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 0 5px rgba(255,255,255,0.2);
  transition: all 0.3s ease;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg fill='white' height='18' width='18' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
}

/* Saat select difokuskan */
select:focus {
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 8px rgba(255,255,255,0.3);
}

/* Opsi di dalam dropdown */
option {
  background-color: rgba(0, 0, 0, 0.8); /* ubah jadi gelap agar teks terlihat */
  color: #fff; /* tulisan tetap putih */
  border: none;
}

/* Hover saat memilih option (beberapa browser support) */
option:hover {
  background-color: rgba(255,255,255,0.2);
}

/* ======== Styling Sesuai Tema Website ======== */
.daterangepicker {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 15px;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    box-shadow: 0 0 20px rgba(0,0,0,0.3);
}

.daterangepicker .calendar-table {
    background: transparent;
    border: none;
}

.daterangepicker td.available:hover,
.daterangepicker th.available:hover {
    background-color: rgba(255,255,255,0.1);
    color: #fff;
    border-radius: 6px;
}

.daterangepicker td.active,
.daterangepicker td.active:hover {
    background-color: #5c6bc0; /* warna ungu kebiruan */
    color: #fff;
    border-radius: 6px;
}

.daterangepicker .drp-buttons {
    border-top: 1px solid rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.05);
    padding: 10px;
}

.daterangepicker .drp-buttons .btn {
    border-radius: 10px;
    font-weight: 500;
    padding: 5px 12px;
}

.daterangepicker .btn-success {
    background-color: #5c6bc0;
    border: none;
    color: white;
}

.daterangepicker .btn-default {
    background-color: #ff0000;
    border: 1px solid rgba(255,255,255,0.4);
    color: white;
}

.daterangepicker .btn-default:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

.daterangepicker select.monthselect,
.daterangepicker select.yearselect {
    background: rgba(255,255,255,0.1);
    border: none;
    color: Black;
    border-radius: 6px;
    padding: 4px 6px;
}

.daterangepicker, .flatpickr-calendar {
  color: #000000ff !important;
  background-color: #ffffffff !important;
  backdrop-filter: none !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Teks tanggal jadi hitam */
.daterangepicker td, 
.daterangepicker th,
.flatpickr-day {
  color: #000 !important;
}

/* Pastikan bulan & tahun di header terlihat */
.daterangepicker .drp-calendar .calendar-table th.month,
.flatpickr-current-month {
  color: #000 !important;
  font-weight: 600;
}

/* Tombol navigasi bulan */
.flatpickr-prev-month svg,
.flatpickr-next-month svg {
  fill: #000 !important;
}

/* Input text-nya juga */
#tgl_start {
  color: #000;
  background-color: #fff;
  border: 1px solid #ccc;
}

.popup-overlay {
  display: none;
  position: fixed;
  z-index: 999;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px);
}

.popup-content {
  width: 400px;
  margin: 10% auto;
  padding: 20px 25px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 20px;
  color: #fff;
  box-shadow: 0 0 25px rgba(0,0,0,0.3);
  animation: fadeIn 0.3s ease-in-out;
}

.popup-content h3 {
  text-align: center;
  margin-bottom: 20px;
}

.popup-content input {
  width: 100%;
  padding: 10px;
  margin-top: 8px;
  border-radius: 10px;
  border: none;
  background: rgba(255,255,255,0.15);
  color: white;
}

.popup-actions {
  margin-top: 20px;
  text-align: right;
}

.btn-primary, .btn-secondary {
  border: none;
  padding: 8px 16px;
  border-radius: 10px;
  cursor: pointer;
  transition: 0.2s;
  font-weight: 500;
}

.btn-primary {
  background: #5c6bc0;
  color: #fff;
}

.btn-primary:hover {
  background: #7986cb;
}

.btn-secondary {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.4);
}

.btn-secondary:hover {
  background: rgba(255,255,255,0.1);
}

.close-btn {
  float: right;
  font-size: 22px;
  cursor: pointer;
}

@keyframes fadeIn {
  from {opacity: 0; transform: translateY(-10px);}
  to {opacity: 1; transform: translateY(0);}
}

.kocok-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 20px;
  width: 90%;
  max-width: 400px;
  margin: 30px auto;
}

.wheel-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

#wheelCanvas {
  width: 260px;
  height: 260px;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(100, 100, 255, 0.2);
}

#pointer {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 22px solid #ff6f61;
}

.btn-primary {
  border: none;
  color: #fff;
  padding: 8px 18px;
  margin-top: 15px;
  cursor: pointer;
  transition: 0.3s;
}
.btn-primary:hover {
  transform: scale(1.05);
}

#hasilKocok {
  margin-top: 12px;
  color: #333;
  font-weight: 600;
}

.contact-map {
    padding: 30px;
    border-radius: 15px;
    margin-top: 30px;
  }

  .form-horizontal .form-group {
    margin-bottom: 15px;
  }

  .form-horizontal label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
  }

  .form-horizontal input,
  .form-horizontal select,
  .form-horizontal textarea {
    width: 100%;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid #ccc;
    font-size: 14px;
  }

  .form-horizontal input:focus,
  .form-horizontal select:focus,
  .form-horizontal textarea:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 4px rgba(37, 99, 235, 0.4);
  }

  .cta-button {
    background-color: #2563eb;
    color: #fff;
    border: none;
    padding: 10px 18px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: 0.3s;
  }

  .cta-button:hover {
    background-color: #1e40af;
  }

  .cta-button.secondary {
    background-color: #6b7280;
  }

  .cta-button.secondary:hover {
    background-color: #4b5563;
  }

  .form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
  }

#datatable {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px; /* ✅ font lebih kecil */
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  overflow: hidden;
  table-layout: fixed; /* ✅ agar kolom wrap dengan rapi */
}

#datatable th,
#datatable td {
  padding: 6px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  text-align: left;
  vertical-align: top; /* ✅ biar teks panjang tetap rapi atas */
  word-wrap: break-word;
  white-space: normal; /* ✅ agar keterangan bisa turun ke baris 2 */
}

#datatable th {
  background: rgba(255, 255, 255, 0.1);
  font-weight: 600;
  color: #ffd43b;
}

#datatable tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.03);
}

#datatable tr:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* Kolom angka rata kanan */
#datatable td:nth-child(3),
#datatable td:nth-child(4),
#datatable td:nth-child(5) {
  text-align: right;
}

/* Responsif: tetap tabel, tapi font lebih kecil di layar kecil */
@media (max-width: 768px) {
  #datatable {
    font-size: 8px;
  }

  #datatable th,
  #datatable td {
    padding: 5px 8px;
  }
}

.mobile-menu-btn{
  font-size:28px;
  color:#fff;
  cursor:pointer;
}

.mobile-menu-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.6);
  backdrop-filter:blur(6px);
  display:none;
  z-index:9999;
}

.mobile-menu{
  width:80%;
  max-width:320px;
  height:100%;
  padding:25px;
  background:linear-gradient(180deg,#1e293b,#312e81);
  box-shadow:0 0 40px rgba(0,0,0,.4);
  animation:slideIn .3s ease;
  color:#fff;
}

.mobile-menu-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:18px;
  font-weight:600;
  margin-bottom:25px;
}

.mobile-menu-header .close-btn{
  cursor:pointer;
  font-size:22px;
}

.mobile-menu a{
  display:block;
  padding:14px 0;
  text-decoration:none;
  color:#e2e8f0;
  font-weight:500;
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:.3s;
}

.mobile-menu a:hover{
  color:#60a5fa;
  transform:translateX(6px);
}

/* hamburger button */
.mobile-menu-btn{
  display:none;
  font-size:28px;
  color:#fff;
  cursor:pointer;
  background:linear-gradient(135deg,#3b82f6,#6366f1);
  padding:8px 14px;
  border-radius:12px;
  box-shadow:0 6px 16px rgba(59,130,246,.4);
}

/* only mobile */
@media (max-width:768px){

  .nav-links{
    display:none;
  }

  .mobile-menu-btn{
    display:block;
  }

}

/* slide animation */
@keyframes slideIn{
  from{transform:translateX(-100%);}
  to{transform:translateX(0);}
}

.glass-pagination{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:25px;
  flex-wrap:wrap;
}

.glass-pagination a{
  padding:8px 14px;
  border-radius:12px;
  text-decoration:none;
  font-size:14px;
  font-weight:600;
  color:#fff;
  background:rgba(255,255,255,0.12);
  backdrop-filter: blur(8px);
  box-shadow:0 4px 12px rgba(0,0,0,.25);
  transition:.25s ease;
}

.glass-pagination a:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,0.25);
}

.glass-pagination .active{
  background:linear-gradient(135deg,#ffd36a,#ffb703);
  color:#1f2230;
  box-shadow:0 0 14px rgba(255,211,106,.8);
}

.glass-pagination .nav-btn{
  background:linear-gradient(135deg,#4fd1ff,#3b82f6);
}


/* =========================================
HEADER LOGO SIZE
========================================= */

.logo img{
  height:58px !important;
  width:auto !important;
  object-fit:contain;
  display:block;
}

/* MOBILE */
@media(max-width:768px){

  .logo img{
    height:30px !important;
  }

}


/* =========================================================
RESPONAJA NEW ELEGANT THEME
========================================================= */

body{

  background:
  radial-gradient(circle at top left,
  rgba(125,211,252,.20),
  transparent 26%),

  radial-gradient(circle at bottom right,
  rgba(96,165,250,.18),
  transparent 28%),

  linear-gradient(
    135deg,
    #eef4ff 0%,
    #dbeafe 35%,
    #c7d2fe 100%
  );

  min-height:100vh;
  color:#1e293b;
}

/* floating shapes */
.shape,
.blur-circle{
  opacity:.12 !important;
  filter:blur(2px);
}

/* =========================================================
NAVBAR
========================================================= */

header,
.navbar,
.glass-nav{

  

}

/* nav menu */
.nav-links a,
nav a{
  color:#334155 !important;
  font-weight:600;
}

.nav-links a:hover,
nav a:hover{
  color:#2563eb !important;
}

/* =========================================================
LOGO
========================================================= */

.logo img{
  height:74px !important;
  width:auto !important;
  object-fit:contain;

  filter:
  drop-shadow(0 6px 18px rgba(59,130,246,.18));
}

/* =========================================================
MOBILE MENU BUTTON
========================================================= */

.mobile-menu-btn{

  background:
  linear-gradient(
    135deg,
    #60a5fa,
    #2563eb
  ) !important;

  color:#fff !important;

  box-shadow:
  0 10px 25px rgba(37,99,235,.25);

}

/* =========================================================
HERO SECTION
========================================================= */

.dashboard-hero,
.hero,
.hero-section{

  background:
  linear-gradient(
    135deg,
    rgba(255,255,255,.72),
    rgba(255,255,255,.45)
  ) !important;

  backdrop-filter:blur(22px);

  border:1px solid rgba(255,255,255,.65);

  box-shadow:
  0 10px 40px rgba(15,23,42,.08);

}

.dashboard-hero h1,
.hero h1{
  color:#0f172a !important;
  font-weight:800;
}

.dashboard-hero p,
.hero p{
  color:#475569 !important;
}

/* =========================================================
CARDS
========================================================= */

.ai-card,
.pricing-card,
.contact-map,
.analytics-box,
.glass,
.chat-sidebar,
.chat-main{

  background:
  linear-gradient(
    135deg,
    rgba(255,255,255,.70),
    rgba(255,255,255,.42)
  ) !important;

  backdrop-filter:blur(22px);

  border:1px solid rgba(255,255,255,.6);

  box-shadow:
  0 10px 40px rgba(15,23,42,.08);

  color:#0f172a !important;
}

/* text */
.ai-card h3,
.ai-number,
.analytics-title h2,
.contact-map h2,
.plan-title{
  color:#0f172a !important;
}

.ai-sub,
.analytics-title p,
.plan-desc,
.plan-note{
  color:#64748b !important;
}

/* =========================================================
BUTTONS
========================================================= */

.filter-btn,
.chart-btn.active,
.btn-pricing,
.credit-badge-danger,
.expired-badge,
.warning-active{

  background:
  linear-gradient(
    135deg,
    #60a5fa,
    #2563eb
  ) !important;

  border:none !important;

  color:#fff !important;

  box-shadow:
  0 10px 25px rgba(37,99,235,.22);

}

/* normal button */
.chart-btn{

  background:
  rgba(255,255,255,.45) !important;

  color:#334155 !important;

  border:
  1px solid rgba(255,255,255,.6) !important;

}

/* hover */
.chart-btn:hover,
.filter-btn:hover,
.btn-pricing:hover{

  transform:translateY(-2px);

  box-shadow:
  0 14px 30px rgba(37,99,235,.22);

}

/* =========================================================
TABLE
========================================================= */

.leads-table th{

  background:
  rgba(255,255,255,.55) !important;

  color:#1e293b !important;
}

.leads-table td{

  border-bottom:
  1px solid rgba(148,163,184,.18) !important;

  color:#334155 !important;
}

.leads-table tr:hover{

  background:
  rgba(255,255,255,.38) !important;
}

/* =========================================================
BADGE
========================================================= */

.badge{

  background:
  linear-gradient(
    135deg,
    #4ade80,
    #16a34a
  ) !important;

  color:#fff !important;
}

/* =========================================================
PAGINATION
========================================================= */

.page-btn{

  background:
  rgba(255,255,255,.5) !important;

  color:#334155 !important;

  border:
  1px solid rgba(255,255,255,.7);

}

.page-btn.active{

  background:
  linear-gradient(
    135deg,
    #60a5fa,
    #2563eb
  ) !important;

  color:#fff !important;
}

/* =========================================================
CHAT UI
========================================================= */

.chat-sidebar,
.chat-main{

  background:
  linear-gradient(
    180deg,
    rgba(255,255,255,.75),
    rgba(255,255,255,.48)
  ) !important;
}

.chat-sidebar-header,
.chat-search,
.chat-header,
.chat-footer{

  background:
  rgba(255,255,255,.45) !important;

  border-color:
  rgba(255,255,255,.5) !important;
}

.chat-name,
.chat-user h3{
  color:#0f172a !important;
}

.chat-last,
.chat-user p,
.chat-phone{
  color:#64748b !important;
}

.chat-search input,
.chat-footer textarea{

  background:
  rgba(255,255,255,.65) !important;

  color:#0f172a !important;

}

.chat-bubble.user{

  background:
  rgba(255,255,255,.7) !important;

  color:#0f172a !important;
}

.chat-bubble.ai{

  background:
  linear-gradient(
    135deg,
    #60a5fa,
    #2563eb
  ) !important;

  color:#fff !important;
}

.chat-bubble.admin{

  background:
  linear-gradient(
    135deg,
    #38bdf8,
    #0284c7
  ) !important;

  color:#fff !important;
}

/* =========================================================
MOBILE OPTIMIZATION
========================================================= */

@media(max-width:768px){

  body{
    background:
    linear-gradient(
      180deg,
      #eff6ff 0%,
      #dbeafe 100%
    ) !important;
  }

  .container{
    padding:12px !important;
    max-width:100% !important;
  }

  .content-wrapper{
    padding:0 !important;
  }

  .dashboard-hero,
  .ai-card,
  .pricing-card,
  .contact-map,
  .analytics-box{

    border-radius:28px !important;

    padding:24px !important;

  }

  .dashboard-hero h1{
    font-size:42px !important;
    line-height:1.15;
  }

  .dashboard-hero p{
    font-size:18px !important;
    line-height:1.7;
  }

  .logo img{
    height:62px !important;
  }

  .chat-layout{
    background:#eff6ff !important;
  }

}

/* =========================================================
SCROLLBAR
========================================================= */

::-webkit-scrollbar{
  width:10px;
}

::-webkit-scrollbar-thumb{

  background:
  linear-gradient(
    180deg,
    #93c5fd,
    #3b82f6
  );

  border-radius:20px;
}

/* =========================================================
TEXT COLOR FIX FOR LIGHT THEME
========================================================= */

/* global text */
body,
p,
span,
small,
label,
td,
th,
li,
a{
  color:#334155 !important;
}

/* heading */
h1,
h2,
h3,
h4,
h5,
h6{
  color:#0f172a !important;
}

/* dashboard text */
.hero h1,
.dashboard-hero h1,
.analytics-title h2,
.plan-title,
.ai-card h3,
.contact-map h2{
  color:#0f172a !important;
}

/* sub text */
.hero p,
.dashboard-hero p,
.plan-desc,
.plan-note,
.ai-sub,
.analytics-title p{
  color:#64748b !important;
}

/* statistic number */
.ai-number,
.total-number,
.credit-number{
  color:#0f172a !important;
}

/* card text */
.ai-card,
.analytics-box,
.pricing-card,
.contact-map{
  color:#334155 !important;
}

/* table */
.leads-table td{
  color:#334155 !important;
}

.leads-table th{
  color:#0f172a !important;
}

/* navbar */
.nav-links a,
nav a{
  color:#334155 !important;
}

/* chat */
.chat-name,
.chat-user h3,
.chat-text{
  color:#0f172a !important;
}

.chat-last,
.chat-phone,
.chat-user p,
.chat-time-msg{
  color:#64748b !important;
}

/* input */
input,
textarea,
select{
  color:#0f172a !important;
}

/* placeholder */
input::placeholder,
textarea::placeholder{
  color:#94a3b8 !important;
}

/* pagination */
.page-btn{
  color:#334155 !important;
}

.page-btn.active{
  color:#fff !important;
}

/* button */
.chart-btn{
  color:#334155 !important;
}

.chart-btn.active,
.filter-btn,
.btn-pricing,
.credit-badge-danger,
.expired-badge{
  color:#fff !important;
}

/* analytics average text */
.avg-info,
.avg-label{
  color:#2563eb !important;
  font-weight:700;
}

/* chart labels */
canvas{
  color:#334155 !important;
}

/* =========================================================
FINAL LIGHT THEME TEXT FIX
========================================================= */

/* =========================
CHART TEXT
========================= */

canvas{
  color:#334155 !important;
}

.chartjs-render-monitor{
  color:#334155 !important;
}

/* chart label */
.chart-container text,
.chartjs-tooltip,
.chartjs-size-monitor{
  color:#334155 !important;
}

/* chart legends */
.chart-legend,
.chartjs-legend,
.chart-label{
  color:#334155 !important;
}

/* chart tooltip */
#chartjs-tooltip,
.chartjs-tooltip{

  background:#0f172a !important;
  color:#fff !important;

  border-radius:14px !important;

  box-shadow:
  0 10px 30px rgba(15,23,42,.25);

}

/* chart avg label */
.avg-info,
.avg-label{
  color:#2563eb !important;
  font-weight:700 !important;
}

/* =========================
SUMMERNOTE / TEXTAREA
========================= */

.note-editor,
.note-toolbar,
.note-editing-area,
.note-statusbar{

  background:
  rgba(255,255,255,.78) !important;

  border-color:
  rgba(148,163,184,.18) !important;

}

.note-editable{

  background:
  rgba(255,255,255,.92) !important;

  color:#0f172a !important;

  min-height:260px;

}

.note-editable p,
.note-editable span,
.note-editable div,
.note-editable li,
.note-editable strong{
  color:#0f172a !important;
}

textarea,
input{

  background:
  rgba(255,255,255,.85) !important;

  color:#0f172a !important;

  border:
  1px solid rgba(148,163,184,.18) !important;

}

textarea::placeholder,
input::placeholder{
  color:#94a3b8 !important;
}

/* =========================
SETTING AI PAGE
========================= */

.ai-title{
  color:#0f172a !important;
}

.ai-desc{
  color:#475569 !important;
}

.ai-badge{

  background:
  rgba(59,130,246,.08) !important;

  color:#2563eb !important;

  border:
  1px solid rgba(59,130,246,.12);

}

.empty-state{
  color:#0f172a !important;
}

.empty-state p{
  color:#64748b !important;
}

/* =========================
PRODUK PAGE
========================= */

.pricing-card{

  background:
  linear-gradient(
    135deg,
    rgba(255,255,255,.72),
    rgba(255,255,255,.52)
  ) !important;

  backdrop-filter:blur(24px);

  border:
  1px solid rgba(255,255,255,.7) !important;

  box-shadow:
  0 14px 40px rgba(15,23,42,.08);

}

/* popular card */
.pricing-card.popular{

  border:
  2px solid rgba(59,130,246,.22) !important;

}

/* title */
.plan-title{
  color:#0f172a !important;
}

/* desc */
.plan-desc{
  color:#64748b !important;
}

/* price */
.plan-price h2{
  color:#0f172a !important;
}

.plan-price span{
  color:#64748b !important;
}

/* info */
.plan-info{
  color:#2563eb !important;
}

/* note */
.plan-note{
  color:#64748b !important;
}

/* feature area */
.feature-list{

  border-top:
  1px solid rgba(148,163,184,.15) !important;

}

/* feature item */
.feature-item{
  color:#334155 !important;
}

/* feature icon */
.feature-icon{

  background:
  rgba(59,130,246,.10) !important;

  color:#2563eb !important;

  box-shadow:
  0 6px 14px rgba(59,130,246,.10);

}

/* discount badge */
.discount-badge{

  background:
  rgba(59,130,246,.08) !important;

  color:#2563eb !important;

}

/* popular badge */
.popular-badge{

  background:
  linear-gradient(
    135deg,
    #60a5fa,
    #2563eb
  ) !important;

  color:#fff !important;

}

/* pricing button */
.btn-pricing{

  background:
  linear-gradient(
    135deg,
    #60a5fa,
    #2563eb
  ) !important;

  color:#fff !important;

  box-shadow:
  0 10px 24px rgba(37,99,235,.18);

}

/* =========================
TABLE FIX
========================= */

.leads-table{
  color:#334155 !important;
}

.leads-table td{
  color:#334155 !important;
}

.leads-table th{
  color:#0f172a !important;
}

/* =========================
DARK WHITE TEXT FIX
========================= */

.text-white{
  color:#0f172a !important;
}

.text-light{
  color:#64748b !important;
}

/* =========================
CHAT FIX
========================= */

.chat-sidebar,
.chat-main{

  background:
  linear-gradient(
    180deg,
    rgba(255,255,255,.76),
    rgba(255,255,255,.58)
  ) !important;

}

.chat-name{
  color:#0f172a !important;
}

.chat-last,
.chat-time{
  color:#64748b !important;
}

/* AI bubble */
.chat-bubble.ai{

  background:
  linear-gradient(
    135deg,
    #60a5fa,
    #2563eb
  ) !important;

  color:#fff !important;

}

/* user bubble */
.chat-bubble.user{

  background:
  rgba(255,255,255,.9) !important;

  color:#0f172a !important;

}

/* =========================
MOBILE
========================= */

@media(max-width:768px){

  .pricing-card,
  .ai-card,
  .dashboard-hero,
  .analytics-box{

    background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.82),
      rgba(255,255,255,.64)
    ) !important;

  }

}

/* =========================================================
LIGHT CHAT THEME
========================================================= */

/* chat main background */

.chat-main,
.chat-messages,
.chat-body{

  background:
  linear-gradient(
    180deg,
    #f8fbff 0%,
    #eef4ff 100%
  ) !important;

  position:relative;
}

/* hilangkan background hitam pattern */

.chat-main::before,
.chat-messages::before,
.chat-body::before{
  display:none !important;
}

/* bubble umum */

.chat-bubble{
  border:none !important;
  box-shadow:
  0 6px 20px rgba(15,23,42,.06);
}

/* =========================================================
USER BUBBLE
========================================================= */

.chat-bubble.user{

  background:
  linear-gradient(
    135deg,
    rgba(255,255,255,.96),
    rgba(248,250,252,.96)
  ) !important;

  color:#0f172a !important;

  border:
  1px solid rgba(148,163,184,.12) !important;

}

/* user text */

.chat-bubble.user *{
  color:#0f172a !important;
}

/* =========================================================
AI BUBBLE
========================================================= */

.chat-bubble.ai{

  background:
  linear-gradient(
    135deg,
    #60a5fa,
    #3b82f6
  ) !important;

  color:#fff !important;

  box-shadow:
  0 10px 24px rgba(59,130,246,.18);

}

/* ai text */

.chat-bubble.ai *{
  color:#fff !important;
}

/* =========================================================
ADMIN BUBBLE
========================================================= */

.chat-bubble.admin{

  background:
  linear-gradient(
    135deg,
    #38bdf8,
    #0284c7
  ) !important;

  color:#fff !important;

}

/* =========================================================
CHAT HEADER
========================================================= */

.chat-header{

  background:
  rgba(255,255,255,.78) !important;

  border-bottom:
  1px solid rgba(148,163,184,.12) !important;

  backdrop-filter:blur(18px);

}

/* user name */

.chat-user h3{
  color:#0f172a !important;
}

/* phone */

.chat-phone,
.chat-user p{
  color:#64748b !important;
}

/* =========================================================
CHAT INPUT
========================================================= */

.chat-footer{

  background:
  rgba(255,255,255,.82) !important;

  border-top:
  1px solid rgba(148,163,184,.12) !important;

}

.chat-footer textarea,
.chat-footer input{

  background:
  rgba(255,255,255,.95) !important;

  color:#0f172a !important;

  border:
  1px solid rgba(148,163,184,.14) !important;

}

/* =========================================================
TIME
========================================================= */

.chat-time,
.chat-time-msg{
  opacity:.7;
}

/* user time */

.chat-bubble.user .chat-time,
.chat-bubble.user .chat-time-msg{
  color:#64748b !important;
}

/* ai time */

.chat-bubble.ai .chat-time,
.chat-bubble.ai .chat-time-msg{
  color:rgba(255,255,255,.78) !important;
}

/* =========================================================
SCROLLBAR
========================================================= */

.chat-messages::-webkit-scrollbar{
  width:8px;
}

.chat-messages::-webkit-scrollbar-thumb{

  background:
  linear-gradient(
    180deg,
    #93c5fd,
    #3b82f6
  );

  border-radius:20px;
}

/* =========================================================
RED GLOW CARD FIX
========================================================= */

/* CARD CREDITS */

.ai-card.credit-danger,
.credit-danger{

  background:
  linear-gradient(
    135deg,
    rgba(127,29,29,.88),
    rgba(153,27,27,.82)
  ) !important;

  border:
  1px solid rgba(248,113,113,.65) !important;

  box-shadow:
  0 0 24px rgba(239,68,68,.35),
  0 0 60px rgba(239,68,68,.18);

}

/* text putih */

.credit-danger h3,
.credit-danger .ai-number,
.credit-danger p{
  color:#fff !important;
}

/* =========================================================
EXPIRED CARD
========================================================= */

.ai-card.expired-card,
.expired-card{

  background:
  linear-gradient(
    135deg,
    rgba(127,29,29,.90),
    rgba(88,28,135,.82)
  ) !important;

  border:
  1px solid rgba(248,113,113,.55) !important;

  box-shadow:
  0 0 24px rgba(239,68,68,.30),
  0 0 60px rgba(239,68,68,.14);

}

/* text putih */

.expired-card h3,
.expired-card .ai-number,
.expired-card p{
  color:#fff !important;
}

/* =========================================================
TOPUP BUTTON
========================================================= */

.credit-badge-danger{

  background:
  linear-gradient(
    135deg,
    #ff4d4d,
    #ff1e1e
  ) !important;

  color:#fff !important;

  box-shadow:
  0 8px 22px rgba(255,0,0,.28);

}

/* =========================================================
EXPIRED BUTTON
========================================================= */

.expired-badge,
.warning-active{

  background:
  linear-gradient(
    135deg,
    #ff4d4d,
    #dc2626
  ) !important;

  color:#fff !important;

  box-shadow:
  0 8px 22px rgba(239,68,68,.30);

}

/* =========================================================
HOVER EFFECT
========================================================= */

.credit-danger:hover,
.expired-card:hover{

  transform:translateY(-4px);

  box-shadow:
  0 0 30px rgba(239,68,68,.45),
  0 0 80px rgba(239,68,68,.20);

}

/* =========================================================
ACTIVE STATUS COLORS
========================================================= */

/* NORMAL ACTIVE */

.status-active,
.badge-active,
.active-normal{

  background:
  linear-gradient(
    135deg,
    #60a5fa,
    #2563eb
  ) !important;

  color:#fff !important;

  box-shadow:
  0 8px 22px rgba(37,99,235,.22);

}

/* WARNING < 10 HARI */

.status-warning,
.badge-warning,
.active-warning{

  background:
  linear-gradient(
    135deg,
    #facc15,
    #f59e0b
  ) !important;

  color:#fff !important;

  box-shadow:
  0 8px 22px rgba(245,158,11,.28);

}

/* EXPIRED */

.status-expired,
.badge-expired,
.active-expired{

  background:
  linear-gradient(
    135deg,
    #ff4d4d,
    #dc2626
  ) !important;

  color:#fff !important;

  box-shadow:
  0 8px 22px rgba(239,68,68,.28);

}

/* =========================================================
STATUS MASA AKTIF
========================================================= */

.status-active{

  display:inline-block;

  margin-top:16px;

  padding:12px 20px;

  border-radius:999px;

  font-size:13px;

  font-weight:700;

  color:#fff;

  background:
  linear-gradient(
    135deg,
    #60a5fa,
    #2563eb
  );

  box-shadow:
  0 8px 22px rgba(37,99,235,.22);

}

.status-warning{

  display:inline-block;

  margin-top:16px;

  padding:12px 20px;

  border-radius:999px;

  font-size:13px;

  font-weight:700;

  color:#fff;

  background:
  linear-gradient(
    135deg,
    #facc15,
    #f59e0b
  );

  box-shadow:
  0 8px 22px rgba(245,158,11,.28);

}

.status-expired{

  display:inline-block;

  margin-top:16px;

  padding:12px 20px;

  border-radius:999px;

  font-size:13px;

  font-weight:700;

  color:#fff;

  background:
  linear-gradient(
    135deg,
    #ff4d4d,
    #dc2626
  );

  box-shadow:
  0 8px 22px rgba(239,68,68,.28);

}

.expired-card .ai-sub{
  color:rgba(255,255,255,.82) !important;
}

.expired-card h3,
.expired-card .ai-number{
  color:#fff !important;
}

.expired-card .ai-sub{
  color:#fff !important;
}

/* =========================================
MOBILE MENU BUTTON
========================================= */

.mobile-menu-btn{

  width:58px;

  height:58px;

  border-radius:18px;

  display:none;

  align-items:center;

  justify-content:center;

  cursor:pointer;

  font-size:34px;

  font-weight:700;

  color:#ffffff !important;

  background:
  linear-gradient(
    135deg,
    #3b82f6,
    #2563eb
  ) !important;

  box-shadow:
  0 10px 30px rgba(37,99,235,.28);

  transition:.25s ease;

  z-index:9999;

}

/* hover */

.mobile-menu-btn:hover{

  transform:translateY(-2px);

  box-shadow:
  0 14px 35px rgba(37,99,235,.38);

}

/* MOBILE */

@media(max-width:768px){

  .mobile-menu-btn{

    display:flex !important;

  }

  .nav-links{

    display:none !important;

  }

}

/* =========================================
LOGO RESPONSIVE
========================================= */

.logo{

  display:flex;

  align-items:center;

  gap:12px;

}

/* wrapper */

.logo-wrap{

  display:flex;

  align-items:center;

}

/* logo image */

.logo-img{

  width:220px;

  max-width:100%;

  height:auto;

  object-fit:contain;

  display:block;

}

/* =========================================
MOBILE
========================================= */

@media(max-width:768px){

  .logo-img{

    width:180px;

  }

}

@media(max-width:768px){

  nav.glass{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:18px 20px;

  }

}


/* =========================================
MOBILE MENU THEME FIX
========================================= */

/* overlay */

.mobile-menu-overlay{

  position:fixed;

  inset:0;

  background:
  rgba(15,23,42,.22);

  backdrop-filter:blur(8px);

  z-index:99999;

  display:none;

}

/* sidebar */

.mobile-menu{

  width:82%;

  max-width:320px;

  height:100vh;

  background:
  linear-gradient(
    180deg,
    rgba(255,255,255,.96),
    rgba(239,246,255,.94)
  );

  backdrop-filter:blur(30px);

  border-right:
  1px solid rgba(148,163,184,.14);

  box-shadow:
  0 20px 60px rgba(15,23,42,.18);

  padding:28px 24px;

  animation:slideMenu .25s ease;

}

/* animation */

@keyframes slideMenu{

  from{
    transform:translateX(-100%);
    opacity:.5;
  }

  to{
    transform:translateX(0);
    opacity:1;
  }

}

/* header */

.mobile-menu-header{

  display:flex;

  align-items:center;

  justify-content:space-between;

  margin-bottom:28px;

}

/* title */

.mobile-menu-header span:first-child{

  font-size:22px;

  font-weight:700;

  color:#0f172a;

}

/* close */

.close-btn{

  width:42px;

  height:42px;

  border-radius:14px;

  display:flex;

  align-items:center;

  justify-content:center;

  cursor:pointer;

  font-size:24px;

  color:#334155;

  background:
  rgba(59,130,246,.10);

}

/* links */

.mobile-menu a{

  display:flex;

  align-items:center;

  padding:18px 16px;

  margin-bottom:10px;

  border-radius:16px;

  text-decoration:none;

  color:#1e293b !important;

  font-size:16px;

  font-weight:600;

  transition:.25s ease;

  border:
  1px solid rgba(148,163,184,.08);

  background:
  rgba(255,255,255,.55);

}

/* hover */

.mobile-menu a:hover{

  transform:translateX(5px);

  background:
  linear-gradient(
    135deg,
    rgba(59,130,246,.12),
    rgba(37,99,235,.10)
  );

  color:#2563eb !important;

  border-color:
  rgba(59,130,246,.18);

}

/* =========================================
HAMBURGER BUTTON
========================================= */

.mobile-menu-btn{

  width:60px;

  height:60px;

  border-radius:20px;

  display:none;

  align-items:center;

  justify-content:center;

  cursor:pointer;

  background:
  linear-gradient(
    135deg,
    #60a5fa,
    #2563eb
  ) !important;

  box-shadow:
  0 12px 30px rgba(37,99,235,.25);

  transition:.25s ease;

}

/* icon */

.mobile-menu-btn span{

  color:#fff;

  font-size:34px;

  line-height:1;

  font-weight:700;

}

/* hover */

.mobile-menu-btn:hover{

  transform:translateY(-2px);

  box-shadow:
  0 16px 35px rgba(37,99,235,.35);

}

/* mobile only */

@media(max-width:768px){

  .mobile-menu-btn{

    display:flex !important;

  }

}