/**
 * Theme Global — terapkan variabel tema ke SELURUH UI admin + portal
 * Bergantung pada [data-ui-theme] yang di-set theme-boot.js
 */

/* ── Alias variabel portal & halaman legacy (kuat — timpa inline :root) ── */
html[data-ui-theme],
html.portal-page[data-ui-theme] {
  --blue: var(--primary) !important;
  --blue2: var(--primary-dark) !important;
  --blue3: var(--primary-dark) !important;
  --blue-dark: var(--portal-hero-bg) !important;
  --teal: var(--accent) !important;
  --card: var(--bg-card) !important;
  --muted: var(--text-secondary) !important;
  --muted2: var(--text-muted) !important;
  --red: var(--danger) !important;
  --green: var(--success) !important;
  --amber: var(--warning) !important;
  --orange: var(--orange) !important;
  --radius: var(--radius, 12px);
  --font: 'DM Sans', 'Plus Jakarta Sans', system-ui, sans-serif;
}

/* ── Layout admin ─────────────────────────────────────────────── */
html, body { background: var(--bg) !important; color: var(--text) !important; }
.app-layout { background: var(--bg); }
.main-content { background: var(--bg); color: var(--text); }
.page-content { color: var(--text); }

/* ── Kartu, panel, tabel ──────────────────────────────────────── */
.card,
.stat-card,
.pm-tbl-wrap,
.pm-ctrl,
.pm-cards,
.st-card,
.st-nav,
.data-table,
.table-wrap,
.panel,
.content-card,
.dash-card,
.device-card,
.filter-bar,
.toolbar,
.modal-content,
.modal-box,
.dropdown-menu,
.notif-panel,
.global-search-dropdown,
.bn-menu,
.bottom-nav {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
  color: var(--text);
}

.card-header,
.pm-tbl-hdr,
.st-card-hdr,
.modal-header,
.data-table thead tr {
  background: var(--surface-muted) !important;
  border-color: var(--border) !important;
  color: var(--text);
}

.data-table th {
  background: var(--surface-muted) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border) !important;
}

.data-table td,
.interface-item,
.notif-item,
.gsd-item {
  border-color: var(--border) !important;
  color: var(--text);
}

.data-table tbody tr:hover,
.interface-item:hover,
.gsd-item:hover,
.notif-item:hover {
  background: var(--surface-hover) !important;
}

/* ── Form & input ─────────────────────────────────────────────── */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
select,
textarea,
.pf-input,
.search-box input,
.form-control,
.form-input,
.input-field {
  background: var(--input-bg) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--text-muted) !important;
}

/* Kolom pencarian — jangan tampilkan highlight autofill browser */
.search-box input:-webkit-autofill,
.search-box input:-webkit-autofill:hover,
.search-box input:-webkit-autofill:focus,
.search-wrap input:-webkit-autofill,
.list-search input:-webkit-autofill,
.tbl-search input:-webkit-autofill,
.bill-search input:-webkit-autofill,
input[role="searchbox"]:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--input-bg, #fff) inset !important;
  -webkit-text-fill-color: var(--text, #1e293b) !important;
  transition: background-color 99999s ease-out 0s;
}

input:focus, select:focus, textarea:focus,
.pf-input:focus, .form-control:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px var(--focus-ring) !important;
  background: var(--input-bg-focus) !important;
}

.select-sm,
.icon-btn-sm {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

/* ── Tombol ───────────────────────────────────────────────────── */
.btn-primary,
.save-btn,
.btn-blue,
.pf-btn-primary,
button.primary,
.am-btn-primary {
  background: var(--gradient-brand) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}

.btn-outline,
.btn-secondary,
.pf-btn-outline,
.st-nav-item {
  color: var(--text-secondary);
}

.btn-outline:hover,
.pf-btn-outline:hover {
  background: var(--surface-hover) !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}

/* ── Badge & pill ─────────────────────────────────────────────── */
.badge-blue, .nav-badge.blue, .pill-blue { background: var(--surface-active) !important; color: var(--primary-dark) !important; }
.nav-item.active .nav-badge { background: var(--primary) !important; color: #fff !important; }

/* ── Summary / gradient header ──────────────────────────────── */
.summary-cards {
  background: var(--gradient-hero) !important;
}

/* ── Settings page ────────────────────────────────────────────── */
.st-page .st-nav,
.st-page .st-card,
.st-page .theme-card {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
}
.st-page .st-nav-item.active {
  background: var(--surface-active) !important;
  color: var(--primary) !important;
}
.st-page .st-card-hdr {
  background: var(--surface-muted) !important;
}

/* ── Topbar hardcoded overrides ───────────────────────────────── */
.notif-panel-hdr div,
.notif-panel-title,
.notif-title { color: var(--text) !important; }
.notif-panel-sub { color: var(--text-muted) !important; }
.notif-mark-all { color: var(--primary-light) !important; }
.notif-tab:not(.active) { color: var(--text-muted) !important; }
.notif-tab.active { color: var(--primary-light) !important; border-bottom-color: var(--primary) !important; }
.notif-item.unread { background: var(--surface-muted) !important; }
.notif-msg, .notif-time, .gsd-sub { color: var(--text-secondary) !important; }
.notif-bell-btn { color: var(--text-secondary) !important; }
.notif-bell-btn:hover { background: var(--surface-hover) !important; color: var(--primary) !important; }
.bn-item { color: var(--text-muted) !important; }
.bn-item.active, .bn-item:hover { color: var(--primary) !important; }
.bottom-nav { background: var(--bg-card) !important; border-color: var(--border) !important; }

/* ── Login admin ──────────────────────────────────────────────── */
.login-section { background: var(--bg-card) !important; }
.container { background: var(--bg) !important; }
.login-header h1, .logo-text { color: var(--text) !important; }
.login-header p { color: var(--text-secondary) !important; }
.login-box input { background: var(--input-bg) !important; border-color: var(--border) !important; color: var(--text) !important; }
.login-box .logo-icon { background: var(--gradient-brand) !important; }
.promo-section, .login-promo { background: var(--gradient-hero) !important; }

/* ── Portal pelanggan ─────────────────────────────────────────── */
body.portal-page,
.portal-page body {
  background: var(--bg) !important;
  color: var(--text) !important;
}

.portal-page body {
  background: var(--bg) !important;
  color: var(--text) !important;
}

.portal-page .hero {
  background: var(--portal-hero-gradient) !important;
}

.portal-page body.portal-page {
  background: var(--bg) !important;
}

.portal-page .inet-card {
  background: var(--portal-card-gradient) !important;
  box-shadow: 0 12px 36px var(--portal-card-shadow) !important;
}

.portal-page .hero,
.portal-page .hero-content {
  color: #fff;
}

.portal-page .bottom-nav-portal,
.portal-page .nav-bottom {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
}

.portal-page .card-item,
.portal-page .menu-card,
.portal-page .bill-card,
.portal-page .ticket-card,
.portal-page .sheet,
.portal-page .modal-sheet,
.portal-page .pkg-sheet {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

.portal-page .section-title,
.portal-page .card-title { color: var(--text) !important; }
.portal-page .section-sub,
.portal-page .card-sub { color: var(--text-secondary) !important; }

.portal-page .btn-primary-portal,
.portal-page .btn-pay,
.portal-page .submit-btn {
  background: var(--gradient-brand) !important;
  color: #fff !important;
}

.portal-page input,
.portal-page select,
.portal-page textarea {
  background: var(--input-bg) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

/* ── Halaman dengan inline :root hardcoded ────────────────────── */
[data-ui-theme] h1,
[data-ui-theme] h2,
[data-ui-theme] h3,
[data-ui-theme] .page-title {
  color: var(--text);
}

[data-ui-theme] .text-muted,
[data-ui-theme] .subtitle,
[data-ui-theme] .desc {
  color: var(--text-secondary) !important;
}

/* ── Midnight: teks putih di area gelap ───────────────────────── */
[data-ui-theme="midnight"] .st-page { --d-bg: var(--bg); --d-card: var(--bg-card); --d-border: var(--border); --d-text: var(--text); --d-muted: var(--text-secondary); --d-blue1: var(--primary); }
[data-ui-theme="midnight"] .st-card-hdr { background: var(--surface-hover) !important; }
[data-ui-theme="midnight"] .pf-label,
[data-ui-theme="midnight"] .st-card-hdr div { color: var(--text) !important; }
[data-ui-theme="midnight"] .theme-card { background: var(--bg-card) !important; }
[data-ui-theme="midnight"] .chart-range-btns { background: var(--surface-hover) !important; }
[data-ui-theme="midnight"] .live-badge { background: rgba(34,197,94,.15) !important; border-color: rgba(34,197,94,.3) !important; }
[data-ui-theme="midnight"] .sidebar-backdrop { background: rgba(0,0,0,.6); }

/* ── Scrollbar halus (dark) ───────────────────────────────────── */
[data-ui-theme="midnight"] ::-webkit-scrollbar { width: 8px; height: 8px; }
[data-ui-theme="midnight"] ::-webkit-scrollbar-track { background: var(--bg); }
[data-ui-theme="midnight"] ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

/* ═══════════════════════════════════════════════════════════════
   TIPOGRAFI — font jelas di semua halaman
   ═══════════════════════════════════════════════════════════════ */
html[data-ui-theme],
html.portal-page[data-ui-theme] {
  font-family: var(--font-sans) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

html[data-ui-theme] body,
html.portal-page[data-ui-theme] body {
  font-family: var(--font-sans) !important;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: -0.01em;
}

html[data-ui-theme] h1,
html[data-ui-theme] h2,
html[data-ui-theme] h3,
html[data-ui-theme] h4,
html.portal-page[data-ui-theme] h1,
html.portal-page[data-ui-theme] h2,
html.portal-page[data-ui-theme] h3 {
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}

html[data-ui-theme] .mono,
html[data-ui-theme] [class*="mono"],
html.portal-page[data-ui-theme] .sig-val,
html.portal-page[data-ui-theme] .ucs-val,
html.portal-page[data-ui-theme] .stat-val {
  font-family: var(--font-mono) !important;
}

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR & NAVBAR ADMIN
   ═══════════════════════════════════════════════════════════════ */
html[data-ui-theme] .sidebar {
  background: var(--bg-sidebar) !important;
  border-right: 1px solid var(--border) !important;
  box-shadow: var(--shadow-sm);
}

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

html[data-ui-theme] .sidebar-footer,
html[data-ui-theme] .sidebar-profile {
  background: var(--bg-sidebar) !important;
}

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

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

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

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

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

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

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

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

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

html[data-ui-theme] .nav-item.active .nav-icon {
  color: var(--primary) !important;
}

html[data-ui-theme] .topbar {
  background: var(--topbar-bg) !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--text);
}

html[data-ui-theme] .topbar-greeting h2 {
  color: var(--text) !important;
}

html[data-ui-theme] .topbar-date {
  color: var(--text-muted) !important;
}

html[data-ui-theme] .page-header,
html[data-ui-theme] .page-title-bar {
  color: var(--text);
}

html[data-ui-theme] .bottom-nav {
  background: var(--bg-card) !important;
  border-top: 1px solid var(--border) !important;
  box-shadow: 0 -2px 12px rgba(0,0,0,.06);
}

html[data-ui-theme] .bn-menu {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
}

html[data-ui-theme] .bn-menu-item {
  background: var(--surface-hover) !important;
  color: var(--text) !important;
}

/* ═══════════════════════════════════════════════════════════════
   GRAFIK APEXCHARTS — label & grid ikut tema
   ═══════════════════════════════════════════════════════════════ */
html[data-ui-theme] .apexcharts-canvas,
html[data-ui-theme] .apexcharts-svg {
  background: transparent !important;
}

html[data-ui-theme] .apexcharts-text,
html[data-ui-theme] .apexcharts-title-text {
  fill: var(--chart-label) !important;
}

html[data-ui-theme] .apexcharts-legend-text {
  color: var(--chart-label) !important;
}

html[data-ui-theme] .apexcharts-gridline,
html[data-ui-theme] .apexcharts-grid-borders line {
  stroke: var(--chart-grid) !important;
}

html[data-ui-theme] .apexcharts-xaxis-tick,
html[data-ui-theme] .apexcharts-yaxis-tick {
  stroke: var(--chart-grid) !important;
}

html[data-ui-theme] .chart-wrap,
html[data-ui-theme] .chart-container,
html[data-ui-theme] .chart-card,
html[data-ui-theme] .traffic-chart-wrap,
html[data-ui-theme] #activityChart,
html[data-ui-theme] .dash-chart-area {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
}

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

html[data-ui-theme] .chart-range-btns button,
html[data-ui-theme] .period-btns button {
  color: var(--text-muted) !important;
}

html[data-ui-theme] .chart-range-btns button.active,
html[data-ui-theme] .period-btns button.active {
  background: var(--bg-card) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow-sm);
}

/* ═══════════════════════════════════════════════════════════════
   PORTAL PELANGGAN — menu, navbar, kartu, grafik
   ═══════════════════════════════════════════════════════════════ */
html.portal-page[data-ui-theme] body.portal-page {
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: var(--font-sans) !important;
}

html.portal-page[data-ui-theme] .hero {
  background: var(--portal-hero-gradient) !important;
}

html.portal-page[data-ui-theme] .bottom-nav {
  background: var(--bg-card) !important;
  border-top: 1px solid var(--border) !important;
}

html.portal-page[data-ui-theme] .bn-item {
  color: var(--text-muted) !important;
}

html.portal-page[data-ui-theme] .bn-item.active {
  color: var(--primary) !important;
}

html.portal-page[data-ui-theme] .bn-item svg {
  stroke: currentColor;
}

html.portal-page[data-ui-theme] .card-item,
html.portal-page[data-ui-theme] .menu-grid .card,
html.portal-page[data-ui-theme] .info-card,
html.portal-page[data-ui-theme] .bill-row,
html.portal-page[data-ui-theme] .pkg-card {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

html.portal-page[data-ui-theme] .usage-chart-wrap {
  background: var(--surface-muted) !important;
  border: 1px solid var(--border);
}

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

html.portal-page[data-ui-theme] .ct-tab {
  color: var(--text-muted) !important;
}

html.portal-page[data-ui-theme] .ct-tab:hover:not(.active) {
  color: var(--text) !important;
  background: rgba(255,255,255,.35) !important;
}

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

html.portal-page[data-ui-theme] .ucs-item {
  background: var(--bg-card) !important;
  border: 1px solid var(--border);
}

html.portal-page[data-ui-theme] .ucs-lbl {
  color: var(--text-muted) !important;
}

html.portal-page[data-ui-theme] .ucs-val {
  color: var(--text) !important;
}

html.portal-page[data-ui-theme] .usage-chart-area {
  background: var(--bg-card) !important;
  border: 1px solid var(--border);
}

html.portal-page[data-ui-theme] .uc-tooltip {
  background: var(--chart-tooltip-bg) !important;
  color: #fff !important;
}

html.portal-page[data-ui-theme] .uc-tooltip .tt-dl {
  color: var(--primary-light) !important;
}

html.portal-page[data-ui-theme] .uc-tooltip .tt-ul {
  color: var(--success) !important;
}

html.portal-page[data-ui-theme] .sig-card,
html.portal-page[data-ui-theme] .stat-card,
html.portal-page[data-ui-theme] .pay-method {
  background: var(--surface-muted) !important;
  border-color: var(--border) !important;
}

html.portal-page[data-ui-theme] .pay-method.selected {
  border-color: var(--primary) !important;
  background: var(--surface-active) !important;
}

html.portal-page[data-ui-theme] .modal-sheet {
  background: var(--bg-card) !important;
  color: var(--text) !important;
}

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

html.portal-page[data-ui-theme] .period-btns {
  background: var(--surface-muted) !important;
}

html.portal-page[data-ui-theme] .period-btns button.active {
  background: var(--bg-card) !important;
  color: var(--text) !important;
}

html.portal-page[data-ui-theme] .ticket-item {
  border-color: var(--border) !important;
}

html.portal-page[data-ui-theme] .tk-icon.open {
  background: var(--surface-active) !important;
  color: var(--primary) !important;
}

/* Portal login */
html.portal-page[data-ui-theme] body.portal-page.login-body,
html.portal-page[data-ui-theme] .login-page body {
  background: var(--portal-hero-bg) !important;
}

html.portal-page[data-ui-theme] .login-card,
html.portal-page[data-ui-theme] .form-card {
  background: var(--bg-card) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

html.portal-page[data-ui-theme] .form-label {
  color: var(--text-secondary) !important;
}

html.portal-page[data-ui-theme] .form-hint {
  color: var(--text-muted) !important;
}

html.portal-page[data-ui-theme] .sheet {
  background: var(--bg-card) !important;
  color: var(--text) !important;
}

html.portal-page[data-ui-theme] .welcome h2,
html.portal-page[data-ui-theme] .brand-name {
  color: var(--text) !important;
}

html.portal-page[data-ui-theme] .help-txt {
  color: var(--text-muted) !important;
}

html.portal-page[data-ui-theme] .help-btn {
  background: var(--gradient-brand) !important;
}

html.portal-page[data-ui-theme] input,
html.portal-page[data-ui-theme] .input-wrap input {
  background: var(--input-bg) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

html.portal-page[data-ui-theme] .hint {
  background: var(--surface-muted) !important;
  border-color: var(--border) !important;
  color: var(--text-secondary) !important;
}

html.portal-page[data-ui-theme] .hint strong {
  color: var(--text) !important;
}

html.portal-page[data-ui-theme] .input-card {
  background: var(--input-bg) !important;
  border-color: var(--border) !important;
}

html.portal-page[data-ui-theme] .input-card:focus-within {
  background: var(--input-bg-focus) !important;
  border-color: var(--primary) !important;
}

html.portal-page[data-ui-theme] .input-card .input-row input,
html.portal-page[data-ui-theme] .input-card input {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--text) !important;
}

html.portal-page[data-ui-theme] .input-card .input-row input::placeholder {
  color: var(--text-muted) !important;
}

html.portal-page[data-ui-theme] .input-card .input-row input:-webkit-autofill,
html.portal-page[data-ui-theme] .input-card .input-row input:-webkit-autofill:hover,
html.portal-page[data-ui-theme] .input-card .input-row input:-webkit-autofill:focus,
html.portal-page[data-ui-theme] .input-card .input-row input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--input-bg) inset !important;
  box-shadow: 0 0 0 1000px var(--input-bg) inset !important;
  -webkit-text-fill-color: var(--text) !important;
  caret-color: var(--text);
}

html.portal-page[data-ui-theme] .input-card:focus-within .input-row input:-webkit-autofill,
html.portal-page[data-ui-theme] .input-card:focus-within .input-row input:-webkit-autofill:hover,
html.portal-page[data-ui-theme] .input-card:focus-within .input-row input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--input-bg-focus) inset !important;
  box-shadow: 0 0 0 1000px var(--input-bg-focus) inset !important;
}

html.portal-page[data-ui-theme] .welcome p,
html.portal-page[data-ui-theme] .forgot a {
  color: var(--text-muted) !important;
}

html.portal-page[data-ui-theme] .forgot a:hover {
  color: var(--primary-light) !important;
}

html.portal-page[data-ui-theme] .toggle-pw {
  color: var(--text-muted) !important;
}

html.portal-page[data-ui-theme] .sheet::before {
  background: var(--border) !important;
}

html.portal-page[data-ui-theme] .w-card {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

html.portal-page[data-ui-theme] .w-card-title {
  color: var(--text) !important;
}

html.portal-page[data-ui-theme] .info-item {
  background: var(--surface-hover) !important;
  border: 1px solid var(--border) !important;
}

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

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

html.portal-page[data-ui-theme] .shimmer {
  background: linear-gradient(90deg, var(--surface-muted) 25%, var(--border) 50%, var(--surface-muted) 75%) !important;
  background-size: 200% 100% !important;
}

html.portal-page[data-ui-theme] .inv-item {
  border-bottom-color: var(--border) !important;
}

/* Portal — Pengaturan WiFi */
html.portal-page[data-ui-theme] .wifi-tabs {
  background: var(--surface-muted) !important;
}

html.portal-page[data-ui-theme] .wifi-tab {
  color: var(--text-muted) !important;
}

html.portal-page[data-ui-theme] .wifi-tab.active {
  background: var(--bg-card) !important;
  color: var(--primary) !important;
  box-shadow: var(--shadow-sm) !important;
}

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

html.portal-page[data-ui-theme] .form-label,
html.portal-page[data-ui-theme] .wifi-hint,
html.portal-page[data-ui-theme] .wifi-show5g,
html.portal-page[data-ui-theme] .wifi-clients-summary {
  color: var(--text-muted) !important;
}

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

html.portal-page[data-ui-theme] .form-input:focus {
  background: var(--input-bg-focus) !important;
  border-color: var(--primary) !important;
}

html.portal-page[data-ui-theme] .wifi-notice {
  background: rgba(251, 191, 36, 0.12) !important;
  border-color: rgba(251, 191, 36, 0.35) !important;
  color: var(--warning) !important;
}

html.portal-page[data-ui-theme] .btn-wifi-refresh {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
  color: var(--text-muted) !important;
}

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

html.portal-page[data-ui-theme] .wifi-client-ip {
  background: var(--surface-muted) !important;
  color: var(--text-secondary) !important;
}

html.portal-page[data-ui-theme] .wifi-save-box,
html.portal-page[data-ui-theme] .wifi-success-box {
  background: var(--bg-card) !important;
  color: var(--text) !important;
}

html.portal-page[data-ui-theme] .lg-dot.dl {
  background: var(--primary) !important;
}

html.portal-page[data-ui-theme] .lg-dot.ul {
  background: var(--success) !important;
}

/* Midnight portal tweaks */
[data-ui-theme="midnight"].portal-page .ct-tab:hover:not(.active) {
  background: rgba(255,255,255,.08) !important;
}

[data-ui-theme="midnight"].portal-page .uc-spinner {
  border-color: var(--border) !important;
  border-top-color: var(--primary) !important;
}

/* ── Global toast (App.showToast) ─────────────────────────────── */
.app-toast {
  position: fixed;
  top: 80px;
  right: 24px;
  z-index: 9999;
  max-width: 360px;
  padding: 14px 20px;
  border-radius: 10px;
  border: 1px solid var(--border, #e2e8f0);
  border-left-width: 4px;
  background: var(--bg-card, #fff);
  color: var(--text, #0f172a);
  box-shadow: var(--shadow-md, 0 8px 25px rgba(0, 0, 0, 0.12));
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  line-height: 1.45;
  animation: slideIn 0.3s ease;
}

.app-toast--info { border-left-color: var(--primary, #3b82f6); }
.app-toast--success { border-left-color: var(--success, #22c55e); }
.app-toast--warning { border-left-color: var(--warning, #f59e0b); }
.app-toast--error,
.app-toast--critical { border-left-color: var(--danger, #ef4444); }

.app-toast--hide {
  opacity: 0;
  transition: opacity 0.3s ease;
}

html[data-ui-theme="midnight"] .app-toast {
  background: var(--bg-card) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow-md) !important;
}

html[data-ui-theme="midnight"] .app-toast--info { border-left-color: var(--primary) !important; }
html[data-ui-theme="midnight"] .app-toast--success { border-left-color: var(--success) !important; }
html[data-ui-theme="midnight"] .app-toast--warning { border-left-color: var(--warning) !important; }
html[data-ui-theme="midnight"] .app-toast--error,
html[data-ui-theme="midnight"] .app-toast--critical { border-left-color: var(--danger) !important; }