/**
 * theme-dark.css — override dark mode (Midnight)
 * HARUS dimuat SETELAH app.css & inline <style> halaman
 */

/* Paksa ulang token tema — timpa :root dari app.css */
html[data-ui-theme="midnight"] {
  --primary: #60a5fa !important;
  --primary-dark: #3b82f6 !important;
  --primary-light: #93c5fd !important;
  --accent: #38bdf8 !important;
  --success: #4ade80 !important;
  --warning: #fbbf24 !important;
  --danger: #f87171 !important;
  --orange: #fb923c !important;

  --bg: #0f172a !important;
  --bg-card: #1e293b !important;
  --bg-sidebar: #1e293b !important;
  --border: #334155 !important;
  --text: #f8fafc !important;
  --text-secondary: #cbd5e1 !important;
  --text-muted: #94a3b8 !important;

  --surface-hover: #334155 !important;
  --surface-active: #1e3a5f !important;
  --surface-muted: #0f172a !important;
  --input-bg: #334155 !important;
  --input-bg-focus: #1e293b !important;
  --topbar-bg: #1e293b !important;
  --focus-ring: rgba(96, 165, 250, 0.2) !important;

  --chart-grid: #334155 !important;
  --chart-label: #cbd5e1 !important;
  --chart-label-muted: #64748b !important;

  /* Legacy vars — banyak halaman admin pakai ini */
  --d-bg: var(--bg) !important;
  --d-card: var(--bg-card) !important;
  --d-border: var(--border) !important;
  --d-text: var(--text) !important;
  --d-muted: var(--text-secondary) !important;
  --d-blue1: var(--primary) !important;
  --d-blue2: var(--primary-dark) !important;
  --d-green: var(--success) !important;
  --d-red: var(--danger) !important;
  --d-orange: var(--warning) !important;
}

/* ── Layout & latar ─────────────────────────────────────────── */
html[data-ui-theme="midnight"],
html[data-ui-theme="midnight"] body {
  background: var(--bg) !important;
  color: var(--text) !important;
}

html[data-ui-theme="midnight"] .main-content,
html[data-ui-theme="midnight"] .page-content,
html[data-ui-theme="midnight"] .pay-page {
  background: var(--bg) !important;
  color: var(--text) !important;
}

/* ── Sidebar & topbar ───────────────────────────────────────── */
html[data-ui-theme="midnight"] .sidebar {
  background: var(--bg-sidebar) !important;
  border-color: var(--border) !important;
}

html[data-ui-theme="midnight"] .sidebar-header,
html[data-ui-theme="midnight"] .sidebar-footer {
  background: var(--bg-sidebar) !important;
  border-color: var(--border) !important;
}

html[data-ui-theme="midnight"] .sidebar-profile {
  background: transparent !important;
}

html[data-ui-theme="midnight"] .profile-name {
  color: var(--text) !important;
}

html[data-ui-theme="midnight"] .profile-role {
  color: var(--text-muted) !important;
}

html[data-ui-theme="midnight"] .profile-logout-btn {
  color: var(--text-muted) !important;
}

html[data-ui-theme="midnight"] .profile-logout-btn:hover {
  background: rgba(239, 68, 68, 0.12) !important;
  color: var(--danger) !important;
}

html[data-ui-theme="midnight"] .profile-avatar-wrap::after {
  border-color: var(--bg-sidebar) !important;
}

html[data-ui-theme="midnight"] .logo-text {
  color: var(--text) !important;
}

html[data-ui-theme="midnight"] .nav-section-title {
  color: var(--text-muted) !important;
}

html[data-ui-theme="midnight"] .nav-item {
  color: var(--text-secondary) !important;
}

html[data-ui-theme="midnight"] .nav-item:hover {
  background: var(--surface-hover) !important;
  color: var(--text) !important;
}

html[data-ui-theme="midnight"] .nav-item.active {
  background: var(--surface-active) !important;
  color: var(--primary) !important;
}

html[data-ui-theme="midnight"] .bandwidth-widget {
  background: var(--surface-muted) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

html[data-ui-theme="midnight"] .topbar {
  background: var(--topbar-bg) !important;
  border-color: var(--border) !important;
}

html[data-ui-theme="midnight"] .topbar-greeting h2,
html[data-ui-theme="midnight"] .page-title,
html[data-ui-theme="midnight"] h1,
html[data-ui-theme="midnight"] h2 {
  color: var(--text) !important;
}

html[data-ui-theme="midnight"] .topbar-date,
html[data-ui-theme="midnight"] .subtitle,
html[data-ui-theme="midnight"] .page-desc {
  color: var(--text-secondary) !important;
}

/* ── Search & input (topbar + halaman) ──────────────────────── */
html[data-ui-theme="midnight"] .search-box {
  background: var(--input-bg) !important;
  border-color: var(--border) !important;
}

html[data-ui-theme="midnight"] .search-box:focus-within {
  background: var(--input-bg-focus) !important;
  border-color: var(--primary) !important;
}

html[data-ui-theme="midnight"] .search-box input {
  color: var(--text) !important;
}

html[data-ui-theme="midnight"] .search-wrap input,
html[data-ui-theme="midnight"] .filter-select,
html[data-ui-theme="midnight"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
html[data-ui-theme="midnight"] select,
html[data-ui-theme="midnight"] textarea {
  background: var(--input-bg) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

html[data-ui-theme="midnight"] input::placeholder,
html[data-ui-theme="midnight"] textarea::placeholder {
  color: var(--text-muted) !important;
}

/* ── Kartu & panel umum ───────────────────────────────────────── */
html[data-ui-theme="midnight"] .card,
html[data-ui-theme="midnight"] .stat-card,
html[data-ui-theme="midnight"] .w-card,
html[data-ui-theme="midnight"] .st-card,
html[data-ui-theme="midnight"] .panel,
html[data-ui-theme="midnight"] .content-card,
html[data-ui-theme="midnight"] .dash-card,
html[data-ui-theme="midnight"] .filter-bar,
html[data-ui-theme="midnight"] .toolbar {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

html[data-ui-theme="midnight"] .card-header,
html[data-ui-theme="midnight"] .st-card-hdr,
html[data-ui-theme="midnight"] .modal-header {
  background: var(--surface-muted) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

/* ── Customer / finance stat strip ───────────────────────────── */
html[data-ui-theme="midnight"] .fin-grid,
html[data-ui-theme="midnight"] .fin-grid-4 {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
}

html[data-ui-theme="midnight"] .fin-card {
  border-color: var(--border) !important;
  background: transparent !important;
}

html[data-ui-theme="midnight"] .fin-card:hover:not(.fc-active) {
  background: var(--surface-hover) !important;
}

html[data-ui-theme="midnight"] .fin-card:not(.fc-active) .xc-lbl {
  color: var(--text-secondary) !important;
}

html[data-ui-theme="midnight"] .fin-card:not(.fc-active) .xc-val {
  color: var(--text) !important;
}

html[data-ui-theme="midnight"] .fin-card:not(.fc-active) .xc-sub {
  color: var(--text-muted) !important;
}

/* fc-active tetap biru — kontras bagus di dark */

/* ── Tabel ───────────────────────────────────────────────────── */
html[data-ui-theme="midnight"] .cust-table thead th,
html[data-ui-theme="midnight"] .data-table th {
  background: var(--surface-muted) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border) !important;
}

html[data-ui-theme="midnight"] .cust-table tbody tr,
html[data-ui-theme="midnight"] .data-table tbody tr {
  border-color: var(--border) !important;
  background: var(--bg-card) !important;
}

html[data-ui-theme="midnight"] .cust-table tbody tr:hover,
html[data-ui-theme="midnight"] .data-table tbody tr:hover {
  background: var(--surface-hover) !important;
}

html[data-ui-theme="midnight"] .cust-table td,
html[data-ui-theme="midnight"] .data-table td {
  color: var(--text) !important;
  border-color: var(--border) !important;
}

html[data-ui-theme="midnight"] .cust-name-link {
  color: var(--text) !important;
}

html[data-ui-theme="midnight"] .cust-name-link:hover {
  color: var(--primary) !important;
}

html[data-ui-theme="midnight"] .cid-badge {
  background: var(--surface-active) !important;
  color: var(--primary-light) !important;
}

/* ── Tombol ──────────────────────────────────────────────────── */
html[data-ui-theme="midnight"] .btn-ghost,
html[data-ui-theme="midnight"] .btn-secondary,
html[data-ui-theme="midnight"] .btn-fin[style*="background:#fff"],
html[data-ui-theme="midnight"] .btn-fin[style*="background: #fff"] {
  background: var(--bg-card) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

html[data-ui-theme="midnight"] .btn-ghost:hover {
  background: var(--surface-hover) !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}

html[data-ui-theme="midnight"] .rb-wa,
html[data-ui-theme="midnight"] .rb-edit,
html[data-ui-theme="midnight"] .rb-del {
  background: var(--bg-card) !important;
}

html[data-ui-theme="midnight"] .rb-wa:hover {
  background: rgba(34, 197, 94, 0.12) !important;
}

html[data-ui-theme="midnight"] .rb-edit:hover {
  background: var(--surface-active) !important;
}

html[data-ui-theme="midnight"] .pg-btn {
  background: var(--bg-card) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border) !important;
}

html[data-ui-theme="midnight"] .pg-btn:hover {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}

html[data-ui-theme="midnight"] .topbar-btn:hover,
html[data-ui-theme="midnight"] .sidebar-toggle:hover {
  background: var(--surface-hover) !important;
}

html[data-ui-theme="midnight"] .notification-dot {
  border-color: var(--bg-card) !important;
}

/* ── Modal & dropdown ────────────────────────────────────────── */
html[data-ui-theme="midnight"] .modal,
html[data-ui-theme="midnight"] .modal-bx,
html[data-ui-theme="midnight"] .modal-content,
html[data-ui-theme="midnight"] .modal-box,
html[data-ui-theme="midnight"] .delete-box {
  background: var(--bg-card) !important;
  color: var(--text) !important;
}

html[data-ui-theme="midnight"] .modal-hdr,
html[data-ui-theme="midnight"] .modal-footer {
  border-color: var(--border) !important;
}

html[data-ui-theme="midnight"] .modal-handle {
  background: var(--border) !important;
}

html[data-ui-theme="midnight"] .modal-ttl {
  color: var(--text) !important;
}

html[data-ui-theme="midnight"] .modal-header h2,
html[data-ui-theme="midnight"] .user-modal .modal-header h2 {
  color: var(--text) !important;
}

html[data-ui-theme="midnight"] .modal-close {
  color: var(--text-muted) !important;
}

html[data-ui-theme="midnight"] .modal-close:hover {
  background: var(--surface-hover) !important;
}

html[data-ui-theme="midnight"] .modal-body .form-label {
  color: var(--text-secondary) !important;
}

html[data-ui-theme="midnight"] .modal-body .form-control {
  background: var(--input-bg) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

html[data-ui-theme="midnight"] .modal-body .form-control:focus {
  background: var(--input-bg-focus) !important;
  border-color: var(--primary) !important;
}

html[data-ui-theme="midnight"] .modal-body .form-control::placeholder {
  color: var(--text-muted) !important;
}

html[data-ui-theme="midnight"] .notif-panel,
html[data-ui-theme="midnight"] .global-search-dropdown,
html[data-ui-theme="midnight"] .bn-menu,
html[data-ui-theme="midnight"] .dropdown-menu {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.45) !important;
}

html[data-ui-theme="midnight"] .notif-panel-hdr {
  background: var(--surface-muted) !important;
  border-color: var(--border) !important;
}

html[data-ui-theme="midnight"] .notif-panel-title {
  color: var(--text) !important;
}

html[data-ui-theme="midnight"] .notif-panel-sub {
  color: var(--text-muted) !important;
}

html[data-ui-theme="midnight"] .notif-mark-all {
  color: var(--primary-light) !important;
}

html[data-ui-theme="midnight"] .notif-panel-tabs {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
}

html[data-ui-theme="midnight"] .notif-tab:not(.active) {
  color: var(--text-muted) !important;
}

html[data-ui-theme="midnight"] .notif-tab.active {
  color: var(--primary-light) !important;
  border-bottom-color: var(--primary) !important;
}

html[data-ui-theme="midnight"] .notif-panel-list {
  background: var(--bg-card) !important;
}

html[data-ui-theme="midnight"] .notif-item {
  background: var(--bg-card) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

html[data-ui-theme="midnight"] .notif-item.unread {
  background: var(--surface-muted) !important;
}

html[data-ui-theme="midnight"] .notif-item:hover,
html[data-ui-theme="midnight"] .gsd-item:hover {
  background: var(--surface-hover) !important;
}

html[data-ui-theme="midnight"] .notif-item,
html[data-ui-theme="midnight"] .gsd-item,
html[data-ui-theme="midnight"] .bn-menu-item {
  color: var(--text) !important;
  border-color: var(--border) !important;
}

html[data-ui-theme="midnight"] .notif-title {
  color: var(--text) !important;
}

html[data-ui-theme="midnight"] .notif-msg {
  color: var(--text-secondary) !important;
}

html[data-ui-theme="midnight"] .notif-time,
html[data-ui-theme="midnight"] .notif-empty-state {
  color: var(--text-muted) !important;
}

html[data-ui-theme="midnight"] .bottom-nav {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
}

/* ── Badge status (sedikit gelap) ─────────────────────────────── */
html[data-ui-theme="midnight"] .sb-inactive {
  background: var(--surface-hover) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border) !important;
}

html[data-ui-theme="midnight"] .sb-active {
  background: rgba(34, 197, 94, 0.15) !important;
  color: #4ade80 !important;
  border-color: rgba(34, 197, 94, 0.3) !important;
}

html[data-ui-theme="midnight"] .sb-overdue,
html[data-ui-theme="midnight"] .sb-suspended {
  background: rgba(248, 113, 113, 0.12) !important;
  color: #f87171 !important;
  border-color: rgba(248, 113, 113, 0.25) !important;
}

html[data-ui-theme="midnight"] .sb-due-soon {
  background: rgba(251, 191, 36, 0.12) !important;
  color: #fbbf24 !important;
  border-color: rgba(251, 191, 36, 0.25) !important;
}

/* ── Chart & range buttons ───────────────────────────────────── */
html[data-ui-theme="midnight"] .range-btn.active,
html[data-ui-theme="midnight"] .chart-range-btns button.active,
html[data-ui-theme="midnight"] .period-btns button.active {
  background: var(--bg-card) !important;
  color: var(--text) !important;
}

html[data-ui-theme="midnight"] .chart-range-btns,
html[data-ui-theme="midnight"] .period-btns,
html[data-ui-theme="midnight"] .range-btn {
  background: var(--surface-muted) !important;
  color: var(--text-muted) !important;
}

/* ── Settings page ─────────────────────────────────────────────── */
html[data-ui-theme="midnight"] .st-page .st-nav,
html[data-ui-theme="midnight"] .st-page .st-card,
html[data-ui-theme="midnight"] .st-page .theme-card {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
}

html[data-ui-theme="midnight"] .st-nav-item {
  color: var(--text-secondary) !important;
}

html[data-ui-theme="midnight"] .st-nav-item.active {
  background: var(--surface-active) !important;
  color: var(--primary) !important;
}

html[data-ui-theme="midnight"] .pf-label,
html[data-ui-theme="midnight"] .pf-input,
html[data-ui-theme="midnight"] .st-card-hdr div {
  color: var(--text) !important;
}

/* ── Live indicator ──────────────────────────────────────────── */
html[data-ui-theme="midnight"] .live-indicator {
  background: rgba(34, 197, 94, 0.12) !important;
  color: var(--success) !important;
}

/* ── Scrollbar ───────────────────────────────────────────────── */
html[data-ui-theme="midnight"] ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

html[data-ui-theme="midnight"] ::-webkit-scrollbar-track {
  background: var(--bg);
}

html[data-ui-theme="midnight"] ::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}

/* ── Portal pelanggan (Midnight) ─────────────────────────────── */
html.portal-page[data-ui-theme="midnight"] body.portal-page {
  background: var(--bg) !important;
  color: var(--text) !important;
}

html.portal-page[data-ui-theme="midnight"] .bottom-nav,
html.portal-page[data-ui-theme="midnight"] .card-item,
html.portal-page[data-ui-theme="midnight"] .menu-card,
html.portal-page[data-ui-theme="midnight"] .usage-chart-wrap,
html.portal-page[data-ui-theme="midnight"] .usage-chart-area,
html.portal-page[data-ui-theme="midnight"] .ucs-item,
html.portal-page[data-ui-theme="midnight"] .modal-sheet,
html.portal-page[data-ui-theme="midnight"] .sheet {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

html.portal-page[data-ui-theme="midnight"] .info-item {
  background: var(--surface-hover) !important;
  border-color: var(--border) !important;
}

html.portal-page[data-ui-theme="midnight"] .ii-label {
  color: var(--text-muted) !important;
}

html.portal-page[data-ui-theme="midnight"] .ii-value {
  color: var(--text) !important;
}

html.portal-page[data-ui-theme="midnight"] .wifi-tabs {
  background: var(--border) !important;
}

html.portal-page[data-ui-theme="midnight"] .wifi-band-box,
html.portal-page[data-ui-theme="midnight"] .wifi-client-card {
  background: var(--surface-hover) !important;
  border-color: var(--border) !important;
}

html.portal-page[data-ui-theme="midnight"] .form-input {
  background: var(--input-bg) !important;
  color: var(--text) !important;
}

html.portal-page[data-ui-theme="midnight"] .ct-tab.active {
  background: var(--bg-card) !important;
  color: var(--primary) !important;
}

html.portal-page[data-ui-theme="midnight"] .usage-chart-tabs {
  background: var(--border) !important;
}