/* VIALX brand theme — black / lime / charcoal */
:root {
  --vx-black: #000000;
  --vx-surface: #111111;
  --vx-charcoal: #333333;
  --vx-charcoal-2: #1A1A1A;
  --vx-green: #84CC47;
  --vx-green-2: #8CC63F;
  --vx-green-dark: #6AAF2E;
  --vx-orange: #F7941E;
  --vx-magenta: #9E0B7E;
  --vx-white: #FFFFFF;
  --vx-muted: #A3A3A3;
  --vx-border: #2A2A2A;
}

/* Base */
html, body,
body.pm-home,
body.pm-home-css-custom,
body.fe-login-page {
  background: var(--vx-black) !important;
  color: var(--vx-white) !important;
}

.custom-css,
.custom-css-step,
.pm-banner-section-1,
#pm-banner-1 {
  background: var(--vx-black) !important;
}

/* Header */
#pm-header,
.pm-main-header,
.pm-main-header.pm-sticky-menu,
.pm-sticky-menu {
  background: var(--vx-black) !important;
  border-bottom: 1px solid var(--vx-border);
}

.pm-main-header .pm-main-navigation li a,
.pm-main-header .pm-header-btn a,
#main-nav a,
#m-main-nav a {
  color: var(--vx-white) !important;
}

.pm-main-header .pm-header-btn {
  border-color: var(--vx-green) !important;
  background: transparent !important;
}

.pm-main-header .pm-header-btn a {
  color: var(--vx-green) !important;
}

.pm-main-header .pm-header-btn:hover,
.pm-main-header .pm-header-btn:hover a {
  background: var(--vx-green) !important;
  color: var(--vx-black) !important;
  border-color: var(--vx-green) !important;
}

.pm-mobile_menu_button,
.pm-mobile_menu_button i,
#pm-header .pm-mobile_menu_button,
#pm-header .pm-mobile_menu_button i {
  color: var(--vx-white) !important;
}

#pm-header .fe-pwa-install {
  background: rgba(132, 204, 71, 0.15) !important;
  color: var(--vx-green) !important;
}

.pm-mobile_menu_content {
  background: var(--vx-charcoal-2) !important;
}

.pm-mobile_menu_content .pm-mobile-main-navigation .navbar-nav li a,
#m-main-nav a {
  color: var(--vx-white) !important;
  border-color: var(--vx-border) !important;
}

/* Logo */
.pm-logo img,
.m-brand-logo img,
.login-brand img {
  height: 42px !important;
  width: auto !important;
  max-width: 160px;
  object-fit: contain;
  filter: none;
}

/* Hide decorative phone art — logo + CTAs match mockup */
.pm-banner-section-1 .pm-banenr-img,
#pm-banner-1 .pm-banenr-img {
  display: none !important;
}

/* Home hero text */
.pm-banner-text,
.pm-banner-text h1,
.pm-banner-text h2,
.pm-banner-text p,
.pm-title-tag,
.footer-text,
.footer-text span,
.hr-line {
  color: var(--vx-white) !important;
  border-color: var(--vx-border) !important;
}

.pm-title-tag {
  background: transparent !important;
  text-transform: none !important;
  letter-spacing: 0.02em;
}

.pm-title-tag:before {
  background-color: var(--vx-green) !important;
}

.pm-banner-text h2 {
  font-weight: 700 !important;
  color: var(--vx-white) !important;
}

/* Home CTAs */
.pm-banner-section-1 .pm-banner-content .pm-banner-text a,
.pm-banner-section-1 .pm-banner-content .pm-banner-text .fe-action-link,
.fe-home-actions .fe-action-link,
.fe-home-actions .ei-banner-btn a {
  background: var(--vx-green) !important;
  color: var(--vx-black) !important;
  border: none !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}

.fe-home-actions .fe-action-btn:last-child .fe-action-link,
.fe-home-actions .fe-action-btn:last-child a,
.fe-home-actions .fe-action-link--secondary,
.pm-banner-section-1 .pm-banner-content .pm-banner-text .fe-action-btn:last-child a {
  background: var(--vx-charcoal) !important;
  color: var(--vx-white) !important;
}

.fe-home-actions .fe-action-link--secondary i {
  color: var(--vx-white) !important;
  margin-right: 8px;
}

.fe-home-actions .fe-action-link--primary i {
  display: none;
}

.pm-banner-section-1 .pm-banner-content .pm-banner-text a:hover,
.fe-home-actions .fe-action-link:hover {
  background: var(--vx-green-dark) !important;
  color: var(--vx-black) !important;
  border: none !important;
}

.fe-home-actions .fe-action-btn:last-child .fe-action-link:hover {
  background: #444444 !important;
  color: var(--vx-white) !important;
}

/* Bottom nav + FAB */
.fe-mobile-bottom-nav {
  background: var(--vx-charcoal) !important;
  border-top: 1px solid #222 !important;
  box-shadow: none !important;
}

.fe-mobile-bottom-nav__item {
  color: var(--vx-muted) !important;
}

.fe-mobile-bottom-nav__item i {
  color: var(--vx-green) !important;
}

.fe-mobile-bottom-nav__item.is-active,
.fe-mobile-bottom-nav__item.is-active span {
  color: var(--vx-white) !important;
}

.fe-mobile-bottom-nav__item.is-active i {
  color: var(--vx-green) !important;
}

.fe-home-fab {
  background: var(--vx-charcoal) !important;
  color: var(--vx-white) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45) !important;
}

.fe-home-fab.is-active,
.fe-home-fab:active {
  background: var(--vx-green) !important;
  color: var(--vx-black) !important;
}

/* Forms / cards frontend */
.custom-prereg .card,
.fe-prereg-card,
.card {
  background: var(--vx-surface) !important;
  border-color: var(--vx-border) !important;
  color: var(--vx-white) !important;
}

.custom-prereg .card .card-body .left-side h4,
.fe-prereg-heading h4,
.control-label,
.heading,
label {
  color: var(--vx-white) !important;
}

.form-control,
.custom-prereg .card .card-body .left-side .form-control,
.fe-prereg-input .form-control {
  background: #0D0D0D !important;
  border: 1px solid var(--vx-border) !important;
  color: var(--vx-white) !important;
}

.form-control::placeholder {
  color: #777 !important;
}

.fe-prereg-heading__icon {
  background: rgba(132, 204, 71, 0.15) !important;
  color: var(--vx-green) !important;
}

.left-side .continue,
.btn.continue,
.fe-prereg-btn.continue,
.btn-primary,
.checkout {
  background: var(--vx-green) !important;
  border-color: var(--vx-green) !important;
  color: var(--vx-black) !important;
}

.left-side .cancel,
.btn.cancel,
.fe-prereg-btn.cancel,
.btn-danger {
  background: var(--vx-magenta) !important;
  border-color: var(--vx-magenta) !important;
  color: var(--vx-white) !important;
}

.btn-secondary {
  background: var(--vx-charcoal) !important;
  border-color: var(--vx-charcoal) !important;
  color: var(--vx-white) !important;
}

/* Login */
.fe-login-page .card.card-primary,
.fe-login-page .card {
  background: var(--vx-surface) !important;
  border-top-color: var(--vx-green) !important;
}

.fe-login-page .card-header h4,
.fe-login-page label,
.fe-login-page .simple-footer {
  color: var(--vx-white) !important;
}

.fe-login-page .btn-primary,
.fe-login-submit {
  background: var(--vx-green) !important;
  border-color: var(--vx-green) !important;
  color: var(--vx-black) !important;
}

.fe-login-lang {
  background: var(--vx-charcoal) !important;
  border-color: var(--vx-border) !important;
  color: var(--vx-white) !important;
}

.fe-login-home {
  background: var(--vx-charcoal) !important;
}

.fe-password-toggle {
  color: var(--vx-muted) !important;
}

/* PWA install bottom sheet */
.fe-pwa-prompt {
  background: rgba(0, 0, 0, 0.6) !important;
}

.fe-pwa-prompt__sheet {
  background: var(--vx-charcoal-2) !important;
  border-color: var(--vx-border) !important;
  color: var(--vx-white) !important;
}

.fe-pwa-prompt__sheet h3 {
  color: var(--vx-white) !important;
}

.fe-pwa-prompt__text,
.fe-pwa-prompt__steps li {
  color: var(--vx-muted) !important;
}

.fe-pwa-prompt__btn--primary {
  background: var(--vx-green) !important;
  color: var(--vx-black) !important;
}

.fe-pwa-prompt__btn--primary:active {
  background: var(--vx-green-dark) !important;
}

.fe-pwa-prompt__btn--ghost {
  background: var(--vx-charcoal) !important;
  color: var(--vx-white) !important;
}

/* Admin accents (sidebar/buttons) when using same CSS */
.navbar-bg,
.main-sidebar,
body.sidebar-mini .main-sidebar:after {
  background-color: var(--vx-charcoal-2) !important;
}

.main-content,
.main-wrapper,
section.section {
  background: var(--vx-black) !important;
}

.section .section-header {
  background: var(--vx-surface) !important;
  border-bottom: 1px solid var(--vx-border) !important;
  color: var(--vx-white) !important;
  box-shadow: none !important;
}

.section .section-header h1 {
  color: var(--vx-white) !important;
}

.section .section-header .breadcrumb,
.section .section-header .section-header-breadcrumb,
.section .section-header .section-header-breadcrumb .breadcrumb {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--vx-muted) !important;
}

.section .section-header .breadcrumb-item,
.section .section-header .breadcrumb-item a,
.section .section-header .breadcrumb-item.active,
.section .section-header .breadcrumb-item + .breadcrumb-item::before {
  color: var(--vx-muted) !important;
}

.section .section-header .breadcrumb-item a:hover {
  color: var(--vx-green) !important;
}

.main-footer {
  background: var(--vx-charcoal-2) !important;
  color: var(--vx-muted) !important;
  border-top: 1px solid var(--vx-border) !important;
}

.main-footer a {
  color: var(--vx-green) !important;
}

.sidebar-brand a,
.sidebar-brand-sm a {
  color: var(--vx-white) !important;
}

.sidebar-brand-logo {
  height: 36px !important;
  width: auto !important;
  max-width: 140px;
  object-fit: contain;
}

.sidebar-brand-logo-sm {
  height: 28px !important;
  width: auto !important;
  max-width: 40px;
  object-fit: contain;
}

.main-sidebar .sidebar-menu li a {
  color: var(--vx-white) !important;
}

.main-sidebar .sidebar-menu li.active > a,
.main-sidebar .sidebar-menu li.active a,
.btn-primary {
  background-color: var(--vx-green) !important;
  border-color: var(--vx-green-dark) !important;
  color: var(--vx-black) !important;
}

.table,
.table td,
.table th,
.dataTables_wrapper,
.dataTables_info,
.dataTables_length,
.dataTables_filter,
.dataTables_filter label,
.dataTables_length label {
  color: var(--vx-white) !important;
}

.table thead th {
  color: var(--vx-muted) !important;
  border-color: var(--vx-border) !important;
  background: transparent !important;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(255, 255, 255, 0.03) !important;
}

.table td,
.table th {
  border-color: var(--vx-border) !important;
}

.dataTables_processing {
  background: var(--vx-surface) !important;
  color: var(--vx-white) !important;
  border-color: var(--vx-border) !important;
}

.section .section-title:before {
  background-color: var(--vx-green) !important;
}

.page-item.active .page-link {
  background-color: var(--vx-green) !important;
  border-color: var(--vx-green) !important;
  color: var(--vx-black) !important;
}

.page-link {
  background: var(--vx-charcoal) !important;
  border-color: var(--vx-border) !important;
  color: var(--vx-white) !important;
}

/* Error / 403 pages inside admin layout */
.page-error,
.error-page,
.text-danger.h2,
section.section .h2.text-danger {
  color: #ff6b6b !important;
}

/* QR scan — camera-first view */
.fe-qr-scan {
  min-height: calc(100vh - 70px);
  padding: 16px 16px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--vx-black);
  color: var(--vx-white);
}

.fe-qr-scan__top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.fe-qr-scan__back {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--vx-charcoal);
  color: var(--vx-white) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
}

.fe-qr-scan__heading h1 {
  margin: 0 0 4px;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--vx-white);
}

.fe-qr-scan__heading p {
  margin: 0;
  color: var(--vx-muted);
  font-size: 0.95rem;
  line-height: 1.4;
}

.fe-qr-scan__stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 320px;
  border-radius: 18px;
  overflow: hidden;
  background: var(--vx-charcoal-2);
  border: 1px solid var(--vx-border);
}

.fe-qr-scan__reader {
  width: 100%;
  height: 100%;
  min-height: 320px;
}

.fe-qr-scan__reader video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 18px;
  background: #000;
}

.fe-qr-scan__reader img {
  display: none !important;
}

.fe-qr-scan__frame {
  pointer-events: none;
  position: absolute;
  inset: 14%;
  border: 2px solid var(--vx-green);
  border-radius: 16px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.35);
}

.fe-qr-scan__status {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.7);
  color: var(--vx-white);
  font-size: 0.9rem;
  text-align: center;
  z-index: 2;
}

.fe-qr-scan__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fe-qr-scan__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border-radius: 12px;
  border: 0;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none !important;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.fe-qr-scan__btn--primary {
  background: var(--vx-green);
  color: var(--vx-black) !important;
}

.fe-qr-scan__btn--ghost {
  background: var(--vx-charcoal);
  color: var(--vx-white) !important;
}

.fe-qr-scan__btn[hidden] {
  display: none !important;
}

/* html5-qrcode chrome */
#fe-qr-reader__dashboard_section,
#fe-qr-reader__dashboard_section_csr,
#fe-qr-reader__header_message,
#fe-qr-reader__scan_region > img,
#fe-qr-reader__dashboard,
#qr-shaded-region {
  display: none !important;
}

.fe-qr-scan__reader video,
#fe-qr-reader video {
  max-width: 100% !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

#fe-qr-reader__scan_region {
  min-height: 320px !important;
}

#fe-qr-reader__scan_region video {
  max-height: none !important;
}

@media (max-width: 991.98px) {
  .fe-qr-scan {
    min-height: calc(100dvh - 64px);
    padding: 12px 12px calc(18px + env(safe-area-inset-bottom, 0px));
  }

  .fe-qr-scan__stage {
    min-height: min(62vh, 520px);
  }

  .fe-qr-scan__reader,
  #fe-qr-reader__scan_region {
    min-height: min(62vh, 520px) !important;
  }
}