:root {
    --night-bg: #070b14;
    --night-bg-soft: #0b1220;
    --night-surface: #111827;
    --night-surface-2: #172033;
    --night-surface-3: #1f2937;
    --night-border: #263449;
    --night-border-soft: rgba(148, 163, 184, 0.22);
    --night-text: #e5e7eb;
    --night-heading: #f8fafc;
    --night-muted: #cbd5e1;
    --night-faint: #a7b4c8;
    --night-accent: #60a5fa;
    --night-accent-2: #38bdf8;
    --night-success-bg: rgba(34, 197, 94, 0.14);
    --night-success-text: #86efac;
    --night-warning-bg: rgba(245, 158, 11, 0.16);
    --night-warning-text: #fcd34d;
    --night-danger-bg: rgba(239, 68, 68, 0.16);
    --night-danger-text: #fca5a5;
    --night-shadow: 0 18px 42px rgba(0, 0, 0, 0.34);
}

html.night-mode {
    background: var(--night-bg) !important;
    color-scheme: dark;
}

html.night-mode body {
    background: radial-gradient(circle at top left, rgba(37, 99, 235, 0.14), transparent 34%),
        linear-gradient(135deg, #070b14 0%, #0b1220 46%, #111827 100%) !important;
    color: var(--night-text) !important;
}

html.night-mode .content {
    min-height: 100vh;
    background: var(--night-bg) !important;
    color: var(--night-text) !important;
}

html.night-mode body > .content {
    background: radial-gradient(circle at top right, rgba(14, 165, 233, 0.12), transparent 32%),
        var(--night-bg) !important;
}

html.night-mode .sidebar {
    background: linear-gradient(180deg, #050816 0%, #0b1220 48%, #0f172a 100%) !important;
    border-right-color: rgba(148, 163, 184, 0.18) !important;
    box-shadow: 8px 0 36px rgba(0, 0, 0, 0.42) !important;
}

html.night-mode .sidebar-header {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.14), rgba(14, 165, 233, 0.08)) !important;
}

html.night-mode .sidebar-header h3 {
    background: linear-gradient(135deg, #93c5fd, #67e8f9) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
}

html.night-mode .sidebar-toggle,html.night-mode 
.menu a:hover,html.night-mode 
.logout-btn:hover {
    background: linear-gradient(135deg, #2563eb 0%, #0891b2 100%) !important;
}

@media (max-width: 768px) {
    html.night-mode .sidebar-toggle {
        background: transparent !important;
        color: #e5e7eb !important;
        box-shadow: none !important;
        border-color: rgba(255,255,255,0.35) !important;
        backdrop-filter: none !important;
    }

    html.night-mode .sidebar-toggle:hover {
        background: rgba(255,255,255,0.12) !important;
        box-shadow: none !important;
    }
}

html.night-mode :where(
    .dashboard-page,
    .billing-page,
    .rekening-page,
    .reports-container,
    .pppoe-page,
    .customers-container,
    .routers-container,
    .invoices-container,
    .pppoe-container,
    .users-container,
    .packages-container,
    .detail-container,
    .traffic-container,
    .genieacs-devices-container,
    .wa-page,
    .topology-page,
    .page,
    .min-h-screen,
    .bg-gray-100,
    .bg-gray-50,
    .bg-slate-50
) {
    background: transparent !important;
    color: var(--night-text) !important;
}

html.night-mode :where(
    .customers-panel,
    .activation-panel,
    .pppoe-card,
    .table-container,
    .table-wrapper,
    .table-panel,
    .table-card,
    .panel,
    .card,
    .stat-card,
    .detail-card,
    .section-card,
    .form-card,
    .form-container,
    .form-section,
    .filter-card,
    .filters-section,
    .export-card,
    .notif-header-card,
    .notif-card,
    .notif-throttle-card,
    .notif-footer-card,
    .notif-edit-header,
    .notif-edit-card,
    .notif-edit-preview,
    .notif-edit-preview__message,
    .notif-item,
    .notif-body,
    .billing-card,
    .billing-table-section,
    .billing-table-wrapper,
    .rekening-table-card,
    .dashboard-chart-card,
    .billing-modal__dialog,
    .billing-modal__info,
    .billing-detail-modal__dialog,
    .billing-detail-stat,
    .billing-detail-empty,
    .billing-summary__card,
    .billing-stat-card,
    .invoice-edit-card,
    .invoice-detail-card,
    .invoice-pay-card,
    .report-card,
    .radius-card,
    .metric-item,
    .table-card-header,
    .rekening-card,
    .info-card,
    .customer-detail-card,
    .genieacs-card,
    .genieacs-devices-panel,
    .activation-card,
    .devices-modal-content,
    .device-detail-item,
    .wlan-card,
    .lan-client-card,
    .wlan-client-item,
    .wlan-client-empty,
    .wa-card,
    .wa-summary-card,
    .wa-live-card,
    .wa-live-panel,
    .wa-log-panel,
    .wa-table-card,
    .map-card,
    .chart-wrapper,
    .chart-card,
    .sample-table-card,
    .traffic-panel,
    .modal-content,
    .billing-modal,
    .activation-modal__content,
    .activation-summary__item,
    .interface-check-group,
    .wifi-config-card,
    .topology-modal,
    .genieacs-modal-content,
    .devices-modal,
    .wa-modal,
    .login__form,
    .bg-white
) {
    background: linear-gradient(180deg, rgba(17, 24, 39, 0.98), rgba(15, 23, 42, 0.98)) !important;
    border-color: var(--night-border) !important;
    color: var(--night-text) !important;
    box-shadow: var(--night-shadow) !important;
}

html.night-mode :where(.stat-card, .panel, .card, .table-container, .customers-panel, .modal-content)::before,html.night-mode 
:where(.stat-card, .panel, .card, .table-container, .customers-panel, .modal-content)::after {
    opacity: 0.45;
}

html.night-mode :where(
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    .dashboard-title,
    .rekening-title,
    .customers-title,
    .routers-title,
    .invoices-title,
    .pppoe-title,
    .modal-title,
    .form-title,
    .login__title,
    .panel-header h3,
    .dashboard-chart-header h3,
    .customer-name,
    .stat-value,
    .metric-total strong,
    .metric-item strong,
    .quick-link-label
) {
    color: var(--night-heading) !important;
}

html.night-mode .ping-meta,
html.night-mode .ping-note,
html.night-mode .dashboard-chart-meta {
    color: var(--night-muted) !important;
}

html.night-mode .ping-value {
    color: var(--night-heading) !important;
}

html.night-mode .radius-stat strong,
html.night-mode .radius-mini-list strong {
    color: var(--night-heading) !important;
}

html.night-mode .radius-stat span,
html.night-mode .radius-mini-list {
    color: var(--night-muted) !important;
}

html.night-mode .radius-code {
    background: #020617 !important;
    color: #dbeafe !important;
    border: 1px solid var(--night-border) !important;
}

html.night-mode :where(
    p,
    small,
    label,
    .dashboard-subtitle,
    .rekening-subtitle,
    .metric-total span,
    .metric-item span,
    .chart-empty,
    .panel-hint,
    .customer-meta,
    .quick-link-desc,
    .genieacs-devices-subtitle,
    .device-muted,
    .activation-card__label,
    .activation-card__note,
    .activation-count,
    .activation-modal__subtitle,
    .activation-summary__label,
    .device-detail-label,
    .wlan-card-row span:first-child,
    .lan-client-row span:first-child,
    .stat-label,
    .form-label,
    .filter-label,
    .notif-header-card p,
    .notif-helper,
    .notif-template-helper,
    .notif-summary small,
    .text-gray-500,
    .text-gray-600,
    .text-gray-700,
    .text-slate-500,
    .text-slate-600
) {
    color: var(--night-muted) !important;
}

html.night-mode [style*="color:#333"],html.night-mode 
[style*="color: #333"],html.night-mode 
[style*="color:#2c3e50"],html.night-mode 
[style*="color: #2c3e50"],html.night-mode 
[style*="color:#1f2937"],html.night-mode 
[style*="color: #1f2937"],html.night-mode 
[style*="color:#555"],html.night-mode 
[style*="color: #555"] {
    color: var(--night-text) !important;
}

html.night-mode [style*="color:#666"],html.night-mode 
[style*="color: #666"],html.night-mode 
[style*="color:#6b7280"],html.night-mode 
[style*="color: #6b7280"],html.night-mode 
[style*="color:#6c757d"],html.night-mode 
[style*="color: #6c757d"],html.night-mode 
[style*="color:#64748b"],html.night-mode 
[style*="color: #64748b"],html.night-mode 
[style*="color:#475569"],html.night-mode 
[style*="color: #475569"],html.night-mode 
[style*="color:#95a5a6"],html.night-mode 
[style*="color: #95a5a6"] {
    color: var(--night-muted) !important;
}

html.night-mode table,html.night-mode 
.table,html.night-mode 
.pppoe-table,html.night-mode 
.theme-table,html.night-mode 
.billing-table,html.night-mode 
.detail-table,html.night-mode 
.wa-table {
    background: transparent !important;
    color: var(--night-text) !important;
    border-color: var(--night-border) !important;
}

html.night-mode :where(.table, .pppoe-table, .theme-table, .billing-table, .detail-table, .wa-table) thead th,html.night-mode 
:where(.table, .pppoe-table, .theme-table, .billing-table, .detail-table, .wa-table) th,html.night-mode 
.table-header,html.night-mode 
.billing-table-header,html.night-mode 
.wa-table-header {
    background: linear-gradient(135deg, #1d4ed8, #0e7490) !important;
    color: #f8fafc !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

html.night-mode :where(.table, .pppoe-table, .theme-table, .billing-table, .detail-table, .wa-table) tbody td,html.night-mode 
:where(.table, .pppoe-table, .theme-table, .billing-table, .detail-table, .wa-table) td {
    background: rgba(15, 23, 42, 0.72) !important;
    color: var(--night-text) !important;
    border-color: var(--night-border) !important;
}

html.night-mode :where(.table, .pppoe-table, .theme-table, .billing-table, .detail-table, .wa-table) tbody tr {
    background: rgba(15, 23, 42, 0.72) !important;
}

html.night-mode :where(.table, .pppoe-table, .theme-table, .billing-table, .detail-table, .wa-table) tbody tr:hover {
    background: rgba(96, 165, 250, 0.1) !important;
}

html.night-mode .detail-info-label,html.night-mode 
.detail-timestamps .label,html.night-mode 
.customer-detail-card__title,html.night-mode 
.customer-detail-card__label,html.night-mode 
.customer-detail-card__muted,html.night-mode 
.customer-tech-summary,html.night-mode 
.billing-summary__meta,html.night-mode 
.billing-header p,html.night-mode 
.billing-stat-note,html.night-mode 
.billing-card__label,html.night-mode 
.billing-card__body small,html.night-mode 
    .billing-table-header p,html.night-mode 
    .reports-subtitle,html.night-mode 
    .card-label,html.night-mode 
    .card-meta,html.night-mode 
    .chart-card-header p,html.night-mode 
    .section-subtitle,html.night-mode 
    .metric-label,html.night-mode 
    .metric-subtitle,html.night-mode 
    .table-card-header p,html.night-mode 
    .invoice-meta,html.night-mode 
    .empty-state,html.night-mode 
    .billing-empty,html.night-mode 
.billing-modal__label,html.night-mode 
.billing-modal__header p,html.night-mode 
.billing-history-empty {
    color: #d6e0ef !important;
}

html.night-mode .detail-info-value,html.night-mode 
.detail-timestamps .value,html.night-mode 
.customer-detail-card__value,html.night-mode 
.customer-tech-summary strong,html.night-mode 
.billing-header h1,html.night-mode 
.billing-stat-value,html.night-mode 
.billing-card__value,html.night-mode 
.billing-table-header h2,html.night-mode 
.billing-table__invoice,html.night-mode 
.billing-table__customer,html.night-mode 
.billing-modal__header h3,html.night-mode 
.billing-modal__value,html.night-mode 
.reports-title,html.night-mode 
.card-value,html.night-mode 
.chart-card-header h3,html.night-mode 
.metric-number,html.night-mode 
.table-card-header h3,html.night-mode 
.billing-summary__card h3,html.night-mode 
.billing-summary__history h4,html.night-mode 
.billing-history-item,html.night-mode 
.billing-history-item__info strong,html.night-mode 
.billing-history-item__info span,html.night-mode 
.billing-history-item__meta span {
    color: #f8fafc !important;
}

html.night-mode .customer-detail-row td,html.night-mode 
.customer-detail-card__item,html.night-mode 
.billing-summary__card,html.night-mode 
.billing-summary__history,html.night-mode 
.billing-history-item,html.night-mode 
.metric-item,html.night-mode 
.table-card-header,html.night-mode 
.billing-modal__info {
    background: rgba(15, 23, 42, 0.72) !important;
    border-color: var(--night-border) !important;
}

html.night-mode .ont-status-row {
    background: rgba(15, 23, 42, 0.72) !important;
    border-color: var(--night-border) !important;
    color: #d6e0ef !important;
}

html.night-mode .ont-gauge__inner {
    background: #111827 !important;
    border-color: rgba(148, 163, 184, 0.28) !important;
}

html.night-mode .ont-gauge__inner strong {
    color: #f8fafc !important;
}

html.night-mode .ont-gauge__label,
html.night-mode .ont-signal-summary {
    color: #d6e0ef !important;
}

html.night-mode .ont-status-row .status-pill,
html.night-mode .billing-summary__card > .status-pill {
    background: rgba(148, 163, 184, 0.14) !important;
    color: #cbd5e1 !important;
}

html.night-mode .status-pill--subscription-active {
    background: rgba(34, 197, 94, 0.2) !important;
    color: #86efac !important;
}

html.night-mode .status-pill--subscription-isolated {
    background: rgba(245, 158, 11, 0.22) !important;
    color: #fcd34d !important;
}

html.night-mode .status-pill--subscription-suspended {
    background: rgba(248, 113, 113, 0.2) !important;
    color: #fca5a5 !important;
}

html.night-mode .ont-signal-summary__quality.ont-signal--good {
    background: rgba(34, 197, 94, 0.18) !important;
    color: #86efac !important;
}

html.night-mode .ont-signal-summary__quality.ont-signal--warning {
    background: rgba(245, 158, 11, 0.2) !important;
    color: #fcd34d !important;
}

html.night-mode .ont-signal-summary__quality.ont-signal--bad {
    background: rgba(248, 113, 113, 0.18) !important;
    color: #fca5a5 !important;
}

html.night-mode .genieacs-manual-section {
    background: rgba(15, 23, 42, 0.74) !important;
    background-color: rgba(15, 23, 42, 0.74) !important;
    border-color: var(--night-border) !important;
    color: var(--night-text) !important;
}

html.night-mode details.genieacs-manual-section[style*="background:#f8fafc"],
html.night-mode details.genieacs-manual-section[style*="background: #f8fafc"] {
    background: rgba(15, 23, 42, 0.74) !important;
    background-color: rgba(15, 23, 42, 0.74) !important;
}

html.night-mode .genieacs-manual-summary,
html.night-mode .genieacs-manual-option,
html.night-mode .genieacs-manual-note {
    color: var(--night-muted) !important;
}

html.night-mode .genieacs-manual-confirm {
    background: rgba(127, 29, 29, 0.28) !important;
    background-color: rgba(127, 29, 29, 0.28) !important;
    border-color: rgba(248, 113, 113, 0.42) !important;
    color: #fecaca !important;
}

html.night-mode label.genieacs-manual-confirm[style*="background:#fef2f2"],
html.night-mode label.genieacs-manual-confirm[style*="background: #fef2f2"] {
    background: rgba(127, 29, 29, 0.28) !important;
    background-color: rgba(127, 29, 29, 0.28) !important;
}

html.night-mode .genieacs-manual-confirm span,
html.night-mode .genieacs-manual-warning {
    color: #fcd34d !important;
}

html.night-mode .genieacs-manual-card .form-control[readonly] {
    background-color: rgba(31, 41, 55, 0.92) !important;
    color: var(--night-muted) !important;
}

html.night-mode .reports-container {
    background: transparent !important;
}

html.night-mode .billing-detail-modal__backdrop {
    background: rgba(2, 6, 23, 0.82) !important;
}

html.night-mode .billing-detail-modal__header {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.98), rgba(15, 23, 42, 0.98)) !important;
    border-bottom-color: var(--night-border) !important;
}

html.night-mode .billing-detail-modal__title,
html.night-mode .billing-detail-stat strong {
    color: var(--night-heading) !important;
}

html.night-mode .billing-detail-modal__subtitle,
html.night-mode .billing-detail-stat span,
html.night-mode .billing-detail-empty {
    color: var(--night-muted) !important;
}

html.night-mode .billing-detail-modal__close {
    background: var(--night-surface-2) !important;
    border-color: var(--night-border) !important;
    color: var(--night-muted) !important;
}

html.night-mode .billing-detail-modal__close:hover {
    background: var(--night-surface-3) !important;
    color: var(--night-heading) !important;
}

html.night-mode .billing-detail-tab {
    background: var(--night-surface-2) !important;
    border-color: var(--night-border) !important;
    color: var(--night-heading) !important;
}

html.night-mode .billing-detail-tab.is-active {
    background: linear-gradient(135deg, #2563eb, #0891b2) !important;
    border-color: transparent !important;
    color: #ffffff !important;
}

html.night-mode .billing-detail-table tbody td {
    background: rgba(15, 23, 42, 0.86) !important;
}

html.night-mode .billing-detail-table tbody tr:hover td {
    background: rgba(96, 165, 250, 0.12) !important;
}

html.night-mode .metric-item.subtle {
    background: transparent !important;
}

html.night-mode .report-card::after {
    opacity: 0.18 !important;
}

html.night-mode .report-card.accent-green,html.night-mode 
.report-card.accent-blue,html.night-mode 
.report-card.accent-yellow,html.night-mode 
.report-card.accent-red {
    border-color: var(--night-border) !important;
}

html.night-mode .table-card .table tbody tr[style*="background"] td,html.night-mode 
.table-card .table tbody tr[style*="background"] {
    background: var(--night-surface-3) !important;
    color: var(--night-heading) !important;
}

html.night-mode .table-card .text-gray-800 {
    color: var(--night-heading) !important;
}

html.night-mode .invoice-detail-page,
html.night-mode .invoice-edit-page {
    background: transparent !important;
    color: var(--night-text) !important;
    box-shadow: none !important;
}

html.night-mode .invoice-detail-header h1,
html.night-mode .invoice-edit-header h1,
html.night-mode .invoice-detail-card h3,
html.night-mode .invoice-edit-card h3,
html.night-mode .invoice-pay-info__value {
    color: var(--night-heading) !important;
}

html.night-mode .invoice-detail-header p,
html.night-mode .invoice-edit-header p,
html.night-mode .invoice-detail-card .detail-table th,
html.night-mode .invoice-edit-card .detail-table th,
html.night-mode .invoice-detail-card .detail-placeholder,
html.night-mode .invoice-pay-info__label {
    color: var(--night-muted) !important;
}

html.night-mode .invoice-detail-card .detail-table td,
html.night-mode .invoice-edit-card .detail-table td {
    color: var(--night-text) !important;
}

html.night-mode .invoice-detail-card .detail-table th,
html.night-mode .invoice-detail-card .detail-table td,
html.night-mode .invoice-edit-card .detail-table th,
html.night-mode .invoice-edit-card .detail-table td {
    background: rgba(15, 23, 42, 0.72) !important;
    border-bottom-color: rgba(148, 163, 184, 0.18) !important;
}

html.night-mode .invoice-detail-link,
html.night-mode .billing-table__link {
    color: var(--night-heading) !important;
}

html.night-mode .invoice-detail-link:hover,
html.night-mode .billing-table__link:hover {
    color: #93c5fd !important;
}

html.night-mode :where(
    .table,
    .theme-table,
    .billing-table,
    .wa-table,
    .rekening-table,
    .disturbance-table,
    .pppoe-table,
    .server-log-table,
    .sample-table,
    .invoice-table,
    .clients-table,
    .detail-table
) thead th {
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.98), rgba(15, 23, 42, 0.98)) !important;
    border-bottom-color: var(--night-border) !important;
    color: #cbd5e1 !important;
}

html.night-mode :where(
    .table,
    .theme-table,
    .billing-table,
    .wa-table,
    .rekening-table,
    .disturbance-table,
    .pppoe-table,
    .server-log-table,
    .sample-table,
    .invoice-table,
    .clients-table,
    .detail-table
) tbody td {
    border-bottom-color: rgba(148, 163, 184, 0.16) !important;
    color: var(--night-text) !important;
}

html.night-mode :where(
    .table,
    .theme-table,
    .billing-table,
    .wa-table,
    .rekening-table,
    .disturbance-table,
    .pppoe-table,
    .server-log-table,
    .sample-table,
    .invoice-table,
    .clients-table,
    .detail-table
) tbody tr:hover {
    background: rgba(30, 41, 59, 0.78) !important;
}

html.night-mode :where(
    .table-container,
    .table-wrapper,
    .table-responsive,
    .table-wrap,
    .billing-table-wrapper,
    .wa-table-container,
    .device-table-wrapper,
    .sample-table-wrapper,
    .server-log-table-wrap,
    .clients-table-wrap
)::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.9) !important;
}

html.night-mode :where(
    .table-container,
    .table-wrapper,
    .table-responsive,
    .table-wrap,
    .billing-table-wrapper,
    .wa-table-container,
    .device-table-wrapper,
    .sample-table-wrapper,
    .server-log-table-wrap,
    .clients-table-wrap
)::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #2563eb, #06b6d4) !important;
}

html.night-mode .notif-header-card h1,html.night-mode 
.notif-edit-header h1,html.night-mode 
.notif-throttle-card h2,html.night-mode 
.notif-card h2,html.night-mode 
.notif-field label,html.night-mode 
.notif-edit-field label,html.night-mode 
.notif-summary span,html.night-mode 
.notif-footer-card strong {
    color: var(--night-heading) !important;
}

html.night-mode .notif-item {
    background: rgba(15, 23, 42, 0.72) !important;
    border-color: var(--night-border) !important;
}

html.night-mode .notif-summary {
    background: rgba(37, 99, 235, 0.14) !important;
    color: var(--night-accent) !important;
    border-color: var(--night-border) !important;
}

html.night-mode .notif-body {
    background: rgba(15, 23, 42, 0.52) !important;
    border-top-color: var(--night-border) !important;
}

html.night-mode .notif-table-wrapper {
    border-color: var(--night-border) !important;
}

html.night-mode .notif-table td {
    background: rgba(15, 23, 42, 0.72) !important;
    border-color: var(--night-border) !important;
    color: var(--night-text) !important;
}

html.night-mode .notif-table small,
html.night-mode .notif-empty {
    color: var(--night-muted) !important;
}

html.night-mode .notif-action-link {
    background: rgba(37, 99, 235, 0.2) !important;
    color: #bfdbfe !important;
}

html.night-mode .notif-icon-action,
html.night-mode .notif-edit-back {
    background: rgba(37, 99, 235, 0.2) !important;
    color: #bfdbfe !important;
}

html.night-mode .notif-edit-preview {
    border-color: var(--night-border) !important;
}

html.night-mode .notif-edit-preview__header {
    background: rgba(37, 99, 235, 0.14) !important;
}

html.night-mode .notif-edit-preview__header h2 {
    color: var(--night-heading) !important;
}

html.night-mode .notif-edit-preview__header p {
    color: var(--night-muted) !important;
}

html.night-mode .notif-edit-preview__message {
    background: rgba(15, 23, 42, 0.72) !important;
    color: var(--night-text) !important;
}

html.night-mode .notif-edit-preview__refresh {
    background: rgba(37, 99, 235, 0.2) !important;
    color: #bfdbfe !important;
    box-shadow: none !important;
}

html.night-mode .notif-action-button {
    background: var(--night-success-bg) !important;
    color: var(--night-success-text) !important;
}

html.night-mode .notif-sent-badge {
    background: rgba(30, 41, 59, 0.9) !important;
    color: var(--night-muted) !important;
}

html.night-mode .notif-footer-card {
    border-color: var(--night-border) !important;
    color: var(--night-muted) !important;
}

html.night-mode .notif-edit-header p {
    color: var(--night-muted) !important;
}

html.night-mode .notif-edit-cancel {
    background: rgba(30, 41, 59, 0.9) !important;
    color: var(--night-muted) !important;
}

html.night-mode .notif-alert {
    background: var(--night-success-bg) !important;
    border-color: rgba(134, 239, 172, 0.28) !important;
    color: var(--night-success-text) !important;
}

html.night-mode .billing-page {
    background: transparent !important;
    box-shadow: none !important;
}

html.night-mode .rekening-page {
    background: transparent !important;
    box-shadow: none !important;
}

html.night-mode .rekening-card,
html.night-mode .rekening-table-card,
html.night-mode .rekening-table tbody tr {
    border-color: var(--night-border) !important;
}

html.night-mode .rekening-table-card .table-wrapper {
    background: rgba(15, 23, 42, 0.72) !important;
    border-color: var(--night-border) !important;
    box-shadow: none !important;
}

html.night-mode .rekening-table-card > .table-header {
    background: transparent !important;
    border-color: transparent !important;
}

html.night-mode .rekening-table tbody tr:hover td {
    background: rgba(96, 165, 250, 0.1) !important;
}

html.night-mode .tag-cash {
    background: var(--night-success-bg) !important;
    color: var(--night-success-text) !important;
    border: 1px solid rgba(34, 197, 94, 0.28) !important;
}

html.night-mode .tag-transfer {
    background: rgba(96, 165, 250, 0.16) !important;
    color: #bfdbfe !important;
    border: 1px solid rgba(96, 165, 250, 0.28) !important;
}

html.night-mode .btn-light {
    background: var(--night-surface-2) !important;
    border-color: var(--night-border) !important;
    color: var(--night-heading) !important;
}

html.night-mode .btn-light:hover {
    background: var(--night-surface-3) !important;
}

html.night-mode .billing-table-wrapper {
    border-color: var(--night-border) !important;
}

html.night-mode .billing-modal__overlay {
    background: rgba(2, 6, 23, 0.76) !important;
}

html.night-mode .billing-modal__close,html.night-mode 
.billing-card__arrow {
    color: var(--night-accent) !important;
}

html.night-mode .filter-card-title,html.night-mode 
.form-section-title,html.night-mode 
.section-card h4,html.night-mode 
.info-card h3,html.night-mode 
.modal-header h3,html.night-mode 
.modal-header h4 {
    color: var(--night-heading) !important;
}

html.night-mode .info-row,html.night-mode 
.info-row span:last-child,html.night-mode 
.filter-label,html.night-mode 
.filter-field label,html.night-mode 
.olt-search-field label,html.night-mode 
.form-section-subtitle,html.night-mode 
.alert-snmp,html.night-mode 
.modal-meta,html.night-mode 
.snmp-status,html.night-mode 
.text-muted,html.night-mode 
.small.text-muted {
    color: #d6e0ef !important;
}

html.night-mode .info-row span:first-child {
    color: #cbd5e1 !important;
}

html.night-mode .info-row,html.night-mode 
.form-section + .form-section {
    border-color: var(--night-border) !important;
}

html.night-mode .filter-badge,html.night-mode 
.devices-status,html.night-mode 
.btn-filter,html.night-mode 
.pon-badge,html.night-mode 
.btn-outline,html.night-mode 
.btn-small.btn-outline {
    background: var(--night-surface-2) !important;
    border-color: var(--night-border) !important;
    color: var(--night-heading) !important;
}

html.night-mode .traffic-preview__metric {
    background: linear-gradient(180deg, rgba(23, 32, 51, 0.96), rgba(15, 23, 42, 0.96)) !important;
    border-color: var(--night-border-soft) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

html.night-mode .traffic-preview__metric span,
html.night-mode .traffic-preview__axis,
html.night-mode .traffic-preview__y-axis,
html.night-mode .traffic-preview__legend,
html.night-mode .traffic-preview__note {
    color: var(--night-muted) !important;
}

html.night-mode .traffic-preview__metric strong {
    color: var(--night-heading) !important;
}

html.night-mode .traffic-preview__chart {
    background: linear-gradient(180deg, #0b1220 0%, #111827 100%) !important;
    border-color: var(--night-border-soft) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

html.night-mode .traffic-preview__scale {
    background: rgba(7, 11, 20, 0.86) !important;
    border-color: var(--night-border-soft) !important;
    color: var(--night-heading) !important;
}

html.night-mode .traffic-preview__grid line {
    stroke: rgba(148, 163, 184, 0.2) !important;
}

html.night-mode .traffic-preview__line--download {
    stroke: #60a5fa !important;
}

html.night-mode .traffic-preview__line--upload {
    stroke: #34d399 !important;
}

html.night-mode .traffic-preview__hover-line {
    stroke: rgba(226, 232, 240, 0.58) !important;
}

html.night-mode .traffic-preview__hover-dot {
    stroke: #0b1220 !important;
    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.36)) !important;
}

html.night-mode .traffic-preview__hover-dot--download {
    fill: #60a5fa !important;
}

html.night-mode .traffic-preview__hover-dot--upload {
    fill: #34d399 !important;
}

html.night-mode .traffic-preview__tooltip {
    background: rgba(7, 11, 20, 0.96) !important;
    border-color: var(--night-border-soft) !important;
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.42) !important;
    color: var(--night-heading) !important;
}

html.night-mode .traffic-preview__tooltip span {
    color: var(--night-heading) !important;
}

html.night-mode .traffic-preview__tooltip b {
    color: var(--night-muted) !important;
}

html.night-mode .traffic-preview__legend span::before {
    background: #60a5fa !important;
}

html.night-mode .traffic-preview__legend span:last-child::before {
    background: #34d399 !important;
}

html.night-mode .traffic-monitor__toggle {
    background: var(--night-surface-2) !important;
    border-color: var(--night-border-soft) !important;
    color: #93c5fd !important;
    box-shadow: none !important;
}

html.night-mode .traffic-monitor__toggle:hover {
    border-color: rgba(96, 165, 250, 0.5) !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24) !important;
}

html.night-mode .traffic-monitor__toggle.is-enabled {
    background: rgba(34, 197, 94, 0.18) !important;
    border-color: rgba(74, 222, 128, 0.44) !important;
    color: #bbf7d0 !important;
}

html.night-mode .activation-card__value,html.night-mode 
.activation-modal__title,html.night-mode 
.activation-summary__value,html.night-mode 
.interface-check-title,html.night-mode 
.wifi-config-title,html.night-mode 
.device-primary strong,html.night-mode 
#devicesFullTable td,html.night-mode 
#devicesFullTable .device-primary,html.night-mode 
#devicesFullTable .device-primary strong,html.night-mode 
.rx-value,html.night-mode 
.table .rx-value,html.night-mode 
#devicesTable .rx-value,html.night-mode 
#devicesFullTable .rx-value,html.night-mode 
.device-detail-value,html.night-mode 
.wlan-card-title,html.night-mode 
.lan-client-title,html.night-mode 
.wlan-client-title,html.night-mode
.wlan-client-name,html.night-mode
.wlan-card-row span:last-child,html.night-mode 
.lan-client-row span:last-child {
    color: var(--night-heading) !important;
}

html.night-mode .wlan-client-meta,
html.night-mode .wlan-client-empty {
    color: var(--night-muted) !important;
}

html.night-mode #devicesFullTable .device-muted {
    color: var(--night-muted) !important;
}

html.night-mode #devicesTable .rx-value,html.night-mode 
#devicesFullTable .rx-value {
    background: rgba(96, 165, 250, 0.12) !important;
    border: 1px solid rgba(96, 165, 250, 0.24) !important;
    border-radius: 6px !important;
    padding: 4px 8px !important;
}

html.night-mode input,html.night-mode 
select,html.night-mode 
textarea,html.night-mode 
.form-control,html.night-mode 
.filter-input,html.night-mode 
.filter-select,html.night-mode 
.isolir-search-input,html.night-mode 
.isolir-search-select,html.night-mode 
.invoice-search-input,html.night-mode 
.invoice-search-select,html.night-mode 
.login__input,html.night-mode 
.border-gray-300 {
    background-color: var(--night-surface-2) !important;
    border-color: var(--night-border) !important;
    color: var(--night-heading) !important;
    box-shadow: none !important;
}

html.night-mode input:focus,html.night-mode 
select:focus,html.night-mode 
textarea:focus,html.night-mode 
.form-control:focus,html.night-mode 
.filter-input:focus,html.night-mode 
.filter-select:focus,html.night-mode 
.isolir-search-input:focus,html.night-mode 
.isolir-search-select:focus,html.night-mode 
.invoice-search-input:focus,html.night-mode 
.invoice-search-select:focus,html.night-mode 
.login__input:focus {
    border-color: var(--night-accent) !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.18) !important;
}

html.night-mode input::placeholder,html.night-mode 
textarea::placeholder,html.night-mode 
.login__input::placeholder {
    color: var(--night-faint) !important;
}

html.night-mode .login__box i,html.night-mode 
.input-icon i {
    color: var(--night-muted) !important;
}

html.night-mode input[disabled],html.night-mode 
select[disabled],html.night-mode 
textarea[disabled],html.night-mode 
.form-control[disabled],html.night-mode 
[style*="background-color: #f8f9fa"] {
    background-color: #1f2937 !important;
    color: var(--night-muted) !important;
}

html.night-mode .file-info,html.night-mode 
.quick-link,html.night-mode 
.sync-dropdown-menu,html.night-mode 
.customer-results,html.night-mode 
.dropdown-content,html.night-mode 
.submenu-items,html.night-mode 
.wa-log-body,html.night-mode 
.wa-qr-wrapper,html.night-mode 
.device-detail-section,html.night-mode 
.customer-detail-card__section,html.night-mode 
.billing-card__body {
    background: rgba(15, 23, 42, 0.72) !important;
    border-color: var(--night-border) !important;
    color: var(--night-text) !important;
}

html.night-mode .quick-link:hover,html.night-mode 
.sync-dropdown-item:hover,html.night-mode 
.sync-dropdown-item:focus,html.night-mode 
.sync-dropdown-item:active,html.night-mode 
.customer-results div:hover,html.night-mode 
.dropdown-content a:hover,html.night-mode 
.activation-suggestion-item:hover,html.night-mode 
.activation-suggestion-item.is-active {
    background: rgba(96, 165, 250, 0.12) !important;
}

html.night-mode .sync-dropdown-item:hover,html.night-mode 
.sync-dropdown-item:focus,html.night-mode 
.sync-dropdown-item:active {
    color: #ffffff !important;
}

html.night-mode .sync-dropdown-item:hover i,html.night-mode 
.sync-dropdown-item:focus i,html.night-mode 
.sync-dropdown-item:active i {
    color: #ffffff !important;
}

html.night-mode .activation-suggestion-item {
    background: transparent !important;
    color: var(--night-text) !important;
}

html.night-mode .activation-suggestion-item .customer-info {
    color: var(--night-heading) !important;
}

html.night-mode .activation-suggestion-item .customer-details,html.night-mode 
.customer-result-empty {
    color: var(--night-muted) !important;
}

html.night-mode a {
    color: var(--night-accent) !important;
}

html.night-mode .menu a {
    color: #e0e7ff !important;
}

html.night-mode .menu i,html.night-mode 
.submenu-arrow,html.night-mode 
.submenu-items li a,html.night-mode 
.user-info small {
    color: #cbd5e1 !important;
}

html.night-mode .menu a:hover {
    color: #ffffff !important;
}

html.night-mode .menu a > i:first-child,
html.night-mode .logout-btn > i:first-child {
    background: rgba(148, 163, 184, 0.14) !important;
    color: #cbd5e1 !important;
}

html.night-mode .menu li.is-active > a,
html.night-mode .menu a.is-active,
html.night-mode .submenu-toggle.is-active {
    background: linear-gradient(135deg, #2563eb 0%, #0891b2 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 14px 30px rgba(37, 99, 235, 0.34) !important;
}

html.night-mode .menu li.is-active > a > i:first-child,
html.night-mode .menu a.is-active > i:first-child,
html.night-mode .submenu-toggle.is-active > i:first-child,
html.night-mode .menu a:hover > i:first-child,
html.night-mode .logout-btn:hover > i:first-child {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

html.night-mode .submenu-items li a.is-active {
    background: rgba(37, 99, 235, 0.28) !important;
    color: #ffffff !important;
    box-shadow: inset 0 0 0 1px rgba(125, 211, 252, 0.22) !important;
}

html.night-mode .submenu.is-active > .submenu-toggle .submenu-arrow,
html.night-mode .submenu-toggle.active .submenu-arrow {
    color: #ffffff !important;
}

html.night-mode .btn-add,html.night-mode 
.btn-import,html.night-mode 
.btn-export,html.night-mode 
.btn-filter,html.night-mode 
.btn-primary,html.night-mode 
.btn-action,html.night-mode 
.login__button,html.night-mode 
.nav__button,html.night-mode 
.notif-save-button,html.night-mode 
.isolir-search-button,html.night-mode 
.invoice-search-button,html.night-mode 
.invoice-reset-button {
    color: #ffffff !important;
}

html.night-mode .btn-secondary,html.night-mode 
.secondary-button {
    color: #ffffff !important;
    border-color: var(--night-border) !important;
}

html.night-mode .dashboard-action-toggle {
    background: rgba(15, 23, 42, 0.82) !important;
    border-color: var(--night-border-soft) !important;
    color: var(--night-heading) !important;
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.34) !important;
}

html.night-mode .dashboard-actions {
    background: var(--night-surface) !important;
    border-color: var(--night-border-soft) !important;
    box-shadow: var(--night-shadow) !important;
}

html.night-mode .alert {
    border-color: var(--night-border-soft) !important;
    color: var(--night-text) !important;
}

html.night-mode .alert-success,html.night-mode 
.status-aktif,html.night-mode 
.status-active,html.night-mode 
.status-paid {
    background: var(--night-success-bg) !important;
    color: var(--night-success-text) !important;
    border-color: rgba(34, 197, 94, 0.32) !important;
}

html.night-mode .alert-warning,html.night-mode 
.status-pending,html.night-mode 
.status-unpaid,html.night-mode 
.badge-warning {
    background: var(--night-warning-bg) !important;
    color: var(--night-warning-text) !important;
    border-color: rgba(245, 158, 11, 0.34) !important;
}

html.night-mode .alert-error,html.night-mode 
.alert-danger,html.night-mode 
.status-nonaktif,html.night-mode 
.status-inactive,html.night-mode 
.status-overdue,html.night-mode 
.badge-danger {
    background: var(--night-danger-bg) !important;
    color: var(--night-danger-text) !important;
    border-color: rgba(239, 68, 68, 0.34) !important;
}

html.night-mode .badge,html.night-mode 
.status-badge {
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

html.night-mode .modal,html.night-mode 
.activation-modal,html.night-mode 
.billing-modal-backdrop,html.night-mode 
.wa-modal-backdrop,html.night-mode 
.genieacs-modal,html.night-mode 
.topology-modal-backdrop {
    background: rgba(2, 6, 23, 0.76) !important;
}

html.night-mode .close,html.night-mode 
.wa-modal__close,html.night-mode 
.topology-modal__close {
    color: var(--night-muted) !important;
}

html.night-mode .close:hover,html.night-mode 
.wa-modal__close:hover,html.night-mode 
.topology-modal__close:hover {
    color: var(--night-heading) !important;
}

html.night-mode .pagination,html.night-mode 
.pagination-container,html.night-mode 
.pppoe-pagination,html.night-mode 
nav[role="navigation"] {
    color: var(--night-text) !important;
}

html.night-mode .pagination-container,html.night-mode 
.pppoe-pagination {
    background: linear-gradient(180deg, rgba(17, 24, 39, 0.98), rgba(15, 23, 42, 0.98)) !important;
    border: 1px solid var(--night-border) !important;
    border-radius: 14px !important;
    padding: 16px !important;
    box-shadow: var(--night-shadow) !important;
}

html.night-mode .pagination-container nav[role="navigation"],html.night-mode 
.pppoe-pagination nav[role="navigation"] {
    width: 100% !important;
    background: transparent !important;
}

html.night-mode .pagination-container p,html.night-mode 
.pagination-container .pagination-info,html.night-mode 
.pppoe-pagination p,html.night-mode 
.pppoe-pagination .pagination-info {
    color: var(--night-muted) !important;
}

html.night-mode .pagination-container .font-medium,html.night-mode 
.pagination-container .font-semibold,html.night-mode 
.pppoe-pagination .font-medium,html.night-mode 
.pppoe-pagination .font-semibold {
    color: var(--night-heading) !important;
}

html.night-mode nav[role="navigation"] a,html.night-mode 
nav[role="navigation"] span,html.night-mode 
.pagination a,html.night-mode 
.pagination span,html.night-mode 
.pagination-container .bg-white,html.night-mode 
.pppoe-pagination .bg-white {
    background: var(--night-surface) !important;
    border-color: var(--night-border) !important;
    color: var(--night-text) !important;
}

html.night-mode nav[role="navigation"] a:hover,html.night-mode 
.pagination a:hover,html.night-mode 
.pagination-container a:hover,html.night-mode 
.pppoe-pagination a:hover {
    background: var(--night-surface-3) !important;
}

html.night-mode nav[role="navigation"] [aria-current="page"] span,html.night-mode 
.pagination-container [aria-current="page"] span,html.night-mode 
.pppoe-pagination [aria-current="page"] span {
    background: linear-gradient(135deg, #2563eb, #0891b2) !important;
    border-color: rgba(125, 211, 252, 0.45) !important;
    color: #ffffff !important;
}

html.night-mode .empty-table,html.night-mode 
.timeline-empty {
    color: var(--night-muted) !important;
    background: rgba(15, 23, 42, 0.58) !important;
}

html.night-mode .activation-modal__header {
    border-bottom-color: var(--night-border) !important;
}

html.night-mode .activation-modal__body,html.night-mode 
.activation-summary__item,html.night-mode 
.interface-check-group,html.night-mode 
.wifi-config-card {
    background: rgba(15, 23, 42, 0.72) !important;
    border-color: var(--night-border) !important;
    color: var(--night-text) !important;
}

html.night-mode .interface-check-options label {
    color: var(--night-muted) !important;
}

html.night-mode .activation-check-status {
    background: rgba(37, 99, 235, 0.16) !important;
    border-color: rgba(96, 165, 250, 0.34) !important;
    color: #bfdbfe !important;
}

html.night-mode .activation-check-status.is-success {
    background: var(--night-success-bg) !important;
    border-color: rgba(34, 197, 94, 0.32) !important;
    color: var(--night-success-text) !important;
}

html.night-mode .activation-check-status.is-error {
    background: var(--night-danger-bg) !important;
    border-color: rgba(239, 68, 68, 0.34) !important;
    color: var(--night-danger-text) !important;
}

html.night-mode [style*="background:#fff"],html.night-mode 
[style*="background: #fff"],html.night-mode 
[style*="background:#ffffff"],html.night-mode 
[style*="background: #ffffff"],html.night-mode 
[style*="background-color:white"],html.night-mode 
[style*="background-color: white"],html.night-mode 
[style*="background-color:#fff"],html.night-mode 
[style*="background-color: #fff"],html.night-mode 
[style*="background-color:#ffffff"],html.night-mode 
[style*="background-color: #ffffff"] {
    background: var(--night-surface) !important;
    color: var(--night-text) !important;
}

html.night-mode [style*="background:#f8"],html.night-mode 
[style*="background: #f8"],html.night-mode 
[style*="background-color:#f8"],html.night-mode 
[style*="background-color: #f8"],html.night-mode 
[style*="background:#f1f5f9"],html.night-mode 
[style*="background: #f1f5f9"],html.night-mode 
[style*="background:#ecf0f5"],html.night-mode 
[style*="background: #ecf0f5"],html.night-mode 
[style*="background-color:#ecf0f5"],html.night-mode 
[style*="background-color: #ecf0f5"] {
    background: var(--night-surface-2) !important;
    color: var(--night-text) !important;
}

html.night-mode [style*="background:#fff3cd"],html.night-mode 
[style*="background: #fff3cd"],html.night-mode 
[style*="background-color:#fff3cd"],html.night-mode 
[style*="background-color: #fff3cd"] {
    background: var(--night-warning-bg) !important;
    color: var(--night-warning-text) !important;
}

html.night-mode .login::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: linear-gradient(135deg, rgba(2, 6, 23, 0.78), rgba(15, 23, 42, 0.9));
}

html.night-mode .nav {
    background: rgba(2, 6, 23, 0.42) !important;
    backdrop-filter: blur(10px);
}

html.night-mode .nav__brand,html.night-mode 
.nav__link {
    color: #f8fafc !important;
}

html.night-mode .bg-gray-800,html.night-mode 
.hover\:bg-gray-700:hover {
    background-color: #2563eb !important;
}

html.night-mode .text-gray-900,html.night-mode 
.text-gray-800 {
    color: var(--night-heading) !important;
}

html.night-mode .shadow-md,html.night-mode 
.shadow,html.night-mode 
.shadow-sm,html.night-mode 
.shadow-lg,html.night-mode 
.shadow-xl {
    box-shadow: var(--night-shadow) !important;
}

html.night-mode .leaflet-popup-content-wrapper,html.night-mode 
.leaflet-popup-tip {
    background: var(--night-surface) !important;
    color: var(--night-text) !important;
}

html.night-mode .leaflet-control,html.night-mode 
.leaflet-control a {
    background: var(--night-surface) !important;
    color: var(--night-text) !important;
    border-color: var(--night-border) !important;
}

html.night-mode .disturbance-container {
    background: radial-gradient(circle at top right, rgba(14, 165, 233, 0.12), transparent 32%),
        var(--night-bg) !important;
    color: var(--night-text) !important;
}

html.night-mode .disturbance-panel,html.night-mode 
.disturbance-filter,html.night-mode 
.disturbance-stat,html.night-mode 
.customer-summary,html.night-mode 
.table-wrap {
    background: linear-gradient(180deg, rgba(17, 24, 39, 0.98), rgba(15, 23, 42, 0.98)) !important;
    border-color: var(--night-border) !important;
    color: var(--night-text) !important;
    box-shadow: var(--night-shadow) !important;
}

html.night-mode .disturbance-title,html.night-mode 
.disturbance-stat strong,html.night-mode 
.customer-summary strong,html.night-mode 
.form-section h2,html.night-mode 
.disturbance-table strong,html.night-mode 
.ticket-number {
    color: var(--night-heading) !important;
}

html.night-mode .disturbance-subtitle,html.night-mode 
.disturbance-stat span,html.night-mode 
.customer-summary span,html.night-mode 
.muted,html.night-mode 
.disturbance-table td {
    color: var(--night-muted) !important;
}

html.night-mode .disturbance-table {
    background: var(--night-surface) !important;
    color: var(--night-text) !important;
}

html.night-mode .disturbance-table th {
    background: var(--night-surface-2) !important;
    color: var(--night-heading) !important;
    border-color: var(--night-border) !important;
}

html.night-mode .disturbance-table td {
    background: var(--night-surface) !important;
    border-color: var(--night-border) !important;
}

html.night-mode .disturbance-table tbody tr:hover td {
    background: var(--night-surface-2) !important;
}

html.night-mode .filter-field label,html.night-mode 
.form-label {
    color: var(--night-heading) !important;
}

html.night-mode .filter-field input,html.night-mode 
.filter-field select,html.night-mode 
.disturbance-panel .form-control {
    background: var(--night-surface-2) !important;
    border-color: var(--night-border) !important;
    color: var(--night-heading) !important;
}

html.night-mode .filter-field input:focus,html.night-mode 
.filter-field select:focus,html.night-mode 
.disturbance-panel .form-control:focus {
    border-color: var(--night-accent) !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.18) !important;
}

html.night-mode .disturbance-panel .form-control::placeholder {
    color: var(--night-faint) !important;
}

html.night-mode .form-section {
    border-color: var(--night-border) !important;
}

html.night-mode .disturbance-panel .btn-secondary,html.night-mode 
.disturbance-panel .btn-reset {
    background: linear-gradient(135deg, #475569, #334155) !important;
    color: #ffffff !important;
}

html.night-mode .disturbance-panel .btn-primary,html.night-mode 
.disturbance-panel .btn-add,html.night-mode 
.disturbance-panel .btn-filter,html.night-mode 
.disturbance-panel .btn-action {
    background: linear-gradient(135deg, #2563eb, #0891b2) !important;
    color: #ffffff !important;
}

html.night-mode .disturbance-panel .badge {
    border-color: var(--night-border-soft) !important;
}

html.night-mode .disturbance-panel .status-baru,html.night-mode 
.disturbance-panel .status-menunggu_pelanggan,html.night-mode 
.disturbance-panel .status-menunggu_teknisi {
    background: var(--night-warning-bg) !important;
    color: var(--night-warning-text) !important;
}

html.night-mode .disturbance-panel .status-diproses,html.night-mode 
.disturbance-panel .priority-rendah {
    background: rgba(59, 130, 246, 0.16) !important;
    color: #93c5fd !important;
}

html.night-mode .disturbance-panel .status-selesai {
    background: var(--night-success-bg) !important;
    color: var(--night-success-text) !important;
}

html.night-mode .disturbance-panel .status-dibatalkan,html.night-mode 
.disturbance-panel .priority-darurat {
    background: var(--night-danger-bg) !important;
    color: var(--night-danger-text) !important;
}

html.night-mode .disturbance-panel .priority-normal {
    background: rgba(148, 163, 184, 0.18) !important;
    color: var(--night-text) !important;
}

html.night-mode .disturbance-panel .priority-tinggi {
    background: var(--night-warning-bg) !important;
    color: var(--night-warning-text) !important;
}

html.night-mode .replace-ont-container {
    background: radial-gradient(circle at top right, rgba(14, 165, 233, 0.12), transparent 32%),
        var(--night-bg) !important;
    color: var(--night-text) !important;
}

html.night-mode .replace-ont-panel,html.night-mode 
.replace-ont-panel .form-section,html.night-mode 
.replace-ont-panel .summary-card,html.night-mode 
.replace-ont-panel .summary-item {
    background: linear-gradient(180deg, rgba(17, 24, 39, 0.98), rgba(15, 23, 42, 0.98)) !important;
    border-color: var(--night-border) !important;
    color: var(--night-text) !important;
    box-shadow: var(--night-shadow) !important;
}

html.night-mode .replace-ont-title,html.night-mode 
.replace-ont-panel .form-section h2,html.night-mode 
.replace-ont-panel .summary-card h2,html.night-mode 
.replace-ont-panel .summary-item strong {
    color: var(--night-heading) !important;
}

html.night-mode .replace-ont-subtitle,html.night-mode 
.replace-ont-panel .summary-item span {
    color: var(--night-muted) !important;
}

html.night-mode .replace-ont-panel .form-label,html.night-mode 
.replace-ont-panel label {
    color: var(--night-heading) !important;
}

html.night-mode .replace-ont-panel .form-control {
    background: var(--night-surface-2) !important;
    border-color: var(--night-border) !important;
    color: var(--night-heading) !important;
}

html.night-mode .replace-ont-panel .form-control:focus {
    border-color: var(--night-accent) !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.18) !important;
}

html.night-mode .replace-ont-panel .form-control::placeholder {
    color: var(--night-faint) !important;
}

html.night-mode .replace-ont-panel .customer-suggestions {
    background: var(--night-surface) !important;
    border-color: var(--night-border) !important;
    box-shadow: var(--night-shadow) !important;
}

html.night-mode .replace-ont-panel .customer-suggestion {
    color: var(--night-text) !important;
}

html.night-mode .replace-ont-panel .customer-suggestion:hover,html.night-mode 
.replace-ont-panel .customer-suggestion.is-active {
    background: var(--night-surface-2) !important;
}

html.night-mode .replace-ont-panel .customer-suggestion strong {
    color: var(--night-heading) !important;
}

html.night-mode .replace-ont-panel .customer-suggestion span,html.night-mode 
.replace-ont-panel .customer-suggestion-empty {
    color: var(--night-muted) !important;
}

html.night-mode .replace-ont-panel .replace-status {
    background: rgba(59, 130, 246, 0.16) !important;
    color: #93c5fd !important;
    border-color: rgba(147, 197, 253, 0.34) !important;
}

html.night-mode .replace-ont-panel .replace-status.is-success {
    background: var(--night-success-bg) !important;
    color: var(--night-success-text) !important;
    border-color: rgba(34, 197, 94, 0.32) !important;
}

html.night-mode .replace-ont-panel .replace-status.is-error {
    background: var(--night-danger-bg) !important;
    color: var(--night-danger-text) !important;
    border-color: rgba(239, 68, 68, 0.34) !important;
}

html.night-mode .replace-ont-panel .btn-primary {
    background: linear-gradient(135deg, #2563eb, #0891b2) !important;
    color: #ffffff !important;
}

html.night-mode .replace-ont-panel .btn-secondary {
    background: linear-gradient(135deg, #475569, #334155) !important;
    color: #ffffff !important;
}

/* OLT illustration and per-device fiber topology */
html.night-mode .olt-header-icon,html.night-mode 
.olt-topology-page .topology-heading-icon {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.18), rgba(14, 165, 233, 0.08)) !important;
    box-shadow: inset 0 0 0 1px var(--night-border-soft) !important;
}

html.night-mode .olt-empty-title {
    color: var(--night-heading) !important;
}

html.night-mode .olt-empty-text {
    color: var(--night-muted) !important;
}

html.night-mode .olt-topology-page {
    background: radial-gradient(circle at top right, rgba(14, 165, 233, 0.12), transparent 32%),
        var(--night-bg) !important;
    color: var(--night-text) !important;
}

html.night-mode .olt-topology-page .topology-title,html.night-mode 
.olt-topology-page .topology-panel-title,html.night-mode 
.olt-topology-page .topology-stat__value {
    color: var(--night-heading) !important;
}

html.night-mode .olt-topology-page .topology-subtitle,html.night-mode 
.olt-topology-page .topology-panel-text,html.night-mode 
.olt-topology-page .topology-stat__label,html.night-mode 
.olt-topology-page .topology-legend,html.night-mode 
.olt-topology-page .topology-hint {
    color: var(--night-muted) !important;
}

html.night-mode .olt-topology-page .topology-button,html.night-mode 
.olt-topology-page .topology-stat,html.night-mode 
.olt-topology-page .topology-panel {
    background: linear-gradient(180deg, rgba(17, 24, 39, 0.98), rgba(15, 23, 42, 0.98)) !important;
    border-color: var(--night-border) !important;
    color: var(--night-text) !important;
    box-shadow: var(--night-shadow) !important;
}

html.night-mode .olt-topology-page .topology-button:hover,html.night-mode 
.olt-topology-page .topology-tool:hover {
    background: var(--night-surface-3) !important;
    border-color: var(--night-accent) !important;
    color: var(--night-accent-2) !important;
}

html.night-mode .olt-topology-page .topology-tool {
    background: var(--night-surface-2) !important;
    border-color: var(--night-border) !important;
    color: var(--night-muted) !important;
}

html.night-mode .olt-topology-page .topology-message {
    background: rgba(59, 130, 246, 0.14) !important;
    color: #bfdbfe !important;
    border: 1px solid rgba(96, 165, 250, 0.22) !important;
}

html.night-mode .olt-topology-page .topology-canvas {
    border-top-color: var(--night-border) !important;
    background-color: var(--night-bg-soft) !important;
    background-image: radial-gradient(rgba(148, 163, 184, 0.22) 1px, transparent 1px) !important;
}

html.night-mode .olt-topology-page .topology-link {
    stroke: #3c5067 !important;
}

html.night-mode .olt-topology-page .topology-link.is-live {
    stroke: #34d399 !important;
}

html.night-mode .olt-topology-page .topology-link.is-offline {
    stroke: #f87171 !important;
}

html.night-mode .olt-topology-page .topology-node-card {
    fill: var(--night-surface-2) !important;
    stroke: #44546a !important;
    filter: drop-shadow(0 5px 7px rgba(0, 0, 0, 0.28)) !important;
}

html.night-mode .olt-topology-page .topology-node.type-olt .topology-node-card {
    fill: #10263d !important;
    stroke: #38bdf8 !important;
}

html.night-mode .olt-topology-page .topology-node.type-pon .topology-node-card {
    fill: #221c43 !important;
    stroke: #a78bfa !important;
}

html.night-mode .olt-topology-page .topology-node.type-odp .topology-node-card,html.night-mode 
.olt-topology-page .topology-node.type-odc .topology-node-card,html.night-mode 
.olt-topology-page .topology-node.type-distribution .topology-node-card {
    fill: #2a2014 !important;
    stroke: #fbbf24 !important;
}

html.night-mode .olt-topology-page .topology-node.type-customer .topology-node-card {
    fill: #112c28 !important;
    stroke: #34d399 !important;
}

html.night-mode .olt-topology-page .topology-node.is-down .topology-node-card,html.night-mode 
.olt-topology-page .topology-node.is-offline .topology-node-card,html.night-mode 
.olt-topology-page .topology-node.is-disconnected .topology-node-card {
    fill: #301a21 !important;
    stroke: #f87171 !important;
}

html.night-mode .olt-topology-page .topology-node-name {
    fill: var(--night-heading) !important;
}

html.night-mode .olt-topology-page .topology-node-detail {
    fill: var(--night-muted) !important;
}

html.night-mode .olt-topology-page .topology-node-status {
    stroke: var(--night-surface-2) !important;
}

html.night-mode .olt-topology-page .topology-tooltip {
    background: #020617 !important;
    border: 1px solid var(--night-border) !important;
    color: var(--night-heading) !important;
    box-shadow: var(--night-shadow) !important;
}

html.night-mode .olt-topology-page .topology-tooltip span {
    color: var(--night-muted) !important;
}

/* ODC/ODP locations and create/edit workflow */
html.night-mode .fiber-nodes-page {
    background: radial-gradient(circle at top right, rgba(14, 165, 233, 0.12), transparent 32%),
        var(--night-bg) !important;
    color: var(--night-text) !important;
}

html.night-mode .fiber-nodes-page .form-section-hint,html.night-mode 
.fiber-nodes-page .field-hint,html.night-mode 
.fiber-nodes-page .map-legend,html.night-mode 
.fiber-nodes-page .map-legend span,html.night-mode 
.fiber-nodes-page .network-map-callout__text,html.night-mode 
.fiber-nodes-page .stat-card small,html.night-mode 
.fiber-nodes-page .table-toolbar p,html.night-mode 
.fiber-nodes-page .location-meta,html.night-mode 
.fiber-nodes-page .topology-meta,html.night-mode 
.fiber-nodes-page .coordinate-meta,html.night-mode 
.fiber-nodes-page .capacity-meta,html.night-mode 
.fiber-nodes-page .relation-meta,html.night-mode 
.fiber-nodes-page .empty-table-state {
    color: var(--night-muted) !important;
}

html.night-mode .fiber-nodes-page .form-field label,html.night-mode 
.fiber-nodes-page .form-section-title,html.night-mode 
.fiber-nodes-page .stat-card p,html.night-mode 
.fiber-nodes-page .map-card h3,html.night-mode 
.fiber-nodes-page .network-map-callout__title,html.night-mode 
.fiber-nodes-page .filter-card-title,html.night-mode 
.fiber-nodes-page .table-toolbar h2,html.night-mode 
.fiber-nodes-page .location-name,html.night-mode 
.fiber-nodes-page .empty-table-state strong {
    color: var(--night-heading) !important;
}

html.night-mode .fiber-nodes-page .network-map-callout {
    background: linear-gradient(180deg, rgba(17, 24, 39, 0.98), rgba(15, 23, 42, 0.98)) !important;
    border-color: var(--night-border) !important;
    color: var(--night-text) !important;
    box-shadow: var(--night-shadow) !important;
}

html.night-mode .fiber-nodes-page .network-map-callout__icon {
    background: linear-gradient(135deg, #2563eb, #0891b2) !important;
    color: #ffffff !important;
    box-shadow: 0 14px 28px rgba(14, 165, 233, 0.22) !important;
}

html.night-mode .fiber-nodes-page .filter-card,html.night-mode 
.fiber-nodes-page .table-container {
    background: linear-gradient(180deg, rgba(17, 24, 39, 0.98), rgba(15, 23, 42, 0.98)) !important;
    border-color: var(--night-border) !important;
    color: var(--night-text) !important;
    box-shadow: var(--night-shadow) !important;
}

html.night-mode .fiber-nodes-page .quick-filter,html.night-mode 
.fiber-nodes-page .summary-badge {
    background: rgba(30, 41, 59, 0.9) !important;
    border-color: var(--night-border-soft) !important;
    color: var(--night-heading) !important;
}

html.night-mode .fiber-nodes-page .quick-filter:hover {
    background: rgba(37, 99, 235, 0.26) !important;
    color: #dbeafe !important;
}

html.night-mode .fiber-nodes-page .summary-badge.is-warning {
    background: var(--night-warning-bg) !important;
    color: var(--night-warning-text) !important;
}

html.night-mode .fiber-nodes-page .type-badge.is-odc {
    background: rgba(37, 99, 235, 0.22) !important;
    color: #bfdbfe !important;
}

html.night-mode .fiber-nodes-page .type-badge.is-odp {
    background: rgba(34, 197, 94, 0.18) !important;
    color: var(--night-success-text) !important;
}

html.night-mode .fiber-nodes-page .status-badge.is-active {
    background: var(--night-success-bg) !important;
    color: var(--night-success-text) !important;
}

html.night-mode .fiber-nodes-page .status-badge.is-maintenance {
    background: var(--night-warning-bg) !important;
    color: var(--night-warning-text) !important;
}

html.night-mode .fiber-nodes-page .status-badge.is-inactive {
    background: var(--night-danger-bg) !important;
    color: var(--night-danger-text) !important;
}

html.night-mode .fiber-nodes-page .topology-link,html.night-mode 
.fiber-nodes-page .coordinate-link {
    color: var(--night-accent) !important;
}

html.night-mode .fiber-nodes-page .capacity-progress {
    background: rgba(51, 65, 85, 0.95) !important;
}

html.night-mode .fiber-nodes-page .form-select,html.night-mode 
.fiber-nodes-page .form-control {
    background: var(--night-surface-2) !important;
    border-color: var(--night-border) !important;
    color: var(--night-heading) !important;
}

html.night-mode .fiber-nodes-page .form-select:focus,html.night-mode 
.fiber-nodes-page .form-control:focus {
    border-color: var(--night-accent) !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.18) !important;
}

html.night-mode .fiber-nodes-page .btn-add,html.night-mode 
.fiber-nodes-page .btn-primary,html.night-mode 
.fiber-nodes-page .btn-gradient {
    background: linear-gradient(135deg, #2563eb, #0891b2) !important;
    color: #ffffff !important;
}

html.night-mode .fiber-nodes-page .btn-secondary {
    background: linear-gradient(135deg, #475569, #334155) !important;
    border-color: var(--night-border) !important;
    color: #ffffff !important;
}

html.night-mode .fiber-nodes-page .btn-edit {
    background: rgba(245, 158, 11, 0.2) !important;
    color: var(--night-warning-text) !important;
}

html.night-mode .fiber-nodes-page .status-maintenance {
    background: var(--night-warning-bg) !important;
    color: var(--night-warning-text) !important;
}

html.night-mode .fiber-nodes-page #fiberMap,html.night-mode 
.fiber-nodes-page #locationMap {
    background: var(--night-bg-soft) !important;
    border-color: var(--night-border) !important;
    box-shadow: inset 0 0 0 1px var(--night-border-soft) !important;
}

html.night-mode .fiber-nodes-page .fiber-map-message,html.night-mode 
.fiber-nodes-page .location-map-message {
    background: var(--night-surface) !important;
    border-color: var(--night-border) !important;
    color: var(--night-text) !important;
    box-shadow: var(--night-shadow) !important;
}

html.night-mode .fiber-nodes-page .fiber-map-message strong,html.night-mode 
.fiber-nodes-page .location-map-message strong {
    color: var(--night-heading) !important;
}

html.night-mode .fiber-nodes-page .fiber-map-message span,html.night-mode 
.fiber-nodes-page .location-map-message span {
    color: var(--night-muted) !important;
}

html.night-mode .fiber-nodes-page #fiberMap .gm-style-iw,html.night-mode 
.fiber-nodes-page #fiberMap .gm-style-iw *,html.night-mode 
.fiber-nodes-page #fiberMap .gm-style-iw-c,html.night-mode 
.fiber-nodes-page #fiberMap .gm-style-iw-d {
    background: var(--night-surface) !important;
    color: var(--night-text) !important;
}

html.night-mode .fiber-nodes-page #fiberMap .gm-style-mtc button,html.night-mode 
.fiber-nodes-page #fiberMap .gm-control-active,html.night-mode 
.fiber-nodes-page #fiberMap .gm-fullscreen-control,html.night-mode 
.fiber-nodes-page #fiberMap .gm-svpc,html.night-mode 
.fiber-nodes-page #locationMap .gm-style-mtc button,html.night-mode 
.fiber-nodes-page #locationMap .gm-control-active,html.night-mode 
.fiber-nodes-page #locationMap .gm-fullscreen-control,html.night-mode 
.fiber-nodes-page #locationMap .gm-svpc {
    background: var(--night-surface-2) !important;
    color: var(--night-heading) !important;
}

html.night-mode .fiber-nodes-page #nodeMap {
    border-color: var(--night-border) !important;
}

html.night-mode .fiber-nodes-page .leaflet-container {
    background: var(--night-bg-soft) !important;
}

/* Server log page */
html.night-mode .server-log-page {
    background: radial-gradient(circle at top right, rgba(14, 165, 233, 0.12), transparent 32%),
        var(--night-bg) !important;
    color: var(--night-text) !important;
}

html.night-mode .content:has(.server-log-page) {
    background: var(--night-bg) !important;
}

html.night-mode .server-log-card,
html.night-mode .server-log-panel {
    background: linear-gradient(180deg, var(--night-surface) 0%, var(--night-surface-2) 100%) !important;
    border-color: var(--night-border) !important;
    box-shadow: var(--night-shadow) !important;
}

html.night-mode .server-log-card--warning {
    border-color: rgba(251, 191, 36, 0.52) !important;
    box-shadow: 0 12px 28px rgba(245, 158, 11, 0.16) !important;
}

html.night-mode .server-log-card--critical {
    border-color: rgba(252, 165, 165, 0.58) !important;
    box-shadow: 0 12px 28px rgba(239, 68, 68, 0.18) !important;
}

html.night-mode .server-log-title,
html.night-mode .server-log-card strong,
html.night-mode .server-log-gauge__value,
html.night-mode .server-log-panel__title {
    color: var(--night-heading) !important;
}

html.night-mode .server-log-subtitle,
html.night-mode .server-log-card span,
html.night-mode .server-log-card small,
html.night-mode .server-log-audit-note,
html.night-mode .server-log-panel__meta,
html.night-mode .server-log-empty {
    color: var(--night-muted) !important;
}

html.night-mode .server-log-panel__header,
html.night-mode .server-log-filters,
html.night-mode .server-log-table-wrap,
html.night-mode .server-log-file,
html.night-mode .server-log-pagination,
html.night-mode .server-log-table th,
html.night-mode .server-log-table td {
    border-color: var(--night-border) !important;
}

html.night-mode .server-log-panel__header,
html.night-mode .server-log-filters,
html.night-mode .server-log-file,
html.night-mode .server-log-pagination {
    background: transparent !important;
}

html.night-mode .server-log-input {
    background: var(--night-surface-2) !important;
    border-color: var(--night-border) !important;
    color: var(--night-heading) !important;
    color-scheme: dark !important;
}

html.night-mode .server-log-input:focus {
    border-color: var(--night-accent) !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.18) !important;
    outline: none !important;
}

html.night-mode .server-log-input::placeholder {
    color: var(--night-faint) !important;
}

html.night-mode .server-log-button {
    background: linear-gradient(135deg, #2563eb, #0891b2) !important;
    color: #fff !important;
}

html.night-mode .server-log-button--secondary {
    background: linear-gradient(135deg, #0f766e, #0891b2) !important;
    color: #fff !important;
}

html.night-mode .server-log-button--ghost {
    background: var(--night-surface-2) !important;
    border-color: var(--night-border) !important;
    color: var(--night-heading) !important;
}

html.night-mode .server-log-warning-button {
    background: linear-gradient(135deg, #d97706, #92400e) !important;
    color: #fff !important;
}

html.night-mode .server-log-danger-button {
    background: linear-gradient(135deg, #dc2626, #991b1b) !important;
    color: #fff !important;
}

html.night-mode .server-log-alert--success {
    background: var(--night-success-bg) !important;
    border-color: rgba(134, 239, 172, 0.4) !important;
    color: var(--night-success-text) !important;
}

html.night-mode .server-log-alert--error {
    background: var(--night-danger-bg) !important;
    border-color: rgba(252, 165, 165, 0.42) !important;
    color: var(--night-danger-text) !important;
}

html.night-mode .server-log-system-alert {
    background: rgba(245, 158, 11, 0.13) !important;
    border-color: rgba(251, 191, 36, 0.36) !important;
    color: #fcd34d !important;
}

html.night-mode .server-log-system-alert--critical {
    background: var(--night-danger-bg) !important;
    border-color: rgba(252, 165, 165, 0.42) !important;
    color: var(--night-danger-text) !important;
}

html.night-mode .server-log-table {
    background: transparent !important;
    color: var(--night-text) !important;
}

html.night-mode .server-log-table-wrap {
    background: transparent !important;
}

html.night-mode .server-log-table thead,
html.night-mode .server-log-table tbody,
html.night-mode .server-log-table tr {
    background: transparent !important;
}

html.night-mode .server-log-table th {
    background: var(--night-surface-3) !important;
    color: var(--night-muted) !important;
}

html.night-mode .server-log-table td {
    background: transparent !important;
    color: var(--night-text) !important;
}

html.night-mode .server-log-table tbody tr:hover td {
    background: rgba(96, 165, 250, 0.08) !important;
}

html.night-mode .server-log-badge {
    background: rgba(14, 165, 233, 0.16) !important;
    color: #7dd3fc !important;
}

html.night-mode .server-log-check,
html.night-mode .server-log-status,
html.night-mode .server-log-audit-stat {
    background: var(--night-surface-3) !important;
    border-color: var(--night-border) !important;
    color: var(--night-text) !important;
}

html.night-mode .server-log-status--ok {
    background: var(--night-success-bg) !important;
    border-color: rgba(134, 239, 172, 0.4) !important;
}

html.night-mode .server-log-status--missing {
    background: var(--night-danger-bg) !important;
    border-color: rgba(252, 165, 165, 0.42) !important;
}

html.night-mode .server-log-status strong,
html.night-mode .server-log-audit-stat strong {
    color: var(--night-heading) !important;
}

html.night-mode .server-log-status span,
html.night-mode .server-log-status small,
html.night-mode .server-log-audit-stat span {
    color: var(--night-muted) !important;
}

html.night-mode .server-log-severity--info {
    background: rgba(14, 165, 233, 0.16) !important;
    color: #7dd3fc !important;
}

html.night-mode .server-log-severity--success {
    background: var(--night-success-bg) !important;
    color: var(--night-success-text) !important;
}

html.night-mode .server-log-severity--warning {
    background: rgba(245, 158, 11, 0.16) !important;
    color: #fcd34d !important;
}

html.night-mode .server-log-severity--error,
html.night-mode .server-log-severity--critical {
    background: var(--night-danger-bg) !important;
    color: var(--night-danger-text) !important;
}

html.night-mode .server-log-json,
html.night-mode .server-log-terminal {
    background: #020617 !important;
    border: 1px solid var(--night-border) !important;
    color: #dbeafe !important;
}

html.night-mode .server-log-gauge__track::after {
    background: linear-gradient(180deg, var(--night-surface) 0%, var(--night-surface-2) 100%) !important;
}

html.night-mode .server-log-gauge__needle,
html.night-mode .server-log-gauge__needle::after {
    background: var(--night-heading) !important;
}

html.night-mode .server-log-realtime {
    color: var(--night-muted) !important;
}

html.night-mode .server-log-pagination nav,
html.night-mode .server-log-pagination div,
html.night-mode .server-log-pagination p,
html.night-mode .server-log-pagination span,
html.night-mode .server-log-pagination a {
    background: transparent !important;
    border-color: var(--night-border) !important;
    color: var(--night-muted) !important;
}

html.night-mode .server-log-pagination a:hover {
    background: rgba(96, 165, 250, 0.1) !important;
    color: var(--night-heading) !important;
}

html.night-mode .server-log-pagination [aria-current="page"] span {
    background: linear-gradient(135deg, #2563eb, #0891b2) !important;
    border-color: transparent !important;
    color: #fff !important;
}

html.night-mode .server-log-pagination svg {
    color: var(--night-muted) !important;
    fill: currentColor !important;
}

html.night-mode :where(
    .tax-page,
    .profit-page,
    .balance-page
) {
    background: radial-gradient(circle at top right, rgba(14, 165, 233, 0.12), transparent 30%),
        var(--night-bg) !important;
    color: var(--night-text) !important;
}

html.night-mode :where(
    .tax-panel,
    .tax-card,
    .tax-compliance-item,
    .profit-panel,
    .profit-card,
    .profit-breakdown-item,
    .balance-panel,
    .balance-card,
    .balance-line,
    .balance-equation
) {
    background: linear-gradient(180deg, rgba(17, 24, 39, 0.98), rgba(15, 23, 42, 0.98)) !important;
    border-color: var(--night-border) !important;
    color: var(--night-text) !important;
    box-shadow: var(--night-shadow) !important;
}

html.night-mode :where(
    .tax-title,
    .tax-panel h2,
    .tax-card strong,
    .tax-invoice-title,
    .tax-money,
    .tax-compliance-item strong,
    .profit-title,
    .profit-panel h2,
    .profit-card strong,
    .profit-breakdown-head strong,
    .profit-breakdown-head span,
    .profit-trend-label,
    .profit-trend-total,
    .profit-row-title,
    .profit-money,
    .balance-title,
    .balance-panel h2,
    .balance-card strong,
    .balance-line-head span,
    .balance-line-head strong,
    .balance-equation strong,
    .balance-row-title,
    .balance-money
) {
    color: var(--night-heading) !important;
}

html.night-mode :where(
    .tax-subtitle,
    .tax-panel-note,
    .tax-card span,
    .tax-card small,
    .tax-field label,
    .tax-meta,
    .tax-empty,
    .tax-compliance-item span,
    .profit-subtitle,
    .profit-note,
    .profit-card span,
    .profit-card small,
    .profit-field label,
    .profit-meta,
    .profit-empty,
    .balance-subtitle,
    .balance-note,
    .balance-card span,
    .balance-card small,
    .balance-field label,
    .balance-line p,
    .balance-equation span,
    .balance-meta,
    .balance-empty
) {
    color: var(--night-muted) !important;
}

html.night-mode :where(
    .tax-control,
    .profit-control,
    .balance-control
) {
    background: #020617 !important;
    border-color: var(--night-border) !important;
    color: var(--night-heading) !important;
}

html.night-mode :where(
    .tax-control:focus,
    .profit-control:focus,
    .balance-control:focus
) {
    border-color: var(--night-accent) !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.18) !important;
    outline: none !important;
}

html.night-mode :where(
    .tax-btn-light,
    .profit-btn-light,
    .balance-btn-light
) {
    background: var(--night-surface-2) !important;
    border-color: var(--night-border) !important;
    color: var(--night-heading) !important;
}

html.night-mode :where(
    .tax-table,
    .profit-table,
    .balance-table
) {
    background: transparent !important;
    border-color: var(--night-border) !important;
    color: var(--night-text) !important;
}

html.night-mode :where(
    .tax-table th,
    .profit-table th,
    .balance-table th
) {
    background: linear-gradient(135deg, #1d4ed8, #0e7490) !important;
    color: #fff !important;
}

html.night-mode :where(
    .tax-table td,
    .profit-table td,
    .balance-table td
) {
    background: transparent !important;
    border-color: var(--night-border) !important;
    color: var(--night-text) !important;
}

html.night-mode :where(
    .tax-table tbody tr:hover,
    .profit-table tbody tr:hover,
    .balance-table tbody tr:hover
) {
    background: rgba(96, 165, 250, 0.08) !important;
}

html.night-mode :where(
    .tax-badge-muted,
    .profit-trend-track,
    .profit-progress,
    .balance-badge,
    .balance-total
) {
    background: var(--night-surface-3) !important;
    border-color: var(--night-border) !important;
    color: var(--night-muted) !important;
}

html.night-mode .tax-badge-paid {
    background: var(--night-success-bg) !important;
    color: var(--night-success-text) !important;
}

html.night-mode .tax-badge-pending,
html.night-mode .balance-badge-pending {
    background: var(--night-warning-bg) !important;
    color: var(--night-warning-text) !important;
}

html.night-mode .tax-badge-overdue,
html.night-mode .balance-badge-overdue {
    background: var(--night-danger-bg) !important;
    color: var(--night-danger-text) !important;
}

html.night-mode .profit-card strong.is-negative {
    color: var(--night-danger-text) !important;
}

html.night-mode .profit-progress,
html.night-mode .profit-trend-track {
    background: #020617 !important;
}

html.night-mode .profit-page .profit-table-wrap {
    background: #020617 !important;
    border: 1px solid var(--night-border) !important;
    border-radius: 12px !important;
}

html.night-mode .profit-page table.profit-table {
    background: #020617 !important;
    color: var(--night-text) !important;
}

html.night-mode .profit-page .profit-table thead,
html.night-mode .profit-page .profit-table tbody,
html.night-mode .profit-page .profit-table tr {
    background: transparent !important;
}

html.night-mode .profit-page .profit-table tbody tr:nth-child(even) {
    background: rgba(15, 23, 42, 0.72) !important;
}

html.night-mode .profit-page .profit-table tbody tr:hover {
    background: rgba(96, 165, 250, 0.1) !important;
}

html.night-mode .profit-page .profit-table th {
    background: linear-gradient(135deg, #1d4ed8, #0e7490) !important;
    border-color: rgba(148, 163, 184, 0.22) !important;
    color: #ffffff !important;
}

html.night-mode .profit-page .profit-table td {
    background: transparent !important;
    border-color: var(--night-border) !important;
    color: var(--night-text) !important;
}

html.night-mode .profit-page .profit-table td.profit-empty {
    background: #020617 !important;
    color: var(--night-muted) !important;
}

html.night-mode .profit-page .profit-table .profit-row-title,
html.night-mode .profit-page .profit-table .profit-money {
    color: var(--night-heading) !important;
}

html.night-mode .profit-page .profit-table .profit-meta {
    color: var(--night-muted) !important;
}

html.night-mode .tax-page .tax-table-wrap {
    background: #020617 !important;
    border: 1px solid var(--night-border) !important;
    border-radius: 12px !important;
}

html.night-mode .tax-page table.tax-table {
    background: #020617 !important;
    color: var(--night-text) !important;
}

html.night-mode .tax-page .tax-table thead,
html.night-mode .tax-page .tax-table tbody,
html.night-mode .tax-page .tax-table tr {
    background: transparent !important;
}

html.night-mode .tax-page .tax-table tbody tr:nth-child(even) {
    background: rgba(15, 23, 42, 0.72) !important;
}

html.night-mode .tax-page .tax-table tbody tr:hover {
    background: rgba(96, 165, 250, 0.1) !important;
}

html.night-mode .tax-page .tax-table th {
    background: linear-gradient(135deg, #1d4ed8, #0e7490) !important;
    border-color: rgba(148, 163, 184, 0.22) !important;
    color: #ffffff !important;
}

html.night-mode .tax-page .tax-table td {
    background: transparent !important;
    border-color: var(--night-border) !important;
    color: var(--night-text) !important;
}

html.night-mode .tax-page .tax-table td.tax-empty {
    background: #020617 !important;
    color: var(--night-muted) !important;
}

html.night-mode .tax-page .tax-table .tax-invoice-title,
html.night-mode .tax-page .tax-table .tax-money {
    color: var(--night-heading) !important;
}

html.night-mode .tax-page .tax-table .tax-meta {
    color: var(--night-muted) !important;
}

html.night-mode .tax-page .tax-table .tax-badge-muted {
    background: var(--night-surface-3) !important;
    border-color: var(--night-border) !important;
    color: var(--night-muted) !important;
}

html.night-mode .balance-page .balance-table-wrap {
    background: #020617 !important;
    border: 1px solid var(--night-border) !important;
    border-radius: 12px !important;
}

html.night-mode .balance-page table.balance-table {
    background: #020617 !important;
    color: var(--night-text) !important;
}

html.night-mode .balance-page .balance-table thead,
html.night-mode .balance-page .balance-table tbody,
html.night-mode .balance-page .balance-table tr {
    background: transparent !important;
}

html.night-mode .balance-page .balance-table tbody tr:nth-child(even) {
    background: rgba(15, 23, 42, 0.72) !important;
}

html.night-mode .balance-page .balance-table tbody tr:hover {
    background: rgba(96, 165, 250, 0.1) !important;
}

html.night-mode .balance-page .balance-table th {
    background: linear-gradient(135deg, #1d4ed8, #0e7490) !important;
    border-color: rgba(148, 163, 184, 0.22) !important;
    color: #ffffff !important;
}

html.night-mode .balance-page .balance-table td {
    background: transparent !important;
    border-color: var(--night-border) !important;
    color: var(--night-text) !important;
}

html.night-mode .balance-page .balance-table td.balance-empty {
    background: #020617 !important;
    color: var(--night-muted) !important;
}

html.night-mode .balance-page .balance-table .balance-row-title,
html.night-mode .balance-page .balance-table .balance-money {
    color: var(--night-heading) !important;
}

html.night-mode .balance-page .balance-table .balance-meta {
    color: var(--night-muted) !important;
}

html.night-mode .balance-page .balance-table .balance-badge-pending {
    background: var(--night-warning-bg) !important;
    color: var(--night-warning-text) !important;
}

html.night-mode .balance-page .balance-table .balance-badge-overdue {
    background: var(--night-danger-bg) !important;
    color: var(--night-danger-text) !important;
}

html.night-mode .balance-total {
    background: rgba(37, 99, 235, 0.14) !important;
}

html.night-mode .balance-total span,
html.night-mode .balance-total strong {
    color: #bfdbfe !important;
}

html.night-mode :where(
    .company-page,
    .company-summary,
    .company-section-grid
) {
    color: var(--night-text) !important;
}

html.night-mode :where(
    .company-card,
    .company-section-card
) {
    background: linear-gradient(180deg, rgba(17, 24, 39, 0.98), rgba(15, 23, 42, 0.98)) !important;
    border-color: var(--night-border) !important;
    color: var(--night-text) !important;
    box-shadow: var(--night-shadow) !important;
}

html.night-mode :where(
    .company-profile-title h2,
    .company-card h2,
    .company-section-card h3,
    .company-info-list strong
) {
    color: var(--night-heading) !important;
}

html.night-mode :where(
    .company-profile-title p,
    .company-card p,
    .company-section-card p,
    .company-info-list span
) {
    color: var(--night-muted) !important;
}

html.night-mode .company-info-list div {
    border-bottom-color: var(--night-border) !important;
}

html.night-mode .company-section-status {
    background: rgba(37, 99, 235, 0.18) !important;
    color: #bfdbfe !important;
}

html.night-mode :where(
    .company-table-wrap,
    .company-table th,
    .company-table td
) {
    border-color: var(--night-border) !important;
}

html.night-mode .company-table th {
    background: var(--night-surface-3) !important;
    color: var(--night-muted) !important;
}

html.night-mode .company-table td {
    background: rgba(15, 23, 42, 0.68) !important;
    color: var(--night-text) !important;
}

html.night-mode .company-table td strong {
    color: var(--night-heading) !important;
}

html.night-mode .company-danger-btn {
    background: var(--night-danger-bg) !important;
    border-color: rgba(239, 68, 68, 0.28) !important;
    color: var(--night-danger-text) !important;
}

html.night-mode .export-page {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(2, 6, 23, 0.98)) !important;
    border: 1px solid var(--night-border) !important;
    color: var(--night-text) !important;
    box-shadow: var(--night-shadow) !important;
}

html.night-mode .export-header h1,
html.night-mode .export-card h2,
html.night-mode .sample-table-card h2 {
    color: var(--night-heading) !important;
}

html.night-mode .export-header p,
html.night-mode .export-card p,
html.night-mode .info-hint {
    color: var(--night-muted) !important;
}

html.night-mode .export-card,
html.night-mode .sample-table-card {
    background: linear-gradient(180deg, rgba(17, 24, 39, 0.98), rgba(15, 23, 42, 0.98)) !important;
    border-color: var(--night-border) !important;
    color: var(--night-text) !important;
    box-shadow: var(--night-shadow) !important;
}

html.night-mode .export-form label {
    color: var(--night-muted) !important;
}

html.night-mode .export-form select,
html.night-mode .export-form input[type="file"] {
    background: var(--night-surface-2) !important;
    border-color: var(--night-border) !important;
    color: var(--night-text) !important;
}

html.night-mode .export-form select:focus,
html.night-mode .export-form input[type="file"]:focus {
    border-color: rgba(96, 165, 250, 0.8) !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.18) !important;
}

html.night-mode .sample-table-wrapper {
    background: #020617 !important;
    border-color: var(--night-border) !important;
}

html.night-mode .sample-table th {
    background: linear-gradient(135deg, #1d4ed8, #0e7490) !important;
    color: #ffffff !important;
}

html.night-mode .sample-table td {
    background: rgba(15, 23, 42, 0.68) !important;
    border-bottom-color: var(--night-border) !important;
    color: var(--night-text) !important;
}

html.night-mode .sample-table tr:hover td {
    background: rgba(96, 165, 250, 0.1) !important;
}

html.night-mode .export-alert--success {
    background: var(--night-success-bg) !important;
    border-color: rgba(34, 197, 94, 0.3) !important;
    color: var(--night-success-text) !important;
}

html.night-mode .export-alert--error {
    background: var(--night-danger-bg) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
    color: var(--night-danger-text) !important;
}

html.night-mode .export-alert--warning {
    background: var(--night-warning-bg) !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
    color: var(--night-warning-text) !important;
}

html.night-mode :where(
    .tax-pagination nav,
    .tax-pagination div,
    .tax-pagination p,
    .tax-pagination span,
    .tax-pagination a
) {
    background: transparent !important;
    border-color: var(--night-border) !important;
    color: var(--night-muted) !important;
}

html.night-mode .tax-pagination [aria-current="page"] span {
    background: linear-gradient(135deg, #2563eb, #0891b2) !important;
    border-color: transparent !important;
    color: #fff !important;
}

html.night-mode ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

html.night-mode ::-webkit-scrollbar-track {
    background: #0b1220;
}

html.night-mode ::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 999px;
}

html.night-mode ::-webkit-scrollbar-thumb:hover {
    background: #475569;
}

html.night-mode .invoice-page-panel .invoice-index-table thead th {
    background: linear-gradient(135deg, #1d4ed8, #0e7490) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    color: #f8fafc !important;
}

html.night-mode .invoice-page-panel .invoice-index-table thead th a {
    color: #f8fafc !important;
    text-decoration: none !important;
}

html.night-mode .invoice-page-panel .invoice-index-table thead th a:hover {
    color: #dbeafe !important;
}

html.night-mode .invoice-flash-toast {
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.42) !important;
}

html.night-mode .invoice-flash-toast.alert-success {
    background: rgba(6, 78, 59, 0.96) !important;
    border-color: rgba(52, 211, 153, 0.38) !important;
    color: #d1fae5 !important;
}

html.night-mode .invoice-flash-toast.alert-warning {
    background: rgba(120, 53, 15, 0.96) !important;
    border-color: rgba(251, 191, 36, 0.42) !important;
    color: #fef3c7 !important;
}

html.night-mode .invoice-flash-toast.alert-danger,
html.night-mode .invoice-flash-toast.alert-error {
    background: rgba(127, 29, 29, 0.96) !important;
    border-color: rgba(248, 113, 113, 0.44) !important;
    color: #fee2e2 !important;
}

html.night-mode .dashboard-page {
    background: rgba(7, 11, 20, 0.98) !important;
    color: var(--night-text) !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34) !important;
}

html.night-mode .dashboard-page .dashboard-title,
html.night-mode .dashboard-page .panel-header h3,
html.night-mode .dashboard-page .timeline-title,
html.night-mode .dashboard-page .customer-name,
html.night-mode .dashboard-page .quick-link-label,
html.night-mode .dashboard-page .ping-value {
    color: var(--night-heading) !important;
}

html.night-mode .dashboard-page .dashboard-subtitle,
html.night-mode .dashboard-page .panel-hint,
html.night-mode .dashboard-page .timeline-note,
html.night-mode .dashboard-page .timeline-time,
html.night-mode .dashboard-page .customer-meta,
html.night-mode .dashboard-page .quick-link-desc,
html.night-mode .dashboard-page .dashboard-chart-meta,
html.night-mode .dashboard-page .ping-meta,
html.night-mode .dashboard-page .ping-note,
html.night-mode .dashboard-page .empty-table,
html.night-mode .dashboard-page .timeline-empty {
    color: var(--night-muted) !important;
}

html.night-mode .dashboard-page .stat-card,
html.night-mode .dashboard-page .panel,
html.night-mode .dashboard-page .dashboard-chart-card {
    background: rgba(15, 23, 42, 0.92) !important;
    border: 1px solid var(--night-border-soft) !important;
    box-shadow: var(--night-shadow) !important;
}

html.night-mode .dashboard-page .stat-card--link,
html.night-mode .dashboard-page .stat-card--link:visited,
html.night-mode .dashboard-page .quick-link,
html.night-mode .dashboard-page .quick-link:visited {
    color: var(--night-text) !important;
    text-decoration: none !important;
}

html.night-mode .dashboard-page .stat-label {
    color: #d6e0ef !important;
}

html.night-mode .dashboard-page .stat-value {
    color: #ffffff !important;
}

html.night-mode .dashboard-page .stat-more,
html.night-mode .dashboard-page .panel-link {
    color: #93c5fd !important;
}

html.night-mode .dashboard-page .stat-more i,
html.night-mode .dashboard-page .panel-link i {
    color: inherit !important;
}

html.night-mode .dashboard-page .stat-card--link:hover,
html.night-mode .dashboard-page .stat-card--link:focus,
html.night-mode .dashboard-page .quick-link:hover,
html.night-mode .dashboard-page .quick-link:focus {
    color: var(--night-heading) !important;
}

html.night-mode .dashboard-page .dashboard-action-toggle {
    background: rgba(15, 23, 42, 0.95) !important;
    border-color: var(--night-border-soft) !important;
    color: var(--night-heading) !important;
}

html.night-mode .dashboard-page .dashboard-actions .btn-action,
html.night-mode .dashboard-page .dashboard-actions .btn-action:visited,
html.night-mode .dashboard-page .dashboard-actions .btn-action:hover,
html.night-mode .dashboard-page .dashboard-actions .btn-action:focus {
    color: #ffffff !important;
    text-decoration: none !important;
}

html.night-mode .dashboard-page .timeline-item,
html.night-mode .dashboard-page .quick-link,
html.night-mode .dashboard-page .timeline-empty {
    background: rgba(15, 23, 42, 0.72) !important;
    border-color: var(--night-border-soft) !important;
}

html.night-mode .dashboard-page .theme-table tbody td {
    color: var(--night-text) !important;
}

html.night-mode .dashboard-page .badge-status-aktif {
    color: #bbf7d0 !important;
}

html.night-mode .dashboard-page .badge-status-nonaktif,
html.night-mode .dashboard-page .badge-status-suspend {
    color: #fecaca !important;
}

html.night-mode .dashboard-page .badge-status-pending,
html.night-mode .dashboard-page .badge-status-menunggak {
    color: #fde68a !important;
}

html.night-mode .dashboard-page .badge-status-default {
    color: #e5e7eb !important;
}

@media (max-width: 768px) {
    html.night-mode .content {
        margin-left: 0 !important;
        padding: 16px !important;
    }
}