/* ==========================================================
   CROWN-F PORTAL — Design Enhancement Layer
   Layered over main.css — retains all UI/UX, refines aesthetics
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&family=Sora:wght@300;400;500;600;700;800&display=swap');

/* ----------------------------------------------------------
   CSS DESIGN TOKENS
   ---------------------------------------------------------- */
:root {
  --brand:        #2AB575;
  --brand-hover:  #1D9C62;
  --brand-light:  rgba(42, 181, 117, 0.12);
  --brand-mid:    rgba(42, 181, 117, 0.22);
  --brand-ink:    #0E3A2C;

  --surface:      #FFFFFF;
  --surface-2:    #F6F7FB;
  --surface-3:    #EEF1F7;
  --surface-4:    #E7ECF5;

  --text-1:       #111827;
  --text-2:       #465164;
  --text-3:       #8B95A7;

  --border:       #E1E6EF;
  --border-strong:#D3D9E6;
  --border-focus: #2AB575;

  --sh-xs: 0 1px 3px rgba(15,23,42,0.08);
  --sh-sm: 0 6px 16px rgba(15,23,42,0.10);
  --sh-md: 0 16px 34px rgba(15,23,42,0.12);
  --sh-lg: 0 30px 60px rgba(15,23,42,0.18);

  --rad:     16px;
  --rad-lg:  20px;
  --rad-sm:  10px;
  --rad-xs:  6px;
  --rad-pill: 999px;
  --ease:    cubic-bezier(0.4, 0, 0.2, 1);
  --dur:     0.22s;
}

/* ----------------------------------------------------------
   TYPOGRAPHY UPGRADE
   ---------------------------------------------------------- */
body {
  font-family: 'Manrope', sans-serif !important;
  font-size: 14.5px !important;
  line-height: 1.6;
  color: var(--text-2) !important;
  background: linear-gradient(180deg, #F7F8FC 0%, #EFF2F7 100%) !important;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Sora', sans-serif !important;
  color: var(--text-1) !important;
  letter-spacing: -0.02em;
}

h1 { font-size: 34px !important; font-weight: 700 !important; }
h2 { font-size: 28px !important; font-weight: 700 !important; }
h3 { font-size: 21px !important; font-weight: 600 !important; }
h4 { font-size: 17px !important; font-weight: 600 !important; }
h5 { font-size: 14px !important; font-weight: 600 !important; }
h6 { font-size: 13px !important; font-weight: 600 !important; }

.content-title {
  font-size: 24px !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
}

/* ----------------------------------------------------------
   SIDEBAR / ASIDE
   ---------------------------------------------------------- */
.navbar-aside {
  background: linear-gradient(180deg, #0F172A 0%, #0B1220 100%) !important;
  border-right: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow: 0 28px 60px rgba(15,23,42,0.45) !important;
}

.navbar-aside .aside-top {
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  padding: 18px 18px 16px !important;
}

.navbar-aside .brand-wrap {
  font-family: 'Sora', sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #F8FAFC !important;
  letter-spacing: -0.03em;
}

.navbar-aside nav hr {
  border-color: rgba(255,255,255,0.08) !important;
  margin: 8px 16px !important;
}

/* Menu items */
.menu-aside .menu-link {
  color: rgba(248,250,252,0.68) !important;
  border-radius: 12px !important;
  font-family: 'Sora', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 10px 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  border: 1px solid transparent !important;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border var(--dur) var(--ease) !important;
}

.menu-aside .menu-link:hover {
  background: rgba(248,250,252,0.08) !important;
  color: #fff !important;
}

.menu-aside .menu-item.active > .menu-link {
  background: rgba(42, 181, 117, 0.18) !important;
  color: #F8FAFC !important;
  border-left: 3px solid var(--brand);
  box-shadow: inset 0 0 0 1px rgba(42,181,117,0.24);
}

.menu-aside .menu-item .icon {
  color: rgba(255,255,255,0.4) !important;
}

.menu-aside .menu-item.active .icon {
  color: var(--brand) !important;
}

/* Submenu */
.menu-aside .submenu a {
  color: rgba(248,250,252,0.6) !important;
  font-size: 12.5px !important;
  transition: color var(--dur) var(--ease) !important;
}

/* Initial message for member ID input */
.initial-message {
  background: linear-gradient(135deg, rgba(42,181,117,0.08) 0%, rgba(42,181,117,0.03) 100%) !important;
  border: 1px solid rgba(42,181,117,0.15) !important;
  color: var(--brand) !important;
}

.menu-aside .submenu a:hover,
.menu-aside .menu-item.active .submenu a.active {
  color: var(--brand) !important;
}

.menu-aside .submenu a::before {
  background-color: rgba(255,255,255,0.3) !important;
}

/* ----------------------------------------------------------
   TOP NAVBAR
   ---------------------------------------------------------- */
.main-header.navbar {
  background: rgba(255,255,255,0.82) !important;
  backdrop-filter: blur(16px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
  border-bottom: 1px solid var(--border-strong) !important;
  box-shadow: var(--sh-sm) !important;
}

.main-header.style-2 {
  background: rgba(255,255,255,0.9) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid var(--border-strong) !important;
}

/* ----------------------------------------------------------
   CARDS
   ---------------------------------------------------------- */
.card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--rad) !important;
  box-shadow: var(--sh-sm) !important;
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease) !important;
  overflow: visible !important;
}

.card:hover {
  box-shadow: var(--sh-md) !important;
  transform: translateY(-1px) !important;
}

.card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 16px 20px !important;
  font-family: 'Outfit', sans-serif !important;
}

.card-header h4 {
  margin: 0 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--text-1) !important;
}

.card-body {
  padding: 20px !important;
}

/* ----------------------------------------------------------
   CONTENT HEADER (PAGE TITLE BAR)
   ---------------------------------------------------------- */
.content-header {
  padding-bottom: 20px !important;
  margin-bottom: 4px !important;
}

.content-header h2 {
  font-size: 20px !important;
  letter-spacing: -0.02em !important;
}

/* ----------------------------------------------------------
   FORM CONTROLS
   ---------------------------------------------------------- */
.form-control,
.form-select {
  background-color: var(--surface) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--rad-xs) !important;
  color: var(--text-1) !important;
  font-size: 13px !important;
  height: 40px !important;
  padding: 0 14px !important;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease) !important;
  -webkit-appearance: auto !important;
  appearance: auto !important;
}

select.form-select,
select.form-control {
  background-color: #ffffff !important;
  color: #181C2E !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 12px !important;
  padding-right: 36px !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

select.form-select option,
select.form-control option {
  background-color: #ffffff !important;
  color: #181C2E !important;
}

.form-control:focus,
.form-select:focus {
  background-color: var(--surface) !important;
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px var(--brand-light) !important;
}

.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
  background-color: var(--surface-2) !important;
  color: var(--text-3) !important;
  border-color: var(--border) !important;
}

.form-label {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--text-2) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  margin-bottom: 5px !important;
}

textarea.form-control {
  height: auto !important;
  padding: 10px 14px !important;
}

/* ----------------------------------------------------------
   BUTTONS
   ---------------------------------------------------------- */
.btn {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 0.01em !important;
  border-radius: var(--rad-xs) !important;
  transition: background var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform 0.12s var(--ease) !important;
}

.btn:active {
  transform: scale(0.97) !important;
}

.btn.btn-primary {
  background: var(--brand) !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(42,181,117,0.28) !important;
}

.btn.btn-primary:hover {
  background: var(--brand-hover) !important;
  box-shadow: 0 4px 14px rgba(42,181,117,0.38) !important;
}

.btn.btn-secondary {
  background: var(--surface-3) !important;
  color: var(--text-2) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--sh-xs) !important;
}

.btn.btn-secondary:hover {
  background: var(--border) !important;
  color: var(--text-1) !important;
}

.btn-brand {
  background: var(--brand) !important;
  box-shadow: 0 2px 8px rgba(42,181,117,0.28) !important;
}

.btn-brand:hover {
  background: var(--brand-hover) !important;
  box-shadow: 0 4px 14px rgba(42,181,117,0.38) !important;
}

/* ----------------------------------------------------------
   TABLES
   ---------------------------------------------------------- */
table {
  font-size: 13px !important;
  color: var(--text-2) !important;
}

table thead {
  background: var(--surface-2) !important;
}

table thead th {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 600 !important;
  font-size: 11.5px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: var(--text-3) !important;
  border-bottom: 2px solid var(--border) !important;
  padding: 10px 12px !important;
}

.table > :not(caption) > * > * {
  border-color: var(--border) !important;
  padding: 10px 12px !important;
}

.table > tbody > tr:hover > * {
  background-color: var(--brand-light) !important;
  transition: background-color var(--dur) var(--ease);
}

/* ----------------------------------------------------------
   TABS
   ---------------------------------------------------------- */
.nav-tabs {
  border-bottom: 2px solid var(--border) !important;
}

.nav-tabs .nav-link {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  color: var(--text-3) !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -2px !important;
  padding: 10px 16px !important;
  transition: color var(--dur) var(--ease) !important;
}

.nav-tabs .nav-link:hover {
  color: var(--text-1) !important;
  border-bottom-color: var(--border) !important;
}

.nav-tabs .nav-link.active {
  color: var(--brand) !important;
  border-bottom: 2px solid var(--brand) !important;
  background: transparent !important;
}

/* ----------------------------------------------------------
   BADGES & TAGS
   ---------------------------------------------------------- */
.badge {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  letter-spacing: 0.03em !important;
  padding: 4px 9px !important;
  border-radius: 20px !important;
}

.badge-soft-primary,
.badge.bg-primary {
  background: var(--brand-light) !important;
  color: var(--brand) !important;
}

/* ----------------------------------------------------------
   DROPDOWNS
   ---------------------------------------------------------- */
.dropdown-menu {
  border: 1px solid var(--border) !important;
  border-radius: var(--rad-sm) !important;
  box-shadow: var(--sh-md) !important;
  padding: 6px !important;
  animation: dropIn 0.16s var(--ease) !important;
}

@keyframes dropIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.dropdown-menu .dropdown-item {
  border-radius: var(--rad-xs) !important;
  font-size: 13px !important;
  padding: 8px 12px !important;
  transition: background var(--dur) var(--ease) !important;
}

.dropdown-menu .dropdown-item:hover {
  background: var(--brand-light) !important;
  color: var(--brand) !important;
}

.dropdown-menu .dropdown-item.text-danger:hover {
  background: rgba(244, 63, 63, 0.08) !important;
  color: #E03C3C !important;
}

/* ----------------------------------------------------------
   PAGINATION
   ---------------------------------------------------------- */
.pagination-area .page-item.active .page-link,
.pagination-area .page-item:hover .page-link {
  background: var(--brand) !important;
  box-shadow: 0 2px 8px rgba(42,181,117,0.28) !important;
}

.mem-list-pagination .pagination-area .page-item.disabled .page-link {
  opacity: 0.45;
  pointer-events: none;
}

.mem-list-pagination .pagination-area {
  overflow: visible;
}

.mem-list-pagination .pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
}

.mem-list-pagination .pagination-area .page-item {
  margin: 0;
}

.mem-list-pagination .pagination-area .page-item .page-link {
  width: 2.15rem;
  height: 2.15rem;
  min-width: 2.15rem;
  padding: 0;
  line-height: 1;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
}

.mem-list-pagination .pagination-area .page-item.nav-control .page-link {
  width: auto;
  min-width: 4.6rem;
  padding: 0 0.95rem;
}

.mem-list-page-summary {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text-2);
}

/* ----------------------------------------------------------
   LINKS
   ---------------------------------------------------------- */
a { color: var(--brand) !important; }
a:hover { color: var(--brand-hover) !important; }

/* ----------------------------------------------------------
   PAGE CONTENT AREA
   ---------------------------------------------------------- */
.content-main {
  background: transparent !important;
  min-height: calc(100vh - 70px);
}

.content-main > div {
  padding: 30px 28px !important;
}

/* Page headers */
.cf-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.cf-page-subtitle {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--text-3);
}

.cf-page-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

@media (max-width: 991px) {
  .cf-page-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .cf-page-actions {
    width: 100%;
  }
}

/* ----------------------------------------------------------
   FOOTER
   ---------------------------------------------------------- */
.main-footer {
  background: var(--surface) !important;
  border-top: 1px solid var(--border) !important;
  color: var(--text-3) !important;
  font-size: 12px !important;
}

/* ----------------------------------------------------------
   PROGRESS BAR
   ---------------------------------------------------------- */
.progress-bar {
  background: linear-gradient(90deg, var(--brand), var(--brand-hover)) !important;
  border-radius: 100px !important;
}

.progress {
  background: var(--surface-3) !important;
  border-radius: 100px !important;
  height: 6px !important;
}

/* ----------------------------------------------------------
   HR
   ---------------------------------------------------------- */
hr {
  border-color: var(--border) !important;
  opacity: 1 !important;
}

/* ----------------------------------------------------------
   SCROLLBAR (webkit)
   ---------------------------------------------------------- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 100px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-3); }

/* ----------------------------------------------------------
   PAGE LOAD ANIMATION
   ---------------------------------------------------------- */
.card {
  animation: fadeUp 0.32s var(--ease) both;
}

.card:nth-child(1) { animation-delay: 0.03s; }
.card:nth-child(2) { animation-delay: 0.07s; }
.card:nth-child(3) { animation-delay: 0.11s; }
.card:nth-child(4) { animation-delay: 0.15s; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Content header fade in */
.content-header {
  animation: fadeUp 0.28s var(--ease) both;
}

/* ----------------------------------------------------------
   TOASTR OVERRIDE — sharper
   ---------------------------------------------------------- */
.toast-success  { border-radius: var(--rad-sm) !important; }
.toast-error    { border-radius: var(--rad-sm) !important; }
.toast-warning  { border-radius: var(--rad-sm) !important; }
.toast-info     { border-radius: var(--rad-sm) !important; }

/* ----------------------------------------------------------
   LOGIN / SIGNUP PAGE CARD
   ---------------------------------------------------------- */
.card-login {
  border-radius: var(--rad) !important;
  box-shadow: var(--sh-lg) !important;
  border: none !important;
  max-width: 400px !important;
}

.main-header.style-2 .brand-wrap {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 800 !important;
  font-size: 20px !important;
  color: var(--text-1) !important;
  letter-spacing: -0.03em !important;
}

/* ----------------------------------------------------------
   GRIDVIEW (ASP.NET) — force table styles
   ---------------------------------------------------------- */
[id*="gv_"] {
  border-collapse: collapse !important;
  width: 100% !important;
}

[id*="gv_"] th {
  font-family: 'Outfit', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: var(--text-3) !important;
  background: var(--surface-2) !important;
  padding: 10px 12px !important;
  border-bottom: 2px solid var(--border) !important;
}

[id*="gv_"] td {
  padding: 9px 12px !important;
  border-bottom: 1px solid var(--border) !important;
  font-size: 13px !important;
  color: var(--text-2) !important;
  transition: background var(--dur) var(--ease);
}

[id*="gv_"] tr:hover td {
  background: var(--brand-light) !important;
}

/* ----------------------------------------------------------
   ACTIVE STATES — nav links
   ---------------------------------------------------------- */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background: var(--brand-mid) !important;
  color: var(--brand) !important;
  font-weight: 600 !important;
}

/* ----------------------------------------------------------
   SUMMARY / AMOUNT LABELS (upgrade page)
   ---------------------------------------------------------- */
label.form-label + asp\:Label,
.text-danger {
  font-family: 'Outfit', sans-serif !important;
}

/* ==========================================================
   PAGE-SPECIFIC REDESIGNS
   ========================================================== */

/* ----------------------------------------------------------
   [LOGIN PAGE] — Premium dark canvas, gold-accent card
   ---------------------------------------------------------- */
body:has(.main-header.style-2) {
  background:
    radial-gradient(ellipse at 20% 50%, rgba(42,181,117,0.06) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(212,175,55,0.08) 0%, transparent 55%),
    #0f1117 !important;
  min-height: 100vh;
}

body:has(.main-header.style-2) .main-header.style-2 {
  background: transparent !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

body:has(.main-header.style-2) .main-footer {
  background: transparent !important;
  border-top: none !important;
  color: rgba(255,255,255,0.3) !important;
}

body:has(.main-header.style-2) .content-main {
  background: transparent !important;
}

.card-login {
  background: rgba(255,255,255,0.97) !important;
  border: none !important;
  border-radius: 20px !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.08),
    0 24px 60px rgba(0,0,0,0.45),
    0 8px 20px rgba(0,0,0,0.3) !important;
  max-width: 420px !important;
  overflow: hidden !important;
  position: relative;
}

.card-login::before {
  content: '';
  display: block;
  height: 4px;
  background: linear-gradient(90deg, #D4AF37 0%, #2AB575 50%, #D4AF37 100%);
  position: absolute;
  top: 0; left: 0; right: 0;
}

.card-login .card-body {
  padding: 36px 32px 32px !important;
}

.card-login h4.card-title {
  font-family: 'Outfit', sans-serif !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  color: #0f1117 !important;
  letter-spacing: -0.04em !important;
  margin-bottom: 24px !important;
}

.card-login .form-control {
  background: #f8f9fb !important;
  border: 1.5px solid #e8eaf0 !important;
  border-radius: 10px !important;
  height: 48px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-align: left !important;
  padding: 0 18px !important;
  color: #181c2e !important;
}

.card-login .form-control:focus {
  border-color: #2AB575 !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(42,181,117,0.12) !important;
}

.card-login .btn.btn-primary {
  width: 100% !important;
  height: 48px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  background: linear-gradient(135deg, #2AB575 0%, #1E9E63 100%) !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 16px rgba(42,181,117,0.35) !important;
  justify-content: center !important;
}

.card-login .btn.btn-primary:hover {
  background: linear-gradient(135deg, #1E9E63 0%, #18835A 100%) !important;
  box-shadow: 0 6px 20px rgba(42,181,117,0.45) !important;
}

.card-login hr {
  border-color: #f0f0f0 !important;
  margin: 20px 0 !important;
}

/* ----------------------------------------------------------
   [HOME PAGE] — Rich stat cards, editorial chart section
   ---------------------------------------------------------- */

/* Stat card icon circles — each gets a unique gradient */
.col-lg-3:nth-child(1) .icontext .icon {
  background: linear-gradient(135deg, rgba(42,181,117,0.18), rgba(42,181,117,0.08)) !important;
  border: 1px solid rgba(42,181,117,0.2) !important;
}

.col-lg-3:nth-child(2) .icontext .icon {
  background: linear-gradient(135deg, rgba(80,165,241,0.18), rgba(80,165,241,0.06)) !important;
  border: 1px solid rgba(80,165,241,0.2) !important;
}

.col-lg-3:nth-child(3) .icontext .icon {
  background: linear-gradient(135deg, rgba(241,180,76,0.18), rgba(241,180,76,0.06)) !important;
  border: 1px solid rgba(241,180,76,0.2) !important;
}

.col-lg-3:nth-child(4) .icontext .icon {
  background: linear-gradient(135deg, rgba(212,175,55,0.18), rgba(212,175,55,0.06)) !important;
  border: 1px solid rgba(212,175,55,0.2) !important;
}

/* Stat numbers */
.icontext .text span:first-of-type {
  font-family: 'Outfit', sans-serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--text-1) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
}

.icontext h6.card-title {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  color: var(--text-3) !important;
}

.icontext .text-sm {
  font-size: 11.5px !important;
  color: var(--text-3) !important;
  letter-spacing: 0.01em !important;
}

/* Chart card — editorial header */
.card article.card-body h5.card-title {
  font-family: 'Outfit', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--text-3) !important;
  margin-bottom: 16px !important;
}

/* Content-header enhanced */
.content-header h2.content-title {
  position: relative !important;
  display: inline-block !important;
}

.content-header h2.content-title::after {
  content: '';
  display: block;
  width: 36px;
  height: 3px;
  background: linear-gradient(90deg, var(--brand), #D4AF37);
  border-radius: 2px;
  margin-top: 6px;
}

.content-header p {
  font-size: 13px !important;
  color: var(--text-3) !important;
  margin-top: 4px !important;
}

/* ----------------------------------------------------------
   [KYC APPROVAL PAGE] — Status-aware table, action buttons
   ---------------------------------------------------------- */

/* Status filter dropdown */
.card-header asp\.DropDownList,
.card-header select {
  max-width: 220px !important;
  font-weight: 600 !important;
  font-family: 'Outfit', sans-serif !important;
}

/* KYC table approve / reject button sizing */
.btn.btn-sm.btn-success {
  background: linear-gradient(135deg, #2AB575, #1E9E63) !important;
  border: none !important;
  color: #fff !important;
  border-radius: var(--rad-xs) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
  padding: 5px 12px !important;
  box-shadow: 0 2px 6px rgba(42,181,117,0.3) !important;
  display: inline-flex !important;
  align-items: center !important;
}

.btn.btn-sm.btn-danger {
  background: linear-gradient(135deg, #f46a6a, #e03c3c) !important;
  border: none !important;
  color: #fff !important;
  border-radius: var(--rad-xs) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
  padding: 5px 12px !important;
  box-shadow: 0 2px 6px rgba(244,106,106,0.3) !important;
  display: inline-flex !important;
  align-items: center !important;
}

.btn.btn-sm.btn-success:hover {
  box-shadow: 0 4px 12px rgba(42,181,117,0.45) !important;
  transform: translateY(-1px) !important;
}

.btn.btn-sm.btn-danger:hover {
  box-shadow: 0 4px 12px rgba(244,106,106,0.45) !important;
  transform: translateY(-1px) !important;
}

/* KYC table striping with brand tints */
.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: rgba(42,181,117,0.03) !important;
}

/* ----------------------------------------------------------
   [POS UPGRADE & MEMBERSHIP] — Ref# badge, amounts, sections
   ---------------------------------------------------------- */

/* Ref # — styled as a badge chip */
.card-header .text-danger {
  font-family: 'Outfit', sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  background: rgba(244,106,106,0.1) !important;
  color: #d63031 !important;
  padding: 3px 10px !important;
  border-radius: 20px !important;
  letter-spacing: 0.05em !important;
}

/* Amount display labels in payment section */
.table td span,
.table td label {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 600 !important;
}

/* Payment section tab — bolder active */
.nav-tabs .nav-link.active {
  font-weight: 700 !important;
  font-size: 13px !important;
}

/* Section headings on form pages */
.content-main section.content-main .content-header h2,
.content-main .content-header h2 {
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
}

/* Package dropdowns — highlight when populated */
select.form-select:not([value="0"]):not(:disabled) {
  border-color: var(--brand) !important;
  background-color: rgba(42,181,117,0.04) !important;
}

/* ----------------------------------------------------------
   [ALL PAGES] — Result / message label styling
   ---------------------------------------------------------- */
span[id$="lblResult"],
span[id$="lblMessage"] {
  display: inline-block !important;
  padding: 8px 14px !important;
  border-radius: var(--rad-xs) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
}

/* Print OR button */
.btn.btn-primary.print {
  background: linear-gradient(135deg, #4B5168, #2d3142) !important;
  box-shadow: none !important;
  padding: 8px 18px !important;
  font-size: 12.5px !important;
  letter-spacing: 0.04em !important;
}

.btn.btn-primary.print:hover {
  background: linear-gradient(135deg, #2d3142, #1a1d2e) !important;
}

/* ----------------------------------------------------------
   [CARD HEADER] — Accent rule on hover
   ---------------------------------------------------------- */
.card .card-header {
  position: relative !important;
  transition: background var(--dur) var(--ease) !important;
}

.card:hover .card-header {
  background: rgba(42,181,117,0.02) !important;
}

/* ----------------------------------------------------------
   [ICON] — Sidebar minimize button
   ---------------------------------------------------------- */
.btn-aside-minimize .material-icons {
  color: rgba(255,255,255,0.4) !important;
  transition: color var(--dur) var(--ease) !important;
}

.btn-aside-minimize:hover .material-icons {
  color: var(--brand) !important;
}

/* ----------------------------------------------------------
   [AVATAR] — Top nav user avatar ring
   ---------------------------------------------------------- */
.main-header .img-xs.rounded-circle {
  border: 2px solid var(--border) !important;
  transition: border-color var(--dur) var(--ease) !important;
}

.main-header .img-xs.rounded-circle:hover {
  border-color: var(--brand) !important;
}

/* ==========================================================
   GLOBAL LOADING OVERLAY
   Shown during ASP.NET full postbacks, async postbacks, and
   form submissions across Main.Master and Login.Master.
   ========================================================== */
#cf-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(15, 17, 23, 0.55);
  backdrop-filter: blur(4px) saturate(140%);
  -webkit-backdrop-filter: blur(4px) saturate(140%);
  opacity: 0;
  transition: opacity 0.18s var(--ease, ease);
  pointer-events: none;
}

#cf-loading-overlay.is-visible {
  display: flex;
  opacity: 1;
  pointer-events: auto;
}

#cf-loading-overlay .cf-spinner-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 24px 28px;
  background: rgba(255,255,255,0.98);
  border-radius: 14px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.08),
    0 24px 60px rgba(0,0,0,0.4),
    0 8px 20px rgba(0,0,0,0.25);
  animation: cfPopIn 0.22s cubic-bezier(0.4, 0, 0.2, 1) both;
}

#cf-loading-overlay .cf-spinner {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 3px solid rgba(42, 181, 117, 0.18);
  border-top-color: #2AB575;
  border-right-color: #D4AF37;
  animation: cfSpin 0.85s linear infinite;
  position: relative;
}

#cf-loading-overlay .cf-spinner::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-bottom-color: rgba(42, 181, 117, 0.45);
  animation: cfSpin 1.4s linear infinite reverse;
}

#cf-loading-overlay .cf-spinner-label {
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #4B5168;
}

@keyframes cfSpin {
  to { transform: rotate(360deg); }
}

@keyframes cfPopIn {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Disabled-ish state on submitted button */
.cf-btn-busy {
  position: relative !important;
  pointer-events: none !important;
  opacity: 0.85 !important;
}

.cf-btn-busy::after {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 8px;
  vertical-align: -2px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.45);
  border-top-color: #fff;
  animation: cfSpin 0.7s linear infinite;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  #cf-loading-overlay .cf-spinner,
  #cf-loading-overlay .cf-spinner::after,
  .cf-btn-busy::after {
    animation-duration: 1.6s !important;
  }
  #cf-loading-overlay .cf-spinner-wrap { animation: none !important; }
}

/* ==========================================================
   ADMIN PORTAL ISSUE FIX PACK (May 2026)
   Keeps behavior intact, fixes layout/cutoff regressions.
   ========================================================== */

/* Root-cause fix: preserve legacy row/column layouts inside card headers */
.card-header {
  display: block !important;
}

.card-header > .row {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Form rows in report headers */
.card-header .row.align-items-center {
  row-gap: 12px !important;
}

.card-header .row.align-items-center > [class*="col-"] {
  min-width: 170px;
}

/* Old markup often uses <a> as labels; make these look and behave as labels */
.card-header a:not([href]),
.card-header label,
.card-header .form-label {
  display: block !important;
  margin-bottom: 6px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--text-3) !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

.card-header .form-control,
.card-header .form-select,
.card-header input[type="date"] {
  width: 100% !important;
  min-height: 40px !important;
}

/* Report summary labels shouldn't collapse into vertical text */
.content-main .card .col-md-3 > a,
.content-main .card .col-md-3 > label,
.content-main .card .col-md-3 span,
.content-main .card .col-md-3 div {
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

/* Product list cards: reduce excessive gaps and reclaim whitespace */
[id$="dtl_product_list"] {
  width: 100% !important;
}

[id$="dtl_product_list"] > tbody > tr > td {
  padding: 12px !important;
  vertical-align: top !important;
  width: 25% !important;
}

[id$="dtl_product_list"] .row.gx-3.row-cols-md-3 {
  margin: 0 !important;
}

[id$="dtl_product_list"] [id*="Panel2"] {
  width: 100% !important;
}

[id$="dtl_product_list"] .card-product-grid {
  height: 100% !important;
  min-height: 330px !important;
}

[id$="dtl_product_list"] .img-wrap {
  min-height: 180px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Stock status/history action controls alignment */
[id$="gv_stock_status"] .btn,
[id$="btnViewHistory"],
[id$="btnBack"] {
  min-width: 84px;
}

[id$="gv_stock_status"] .form-group,
[id$="gv_stock_status"] .form-group .row {
  margin: 0 !important;
}

/* Product details action bar */
.cf-prod-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.cf-prod-actions .btn {
  min-width: 120px;
}

/* KYC list filter keeps enough width for readable state values */
[id$="ddlStatus"] {
  min-width: 120px;
}

/* ==========================================================
   ADDITIONAL PAGE POLISH (priority pages)
   ========================================================== */

/* card-header inline layout (opt-in only) */
.card-header.cf-inline-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

.card-header.cf-inline-header > h4 {
  margin: 0 !important;
}

/* Sticky-ish form action bar (user_create, prod_create, etc.) */
.row > .card > .col-9 > .content,
.row > .card > .col-6 > .content {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

/* Make .btn-danger consistent with brand language */
.btn.btn-danger {
  background: linear-gradient(135deg, #f46a6a, #e03c3c) !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(244, 106, 106, 0.28) !important;
}

.btn.btn-danger:hover {
  box-shadow: 0 4px 14px rgba(244, 106, 106, 0.38) !important;
}

/* user_create — Profile Picture card */
.input-upload .form-control[type="file"] {
  padding: 8px 12px !important;
  height: auto !important;
}

/* file upload button (asp:FileUpload renders as <input type=file>) */
input[type="file"].form-control {
  padding: 8px 12px !important;
  height: auto !important;
  min-height: 40px !important;
}

/* Stat icon size on home page — slightly larger, softer */
.icontext .icon.rounded-circle {
  width: 48px !important;
  height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.icontext .icon.rounded-circle .material-icons {
  font-size: 22px !important;
}

/* Login page — center the section vertically */
section.content-main.mt-80.mb-80 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 200px);
}

/* Login card — logo container softer bg */
.card-login .card-body > .d-flex > img {
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.06));
}

/* Login submit button: full width feel inside its row */
.card-login .mb-5.d-flex {
  justify-content: stretch !important;
}

.card-login .mb-5.d-flex .btn.btn-primary {
  flex: 1 !important;
}

/* PoS / pos_product / pos_membership — section dividers */
.content-main .card-header h4 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.content-main .card-header h4::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 14px;
  background: linear-gradient(180deg, var(--brand), #D4AF37);
  border-radius: 2px;
}

/* Ref # block — already styled, this is a small refinement */
.card-header .col-md-2.float-end {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 !important;
}

.card-header .col-md-2.float-end .form-label.text-danger {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--text-3) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

/* Make ASP.NET asp:Label that defaults to "Label" text invisible
   when intentionally empty/Visible=false. (No-op for visible ones.) */
span[id*="lblMessage"]:empty {
  display: none !important;
}

/* user_create — make Profile Picture image preview rounded */
.card .text-center > img[id*="img_prod"] {
  border-radius: var(--rad) !important;
  border: 1px solid var(--border) !important;
  background: var(--surface-2) !important;
  object-fit: cover !important;
}

/* GridView pagination row at bottom */
[id*="gv_"] tr td table {
  margin: 0 auto;
}

[id*="gv_"] tr td table td {
  padding: 4px 8px !important;
  border: none !important;
  background: transparent !important;
}

[id*="gv_"] tr td table td a,
[id*="gv_"] tr td table td span {
  display: inline-block;
  min-width: 28px;
  text-align: center;
  padding: 4px 8px;
  border-radius: var(--rad-xs);
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 12px;
  text-decoration: none !important;
}

[id*="gv_"] tr td table td a {
  color: var(--text-2) !important;
  border: 1px solid var(--border);
  background: var(--surface);
}

[id*="gv_"] tr td table td a:hover {
  color: #fff !important;
  background: var(--brand);
  border-color: var(--brand);
}

[id*="gv_"] tr td table td span {
  color: #fff !important;
  background: var(--brand);
  border: 1px solid var(--brand);
}

/* ==========================================================
   FIX: HTML `hidden` attribute (Bootstrap overrides it)
   This was making the dropdown logout button hard to click —
   hidden items were invisible but still occupying vertical
   space above the Logout link.
   ========================================================== */
[hidden] { display: none !important; }

/* ==========================================================
   USER ACCOUNT DROPDOWN — bigger targets, polished
   ========================================================== */
.main-header .dropdown.nav-item > a.dropdown-toggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 4px 10px 4px 4px !important;
  border-radius: 999px !important;
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
  text-decoration: none !important;
  transition: background var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease) !important;
}

.main-header .dropdown.nav-item > a.dropdown-toggle:hover,
.main-header .dropdown.nav-item.show > a.dropdown-toggle {
  border-color: var(--brand) !important;
  background: var(--brand-light) !important;
  box-shadow: 0 0 0 4px rgba(42,181,117,0.08) !important;
}

.main-header .dropdown.nav-item > a.dropdown-toggle::after {
  display: none !important; /* remove default Bootstrap caret */
}

/* Dropdown panel — larger, comfortable spacing */
.main-header .dropdown-menu-end,
.main-header .dropdown-menu {
  min-width: 240px !important;
  padding: 8px !important;
  border-radius: 12px !important;
  margin-top: 8px !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--sh-lg) !important;
}

/* Each item is a real, clickable row with adequate touch target */
.main-header .dropdown-menu .dropdown-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 42px !important;
  padding: 10px 12px !important;
  border-radius: 8px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--text-1) !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}

.main-header .dropdown-menu .dropdown-item:hover,
.main-header .dropdown-menu .dropdown-item:focus {
  background: var(--brand-light) !important;
  color: var(--brand) !important;
}

.main-header .dropdown-menu .dropdown-item .material-icons {
  font-size: 18px !important;
  color: var(--text-3) !important;
  flex-shrink: 0 !important;
  transition: color var(--dur) var(--ease) !important;
}

.main-header .dropdown-menu .dropdown-item:hover .material-icons {
  color: var(--brand) !important;
}

.main-header .dropdown-menu .dropdown-item.text-danger {
  color: #E03C3C !important;
}

.main-header .dropdown-menu .dropdown-item.text-danger:hover,
.main-header .dropdown-menu .dropdown-item.text-danger:focus {
  background: rgba(244, 63, 63, 0.1) !important;
  color: #C62828 !important;
}

.main-header .dropdown-menu .dropdown-item.text-danger:hover .material-icons {
  color: #C62828 !important;
}

.main-header .dropdown-menu .dropdown-divider {
  margin: 6px 4px !important;
  border-top: 1px solid var(--border) !important;
  opacity: 1 !important;
}

/* The "Welcome, name" line — visually a header, not a clickable row */
.main-header .dropdown-menu .dropdown-item:first-child {
  cursor: default !important;
  color: var(--text-3) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  padding-bottom: 4px !important;
  background: transparent !important;
  pointer-events: none !important;
}

.main-header .dropdown-menu .dropdown-item:first-child + .dropdown-item,
.main-header .dropdown-menu .dropdown-item:first-child + a.dropdown-item {
  margin-top: 2px !important;
}

/* Avatar inside trigger */
.main-header .img-xs.rounded-circle {
  width: 32px !important;
  height: 32px !important;
  border: 2px solid var(--border) !important;
}

/* ==========================================================
   TOP NAVBAR — refined modern bar
   ========================================================== */
.main-header.navbar {
  height: 64px !important;
  padding: 0 24px !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
}

.main-header .col-nav {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin-left: auto !important;
}

.main-header .col-nav .nav {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin: 0 !important;
}

.main-header .nav-link.btn-icon {
  width: 38px !important;
  height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  color: var(--text-2) !important;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease) !important;
}

.main-header .nav-link.btn-icon:hover {
  background: var(--brand-light) !important;
  color: var(--brand) !important;
}

.main-header .nav-link.btn-icon .material-icons {
  font-size: 20px !important;
}

/* Mobile hamburger — same style */
.main-header .btn-mobile {
  width: 38px !important;
  height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: transparent !important;
  border: none !important;
  color: var(--text-2) !important;
}

.main-header .btn-mobile:hover {
  background: var(--brand-light) !important;
  color: var(--brand) !important;
}

/* ==========================================================
   SIDEBAR — tighter, more refined
   ========================================================== */
.navbar-aside .menu-aside {
  padding: 8px 12px !important;
}

.menu-aside .menu-link {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 2px !important;
}

.menu-aside .menu-item.active > .menu-link {
  background: linear-gradient(90deg,
    rgba(42,181,117,0.18) 0%,
    rgba(42,181,117,0.04) 100%) !important;
  color: #fff !important;
  border-left: 3px solid var(--brand) !important;
  padding-left: 9px !important;
}

.menu-aside .submenu {
  padding: 4px 0 4px 28px !important;
}

.menu-aside .submenu a {
  display: block !important;
  padding: 7px 10px !important;
  border-radius: 6px !important;
  margin-bottom: 1px !important;
}

.menu-aside .submenu a:hover {
  background: rgba(255,255,255,0.04) !important;
  color: #fff !important;
}

/* ==========================================================
   DARK MODE
   Triggered by .darkmode toggle adding `dark` class to <body>.
   Light tokens are defined in :root at the top of this file;
   dark-mode tokens override them via body.dark.
   ========================================================== */
body.dark {
  --surface:      #14161E;
  --surface-2:    #0E1016;
  --surface-3:    #1C1F2A;
  --surface-4:    #232837;

  --text-1:       #F4F5F8;
  --text-2:       #C6CAD8;
  --text-3:       #8089A1;

  --border:       #262A38;
  --border-strong:#2F3548;
  --border-focus: #2AB575;

  --brand-light:  rgba(42, 181, 117, 0.16);
  --brand-mid:    rgba(42, 181, 117, 0.28);
  --brand-ink:    #8FF1C6;

  --sh-xs: 0 1px 3px rgba(0,0,0,0.4);
  --sh-sm: 0 2px 8px rgba(0,0,0,0.45), 0 1px 2px rgba(0,0,0,0.3);
  --sh-md: 0 6px 20px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.35);
  --sh-lg: 0 16px 40px rgba(0,0,0,0.55), 0 4px 12px rgba(0,0,0,0.4);

  background: radial-gradient(circle at 12% 18%, rgba(42,181,117,0.08) 0%, transparent 45%),
              radial-gradient(circle at 88% 12%, rgba(59,130,246,0.08) 0%, transparent 40%),
              var(--surface-2) !important;
  color: var(--text-2) !important;
}

body.dark h1, body.dark h2, body.dark h3,
body.dark h4, body.dark h5, body.dark h6,
body.dark .content-title,
body.dark .card-title {
  color: var(--text-1) !important;
}

/* Top nav glass effect on dark */
body.dark .main-header.navbar {
  background: rgba(20, 22, 30, 0.82) !important;
  border-bottom: 1px solid var(--border) !important;
}

/* Cards on dark */
body.dark .card,
body.dark .card-body {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text-2) !important;
}

body.dark .card-header {
  border-bottom-color: var(--border) !important;
}

body.dark .card-header h4,
body.dark .card-header > h4,
body.dark .card-header h5 {
  color: var(--text-1) !important;
}

body.dark .card:hover .card-header {
  background: rgba(42,181,117,0.05) !important;
}

/* Form controls on dark — text inputs, textareas, etc.
   IMPORTANT: do NOT apply a chevron background here. The previous rule
   leaked the SVG chevron into ALL inputs (textarea, IDNo, etc.) and
   tiled it. Chevron is now ONLY on selects. */
body.dark .form-control,
body.dark input.form-control,
body.dark textarea.form-control {
  background-color: var(--surface-3) !important;
  background-image: none !important;
  border-color: var(--border) !important;
  color: var(--text-1) !important;
}

/* Selects on dark — chevron via SVG (no-repeat, positioned right) */
body.dark .form-select,
body.dark select.form-control,
body.dark select.form-select {
  background-color: var(--surface-3) !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23C6CAD8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 12px !important;
  border-color: var(--border) !important;
  color: var(--text-1) !important;
}

body.dark select.form-select option,
body.dark select.form-control option {
  background-color: var(--surface-3) !important;
  color: var(--text-1) !important;
}

/* Date inputs / file inputs / number inputs in dark must show their
   indicators in light tones */
body.dark input[type="date"].form-control,
body.dark input[type="date"] {
  color-scheme: dark;
}

body.dark input[type="file"].form-control {
  background-color: var(--surface-3) !important;
  color: var(--text-2) !important;
}

body.dark input[type="file"].form-control::file-selector-button,
body.dark input[type="file"].form-control::-webkit-file-upload-button {
  background: var(--surface) !important;
  color: var(--text-1) !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  padding: 6px 12px !important;
  margin-right: 10px !important;
  cursor: pointer !important;
}

body.dark .form-control::placeholder { color: var(--text-3) !important; }

body.dark .form-control:focus,
body.dark .form-select:focus {
  background-color: var(--surface-3) !important;
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px rgba(42,181,117,0.2) !important;
}

body.dark .form-label {
  color: var(--text-3) !important;
}

/* Tables on dark */
body.dark table { color: var(--text-2) !important; }
body.dark table thead { background: var(--surface-3) !important; }
body.dark table thead th { color: var(--text-3) !important; border-bottom-color: var(--border) !important; }
body.dark .table > :not(caption) > * > *,
body.dark .table > tbody > tr > * { border-color: var(--border) !important; }
body.dark .table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: rgba(255,255,255,0.02) !important;
}
body.dark .table > tbody > tr:hover > * {
  background-color: rgba(42,181,117,0.10) !important;
}

/* GridView on dark */
body.dark [id*="gv_"] th {
  background: var(--surface-3) !important;
  color: var(--text-3) !important;
  border-bottom-color: var(--border) !important;
}
body.dark [id*="gv_"] td {
  border-bottom-color: var(--border) !important;
  color: var(--text-2) !important;
}
body.dark [id*="gv_"] tr:hover td { background: rgba(42,181,117,0.10) !important; }
body.dark [id*="gv_"] tr td table td a {
  color: var(--text-2) !important;
  background: var(--surface-3) !important;
  border-color: var(--border) !important;
}

/* Dropdown menus on dark */
body.dark .dropdown-menu {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}

body.dark .dropdown-menu .dropdown-item {
  color: var(--text-1) !important;
}

body.dark .dropdown-menu .dropdown-item:hover {
  background: var(--brand-light) !important;
  color: var(--brand) !important;
}

body.dark .dropdown-divider {
  border-top-color: var(--border) !important;
}

/* Top header avatar pill on dark */
body.dark .main-header .dropdown.nav-item > a.dropdown-toggle {
  background: var(--surface-3) !important;
  border-color: var(--border) !important;
}

body.dark .main-header .dropdown.nav-item > a.dropdown-toggle:hover,
body.dark .main-header .dropdown.nav-item.show > a.dropdown-toggle {
  background: var(--brand-light) !important;
  border-color: var(--brand) !important;
}

body.dark .main-header .nav-link.btn-icon { color: var(--text-3) !important; }
body.dark .main-header .nav-link.btn-icon:hover {
  background: var(--brand-light) !important;
  color: var(--brand) !important;
}

body.dark .main-header .btn-mobile { color: var(--text-3) !important; }
body.dark .main-header .btn-mobile:hover {
  background: var(--brand-light) !important;
  color: var(--brand) !important;
}

/* Footer on dark */
body.dark .main-footer {
  background: var(--surface) !important;
  border-top-color: var(--border) !important;
  color: var(--text-3) !important;
}

/* Content area background on dark */
body.dark .content-main {
  background: var(--surface-2) !important;
}

/* Buttons that were light on light */
body.dark .btn.btn-secondary {
  background: var(--surface-3) !important;
  color: var(--text-1) !important;
  border-color: var(--border) !important;
}
body.dark .btn.btn-secondary:hover {
  background: var(--border) !important;
}

/* Login card on dark — keep card readable */
body.dark .card-login {
  background: rgba(28, 31, 42, 0.96) !important;
}
body.dark .card-login h4.card-title { color: #F4F5F8 !important; }
body.dark .card-login .form-control {
  background: var(--surface-3) !important;
  border-color: var(--border) !important;
  color: var(--text-1) !important;
}

/* Stat icon backgrounds get a bit more luminous on dark */
body.dark .icontext .icon.rounded-circle {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.08) !important;
}

/* Tabs on dark */
body.dark .nav-tabs { border-bottom-color: var(--border) !important; }
body.dark .nav-tabs .nav-link { color: var(--text-3) !important; }
body.dark .nav-tabs .nav-link:hover { color: var(--text-1) !important; }
body.dark .nav-tabs .nav-link.active { color: var(--brand) !important; background: transparent !important; }

/* HR */
body.dark hr { border-color: var(--border) !important; }

/* Scrollbar */
body.dark ::-webkit-scrollbar-thumb { background: #2A2F3D; }
body.dark ::-webkit-scrollbar-thumb:hover { background: #3A4153; }

/* Loading overlay card on dark */
body.dark #cf-loading-overlay .cf-spinner-wrap {
  background: rgba(20,22,30,0.98) !important;
}
body.dark #cf-loading-overlay .cf-spinner-label {
  color: var(--text-2) !important;
}

/* Toastr on dark — keep readable */
body.dark .toast-success,
body.dark .toast-error,
body.dark .toast-warning,
body.dark .toast-info { color: #fff !important; }

/* Text-muted utility on dark */
body.dark .text-muted { color: var(--text-3) !important; }

/* Smooth theme transition */
body, .card, .card-body, .card-header,
.main-header.navbar, .navbar-aside,
.form-control, .form-select, .dropdown-menu,
.btn, .nav-tabs .nav-link, .main-footer {
  transition:
    background-color 0.25s var(--ease),
    color 0.25s var(--ease),
    border-color 0.25s var(--ease) !important;
}

/* Active darkmode toggle button — show a sun icon visually */
body.dark .main-header .nav-link.darkmode .material-icons {
  color: #F1B44C !important;
}

/* Sidebar already dark by default — preserve on .dark too (no override needed) */

/* ==========================================================
   MOBILE-ONLY HAMBURGER — hide on desktop
   ========================================================== */
@media (min-width: 992px) {
  .cf-mobile-only,
  .main-header .btn-mobile {
    display: none !important;
  }
}

/* ==========================================================
   ACCOUNT TOGGLE — show user's name beside avatar (modern pill)
   ========================================================== */
.main-header .cf-account-toggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 4px 14px 4px 4px !important;
}

.main-header .cf-account-toggle .cf-account-name {
  font-family: 'Outfit', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--text-1) !important;
  letter-spacing: -0.01em !important;
  white-space: nowrap !important;
  max-width: 160px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.main-header .cf-account-toggle .cf-account-name:empty {
  display: none !important;
}

@media (max-width: 575px) {
  .main-header .cf-account-toggle .cf-account-name { display: none !important; }
}

body.dark .main-header .cf-account-toggle .cf-account-name {
  color: var(--text-1) !important;
}

/* ==========================================================
   SIDEBAR — ELEVATED LUXURY TREATMENT
   Layered gradient, gold edge, premium hover, refined spacing.
   ========================================================== */
.navbar-aside {
  background:
    radial-gradient(ellipse at 0% 0%, rgba(212,175,55,0.08) 0%, transparent 55%),
    radial-gradient(ellipse at 100% 100%, rgba(42,181,117,0.10) 0%, transparent 55%),
    linear-gradient(180deg, #14171F 0%, #0E1016 100%) !important;
  border-right: 1px solid rgba(255,255,255,0.05) !important;
  box-shadow: 8px 0 32px rgba(0,0,0,0.35) !important;
  /* DO NOT set position here — main.css uses position:fixed for the
     sidebar layout. Overriding it collapses the sidebar into flow. */
}

/* Gold hairline along the right edge */
.navbar-aside::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(212,175,55,0.25) 20%,
    rgba(212,175,55,0.4) 50%,
    rgba(212,175,55,0.25) 80%,
    transparent 100%);
  pointer-events: none;
}

/* Brand top section */
.navbar-aside .aside-top {
  padding: 18px 18px !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  background: linear-gradient(180deg, rgba(212,175,55,0.04), transparent) !important;
}

.navbar-aside .brand-wrap {
  font-family: 'Outfit', sans-serif !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  color: #fff !important;
  background: linear-gradient(135deg, #FFFFFF 0%, #D4AF37 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.navbar-aside .btn-aside-minimize {
  background: rgba(255,255,255,0.04) !important;
  border-radius: 8px !important;
  width: 36px !important;
  height: 36px !important;
  transition: background var(--dur) var(--ease) !important;
}

.navbar-aside .btn-aside-minimize:hover {
  background: rgba(212,175,55,0.12) !important;
}

.navbar-aside .btn-aside-minimize .material-icons {
  color: rgba(255,255,255,0.55) !important;
  font-size: 20px !important;
}

.navbar-aside .btn-aside-minimize:hover .material-icons {
  color: #D4AF37 !important;
}

/* Crown logo block — frame it elegantly */
.navbar-aside nav > .d-flex.justify-content-center {
  background: radial-gradient(ellipse at center,
    rgba(212,175,55,0.12) 0%,
    rgba(212,175,55,0.04) 40%,
    transparent 70%) !important;
  margin: 8px 16px 12px !important;
  height: 130px !important;
  border-radius: 12px !important;
  padding: 8px !important;
  position: relative !important;
}

.navbar-aside nav > .d-flex.justify-content-center::before,
.navbar-aside nav > .d-flex.justify-content-center::after {
  content: '';
  position: absolute;
  width: 24px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,175,55,0.5), transparent);
  top: 50%;
}

.navbar-aside nav > .d-flex.justify-content-center::before { left: -4px; }
.navbar-aside nav > .d-flex.justify-content-center::after { right: -4px; }

.navbar-aside nav > .d-flex.justify-content-center img {
  filter: drop-shadow(0 4px 12px rgba(212,175,55,0.25)) drop-shadow(0 0 1px rgba(255,255,255,0.1)) !important;
  max-height: 100% !important;
}

/* Section divider after logo */
.navbar-aside nav > hr {
  margin: 12px 18px !important;
  border: none !important;
  height: 1px !important;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.08) 30%,
    rgba(255,255,255,0.08) 70%,
    transparent 100%) !important;
}

/* Menu items — premium hover */
.menu-aside .menu-item {
  margin-bottom: 1px !important;
}

.menu-aside .menu-link {
  position: relative !important;
  padding: 11px 14px !important;
  font-size: 13.25px !important;
  letter-spacing: 0.005em !important;
  border-radius: 10px !important;
  color: rgba(255,255,255,0.62) !important;
  overflow: hidden !important;
}

/* Subtle shimmer on hover */
.menu-aside .menu-link::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.04) 50%,
    transparent 100%);
  transform: translateX(-100%);
  transition: transform 0.55s var(--ease) !important;
  pointer-events: none;
}

.menu-aside .menu-link:hover::before {
  transform: translateX(100%);
}

.menu-aside .menu-link:hover {
  background: rgba(255,255,255,0.05) !important;
  color: #fff !important;
}

.menu-aside .menu-link .text {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 500 !important;
}

/* Submenu chevron (the little arrow) — subtle gold on hover */
.menu-aside .menu-item.has-submenu > .menu-link::after {
  content: '';
}

.menu-aside .menu-item.has-submenu > .menu-link {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff66'%3e%3cpath d='M6 4l4 4-4 4z'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 10px !important;
  padding-right: 32px !important;
  transition: background-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              background-image var(--dur) var(--ease) !important;
}

.menu-aside .menu-item.has-submenu.active > .menu-link,
.menu-aside .menu-item.has-submenu > .menu-link[aria-expanded="true"] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23D4AF37'%3e%3cpath d='M4 6l4 4 4-4z'/%3e%3c/svg%3e") !important;
}

/* Active item — left bar, brand glow */
.menu-aside .menu-item.active > .menu-link {
  background: linear-gradient(90deg,
    rgba(42,181,117,0.22) 0%,
    rgba(42,181,117,0.04) 100%) !important;
  color: #fff !important;
  border-left: 3px solid var(--brand) !important;
  padding-left: 11px !important;
  box-shadow: inset 0 0 0 1px rgba(42,181,117,0.18) !important;
}

.menu-aside .menu-item.active > .menu-link::after {
  content: '';
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 8px rgba(42,181,117,0.7);
}

/* Submenu rows */
.menu-aside .submenu {
  padding: 4px 0 6px 14px !important;
  margin-left: 12px !important;
  border-left: 1px dashed rgba(255,255,255,0.07) !important;
}

.menu-aside .submenu a {
  position: relative !important;
  display: block !important;
  padding: 7px 12px !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,0.5) !important;
  border-radius: 6px !important;
  margin-bottom: 1px !important;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease) !important;
}

.menu-aside .submenu a::before {
  content: '';
  position: absolute;
  left: -4px;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 1px;
  background: rgba(255,255,255,0.15);
  transition: background var(--dur) var(--ease);
}

.menu-aside .submenu a:hover {
  color: #fff !important;
  background: rgba(255,255,255,0.04) !important;
}

.menu-aside .submenu a:hover::before {
  background: var(--brand) !important;
}

.menu-aside .submenu a.active {
  color: var(--brand) !important;
  background: rgba(42,181,117,0.08) !important;
}

.menu-aside .submenu a.active::before {
  background: var(--brand) !important;
  width: 8px !important;
  box-shadow: 0 0 6px rgba(42,181,117,0.5);
}

/* Aside footer / minimised state polish */
body.aside-mini .navbar-aside .menu-aside .menu-link .text {
  display: none;
}

/* Make sidebar scrollable nicely */
.navbar-aside nav {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.08) transparent;
}

/* Sidebar in dark mode — already dark by default; just deepen the bg slightly */
body.dark .navbar-aside {
  background:
    radial-gradient(ellipse at 0% 0%, rgba(212,175,55,0.10) 0%, transparent 55%),
    radial-gradient(ellipse at 100% 100%, rgba(42,181,117,0.12) 0%, transparent 55%),
    linear-gradient(180deg, #0F1218 0%, #07080C 100%) !important;
}

/* ==========================================================
   COLLAPSED SIDEBAR (aside-mini) — show icons, flyout submenu
   ========================================================== */
/* Base icon chip when collapsed */
body.aside-mini .navbar-aside .menu-aside .menu-link {
  padding: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 44px !important;
}

body.aside-mini .navbar-aside .menu-aside .menu-link .text { display: none !important; }

body.aside-mini .navbar-aside .menu-aside .menu-link::before {
  content: '';
  display: inline-block;
  width: 28px; height: 28px;
  border-radius: 8px;
  background: rgba(255,255,255,0.12);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18), 0 2px 8px rgba(0,0,0,0.25);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px;
}

/* Default grid glyph */
body.aside-mini .menu-aside .menu-link::before {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23C6CAD8'%3e%3cpath d='M3 3h7v7H3V3zm0 11h7v7H3v-7zm11-11h7v7h-7V3zm0 11h7v7h-7v-7z'/%3e%3c/svg%3e");
}

/* Heuristic icon mapping by link keywords */
/* pos, sales, commission, inventory, report, member, tools, branch, kyc */
body.aside-mini .menu-aside a.menu-link[href*="pos"]::before,
body.aside-mini .menu-aside a.menu-link[href*="product"]::before {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23C6CAD8'%3e%3cpath d='M7 18c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm10 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zM7.16 14h9.55c.75 0 1.41-.41 1.75-1.03L21.82 7H6.21l-.94-2H1v2h2l3.6 7.59-1.35 2.44C4.52 17.37 5.48 19 7 19h12v-2H7l1.1-2z'/%3e%3c/svg%3e");
}

body.aside-mini .menu-aside a.menu-link[href*="sales"]::before { /* chart bar */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23C6CAD8'%3e%3cpath d='M3 3h2v18H3V3zm4 10h2v8H7v-8zm4-6h2v14h-2V7zm4 4h2v10h-2V11zm4-8h2v18h-2V3z'/%3e%3c/svg%3e");
}

body.aside-mini .menu-aside a.menu-link[href*="commission"]::before { /* percent */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23C6CAD8'%3e%3cpath d='M7 17l10-10-1.41-1.41L5.59 15.59 7 17zM7 7a2 2 0 100 4 2 2 0 000-4zm10 6a2 2 0 110 4 2 2 0 010-4z'/%3e%3c/svg%3e");
}

body.aside-mini .menu-aside a.menu-link[href*="inventory"]::before { /* boxes */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23C6CAD8'%3e%3cpath d='M21 16V8l-9-5-9 5v8l9 5 9-5zM12 4.15L18.53 8 12 11.85 5.47 8 12 4.15zM4 9.79l7 3.89V19l-7-3.89V9.79zm9 9.21v-5.32l7-3.89v5.32L13 19z'/%3e%3c/svg%3e");
}

body.aside-mini .menu-aside a.menu-link[href*="report"]::before { /* clipboard */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23C6CAD8'%3e%3cpath d='M19 3h-4.18C14.4 1.84 13.3 1 12 1s-2.4.84-2.82 2H5a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2V5a2 2 0 00-2-2zm-7 0a1 1 0 011 1h-2a1 1 0 011-1zm6 16H6V6h2v2h8V6h2v12z'/%3e%3c/svg%3e");
}

body.aside-mini .menu-aside a.menu-link[href*="member"]::before { /* users */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23C6CAD8'%3e%3cpath d='M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5s-3 1.34-3 3 1.34 3 3 3zM8 11c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V20h14v-3.5C15 14.17 10.33 13 8 13zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V20h6v-3.5c0-2.33-4.67-3.5-7-3.5z'/%3e%3c/svg%3e");
}

body.aside-mini .menu-aside a.menu-link[href*="tools"]::before { /* wrench */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23C6CAD8'%3e%3cpath d='M22.7 19.3l-6.4-6.4a6 6 0 11-2.9-2.9l6.4 6.4 2.9 2.9zM6 10a4 4 0 104 4 4 4 0 00-4-4z'/%3e%3c/svg%3e");
}

body.aside-mini .menu-aside a.menu-link[href*="branch"]::before { /* branch */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23C6CAD8'%3e%3cpath d='M6 3a3 3 0 100 6 3 3 0 000-6zm12 12a3 3 0 100 6 3 3 0 000-6zM6 9v6a3 3 0 003 3h7'/%3e%3c/svg%3e");
}

body.aside-mini .menu-aside a.menu-link[href*="kyc"]::before { /* shield */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23C6CAD8'%3e%3cpath d='M12 2l8 4v6c0 5-3.8 9.7-8 10-4.2-.3-8-5-8-10V6l8-4z'/%3e%3c/svg%3e");
}

/* Flyout submenu when collapsed */
body.aside-mini .navbar-aside .menu-item { position: relative !important; }
body.aside-mini .navbar-aside .menu-item > .submenu {
  position: absolute !important;
  left: calc(100% + 8px) !important;
  top: 6px !important;
  min-width: 220px !important;
  background: rgba(20,22,30,0.98) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: 0 12px 36px rgba(0,0,0,0.45) !important;
  border-radius: 10px !important;
  padding: 8px 8px !important;
  display: none !important;
  z-index: 1000 !important;
}

body.aside-mini .navbar-aside .menu-item:hover > .submenu {
  display: block !important;
}

/* Submenu rows in flyout */
body.aside-mini .navbar-aside .submenu a {
  color: #E6E9F2 !important;
}
body.aside-mini .navbar-aside .submenu a:hover {
  background: rgba(42,181,117,0.1) !important;
  color: #2AB575 !important;
}

/* ----------------------------------------------------------
   UPGRADE LOADING & MESSAGE STYLES
   ---------------------------------------------------------- */
.upgrade-loading {
  display: inline-flex;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 14px !important;
  margin-top: 8px !important;
  background: linear-gradient(135deg, rgba(42,181,117,0.08) 0%, rgba(42,181,117,0.03) 100%) !important;
  border: 1px solid rgba(42,181,117,0.15) !important;
  border-radius: var(--rad-sm) !important;
  font-size: 12px !important;
  color: var(--brand) !important;
  font-weight: 500 !important;
  animation: fadeIn 0.3s var(--ease) !important;
}

.loading-spinner {
  width: 16px !important;
  height: 16px !important;
  border: 2px solid rgba(42,181,117,0.2) !important;
  border-top-color: var(--brand) !important;
  border-radius: 50% !important;
  animation: spin 0.8s linear infinite !important;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.upgrade-message {
  padding: 12px 16px !important;
  margin-top: 8px !important;
  border-radius: var(--rad-sm) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  animation: slideIn 0.35s var(--ease) !important;
  display: flex;
  align-items: center !important;
  gap: 10px !important;
}

@keyframes slideIn {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: translateX(0); }
}

.upgrade-message.success {
  background: linear-gradient(135deg, rgba(42,181,117,0.12) 0%, rgba(42,181,117,0.05) 100%) !important;
  border: 1px solid rgba(42,181,117,0.25) !important;
  color: #1E9E63 !important;
}

.upgrade-message.success::before {
  content: '✓' !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  background: var(--brand) !important;
  color: white !important;
  border-radius: 50% !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
}

.upgrade-message.error {
  background: linear-gradient(135deg, rgba(239,68,68,0.12) 0%, rgba(239,68,68,0.05) 100%) !important;
  border: 1px solid rgba(239,68,68,0.25) !important;
  color: #DC2626 !important;
}

.upgrade-message.error::before {
  content: '!' !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  background: #EF4444 !important;
  color: white !important;
  border-radius: 50% !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
}

.upgrade-message.warning {
  background: linear-gradient(135deg, rgba(251,191,36,0.12) 0%, rgba(251,191,36,0.05) 100%) !important;
  border: 1px solid rgba(251,191,36,0.25) !important;
  color: #D97706 !important;
}

.upgrade-message.warning::before {
  content: '⚠' !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  background: #FBBF24 !important;
  color: white !important;
  border-radius: 50% !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
}

/* ==========================================================
   REPORT + ADMIN REDESIGN PASS (remaining issue pages)
   ========================================================== */

/* Keep filter controls readable across report pages */
.content-main .card-header .form-select,
.content-main .card-header select.form-select,
.content-main .card-header select.form-control {
  max-width: none !important;
  text-overflow: ellipsis;
}

.content-main .card-header .row.align-items-center {
  display: flex;
  align-items: flex-end;
  row-gap: 12px !important;
}

.content-main .card-header .row.align-items-center > [class*="col-"] {
  margin-bottom: 0 !important;
}

.content-main .card-header .row.mt-30,
.content-main .card-header .row.mt-4 {
  margin-top: 10px !important;
}

/* Harmonize primary actions in report pages */
[id$="btnSubmit"],
[id$="btnExportToExcel"] {
  min-height: 40px !important;
  padding: 0 16px !important;
  border-radius: 10px !important;
}

/* Registration summary tabs */
#myTab {
  gap: 8px;
  border-bottom: 1px solid var(--border) !important;
  margin-bottom: 10px;
}

#myTab .nav-link {
  border: 1px solid transparent !important;
  border-radius: 10px 10px 0 0 !important;
  font-weight: 600;
  color: var(--text-2) !important;
  padding: 10px 14px;
}

#myTab .nav-link.active {
  background: rgba(42, 181, 117, 0.12) !important;
  border-color: rgba(42, 181, 117, 0.3) !important;
  color: var(--brand-ink) !important;
}

/* Report table wrappers: polished scroll containers */
[id$="Panel1"],
[id$="Panel2"],
[id$="Panel3"],
[id$="pnl_unregistered"],
[id$="pnl_registered"] {
  border: 1px solid var(--border) !important;
  border-radius: var(--rad-md) !important;
  background: rgba(42, 181, 117, 0.02);
}

[id$="Panel1"] table,
[id$="Panel2"] table,
[id$="Panel3"] table,
[id$="pnl_unregistered"] table,
[id$="pnl_registered"] table {
  margin-bottom: 0 !important;
}

/* Hub list: remove wasted vertical space while keeping scrolling */
[id$="pnl_user"] {
  height: auto !important;
  max-height: calc(100vh - 280px) !important;
  overflow-y: auto !important;
}

[id$="dtl_hub_list"] .card {
  border: 1px solid rgba(42, 181, 117, 0.2) !important;
}

/* KYC actions: prevent cramped approve/reject controls */
[id$="gvKyc"] td:last-child {
  white-space: nowrap;
}

[id$="gvKyc"] .btn {
  min-width: 82px;
}

/* Report totals line (grand totals / counters) */
.card-header .row.mt-30 label,
.card-header .row.mt-30 span,
.card-header .row.mt-30 .form-label {
  margin-right: 8px;
}

@media (max-width: 991px) {
  .content-main .card-header .row.align-items-center > [class*="col-"] {
    width: 100%;
    max-width: 100%;
  }

  [id$="btnSubmit"],
  [id$="btnExportToExcel"] {
    width: 100%;
  }

  [id$="pnl_user"] {
    max-height: calc(100vh - 220px) !important;
  }
}

/* ==========================================================
   MODERN OVERHAUL — LAYOUT + POS STATES
   ========================================================== */

/* Shell + content canvas */
.cf-shell {
  display: flex;
  min-height: 100vh;
  width: 100%;
}

.main-wrap {
  position: relative;
  background: transparent !important;
  min-height: 100vh;
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
}

.content-main {
  width: 100%;
  max-width: 100%;
}

.content-main .card {
  width: 100%;
}

.cf-update-panel-block {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
}

.main-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 10% 15%, rgba(42, 181, 117, 0.08) 0%, transparent 45%),
    radial-gradient(circle at 90% 10%, rgba(70, 130, 230, 0.06) 0%, transparent 40%),
    linear-gradient(180deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.05) 100%);
  pointer-events: none;
  z-index: 0;
}

.main-wrap > * {
  position: relative;
  z-index: 1;
}

/* Sidebar extras */
.cf-aside-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cf-brand-badge {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: var(--rad-pill);
  background: rgba(42, 181, 117, 0.16);
  color: #BDF4DA;
  font-weight: 600;
}

.cf-nav-section-title {
  margin: 16px 18px 8px;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(248,250,252,0.5);
}

.cf-nav-scroll {
  padding-bottom: 18px;
}

/* Modern cards + inputs */
.card {
  border-radius: var(--rad-lg) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--sh-sm) !important;
  overflow: hidden;
}

.card-header {
  background: rgba(255,255,255,0.7) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 16px 18px !important;
}

.card-body {
  padding: 20px !important;
}

.form-control,
.form-select {
  min-height: 44px !important;
  border-radius: 12px !important;
  border: 1px solid var(--border) !important;
  background-color: #fff !important;
  box-shadow: none !important;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px rgba(42, 181, 117, 0.18) !important;
}

.form-control[readonly],
.form-control:disabled,
.form-select:disabled {
  background: var(--surface-3) !important;
  color: var(--text-3) !important;
  opacity: 0.8 !important;
}

.btn {
  border-radius: 12px !important;
  font-weight: 600 !important;
  min-height: 42px;
}

.btn-primary {
  background: linear-gradient(135deg, #2AB575 0%, #1E9E63 100%) !important;
  border: none !important;
  box-shadow: 0 8px 18px rgba(42, 181, 117, 0.24) !important;
}

.btn-primary:hover {
  filter: brightness(0.98);
  transform: translateY(-1px);
}

.btn-warning {
  background: linear-gradient(135deg, #F2C14E 0%, #E0A83D 100%) !important;
  border: none !important;
  color: #1F2937 !important;
}

.btn-danger {
  background: linear-gradient(135deg, #F87171 0%, #EF4444 100%) !important;
  border: none !important;
}

/* Alert banners for inline POS messages */
.cf-alert {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 12px;
  font-weight: 600;
  box-shadow: var(--sh-xs);
  margin-bottom: 12px;
}

.cf-alert::before {
  content: '●';
  font-size: 10px;
}

.cf-alert-success {
  background: rgba(42, 181, 117, 0.12);
  color: #0F5132;
  border: 1px solid rgba(42, 181, 117, 0.3);
}

.cf-alert-error {
  background: rgba(239, 68, 68, 0.12);
  color: #7F1D1D;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.cf-alert-warning {
  background: rgba(245, 158, 11, 0.12);
  color: #92400E;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.cf-alert-info {
  background: rgba(59, 130, 246, 0.1);
  color: #1E3A8A;
  border: 1px solid rgba(59, 130, 246, 0.25);
}

/* Toast overhaul */
#toast-container {
  position: fixed !important;
  top: 78px !important;
  right: 24px !important;
  z-index: 100000 !important;
  pointer-events: none;
  width: auto !important;
  max-width: min(420px, calc(100vw - 48px));
}

#toast-container > div {
  border-radius: 14px !important;
  box-shadow: var(--sh-md) !important;
  padding: 16px 18px !important;
  opacity: 1 !important;
  pointer-events: auto;
}

#toast-container .toast-success {
  background: rgba(42, 181, 117, 0.92) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(42, 181, 117, 0.5) !important;
}

#toast-container .toast-error {
  background: rgba(239, 68, 68, 0.92) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(239, 68, 68, 0.5) !important;
}

#toast-container .toast-warning {
  background: rgba(245, 158, 11, 0.92) !important;
  color: #1F2937 !important;
  border: 1px solid rgba(245, 158, 11, 0.5) !important;
}

/* POS layout grid */
.cf-pos-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr);
  gap: 22px;
}

.cf-pos-main,
.cf-pos-side {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.cf-pos-card .card-header {
  background: rgba(255,255,255,0.85) !important;
}

.cf-pos-actions {
  position: sticky;
  bottom: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  padding: 16px;
  border-radius: 16px;
  background: rgba(255,255,255,0.92);
  border: 1px solid var(--border-strong);
  box-shadow: var(--sh-md);
}

.cf-pos-actions .btn {
  min-width: 140px;
}

.cf-pos-summary article.dlist,
.cf-pos-summary .dlist {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-weight: 600;
}

.cf-pos-summary dt {
  color: var(--text-3);
  font-weight: 600;
}

.cf-pos-summary dd {
  color: var(--text-1);
  font-weight: 700;
}

@media (max-width: 1200px) {
  .cf-pos-grid {
    grid-template-columns: 1fr;
  }

  .cf-pos-actions {
    position: static;
  }
}