.card {
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.05);
}

.form label { display: block; color: var(--muted); font-size: 12px; margin-bottom: 6px; }
.form input[type=text],
.form input[type=password],
.form input[type=file],
.form textarea,
.form select {
  width: 100%;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--text);
  padding: 10px 12px; border-radius: 8px; outline: none;
}
.form .w-100 { width: 100%; }
.form .mt-1 { margin-top: 8px; }

.btn {
  display: inline-block; padding: 10px 14px; border-radius: 8px; border: 1px solid transparent; cursor: pointer; color: var(--text);
  background: rgba(255,255,255,.1); transition: transform .08s ease, background .2s;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: linear-gradient(180deg, #60a5fa, #3b82f6); border-color: rgba(255,255,255,.2); }
.btn-secondary { background: linear-gradient(180deg, #a78bfa, #7c3aed); }
.btn-danger { background: linear-gradient(180deg, #fb7185, #ef4444); }

.alert { padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,.12); margin-bottom: 10px; }
.alert-success { background: rgba(16,185,129,.15); }
.alert-danger { background: rgba(239,68,68,.18); }
.alert-warning { background: rgba(245,158,11,.18); }

.badge { padding: 3px 8px; border-radius: 999px; font-size: 12px; border: 1px solid rgba(255,255,255,.12); }
.badge-sent { background: rgba(16,185,129,.15); }
.badge-failed { background: rgba(239,68,68,.18); }
.badge-queued { background: rgba(59,130,246,.18); }

.stat { text-align: center; }
.stat-title { font-size: 12px; color: var(--muted); }
.stat-value { font-size: 24px; font-weight: 700; }
.text-success { color: #10b981; }
.text-danger { color: #ef4444; }
.userbox { position: relative; }
.user-btn {
  background: none;
  border: 1px solid rgba(255,255,255,.2);
  color: var(--text);
  border-radius: 8px;
  padding: 6px 10px;
  display: flex; align-items: center; gap: 8px;
}
.user-menu {
  position: absolute; right: 0; top: 110%;
  background: rgba(31,41,55,.95);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  min-width: 180px;
  box-shadow: 0 10px 30px rgba(0,0,0,.3);
  display: none; z-index: 10;
}
.user-menu.open { display: block; }
.user-menu a {
  display: block; padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,.06);
}
.user-menu a:last-child { border-bottom: none; }
.user-menu a:hover { background: rgba(255,255,255,.08); }

.card .form input[type="date"] {
  appearance: none;
  -webkit-appearance: none;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  height: 40px;
  line-height: 1.2;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.card .form input[type="date"]:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(76, 110, 245, .15);
}
.card .form input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: .85;
  cursor: pointer;
  filter: var(--is-dark, 1) ? invert(1) : none;
}
.table thead th {
  font-size: 0.95rem;      /* lebih besar */
  color: #e9efff;          /* lebih terang untuk tema gelap */
  font-weight: 600;
}
.table thead th.sortable {
  cursor: pointer;
  position: relative;
}
.table thead th.sortable::after {
  content: '↕';
  font-size: .8em;
  opacity: .5;
  margin-left: 6px;
}
.table thead th.sortable[data-sort="asc"]::after { content: '▲'; opacity: .85; }
.table thead th.sortable[data-sort="desc"]::after { content: '▼'; opacity: .85; }
.table.compact tbody td {
  font-size: 0.9rem;      /* sedikit lebih kecil */
  padding: 6px 8px;       /* lebih rapat */
}

/* Dropdown (select) disesuaikan dengan tema gelap */
.form select {
  -webkit-appearance: none;
  appearance: none;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  height: 40px;
  line-height: 1.2;
}
.form select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(59,130,246,.15);
}
/* Warna item pada daftar opsi (Chrome/Edge/Firefox) */
.form select option {
  background: var(--surface);
  color: var(--text);
}
.form select option:disabled {
  color: var(--muted);
}
.form select optgroup {
  color: var(--muted);
}
/* Sembunyikan panah default IE */
.form select::-ms-expand { display: none; }

/* Tambahan: paksa override pada popup opsi yang kadang masih putih */
.form select,
.form select option,
.form select optgroup {
  background-color: var(--surface) !important;
  color: var(--text) !important;
}

/* Opsional: saat disabled, kontras tetap terbaca */
.form select:disabled,
.form select option:disabled {
  background-color: color-mix(in srgb, var(--surface) 90%, #000 10%) !important;
  color: var(--muted) !important;
}