/* =========================================================
   Wowtel Design System — Full Theme Override for Velzon
   Replaces all Velzon blues/purples with Wowtel green palette
   ========================================================= */

/* === Google Font: Inter === */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap");

/* === Wowtel Design Tokens === */
:root {
  /* Brand greens */
  --wt-green:          #1F7A50;
  --wt-green-bright:   #2FA06B;
  --wt-green-deep:     #143A2B;
  --wt-ink:            #15362A;
  /* Backgrounds */
  --wt-mint:           #E7F2EC;
  --wt-mint-2:         #E6F1EA;
  --wt-wash:           #F4F9F5;
  --wt-paper:          #FBFDFB;
  --wt-white:          #fff;
  /* Text */
  --wt-text:           #46594F;
  --wt-text-soft:      #566B61;
  --wt-text-muted:     #788B80;
  --wt-text-faint:     #9AA8A1;
  --wt-text-strong:    #283F36;
  /* Borders */
  --wt-border:         #E2EBE5;
  --wt-border-soft:    #EAF0EC;
  /* Status */
  --wt-ok-text:        #1f8a5b;
  --wt-ok-bg:          #e3f3ea;
  --wt-bad-text:       #c2412c;
  --wt-bad-bg:         #fbe2dc;
  /* Shadows */
  --wt-shadow-btn:     0 10px 22px rgba(31,122,80,.30);
  --wt-shadow-btn-sm:  0 6px 14px rgba(31,122,80,.30);
  --wt-shadow-card:    0 16px 38px rgba(16,48,58,.13);
  /* Radius */
  --wt-r-btn:          11px;
  --wt-r-card:         18px;
  --wt-r-pill:         999px;

  /* ── Override Velzon layout variables ── */
  --vz-header-bg:                       #fff;
  --vz-header-border:                   var(--wt-border);
  --vz-header-item-color:               var(--wt-ink);
  --vz-header-item-bg:                  var(--wt-mint);
  --vz-header-item-sub-color:           var(--wt-text-muted);
  --vz-topbar-search-bg:                var(--wt-wash);
  --vz-topbar-search-color:             var(--wt-ink);
  --vz-topbar-user-bg:                  var(--wt-wash);
  --vz-footer-bg:                       #fff;
  --vz-footer-color:                    var(--wt-text-muted);

  /* Sidebar (light/white) — matching design.html */
  --vz-vertical-menu-bg:                #fff;
  --vz-vertical-menu-border:            var(--wt-border);
  --vz-vertical-menu-item-color:        var(--wt-text-soft);      /* #566B61 gray for inactive */
  --vz-vertical-menu-item-bg:           transparent;               /* No bg on hover initially */
  --vz-vertical-menu-item-hover-color:  var(--wt-green-deep);
  --vz-vertical-menu-item-active-color: #fff;                      /* White text when active */
  --vz-vertical-menu-item-active-bg:    var(--wt-green);           /* #1F7A50 green bg when active */
  --vz-vertical-menu-sub-item-color:    var(--wt-text-muted);
  --vz-vertical-menu-sub-item-hover-color: var(--wt-green);
  --vz-vertical-menu-sub-item-active-color: var(--wt-green);
  --vz-vertical-menu-title-color:       var(--wt-green);           /* Menu titles in green */
  --vz-vertical-menu-box-shadow:        0 2px 4px rgba(15,34,58,.12);
  --vz-vertical-menu-dropdown-box-shadow: 0 2px 4px rgba(15,34,58,.12);
}

/* ── Global font & body ── */
body,
.app-menu,
.navbar-menu,
.page-topbar,
.page-content,
.navbar-header,
.footer {
  font-family: 'Inter', system-ui, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

body {
  background-color: var(--wt-wash) !important;
  color: var(--wt-ink) !important;
}

/* =========================================================
   SIDEBAR — White background like design.html
   ========================================================= */

/* Force light sidebar regardless of data-sidebar attribute */
:root[data-sidebar=dark],
:root[data-sidebar=light],
:root {
  --vz-vertical-menu-bg:                #fff !important;
  --vz-vertical-menu-border:            var(--wt-border) !important;
  --vz-vertical-menu-item-color:        var(--wt-text-soft) !important;      /* #566B61 */
  --vz-vertical-menu-item-bg:           transparent !important;
  --vz-vertical-menu-item-hover-color:  var(--wt-green-deep) !important;
  --vz-vertical-menu-item-active-color: #fff !important;
  --vz-vertical-menu-item-active-bg:    var(--wt-green) !important;
  --vz-vertical-menu-sub-item-color:    var(--wt-text-muted) !important;
  --vz-vertical-menu-sub-item-hover-color: var(--wt-green) !important;
  --vz-vertical-menu-sub-item-active-color: var(--wt-green) !important;
  --vz-vertical-menu-title-color:       var(--wt-green) !important;
  --vz-twocolumn-menu-iconview-bg:      #fff !important;
}

.app-menu,
.navbar-menu {
  background-color: #fff !important;
  border-right: 1px solid var(--wt-border) !important;
}

/* Logo box in sidebar — keep white */
.navbar-brand-box {
  background-color: #fff !important;
  border-bottom: 1px solid var(--wt-border-soft) !important;
}

/* Nav links — inactive state */
.navbar-menu .navbar-nav .nav-link,
.navbar-menu .navbar-nav .nav-link span {
  color: var(--wt-text-soft) !important;  /* #566B61 gray */
  font-weight: 600;
  font-size: 0.8375rem !important;  /* 13.4px - smaller menu text */
  font-family: 'Inter', sans-serif !important;
  background-color: transparent !important;
  transition: all .15s ease;
  margin-left: 0px !important;   /* Add spacing from left edge */
  margin-right: 0px !important;  /* Add spacing from right edge */
}

/* Nav links — hover state */
.navbar-menu .navbar-nav .nav-link:hover {
  color: var(--wt-green-deep) !important;
  background-color: var(--wt-wash) !important;  /* Light wash like design.html */
  border-radius: 11px;
}

/* Nav links — ACTIVE state (solid green with white text) */
.navbar-menu .navbar-nav .nav-link.active,
.navbar-menu .navbar-nav .nav-item.mm-active > .nav-link,
.navbar-menu .navbar-nav .nav-item.mm-active > a {
  color: #fff !important;
  background-color: var(--wt-green) !important;  /* #1F7A50 */
  border-radius: 11px;
  box-shadow: var(--wt-shadow-btn-sm);
  font-weight: 700;
  margin-left: 16px !important;   /* Keep spacing on active */
  margin-right: 16px !important;
}

/* Collapsed sidebar (data-sidebar-size="sm") — center icon, remove margins */
[data-sidebar-size="sm"] .navbar-menu .navbar-nav .nav-link.active,
[data-sidebar-size="sm"] .navbar-menu .navbar-nav .nav-item.mm-active > .nav-link,
[data-sidebar-size="sm"] .navbar-menu .navbar-nav .nav-item.mm-active > a {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
  width: 100% !important;
  justify-content: flex-start !important;
}

/* Icons in active nav */
.navbar-menu .navbar-nav .nav-link.active i,
.navbar-menu .navbar-nav .nav-item.mm-active > .nav-link i {
  color: #fff !important;
}

/* Active menu text span - force white */
.navbar-menu .navbar-nav .nav-link.active span,
.navbar-menu .navbar-nav .nav-item.mm-active > .nav-link span,
.navbar-menu .navbar-nav .nav-item.mm-active > a span {
  color: #fff !important;
}

/* Active menu link - all children white */
.navbar-menu .navbar-nav .nav-link.active *,
.navbar-menu .navbar-nav .nav-item.mm-active > .nav-link *,
.navbar-menu .navbar-nav .nav-item.mm-active > a * {
  color: #fff !important;
}

.navbar-menu .navbar-nav .nav-sm .nav-link:hover {
  color: var(--wt-green) !important;
  background-color: var(--wt-wash) !important;
  border-radius: 11px;
  font-size: 0.8375rem !important;  /* Match main menu font size */
}



.navbar-menu .navbar-nav .nav-sm .nav-link:hover i{
  color: var(--wt-green) !important;
}

/* Submenu dropdown container - remove background */
.navbar-menu .menu-dropdown,
.navbar-menu .menu-dropdown.show,
.navbar-menu .collapse.menu-dropdown,
.navbar-menu .collapse.menu-dropdown.show {
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Submenu nav list */
.navbar-menu .nav-sm,
.navbar-menu .nav-sm.flex-column {
  background-color: transparent !important;
  padding: 6px !important;
  margin: 0 !important;
}

/* Submenu links - all states */
.navbar-menu .navbar-nav .nav-sm .nav-link {
  font-size: 0.8375rem !important;  /* Match main menu font size */
  font-weight: 600 !important;
}

/* Remove any card/panel styling from submenus */
.navbar-menu .menu-dropdown .card,
.navbar-menu .menu-dropdown .card-body {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Menu section titles (e.g., "Menu") — green uppercase */
.menu-title,
.menu-title span {
  color: var(--wt-green) !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}

/* Remove default bullet from sub-menu links */
.navbar-menu .navbar-nav .nav-sm .nav-link:before {
  content: unset !important;
}

/* Prevent auto-scroll to active menu when content fits in viewport */
#scrollbar[data-simplebar] .simplebar-content-wrapper {
  scroll-behavior: auto !important;
  overflow-anchor: none !important;
}

/* Fix: Remove excessive padding from simplebar-content that causes false scrolling */
#scrollbar .simplebar-content {
  padding-bottom: 20px !important; /* Reduced from 160px */
}

/* Disable scroll anchoring on sidebar */
#scrollbar,
#navbar-nav,
.navbar-menu {
  overflow-anchor: none !important;
}

/* Override SimpleBar's scrollIntoView behavior */
.navbar-menu .mm-active,
.navbar-menu .nav-item.mm-active > .nav-link {
  scroll-margin-top: 0 !important;
  scroll-snap-align: none !important;
  scroll-margin: 0 !important;
  scroll-padding: 0 !important;
}

/* =========================================================
   TOPBAR / HEADER
   ========================================================= */

#page-topbar {
  background-color: #fff !important;
  border-bottom: 1px solid var(--wt-border) !important;
  box-shadow: 0 2px 10px rgba(20,58,43,.06) !important;
}

.navbar-header .btn-topbar {
  color: var(--wt-text-muted) !important;
}
.navbar-header .btn-topbar:hover,
.navbar-header .btn-topbar:focus,
.navbar-header .btn-topbar.active {
  background-color: var(--wt-mint) !important;
  color: var(--wt-green-deep) !important;
}

.app-search .form-control {
  background-color: var(--wt-wash) !important;
  color: var(--wt-ink) !important;
  border-color: var(--wt-border) !important;
}

/* User name in topbar */
.navbar-header .user-name-text {
  color: var(--wt-ink) !important;
  font-weight: 700;
}
.navbar-header .user-name-sub-text {
  color: var(--wt-text-muted) !important;
}

/* Topbar user avatar bg */
.topbar-user {
  background-color: var(--wt-wash) !important;
}

/* =========================================================
   PRIMARY / ACCENT COLOURS  (Bootstrap + Velzon overrides)
   ========================================================= */

/* Bootstrap primary */
.btn-primary,
.bg-primary,
.badge.bg-primary {
  background-color: var(--wt-green) !important;
  border-color: var(--wt-green) !important;
  color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--wt-green-bright) !important;
  border-color: var(--wt-green-bright) !important;
  box-shadow: var(--wt-shadow-btn) !important;
}
.btn-soft-primary {
  background-color: var(--wt-mint) !important;
  color: var(--wt-green) !important;
  border-color: var(--wt-mint) !important;
}
.btn-soft-primary:hover {
  background-color: var(--wt-green) !important;
  color: #fff !important;
}
.btn-outline-primary {
  border-color: var(--wt-green) !important;
  color: var(--wt-green) !important;
}
.btn-outline-primary:hover {
  background-color: var(--wt-green) !important;
  color: #fff !important;
}
.text-primary {
  color: var(--wt-green) !important;
}
a {
  color: var(--wt-green);
}
a:hover {
  color: var(--wt-green-bright);
}

/* Links in tables / lists */
.text-success { color: var(--wt-ok-text) !important; }
.bg-success    { background-color: var(--wt-green) !important; }

/* btn-success — override Velzon's --vz-success teal with brand green */
.btn-success {
  --vz-btn-bg:                  var(--wt-green);
  --vz-btn-border-color:        var(--wt-green);
  --vz-btn-hover-bg:            var(--wt-green-bright);
  --vz-btn-hover-border-color:  var(--wt-green-bright);
  --vz-btn-active-bg:           var(--wt-green-deep);
  --vz-btn-active-border-color: var(--wt-green-deep);
  --vz-btn-focus-shadow-rgb:    31, 122, 80;
  background-color: var(--wt-green) !important;
  border-color:     var(--wt-green) !important;
  color: #fff !important;
}
.btn-success:hover {
  background-color: var(--wt-green-bright) !important;
  border-color:     var(--wt-green-bright) !important;
  color: #fff !important;
}
.btn-success:focus,
.btn-success:active,
.btn-success.active {
  background-color: var(--wt-green-deep) !important;
  border-color:     var(--wt-green-deep) !important;
  color: #fff !important;
  box-shadow: 0 0 0 3px rgba(31,122,80,.3) !important;
}

/* btn-outline-success */
.btn-outline-success {
  border-color: var(--wt-green) !important;
  color:        var(--wt-green) !important;
}
.btn-outline-success:hover,
.btn-outline-success:active,
.btn-outline-success.active {
  background-color: var(--wt-green) !important;
  border-color:     var(--wt-green) !important;
  color: #fff !important;
}

/* Velzon-specific primary overrides */
.btn-primary,
[class*="btn-primary"] {
  --bs-btn-bg:           var(--wt-green);
  --bs-btn-border-color: var(--wt-green);
  --bs-btn-hover-bg:     var(--wt-green-bright);
  --bs-btn-active-bg:    var(--wt-green-deep);
}

/* =========================================================
   CARDS
   ========================================================= */

.card {
  border: 1px solid var(--wt-border) !important;
  border-radius: var(--wt-r-card) !important;
  background-color: #fff !important;
  box-shadow: var(--wt-shadow-card) !important;
}
.card-header {
  background-color: #fff !important;
  border-bottom: 1px solid var(--wt-border-soft) !important;
  font-weight: 700;
  color: var(--wt-green-deep);
}
.card-title {
  color: var(--wt-green-deep) !important;
  font-weight: 700;
}

/* =========================================================
   PAGE TITLE / BREADCRUMBS
   ========================================================= */

.page-title-box .page-title {
  color: var(--wt-green-deep) !important;
  font-weight: 800;
  font-family: 'Inter', sans-serif !important;
}
.page-title-box .breadcrumb-item a {
  color: var(--wt-green) !important;
}
.page-title-box .breadcrumb-item.active {
  color: var(--wt-text-muted) !important;
}
.breadcrumb-item + .breadcrumb-item::before {
  color: var(--wt-text-faint) !important;
}

/* =========================================================
   TABLES
   ========================================================= */

.table thead th,
.table > thead > tr > th {
  background-color: var(--wt-wash) !important;
  color: var(--wt-text-muted) !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-color: var(--wt-border) !important;
}
.table td,
.table > tbody > tr > td {
  border-color: var(--wt-border-soft) !important;
  color: var(--wt-ink) !important;
}
.table-hover tbody tr:hover {
  background-color: var(--wt-wash) !important;
}
.table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--wt-paper) !important;
}

/* =========================================================
   BADGES & PILLS
   ========================================================= */

.badge.bg-primary,
.badge-primary  { background-color: var(--wt-green) !important; color: #fff !important; }
.badge.bg-soft-primary,
.badge-soft-primary {
  background-color: var(--wt-mint) !important;
  color: var(--wt-green) !important;
}
.badge.bg-success { background-color: var(--wt-ok-bg) !important; color: var(--wt-ok-text) !important; }
.badge.bg-danger  { background-color: var(--wt-bad-bg) !important; color: var(--wt-bad-text) !important; }

/* =========================================================
   FORMS / INPUTS
   ========================================================= */

.form-control,
.form-select {
  border-color: var(--wt-border) !important;
  border-radius: 11px !important;
  color: var(--wt-ink) !important;
  background-color: #fff !important;
  font-family: 'Inter', sans-serif !important;
}
.form-control:focus,
.form-select:focus {
  border-color: var(--wt-green) !important;
  box-shadow: 0 0 0 3px rgba(31,122,80,.15) !important;
}
.form-label {
  font-weight: 600;
  color: var(--wt-text-strong);
  font-size: 13.5px;
}
.form-check-input:checked {
  background-color: var(--wt-green) !important;
  border-color: var(--wt-green) !important;
}

/* =========================================================
   PAGINATION
   ========================================================= */

.page-link {
  color: var(--wt-green) !important;
  border-color: var(--wt-border) !important;
}
.page-item.active .page-link {
  background-color: var(--wt-green) !important;
  border-color: var(--wt-green) !important;
  color: #fff !important;
}
.page-link:hover {
  background-color: var(--wt-mint) !important;
  color: var(--wt-green-deep) !important;
}

/* =========================================================
   DROPDOWNS
   ========================================================= */

.dropdown-menu {
  border: 1px solid var(--wt-border) !important;
  border-radius: 14px !important;
  box-shadow: var(--wt-shadow-card) !important;
}
.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--wt-wash) !important;
  color: var(--wt-green-deep) !important;
}
.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--wt-green) !important;
  color: #fff !important;
}

/* =========================================================
   MODALS
   ========================================================= */

.modal-content {
  border: 1px solid var(--wt-border) !important;
  box-shadow: var(--wt-shadow-card) !important;
}
.modal-header {
  border-bottom: 1px solid var(--wt-border) !important;
  background-color: var(--wt-wash) !important;
}
.modal-title {
  color: var(--wt-green-deep) !important;
  font-weight: 700;
}
.btn-close { filter: none; }

/* =========================================================
   ALERTS
   ========================================================= */

.alert-primary {
  background-color: var(--wt-mint) !important;
  border-color: rgba(31,122,80,.25) !important;
  color: var(--wt-green-deep) !important;
}
.alert-success {
  background-color: var(--wt-ok-bg) !important;
  border-color: rgba(31,138,91,.25) !important;
  color: var(--wt-ok-text) !important;
}
.alert-danger {
  background-color: var(--wt-bad-bg) !important;
  border-color: rgba(194,65,44,.25) !important;
  color: var(--wt-bad-text) !important;
}
.alert-warning {
  background-color: #fff8e6 !important;
  border-color: rgba(230,165,0,.25) !important;
  color: #7a5500 !important;
}

/* =========================================================
   TABS
   ========================================================= */

.nav-tabs .nav-link {
  color: var(--wt-text-soft) !important;
  font-weight: 600;
  border-radius: 10px 10px 0 0;
}
.nav-tabs .nav-link:hover {
  color: var(--wt-green) !important;
  border-color: var(--wt-border) !important;
}
.nav-tabs .nav-link.active {
  color: var(--wt-green) !important;
  border-bottom-color: transparent !important;
  font-weight: 700;
}
.nav-pills .nav-link.active {
  background-color: var(--wt-green) !important;
  color: #fff !important;
  box-shadow: var(--wt-shadow-btn-sm);
}

/* =========================================================
   PROGRESS BARS
   ========================================================= */

.progress-bar { background-color: var(--wt-green) !important; }
.progress { background-color: var(--wt-mint) !important; border-radius: 999px !important; }

/* =========================================================
   TOGGLES / SWITCHES
   ========================================================= */

.form-check-input[type=checkbox]:checked,
.form-check-input[type=radio]:checked {
  background-color: var(--wt-green) !important;
  border-color: var(--wt-green) !important;
}

/* =========================================================
   FOOTER
   ========================================================= */

.footer {
  background-color: #fff !important;
  border-top: 1px solid var(--wt-border) !important;
  color: var(--wt-text-muted) !important;
}
.footer a {
  color: var(--wt-green) !important;
}

/* =========================================================
   BACK TO TOP BUTTON
   ========================================================= */

#back-to-top {
  background-color: var(--wt-green) !important;
  border-color: var(--wt-green) !important;
  bottom: 50px;
  box-shadow: var(--wt-shadow-btn-sm);
}
#back-to-top:hover {
  background-color: var(--wt-green-bright) !important;
}

/* =========================================================
   VELZON STAT / KPI CARDS  (--vz- variables already set above)
   ========================================================= */

.ri-arrow-right-circle-line{
  color: var(--wt-green) !important;
}

.ri-arrow-up-line {
  color:  #fff !important;

}

/* =========================================================
   PRELOADER
   ========================================================= */

#preloader #status .spinner-border {
  color: var(--wt-green) !important;
  border-color: var(--wt-mint);
  border-top-color: var(--wt-green) !important;
}

/* =========================================================
   AUTH / LOGIN PAGE STYLING
   ========================================================= */

/* Auth page background gradient */
.auth-page-wrapper.auth-bg-cover {
  background: linear-gradient(135deg, var(--wt-wash) 0%, #f0f7f3 100%) !important;
}

.auth-page-wrapper .bg-overlay {
  background: transparent !important;
}

/* Auth card */
.auth-page-wrapper .card {
  border: 1px solid var(--wt-border) !important;
  border-radius: var(--wt-r-panel, 24px) !important;
  box-shadow: var(--wt-shadow-card) !important;
  overflow: hidden;
}

/* Left side panel (dark green) */
.auth-one-bg {
  background: var(--wt-green) !important;
  background: linear-gradient(135deg, var(--wt-green-deep) 0%, var(--wt-green) 100%) !important;
}

.auth-one-bg .bg-overlay {
  background: transparent !important;
}

/* Quote icon on auth page */
.auth-one-bg .ri-double-quotes-l {
  color: rgba(255,255,255,.25) !important;
}

/* Carousel text on left side */
.auth-one-bg .carousel-indicators button {
  background-color: rgba(255,255,255,.3) !important;
}
.auth-one-bg .carousel-indicators button.active {
  background-color: #fff !important;
}

.auth-one-bg h2,
.auth-one-bg p,
.auth-one-bg .text-white {
  color: #fff !important;
}

/* Right side form area */
.auth-page-content .card .col-lg-6:last-child {
  background-color: #fff !important;
}

/* Form titles and text */
.auth-page-content h5.text-primary {
  color: var(--wt-green-deep) !important;
  font-weight: 800;
  font-family: 'Inter', sans-serif !important;
}

.auth-page-content .text-muted {
  color: var(--wt-text-muted) !important;
}

/* Form labels */
.auth-page-content .form-label {
  color: var(--wt-text-strong) !important;
  font-weight: 600;
  font-size: 14px;
}

/* Form inputs */
.auth-page-content .form-control {
  border: 1px solid var(--wt-border) !important;
  border-radius: 11px !important;
  background-color: #fff !important;
  color: var(--wt-ink) !important;
  font-family: 'Inter', sans-serif !important;
}

.auth-page-content .form-control:focus {
  border-color: var(--wt-green) !important;
  box-shadow: 0 0 0 3px rgba(31,122,80,.15) !important;
}

/* Forgot password link */
.auth-page-content a.text-muted {
  color: var(--wt-green) !important;
}
.auth-page-content a.text-muted:hover {
  color: var(--wt-green-bright) !important;
}

/* Login button - force green */
.auth-page-content .btn-success,
.auth-page-content .btn-primary {
  background-color: var(--wt-green) !important;
  border-color: var(--wt-green) !important;
  color: #fff !important;
  font-weight: 700;
  border-radius: var(--wt-r-btn) !important;
  box-shadow: var(--wt-shadow-btn) !important;
}

.auth-page-content .btn-success:hover,
.auth-page-content .btn-primary:hover {
  background-color: var(--wt-green-bright) !important;
  border-color: var(--wt-green-bright) !important;
  transform: translateY(-1px);
}

/* Demo credentials alert */
.auth-page-content .alert-info {
  background-color: var(--wt-mint) !important;
  border-color: rgba(31,122,80,.25) !important;
  color: var(--wt-green-deep) !important;
}

.auth-page-content .alert-info .label-icon {
  background-color: var(--wt-green) !important;
  color: #fff !important;
}

/* Password toggle button */
.auth-page-content .password-addon {
  color: var(--wt-text-muted) !important;
}

.auth-page-content .password-addon:hover {
  color: var(--wt-green) !important;
}

/* Footer on auth page */
.auth-page-wrapper .footer {
  background-color: transparent !important;
  border-top: none !important;
  color: var(--wt-text-muted) !important;
}

.auth-page-wrapper .footer a {
  color: var(--wt-green) !important;
}

/* Language switcher on auth page */
.auth-page-wrapper .language-switch .btn {
  border-color: var(--wt-border) !important;
  color: var(--wt-text-soft) !important;
  background-color: #fff !important;
  border-radius: 999px !important;
}

.auth-page-wrapper .language-switch .btn:hover {
  border-color: var(--wt-green) !important;
  background-color: var(--wt-mint) !important;
  color: var(--wt-green-deep) !important;
}

.auth-page-wrapper .language-switch .dropdown-menu {
  border: 1px solid var(--wt-border) !important;
  border-radius: 14px !important;
  box-shadow: var(--wt-shadow-card) !important;
}

.auth-page-wrapper .language-switch .dropdown-item:hover {
  background-color: var(--wt-wash) !important;
  color: var(--wt-green-deep) !important;
}

.auth-page-wrapper .language-switch .dropdown-item.active {
  background-color: var(--wt-green) !important;
  color: #fff !important;
}

/* =========================================================
   MISC UTILITIES
   ========================================================= */

/* Dividers */
hr { border-color: var(--wt-border) !important; }

/* Scrollbar (WebKit) */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--wt-wash); }
::-webkit-scrollbar-thumb { background: var(--wt-border); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: rgba(31,122,80,.4); }

/* Selection */
::selection { background: rgba(31,122,80,.18); color: var(--wt-green-deep); }

/* =========================================================
   MOBILE ADJUSTMENTS
   ========================================================= */

@media (max-width: 991.98px) {
  .navbar-header { padding: 0 1rem; }
}

/* =========================================================
   MISC FIXES (kept from original)
   ========================================================= */

.custom-options-dropdown .dropdown-toggle::after { display: none !important; }
@media (min-width:768px) { .dataTables_length { float: left; } }

.page-content {
  padding: calc(70px + 1rem) calc(0.5rem * 0.5) 60px calc(0.5rem * 0.5);
}

.hamburger-icon.open { transform: rotate(-180deg); }
.hamburger-icon.open span:nth-child(1) { left:unset; top:unset; width:80%; transform:unset; transition-delay:unset; }
.hamburger-icon.open span:nth-child(2) { left:unset; top:6px; width:100%; transform:unset; transition-delay:unset; }
.hamburger-icon.open span:nth-child(3) { left:unset; top:unset; width:60%; transform:unset; transition-delay:unset; }

.swal2-popup.swal2-toast .swal2-title { margin: 0.1em 0.1em !important; }
.swal2-popup.swal2-toast .swal2-html-container { margin: 0em 0.1em !important; font-size: 14px !important; }

.modal-body .modal-footer { padding: 0; }
.avatar-title { text-transform: uppercase; }


/* =========================================================
   INFO COLOR OVERRIDE - Replace cyan with Wowtel green
   ========================================================= */

/* Info buttons - use Wowtel green instead of cyan */
.btn-info,
[class*="btn-info"] {
  --bs-btn-bg: var(--wt-green) !important;
  --bs-btn-border-color: var(--wt-green) !important;
  --bs-btn-hover-bg: var(--wt-green-bright) !important;
  --bs-btn-hover-border-color: var(--wt-green-bright) !important;
  --bs-btn-active-bg: var(--wt-green-deep) !important;
  --bs-btn-active-border-color: var(--wt-green-deep) !important;
  background-color: var(--wt-green) !important;
  border-color: var(--wt-green) !important;
  color: #fff !important;
}

.btn-info:hover {
  background-color: var(--wt-green-bright) !important;
  border-color: var(--wt-green-bright) !important;
  color: #fff !important;
}

.btn-outline-info {
  border-color: var(--wt-green) !important;
  color: var(--wt-green) !important;
  background-color: transparent !important;
}

.btn-outline-info:hover {
  background-color: var(--wt-green) !important;
  border-color: var(--wt-green) !important;
  color: #fff !important;
}

.btn-soft-info {
  background-color: var(--wt-mint) !important;
  color: var(--wt-green) !important;
  border-color: var(--wt-mint) !important;
}

.btn-soft-info:hover {
  background-color: var(--wt-green) !important;
  color: #fff !important;
}

/* Info badges */
.badge.bg-info,
.badge-info {
  background-color: var(--wt-green) !important;
  color: #fff !important;
}

.badge.bg-soft-info,
.badge-soft-info {
  background-color: var(--wt-mint) !important;
  color: var(--wt-green) !important;
}

.badge.bg-info-subtle {
  background-color: var(--wt-mint) !important;
  color: var(--wt-green) !important;
}

/* Info text */
.text-info {
  color: var(--wt-green) !important;
}

/* Info backgrounds */
.bg-info {
  background-color: var(--wt-green) !important;
  color: #fff !important;
}

.bg-info-subtle {
  background-color: var(--wt-mint) !important;
  color: var(--wt-green) !important;
}

/* Info alerts */
.alert-info {
  background-color: var(--wt-mint) !important;
  border-color: var(--wt-green) !important;
  color: var(--wt-green-deep) !important;
}

/* Info borders */
.border-info {
  border-color: var(--wt-green) !important;
}

.page-title-box{
  margin:unset;
  padding:20px 1.5rem;
}
/* //for black list */
/* =========================================================
   FIX: sub-menu ka ACTIVE item hover par bhi waisa hi rahe
   (deep green bg, white text + icon). Sirf .nav-sm ke andar.
   ========================================================= */
.navbar-menu .navbar-nav .nav-sm .nav-link.active:hover,
.navbar-menu .navbar-nav .nav-sm .nav-item.mm-active > .nav-link:hover {
  background-color: var(--wt-green) !important;
  color: #fff !important;
}

.navbar-menu .navbar-nav .nav-sm .nav-link.active:hover *,
.navbar-menu .navbar-nav .nav-sm .nav-item.mm-active > .nav-link:hover * {
  color: #fff !important;
}