:root{
  --bg0:#0b1220; --bg1:#0f172a; --card:#101b33;
  --border:rgba(255,255,255,.08);
  --bs-heading-color: #f8fafc;
  --text:#dbe4ff; --muted:rgba(219,228,255,.65);
  --accent:#6ee7ff; --accent2:#a78bfa;
  --good:#34d399; --warn:#fbbf24; --bad:#fb7185;
}

/* Layout */
.page-wrap{ min-height: 100vh; display:flex; flex-direction:column; }
main{ flex:1; }

body{
  background: radial-gradient(1200px 600px at 15% -10%, rgba(110,231,255,.16), transparent 55%),
              radial-gradient(900px 500px at 95% 10%, rgba(167,139,250,.18), transparent 55%),
              linear-gradient(180deg, var(--bg0), var(--bg1));
  color: var(--text);
  min-height: 100vh;
}

.navbar{
  background: rgba(15, 23, 42, .72) !important;
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(10px);
}

.brand-badge{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.35rem .6rem;
  border:1px solid var(--border);
  border-radius:999px;
  background: linear-gradient(135deg, rgba(110,231,255,.18), rgba(167,139,250,.16));
}

.glow{ box-shadow: 0 0 0 1px rgba(110,231,255,.12), 0 12px 40px rgba(110,231,255,.10); }

.card{
  background: rgba(16, 27, 51, .72);
  border: 1px solid var(--border);
  border-radius: 16px;
}

.text-muted{ color: var(--muted) !important; }

.chip{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.25rem .55rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.03);
  color: var(--muted);
  font-size: .85rem;
}

.hero{
  border-radius: 18px;
  border: 1px solid var(--border);
  background:
    radial-gradient(800px 300px at 10% 0%, rgba(110,231,255,.22), transparent 60%),
    radial-gradient(900px 400px at 95% 30%, rgba(167,139,250,.22), transparent 55%),
    linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}

.stat{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}

.stat .icon{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background: linear-gradient(135deg, rgba(110,231,255,.45), rgba(167,139,250,.40));
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 0 0 1px rgba(110,231,255,.20), 0 6px 18px rgba(110,231,255,.25);
}

.btn-accent{
  background: linear-gradient(135deg, rgba(110,231,255,.9), rgba(167,139,250,.9));
  border:none; color:#071022; font-weight:600;
}
.btn-accent:hover{ filter: brightness(1.05); }

canvas{ max-height: 320px; }

/* ====== NEW: ganti inline style di index.php ====== */
.btn-soft-border{ border-color: var(--border) !important; }

.text-good{ color: var(--good) !important; }
.text-accent{ color: var(--accent) !important; }
.text-warn{ color: var(--warn) !important; }
.text-bad{ color: var(--bad) !important; }

/* ====== NEW: footer pindah dari inline ====== */
.footer{
  border-top:1px solid var(--border);
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(10px);
}




/* ==============================================

.navbar .nav-link.active{
  color: var(--accent) !important;
  font-weight: 600;
}

.navbar .nav-link.active i{
  color: var(--accent) !important;
}




/* ==============================================

/* ===== DATATABLES UI TEXT – MOBILE SAFE (v1 + v2) ===== */

/* DataTables v2 container */
html body .dt-container,
html body .dt-container * {
  color: var(--text);
}

/* DataTables v1 wrapper */
html body .dataTables_wrapper,
html body .dataTables_wrapper * {
  color: var(--text);
}

/* Tapi jangan ganggu badge bootstrap (status) */
html body .dataTables_wrapper .badge,
html body .dataTables_wrapper .badge * ,
html body .dt-container .badge,
html body .dt-container .badge * {
  color: inherit !important;
}

/* Tetap jaga elemen info biar jelas */
html body .dt-container .dt-info,
html body .dataTables_wrapper .dataTables_info {
  color: var(--text) !important;
  opacity: 1 !important;
}

/* Search input + length select (desktop & mobile) */
html body .dt-container .dt-search input,
html body .dt-container .dt-length select,
html body .dataTables_wrapper .dataTables_filter input,
html body .dataTables_wrapper .dataTables_length select {
  background-color: rgba(255,255,255,.06) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}

/* Label “Cari” “Tampilkan” (desktop & mobile) */
html body .dt-container label,
html body .dataTables_wrapper label {
  color: var(--text) !important;
  opacity: 1 !important;
}

/* Placeholder */
html body .dt-container input::placeholder,
html body .dataTables_wrapper input::placeholder {
  color: var(--muted) !important;
}


/* ==============================================

/* Dark theme select */
.table-dark .form-select,
.form-select-dark {
  background-color: #0f172a;      /* dark navy */
  color: #e5e7eb;                 /* text terang */
  border: 1px solid #334155;
}

.table-dark .form-select:focus,
.form-select-dark:focus {
  background-color: #0f172a;
  color: #fff;
  border-color: #22d3ee;
  box-shadow: 0 0 0 .15rem rgba(34,211,238,.25);
}

/* arrow dropdown biar terang */
.table-dark .form-select {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M7.247 11.14 2.451 5.658c-.566-.636-.106-1.658.753-1.658h9.592c.86 0 1.32 1.022.753 1.658L8.753 11.14a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
}



/* ==============================================
/* =========================
   Dark Modal (Sales Revenue)
   ========================= */
.modal-content{
  background: var(--panel, #121826);
  color: var(--text, rgba(255,255,255,.9));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0,0,0,.6);
}

.modal-header,
.modal-footer{
  border-color: rgba(255,255,255,.08);
}

.modal-title{
  color: var(--text, rgba(255,255,255,.9));
}

.modal .btn-close{
  filter: invert(1) grayscale(1);
  opacity: .8;
}
.modal .btn-close:hover{
  opacity: 1;
}

.modal-backdrop.show{
  opacity: .65;
}

.modal .form-label{
  color: rgba(255,255,255,.85);
}

.modal .form-control{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);
}

.modal .form-control:focus{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 0 0 .25rem rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
}

.modal .form-text{
  color: rgba(255,255,255,.55) !important;
}

/* ==============================================

/* =========================
   Dark Select (Shop dropdown)
   ========================= */
.form-select-darkish{
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.92) !important;
  border-radius: 12px;
  padding-right: 2.25rem; /* ruang caret */
  /* caret putih */
  background-image: var(--bs-form-select-bg-img), linear-gradient(transparent, transparent) !important;
  filter: none;
}

.form-select-darkish:focus{
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.22) !important;
  box-shadow: 0 0 0 .25rem rgba(255,255,255,.06) !important;
  color: rgba(255,255,255,.92) !important;
}

/* penting: option jadi gelap saat dropdown dibuka */
.form-select-darkish option{
  background: #0f1420;
  color: rgba(255,255,255,.92);
}