/* Portal theme — light (default) and dark via html[data-theme="dark"] */

:root,
html[data-theme='light'] {
  --vf-theme-surface: #f0f4f8;
  --vf-theme-surface-elevated: #ffffff;
  --vf-theme-text: #0a1628;
  --vf-theme-text-muted: #64748b;
  --vf-theme-border: #e2e8f0;
  --vf-theme-border-subtle: #e8eef4;
  --vf-theme-table-head: #f8fafc;
  --vf-theme-table-hover: #f8fafc;
  --vf-theme-input-bg: #ffffff;
  --vf-theme-shadow: rgba(0, 0, 0, 0.06);
  --vf-theme-shadow-hover: rgba(0, 0, 0, 0.1);
  --vf-theme-map-bg: #e8eef4;
  --vf-theme-login-card: #ffffff;
  --vf-theme-login-muted: #6c757d;
  --vf-theme-login-bg-start: #f0f4f8;
  --vf-theme-login-bg-end: #e8eef4;
}

html[data-theme='dark'] {
  --vf-theme-surface: #1e242c;
  --vf-theme-surface-elevated: #2a323d;
  --vf-theme-text: #e8edf4;
  --vf-theme-text-muted: #b8c5d6;
  --vf-theme-table-head-text: #d4dde8;
  --vf-theme-border: #3d4654;
  --vf-theme-border-subtle: #343c48;
  --vf-theme-table-head: #252c36;
  --vf-theme-table-hover: #2f3844;
  --vf-theme-input-bg: #252c36;
  --vf-theme-shadow: rgba(0, 0, 0, 0.25);
  --vf-theme-shadow-hover: rgba(0, 0, 0, 0.35);
  --vf-theme-map-bg: #252c36;
  --vf-theme-login-card: #2a323d;
  --vf-theme-login-muted: #94a3b8;
  --vf-theme-login-bg-start: #1a1f27;
  --vf-theme-login-bg-end: #1e242c;
  --vf-theme-link: #8ec8ff;
  --vf-theme-link-hover: #b8ddff;
  color-scheme: dark;
}

html[data-theme='dark'] body.manager-portal {
  --vf-theme-link: #6ee7b7;
  --vf-theme-link-hover: #a7f3d0;
}

html[data-theme='light'] {
  color-scheme: light;
}

/* —— Sidebar (theme-aware) —— */

html[data-theme='light'] body.admin-portal,
html[data-theme='light'] body.manager-portal {
  --vf-sidebar-bg-start: #f1f5f9;
  --vf-sidebar-bg-end: #e2e8f0;
  --vf-sidebar-fg: #1e293b;
  --vf-sidebar-fg-muted: #64748b;
  --vf-sidebar-fg-dim: #94a3b8;
  --vf-sidebar-divider: rgba(15, 23, 42, 0.1);
  --vf-sidebar-hover-bg: rgba(0, 86, 179, 0.08);
  --vf-sidebar-brand-hover: rgba(15, 23, 42, 0.04);
  --vf-sidebar-badge-bg: rgba(0, 86, 179, 0.12);
  --vf-sidebar-badge-fg: #475569;
  --vf-sidebar-active-shadow: rgba(0, 86, 179, 0.35);
}

html[data-theme='light'] body.manager-portal {
  --vf-sidebar-hover-bg: rgba(21, 115, 71, 0.1);
  --vf-sidebar-badge-bg: rgba(21, 115, 71, 0.12);
  --vf-sidebar-active-shadow: rgba(21, 115, 71, 0.35);
}

html[data-theme='dark'] body.admin-portal,
html[data-theme='dark'] body.manager-portal {
  --vf-sidebar-bg-start: var(--vf-admin-sidebar);
  --vf-sidebar-bg-end: var(--vf-admin-primary-dark);
  --vf-sidebar-fg: #ffffff;
  --vf-sidebar-fg-muted: rgba(255, 255, 255, 0.85);
  --vf-sidebar-fg-dim: rgba(255, 255, 255, 0.55);
  --vf-sidebar-divider: rgba(255, 255, 255, 0.1);
  --vf-sidebar-hover-bg: var(--vf-admin-sidebar-hover);
  --vf-sidebar-brand-hover: rgba(255, 255, 255, 0.04);
  --vf-sidebar-badge-bg: rgba(255, 255, 255, 0.12);
  --vf-sidebar-badge-fg: rgba(255, 255, 255, 0.75);
  --vf-sidebar-active-shadow: rgba(0, 0, 0, 0.25);
}

html[data-theme='light'] body.admin-portal .main-sidebar,
html[data-theme='light'] body.manager-portal .main-sidebar {
  background: linear-gradient(
    180deg,
    var(--vf-sidebar-bg-start) 0%,
    var(--vf-sidebar-bg-end) 100%
  ) !important;
}

html[data-theme='dark'] body.admin-portal .main-sidebar,
html[data-theme='dark'] body.manager-portal .main-sidebar {
  background: linear-gradient(
    180deg,
    var(--vf-sidebar-bg-start) 0%,
    var(--vf-sidebar-bg-end) 100%
  ) !important;
}

html[data-theme='light'] body.admin-portal a.brand-link.vf-sidebar-brand,
html[data-theme='light'] body.manager-portal a.brand-link.vf-sidebar-brand {
  color: var(--vf-sidebar-fg) !important;
  border-bottom-color: var(--vf-sidebar-divider) !important;
}

html[data-theme='light'] body.admin-portal a.brand-link.vf-sidebar-brand:hover,
html[data-theme='light'] body.manager-portal a.brand-link.vf-sidebar-brand:hover {
  color: var(--vf-sidebar-fg) !important;
  background: var(--vf-sidebar-brand-hover) !important;
}

html[data-theme='light'] body.admin-portal .vf-sidebar-brand__title,
html[data-theme='light'] body.manager-portal .vf-sidebar-brand__title {
  color: var(--vf-sidebar-fg) !important;
}

html[data-theme='light'] body.admin-portal .vf-sidebar-brand__badge,
html[data-theme='light'] body.manager-portal .vf-sidebar-brand__badge {
  color: var(--vf-sidebar-badge-fg) !important;
  background: var(--vf-sidebar-badge-bg) !important;
}

html[data-theme='light'] body.admin-portal .vf-sidebar-user,
html[data-theme='light'] body.manager-portal .vf-sidebar-user {
  border-bottom-color: var(--vf-sidebar-divider) !important;
}

html[data-theme='light'] body.admin-portal .vf-sidebar-user__name,
html[data-theme='light'] body.manager-portal .vf-sidebar-user__name,
html[data-theme='light'] body.admin-portal a.vf-sidebar-user__name:hover,
html[data-theme='light'] body.manager-portal a.vf-sidebar-user__name:hover {
  color: var(--vf-sidebar-fg) !important;
}

html[data-theme='light'] body.admin-portal .vf-sidebar-user__role,
html[data-theme='light'] body.manager-portal .vf-sidebar-user__role {
  color: var(--vf-sidebar-fg-dim) !important;
}

html[data-theme='light'] body.admin-portal .nav-sidebar .nav-header,
html[data-theme='light'] body.manager-portal .nav-sidebar .nav-header {
  color: var(--vf-sidebar-fg-dim) !important;
}

html[data-theme='light'] body.admin-portal .nav-sidebar .nav-link,
html[data-theme='light'] body.manager-portal .nav-sidebar .nav-link {
  color: var(--vf-sidebar-fg-muted) !important;
}

html[data-theme='light'] body.admin-portal .nav-sidebar .nav-link:hover,
html[data-theme='light'] body.manager-portal .nav-sidebar .nav-link:hover {
  background: var(--vf-sidebar-hover-bg) !important;
  color: var(--vf-sidebar-fg) !important;
}

html[data-theme='light'] body.admin-portal .nav-sidebar .nav-link.active,
html[data-theme='light'] body.manager-portal .nav-sidebar .nav-link.active {
  color: #fff !important;
}

/* AdminLTE dark-mode: keep portal brand + active colors */
html[data-theme='dark'] body.dark-mode.admin-portal a.brand-link.vf-sidebar-brand,
html[data-theme='dark'] body.dark-mode.manager-portal a.brand-link.vf-sidebar-brand,
html[data-theme='dark'] body.dark-mode.admin-portal.layout-navbar-fixed .wrapper .sidebar-dark-primary .brand-link.vf-sidebar-brand:not([class*='navbar']),
html[data-theme='dark'] body.dark-mode.manager-portal.layout-navbar-fixed .wrapper .sidebar-dark-primary .brand-link.vf-sidebar-brand:not([class*='navbar']) {
  background: transparent !important;
  background-color: transparent !important;
}

html[data-theme='dark'] body.dark-mode.admin-portal .sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active,
html[data-theme='dark'] body.dark-mode.manager-portal .sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active {
  background-color: var(--vf-admin-primary) !important;
  color: #fff !important;
}

html[data-theme='dark'] body.dark-mode.manager-portal .sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active {
  box-shadow: 0 4px 12px var(--vf-sidebar-active-shadow) !important;
}

html[data-theme='dark'] body.dark-mode.admin-portal .sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active {
  box-shadow: 0 4px 12px rgba(0, 86, 179, 0.4) !important;
}

/* Prevent mobile overlay from sitting above an expanded flyout sidebar */
.admin-portal.sidebar-mini.sidebar-collapse .main-sidebar:hover,
.admin-portal.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused,
.manager-portal.sidebar-mini.sidebar-collapse .main-sidebar:hover,
.manager-portal.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused {
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
}

/* Light theme: AdminLTE sidebar-dark-primary defaults assume white text on dark bar */
html[data-theme='light'] body.admin-portal .sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active,
html[data-theme='light'] body.manager-portal .sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active {
  background-color: var(--vf-admin-primary) !important;
  color: #fff !important;
}

/* —— Apply tokens to admin / manager portals —— */

.admin-portal .content-wrapper,
.manager-portal .content-wrapper {
  background: var(--vf-theme-surface) !important;
}

.admin-portal .content-header h1,
.manager-portal .content-header h1 {
  color: var(--vf-theme-text) !important;
}

.admin-portal .main-header,
.manager-portal .main-header {
  border-bottom-color: var(--vf-theme-border) !important;
}

html[data-theme='dark'] .admin-portal .main-header.navbar-light,
html[data-theme='dark'] .manager-portal .main-header.navbar-light {
  background: var(--vf-theme-surface-elevated) !important;
  border-bottom: 1px solid var(--vf-theme-border) !important;
}

html[data-theme='dark'] .admin-portal .main-header .nav-link,
html[data-theme='dark'] .manager-portal .main-header .nav-link {
  color: var(--vf-theme-text) !important;
}

html[data-theme='dark'] .admin-portal .main-header .nav-link:hover,
html[data-theme='dark'] .manager-portal .main-header .nav-link:hover {
  color: #fff !important;
}

.admin-portal .vf-admin-card,
.manager-portal .vf-admin-card {
  background: var(--vf-theme-surface-elevated);
  box-shadow: 0 2px 12px var(--vf-theme-shadow);
}

.admin-portal .vf-admin-card .card-header,
.manager-portal .vf-admin-card .card-header {
  background: var(--vf-theme-surface-elevated) !important;
  border-bottom-color: var(--vf-theme-border-subtle) !important;
}

.admin-portal .vf-admin-card .card-title,
.manager-portal .vf-admin-card .card-title {
  color: var(--vf-theme-text) !important;
}

.admin-portal .vf-admin-card .card-body,
.manager-portal .vf-admin-card .card-body {
  color: var(--vf-theme-text);
}

.admin-portal .table,
.manager-portal .table {
  color: var(--vf-theme-text);
}

.admin-portal .table thead th,
.manager-portal .table thead th {
  background: var(--vf-theme-table-head) !important;
  border-bottom-color: var(--vf-theme-border) !important;
  color: var(--vf-theme-table-head-text, var(--vf-theme-text-muted)) !important;
}

.admin-portal .table tbody tr:hover,
.manager-portal .table tbody tr:hover {
  background: var(--vf-theme-table-hover) !important;
}

.admin-portal .table td,
.admin-portal .table th,
.manager-portal .table td,
.manager-portal .table th {
  border-top-color: var(--vf-theme-border) !important;
}

.admin-portal .table-empty,
.manager-portal .table-empty {
  color: var(--vf-theme-text-muted) !important;
}

.admin-portal .table-empty i,
.manager-portal .table-empty i {
  color: var(--vf-theme-text-muted);
  opacity: 0.75;
}

.admin-portal .vf-quick-action,
.manager-portal .vf-quick-action {
  background: var(--vf-theme-surface-elevated);
  border-color: var(--vf-theme-border);
  color: var(--vf-theme-text);
}

.admin-portal .vf-quick-action:hover,
.manager-portal .vf-quick-action:hover {
  background: var(--vf-theme-table-hover);
}

.admin-portal .main-footer,
.manager-portal .main-footer {
  background: var(--vf-theme-surface-elevated) !important;
  border-top-color: var(--vf-theme-border) !important;
  color: var(--vf-theme-text-muted) !important;
}

.admin-portal .breadcrumb-item a,
.manager-portal .breadcrumb-item a {
  color: var(--vf-theme-link, var(--vf-admin-accent, #1e88e5));
}

html[data-theme='dark'] .admin-portal .breadcrumb-item a:hover,
html[data-theme='dark'] .manager-portal .breadcrumb-item a:hover {
  color: var(--vf-theme-link-hover) !important;
}

html[data-theme='dark'] .admin-portal .breadcrumb-item.active,
html[data-theme='dark'] .manager-portal .breadcrumb-item.active {
  color: var(--vf-theme-text-muted);
}

/* —— Dark theme: readable links & accents (not muddy blue on navy) —— */

html[data-theme='dark'] .admin-portal .portal-badge,
html[data-theme='dark'] .manager-portal .portal-badge {
  background: rgba(142, 200, 255, 0.18) !important;
  color: var(--vf-theme-link) !important;
  border: 1px solid rgba(142, 200, 255, 0.4);
}

html[data-theme='dark'] body.manager-portal .portal-badge {
  background: rgba(110, 231, 183, 0.15) !important;
  color: var(--vf-theme-link) !important;
  border-color: rgba(110, 231, 183, 0.45);
}

html[data-theme='dark'] .admin-portal .content-wrapper a:not(.btn):not(.nav-link):not(.dropdown-item):not(.vf-quick-action):not(.stat-footer):not(.small-box-footer),
html[data-theme='dark'] .manager-portal .content-wrapper a:not(.btn):not(.nav-link):not(.dropdown-item):not(.vf-quick-action):not(.stat-footer):not(.small-box-footer) {
  color: var(--vf-theme-link);
}

html[data-theme='dark'] .admin-portal .content-wrapper a:not(.btn):not(.nav-link):hover,
html[data-theme='dark'] .manager-portal .content-wrapper a:not(.btn):not(.nav-link):hover {
  color: var(--vf-theme-link-hover);
}

html[data-theme='dark'] .admin-portal .text-primary,
html[data-theme='dark'] .manager-portal .text-primary,
html[data-theme='dark'] body.dark-mode.admin-portal .text-primary,
html[data-theme='dark'] body.dark-mode.manager-portal .text-primary {
  color: var(--vf-theme-link) !important;
}

html[data-theme='dark'] .admin-portal .vf-admin-card .card-title i,
html[data-theme='dark'] .manager-portal .vf-admin-card .card-title i,
html[data-theme='dark'] .admin-portal .content-header .breadcrumb a,
html[data-theme='dark'] .manager-portal .content-header .breadcrumb a {
  color: var(--vf-theme-link) !important;
}

html[data-theme='dark'] body.dark-mode.admin-portal .content-wrapper,
html[data-theme='dark'] body.dark-mode.manager-portal .content-wrapper {
  color: var(--vf-theme-text);
}

html[data-theme='dark'] body.dark-mode.admin-portal a,
html[data-theme='dark'] body.dark-mode.manager-portal a {
  color: var(--vf-theme-link);
}

html[data-theme='dark'] body.dark-mode.admin-portal .btn-primary,
html[data-theme='dark'] body.dark-mode.manager-portal .btn-primary {
  color: #fff;
}

/* Table & card badges — soft fill + light text (overrides .text-dark and admin-portal.css) */
html[data-theme='dark'] .admin-portal .content-wrapper .badge,
html[data-theme='dark'] .manager-portal .content-wrapper .badge,
html[data-theme='dark'] body.dark-mode.admin-portal .content-wrapper .badge,
html[data-theme='dark'] body.dark-mode.manager-portal .content-wrapper .badge {
  font-weight: 600;
}

html[data-theme='dark'] .admin-portal .badge.bg-info,
html[data-theme='dark'] .manager-portal .badge.bg-info,
html[data-theme='dark'] .admin-portal .badge.badge-info,
html[data-theme='dark'] .manager-portal .badge.badge-info,
html[data-theme='dark'] body.dark-mode.admin-portal .badge.bg-info,
html[data-theme='dark'] body.dark-mode.manager-portal .badge.badge-info {
  background-color: rgba(56, 189, 248, 0.2) !important;
  color: #7dd3fc !important;
  border: 1px solid rgba(56, 189, 248, 0.42);
}

html[data-theme='dark'] .admin-portal .badge.bg-info.text-dark,
html[data-theme='dark'] .manager-portal .badge.bg-info.text-dark,
html[data-theme='dark'] body.dark-mode.admin-portal .badge.bg-info.text-dark {
  color: #7dd3fc !important;
}

html[data-theme='dark'] .admin-portal .badge.bg-warning,
html[data-theme='dark'] .manager-portal .badge.bg-warning,
html[data-theme='dark'] .admin-portal .badge.badge-warning,
html[data-theme='dark'] .manager-portal .badge.badge-warning,
html[data-theme='dark'] body.dark-mode.admin-portal .badge.bg-warning,
html[data-theme='dark'] body.dark-mode.manager-portal .badge.badge-warning {
  background-color: rgba(251, 191, 36, 0.18) !important;
  color: #fcd34d !important;
  border: 1px solid rgba(251, 191, 36, 0.42);
}

html[data-theme='dark'] .admin-portal .badge.bg-warning.text-dark,
html[data-theme='dark'] .manager-portal .badge.bg-warning.text-dark,
html[data-theme='dark'] body.dark-mode.admin-portal .badge.bg-warning.text-dark {
  color: #fcd34d !important;
}

html[data-theme='dark'] .admin-portal .badge.bg-success,
html[data-theme='dark'] .manager-portal .badge.bg-success,
html[data-theme='dark'] .admin-portal .badge.badge-success,
html[data-theme='dark'] .manager-portal .badge.badge-success,
html[data-theme='dark'] body.dark-mode.admin-portal .badge.bg-success,
html[data-theme='dark'] body.dark-mode.manager-portal .badge.badge-success {
  background-color: rgba(34, 197, 94, 0.22) !important;
  color: #86efac !important;
  border: 1px solid rgba(34, 197, 94, 0.45);
}

html[data-theme='dark'] .admin-portal .badge.bg-danger,
html[data-theme='dark'] .manager-portal .badge.bg-danger,
html[data-theme='dark'] .admin-portal .badge.badge-danger,
html[data-theme='dark'] .manager-portal .badge.badge-danger,
html[data-theme='dark'] body.dark-mode.admin-portal .badge.bg-danger,
html[data-theme='dark'] body.dark-mode.manager-portal .badge.badge-danger {
  background-color: rgba(248, 113, 113, 0.22) !important;
  color: #fca5a5 !important;
  border: 1px solid rgba(248, 113, 113, 0.45);
}

html[data-theme='dark'] .admin-portal .badge.bg-primary,
html[data-theme='dark'] .manager-portal .badge.bg-primary,
html[data-theme='dark'] .admin-portal .badge.badge-primary,
html[data-theme='dark'] .manager-portal .badge.badge-primary,
html[data-theme='dark'] body.dark-mode.admin-portal .badge.bg-primary,
html[data-theme='dark'] body.dark-mode.manager-portal .badge.badge-primary {
  background-color: rgba(59, 130, 246, 0.25) !important;
  color: #93c5fd !important;
  border: 1px solid rgba(59, 130, 246, 0.45);
}

html[data-theme='dark'] .admin-portal .badge.bg-secondary,
html[data-theme='dark'] .manager-portal .badge.bg-secondary,
html[data-theme='dark'] .admin-portal .badge.badge-secondary,
html[data-theme='dark'] .manager-portal .badge.badge-secondary,
html[data-theme='dark'] body.dark-mode.admin-portal .badge.bg-secondary,
html[data-theme='dark'] body.dark-mode.manager-portal .badge.badge-secondary {
  background-color: rgba(148, 163, 184, 0.2) !important;
  color: #cbd5e1 !important;
  border: 1px solid rgba(148, 163, 184, 0.35);
}

html[data-theme='dark'] body.manager-portal .badge.bg-info,
html[data-theme='dark'] body.manager-portal .badge.badge-info,
html[data-theme='dark'] body.dark-mode.manager-portal .badge.badge-info {
  background-color: rgba(110, 231, 183, 0.15) !important;
  color: #6ee7b7 !important;
  border-color: rgba(110, 231, 183, 0.42);
}

html[data-theme='dark'] body.manager-portal .badge.bg-info.text-dark,
html[data-theme='dark'] body.manager-portal .badge.badge-info {
  color: #6ee7b7 !important;
}

html[data-theme='dark'] .admin-portal .form-control::placeholder,
html[data-theme='dark'] .manager-portal .form-control::placeholder {
  color: var(--vf-theme-text-muted);
  opacity: 1;
}

html[data-theme='dark'] .admin-portal .vf-table-search,
html[data-theme='dark'] .manager-portal .vf-table-search,
html[data-theme='dark'] .admin-portal .vf-card-toolbar .form-control,
html[data-theme='dark'] .manager-portal .vf-card-toolbar .form-control {
  background-color: var(--vf-theme-input-bg) !important;
  border-color: var(--vf-theme-border) !important;
  color: var(--vf-theme-text) !important;
}

html[data-theme='dark'] .admin-portal .vf-table-search::placeholder,
html[data-theme='dark'] .manager-portal .vf-table-search::placeholder {
  color: var(--vf-theme-text-muted) !important;
  opacity: 1;
}

html[data-theme='dark'] .admin-portal .vf-table-search:focus,
html[data-theme='dark'] .manager-portal .vf-table-search:focus {
  border-color: var(--vf-theme-link) !important;
  box-shadow: 0 0 0 0.2rem rgba(142, 200, 255, 0.25) !important;
}

html[data-theme='dark'] body.manager-portal .vf-table-search:focus {
  border-color: var(--vf-theme-link) !important;
  box-shadow: 0 0 0 0.2rem rgba(110, 231, 183, 0.25) !important;
}

html[data-theme='dark'] .vf-card-toolbar .badge-secondary {
  background-color: #475569 !important;
  color: #e8edf4 !important;
}

.admin-portal .vf-settings-dl dt,
.manager-portal .vf-settings-dl dt {
  color: var(--vf-theme-text-muted) !important;
}

.admin-portal .vf-settings-dl dd,
.manager-portal .vf-settings-dl dd {
  color: var(--vf-theme-text);
}

body.admin-portal #liveMap.vf-live-map,
body.manager-portal #liveMap.vf-live-map,
#liveMap.vf-live-map {
  background: var(--vf-theme-map-bg);
}

/* AdminLTE dark-mode alignment for cards, content, forms */
html[data-theme='dark'] body.admin-portal.dark-mode .card,
html[data-theme='dark'] body.manager-portal.dark-mode .card {
  background: var(--vf-theme-surface-elevated);
  color: var(--vf-theme-text);
}

html[data-theme='dark'] body.admin-portal.dark-mode .form-control,
html[data-theme='dark'] body.manager-portal.dark-mode .form-control,
html[data-theme='dark'] body.admin-portal.dark-mode .custom-select,
html[data-theme='dark'] body.manager-portal.dark-mode .custom-select {
  background: var(--vf-theme-input-bg);
  border-color: var(--vf-theme-border);
  color: var(--vf-theme-text);
}

html[data-theme='dark'] body.admin-portal.dark-mode .text-muted,
html[data-theme='dark'] body.manager-portal.dark-mode .text-muted,
html[data-theme='dark'] .admin-portal .small.text-muted,
html[data-theme='dark'] .manager-portal .small.text-muted {
  color: var(--vf-theme-text-muted) !important;
}

/* Dashboard overview & stat accents */
html[data-theme='dark'] .vf-overview-list__row span {
  color: var(--vf-theme-text-muted) !important;
}

html[data-theme='dark'] .vf-overview-list__row strong {
  color: var(--vf-theme-text) !important;
}

html[data-theme='dark'] .vf-overview-list__row strong.text-warning,
html[data-theme='dark'] body.dark-mode.admin-portal .text-warning,
html[data-theme='dark'] body.dark-mode.manager-portal .text-warning,
html[data-theme='dark'] .admin-portal .text-warning,
html[data-theme='dark'] .manager-portal .text-warning {
  color: #fcd34d !important;
}

html[data-theme='dark'] body.dark-mode.admin-portal .text-info,
html[data-theme='dark'] body.dark-mode.manager-portal .text-info,
html[data-theme='dark'] .admin-portal .text-info,
html[data-theme='dark'] .manager-portal .text-info {
  color: #7dd3fc !important;
}

html[data-theme='dark'] body.dark-mode.admin-portal .text-secondary,
html[data-theme='dark'] body.dark-mode.manager-portal .text-secondary,
html[data-theme='dark'] .admin-portal .text-secondary,
html[data-theme='dark'] .manager-portal .text-secondary {
  color: #cbd5e1 !important;
}

html[data-theme='dark'] body.dark-mode.admin-portal .table thead th,
html[data-theme='dark'] body.dark-mode.manager-portal .table thead th,
html[data-theme='dark'] .admin-portal .table thead th,
html[data-theme='dark'] .manager-portal .table thead th {
  color: var(--vf-theme-table-head-text) !important;
}

html[data-theme='dark'] body.dark-mode.admin-portal .table td,
html[data-theme='dark'] body.dark-mode.manager-portal .table td,
html[data-theme='dark'] body.dark-mode.admin-portal .table tbody td,
html[data-theme='dark'] body.dark-mode.manager-portal .table tbody td {
  color: var(--vf-theme-text);
}

html[data-theme='dark'] .admin-portal .table-empty,
html[data-theme='dark'] .manager-portal .table-empty,
html[data-theme='dark'] body.dark-mode.admin-portal .table-empty,
html[data-theme='dark'] body.dark-mode.manager-portal .table-empty {
  color: var(--vf-theme-text-muted) !important;
}

html[data-theme='dark'] .admin-portal .table-empty i,
html[data-theme='dark'] .manager-portal .table-empty i {
  opacity: 0.85;
}

html[data-theme='dark'] .vf-welcome-banner p {
  opacity: 0.95;
}

html[data-theme='dark'] .vf-admin-card .card-header .btn-outline-danger {
  color: #fca5a5;
  border-color: rgba(248, 113, 113, 0.55);
}

html[data-theme='dark'] .vf-admin-card .card-header .btn-outline-danger:hover {
  color: #fff;
  background-color: rgba(220, 38, 38, 0.35);
  border-color: #f87171;
}

html[data-theme='dark'] body.admin-portal.dark-mode .dropdown-menu,
html[data-theme='dark'] body.manager-portal.dark-mode .dropdown-menu {
  background: var(--vf-theme-surface-elevated);
  border-color: var(--vf-theme-border);
}

html[data-theme='dark'] body.admin-portal.dark-mode .dropdown-item,
html[data-theme='dark'] body.manager-portal.dark-mode .dropdown-item {
  color: var(--vf-theme-text);
}

html[data-theme='dark'] body.admin-portal.dark-mode .dropdown-item:hover,
html[data-theme='dark'] body.manager-portal.dark-mode .dropdown-item:hover {
  background: var(--vf-theme-table-hover);
}

html[data-theme='dark'] body.admin-portal.dark-mode .dropdown-header,
html[data-theme='dark'] body.manager-portal.dark-mode .dropdown-header {
  color: var(--vf-theme-text-muted);
}

html[data-theme='dark'] .table-danger.sos-active {
  animation: vf-sos-pulse-dark 2s infinite;
}

@keyframes vf-sos-pulse-dark {
  0%,
  100% {
    background-color: #4a2c2e;
  }
  50% {
    background-color: #5c3538;
  }
}

/* Login pages — background and shell follow portal theme */
html[data-theme='light'] body.admin-portal.admin-login-page {
  --vf-theme-login-bg-start: #eef4fc;
  --vf-theme-login-bg-end: #f5f8fc;
}

html[data-theme='light'] body.manager-portal.manager-login-page {
  --vf-theme-login-bg-start: #ecf8f3;
  --vf-theme-login-bg-end: #f4faf7;
}

body.admin-login-page,
body.manager-login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    165deg,
    var(--vf-theme-login-bg-start) 0%,
    var(--vf-theme-login-bg-end) 55%,
    var(--vf-theme-surface) 100%
  ) !important;
  color: var(--vf-theme-text);
}

.vf-login-hero-title {
  color: var(--vf-theme-text);
}

.vf-login-hero-tagline {
  color: var(--vf-theme-text-muted);
}

body.admin-login-page .admin-login-box .card,
body.manager-login-page .admin-login-box .card {
  background: var(--vf-theme-login-card);
  color: var(--vf-theme-text);
  border: 1px solid var(--vf-theme-border-subtle);
  box-shadow: 0 16px 48px var(--vf-theme-shadow);
}

body.admin-login-page .form-control,
body.manager-login-page .form-control,
body.admin-login-page .input-group-text,
body.manager-login-page .input-group-text {
  background: var(--vf-theme-input-bg);
  border-color: var(--vf-theme-border);
  color: var(--vf-theme-text);
}

body.admin-login-page .form-control::placeholder,
body.manager-login-page .form-control::placeholder {
  color: var(--vf-theme-login-muted);
  opacity: 1;
}

.portal-auth-theme-bar .portal-theme-toggle-btn {
  border: 1px solid var(--vf-theme-border) !important;
  background: var(--vf-theme-login-card) !important;
  color: var(--vf-theme-text) !important;
  box-shadow: 0 2px 8px var(--vf-theme-shadow);
}

.portal-auth-theme-bar .portal-theme-toggle-btn:hover {
  background: var(--vf-theme-surface-elevated) !important;
  color: var(--vf-theme-text) !important;
}

html[data-theme='dark'] body.admin-login-page .text-muted,
html[data-theme='dark'] body.manager-login-page .text-muted {
  color: var(--vf-theme-text-muted) !important;
}

/* Theme toggle — icon only, click to cycle */
.portal-theme-toggle-btn {
  cursor: pointer;
  line-height: 1;
  padding: 0.5rem 0.75rem;
}

.portal-theme-toggle-btn:focus {
  outline: none;
  box-shadow: none;
}

.admin-portal .portal-theme-toggle-btn.nav-link,
.manager-portal .portal-theme-toggle-btn.nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
}

.portal-theme-toggle-icon {
  display: none;
  font-size: 1.1rem;
}

html[data-theme-mode='light'] .portal-theme-toggle-icon[data-show='light'],
html[data-theme-mode='dark'] .portal-theme-toggle-icon[data-show='dark'] {
  display: inline-block;
}

.vf-password-input .vf-password-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  border-color: var(--vf-theme-border, #ced4da);
  color: var(--vf-theme-text-muted, #6c757d);
}

.vf-password-input .vf-password-toggle:hover,
.vf-password-input .vf-password-toggle:focus {
  color: var(--vf-theme-text, #212529);
  background: var(--vf-theme-surface-elevated, #f8f9fa);
}

.vf-login-hint,
.vf-field-hint {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--vf-theme-text-muted, #6c757d);
}

.vf-pagination-footer {
  background: var(--vf-theme-surface-elevated, #f8f9fa);
  border-top: 1px solid var(--vf-theme-border, #dee2e6);
}

.vf-pagination-summary {
  font-size: 0.875rem;
}

html[data-theme='dark'] .vf-list-filters .vf-filter-field__control,
html[data-theme='dark'] .vf-attendance-filters .form-control {
  background: var(--vf-theme-input-bg, #252c36);
  border-color: var(--vf-theme-border, #3d4654);
  color: var(--vf-theme-text, #e8edf4);
}

html[data-theme='dark'] .vf-list-filters .vf-filter-field__label {
  color: var(--vf-theme-text-muted, #b8c5d6);
}

html[data-theme-mode='dark'] .vf-pagination-footer .page-link {
  background: var(--vf-theme-surface, #1e293b);
  border-color: var(--vf-theme-border, #334155);
  color: var(--vf-theme-text, #e2e8f0);
}

html[data-theme-mode='dark'] .vf-pagination-footer .page-item.active .page-link {
  background: var(--vf-theme-primary, #3b82f6);
  border-color: var(--vf-theme-primary, #3b82f6);
  color: #fff;
}

html[data-theme-mode='dark'] .vf-pagination-footer .page-item.disabled .page-link {
  color: var(--vf-theme-muted, #64748b);
}