/* Theme surface polish — light & dark component overrides */

.auth-card,
.modal,
.section-card,
.sc,
.mcard,
.hub-card,
.wal-card,
.eng-card {
  box-shadow: var(--shadow-sm);
}

.u-hero,
.mdetail-hero,
.inv-card,
.pwa-install-bar {
  background: var(--hero-bg);
  border-color: var(--border2);
}

.u-hero::before {
  background: var(--hero-glow);
}

.u-topnav,
.u-botnav,
.adm-side,
.adm-topbar {
  background: color-mix(in srgb, var(--bg2) 88%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

thead th { background: var(--table-head); }
tbody tr { border-bottom-color: var(--row-line); }
tbody tr:hover { background: var(--row-hover); }

.anl:hover { background: var(--nav-hover); }
.anl.on { background: var(--nav-active); color: var(--cyan); }

.mi:hover,
.notif-item:hover,
.mi-card:hover { background: var(--row-hover); }
.notif-item.unread { background: var(--accent-soft); }

.rc-prog-wrap,
.hub-cover-wrap { background: var(--inset); }

.pill:hover,
.pill.on,
.pm-card.on,
.inv-tab.on,
.dep-mode-tab.on {
  background: var(--accent-soft);
  border-color: var(--cyan);
  color: var(--cyan);
}

.u-hero-btn.wd {
  background: var(--ghost-bg);
  color: var(--white);
  border: 1px solid var(--ghost-border);
}

.istat { background: var(--ghost-bg); }

.badge.active,
.badge.approved,
.badge.completed {
  background: var(--success-bg);
  color: var(--green);
  border-color: var(--success-border);
}
.badge.pending {
  background: var(--pending-bg);
  color: var(--gold);
  border-color: var(--pending-border);
}
.badge.rejected,
.badge.suspended {
  background: var(--danger-bg);
  color: var(--red);
  border-color: var(--danger-border);
}
.badge.running {
  background: var(--accent-soft);
  color: var(--cyan);
  border-color: var(--cyan2);
}
.badge.hidden,
.badge.none {
  background: var(--neutral-bg);
  color: var(--text2);
  border-color: var(--neutral-border);
}

.btn.danger,
.ab.rej {
  background: var(--danger-bg);
  border-color: var(--danger-border);
  color: var(--red);
}
.ab.apr {
  background: var(--success-bg);
  border-color: var(--success-border);
  color: var(--green);
}
.ab.viw {
  background: var(--accent-soft);
  border-color: var(--cyan2);
  color: var(--cyan);
}
.ab.edt {
  background: var(--pending-bg);
  border-color: var(--pending-border);
  color: var(--gold);
}
.ab.sus {
  background: var(--purple-soft);
  border-color: color-mix(in srgb, var(--purple) 40%, transparent);
  color: var(--purple);
}

.info-box.warn {
  background: var(--warn-bg);
  border-color: var(--warn-border);
}
.info-box.suc {
  background: var(--success-bg);
  border-color: var(--success-border);
  color: var(--green);
}

.tx-ico.dep { background: var(--accent-soft); }
.tx-ico.wd { background: var(--warn-bg); }
.tx-ico.ai { background: var(--success-bg); }
.tx-ico.ref { background: var(--purple-soft); }
.tx-ico.rp { background: var(--info-bg); }

.nbadge.g {
  background: var(--success-bg);
  color: var(--green);
  border-color: var(--success-border);
}

.overlay { background: var(--overlay); }
.modal { box-shadow: var(--shadow-lg); }

.auth-logo-mark,
.prof-av { box-shadow: var(--shadow-glow); }

.btn.prim,
.sbtn,
.u-hero-btn.dep,
.auth-tab.on,
.how-num,
.gp-side.on {
  color: var(--on-accent);
}

.eng-card,
.vip-task-card {
  border-color: var(--border);
}
.eng-row,
.eng-lb-item {
  border-bottom-color: var(--border);
}
.eng-rank { background: var(--inset); color: var(--white); }
.eng-tab { border-color: var(--border); }

[data-theme="light"] .wal-hero-lbl,
[data-theme="light"] .wal-hero-sub {
  color: rgba(20, 10, 0, 0.62);
}
[data-theme="light"] .wal-hero-val {
  color: var(--on-accent);
}

[data-theme="light"] .u-signout-btn:hover {
  background: var(--danger-bg);
}

[data-theme="light"] .loader {
  border-color: rgba(28, 23, 18, 0.18);
  border-top-color: var(--on-accent);
}