/* =========================================================================
   NOVAPAY THEME
   A classy, glossy fintech skin layered on top of the existing app shell.
   Design tokens
   -------------
   --nv-midnight   #0A0E27   deep navy base (sidebar / header ground)
   --nv-indigo     #141B3C   raised surface within the navy
   --nv-gold       #F5B93D   "Nova Gold" — primary brand accent (prosperity)
   --nv-emerald    #16DBAA   "Signal Emerald" — growth / positive money
   --nv-violet     #8B5CF6   "Electric Violet" — premium / tech accent
   --nv-cloud      #F7F8FC   near-white canvas for content area
   Type: Space Grotesk (display / wordmark) + Plus Jakarta Sans (UI / body)
   ========================================================================= */

:root{
  --nv-midnight: #0A0E27;
  --nv-midnight-2: #0F1530;
  --nv-indigo: #141B3C;
  --nv-indigo-2: #1B2350;
  --nv-gold: #F5B93D;
  --nv-gold-2: #FFD57A;
  --nv-emerald: #16DBAA;
  --nv-violet: #8B5CF6;
  --nv-coral: #FF6B7A;
  --nv-sky: #38BDF8;
  --nv-cloud: #F7F8FC;
  --nv-ink: #101433;
  --nv-muted: #8C93B8;
  --nv-line: rgba(255,255,255,.08);

  --nv-font-display: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
  --nv-font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

body{
  font-family: var(--nv-font-body);
  background: var(--nv-cloud) !important;
  color: var(--nv-ink);
}

h1,h2,h3,h4,h5,h6{
  font-family: var(--nv-font-display);
  letter-spacing: -.01em;
}

/* ---------------------------------------------------------------------
   Wordmark logo — replaces the raster brand-logo images everywhere
--------------------------------------------------------------------- */
.novapay-logo{
  display: inline-flex !important;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
}

.novapay-logo__mark{
  position: relative;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 10px;
  background: linear-gradient(145deg, var(--nv-gold), var(--nv-violet) 130%);
  box-shadow: 0 6px 16px -4px rgba(245,185,61,.55), inset 0 1px 0 rgba(255,255,255,.35);
}
.novapay-logo__mark::before{
  content:"";
  position:absolute; inset:7px;
  border-radius: 50%;
  background: var(--nv-midnight);
}
.novapay-logo__mark::after{
  content:"";
  position:absolute;
  width:7px; height:7px;
  border-radius:50%;
  background: var(--nv-gold-2);
  top:50%; left:50%;
  transform: translate(-50%,-50%);
  box-shadow: 0 0 10px 2px rgba(255,213,122,.9);
  animation: nvPulse 2.4s ease-in-out infinite;
}
@keyframes nvPulse{
  0%,100%{ transform:translate(-50%,-50%) scale(1); opacity:1; }
  50%{ transform:translate(-50%,-50%) scale(1.5); opacity:.55; }
}

.novapay-logo__text{
  font-family: var(--nv-font-display);
  font-weight: 700;
  font-size: 1.28rem;
  line-height: 1;
  white-space: nowrap;
}
.novapay-logo__nova{ color:#fff; }
.novapay-logo__pay{
  background: linear-gradient(90deg, var(--nv-gold), var(--nv-gold-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.novapay-logo__text--toggle{ display:none; font-size:1.1rem; }

.app-sidebar.collapsed .novapay-logo__text--desktop,
.app-sidebar:not(:hover).collapsed .novapay-logo__text--desktop{ display:none; }

/* topbar variant sits on the gradient header, so keep it compact */
.novapay-logo--topbar{ margin-right:.25rem; }

/* ---------------------------------------------------------------------
   Sidebar
--------------------------------------------------------------------- */
.app-sidebar{
  background: linear-gradient(195deg, var(--nv-midnight) 0%, var(--nv-indigo) 100%) !important;
  border-right: 1px solid var(--nv-line);
}

.main-sidebar-header{
  background: transparent !important;
  border-bottom: 1px solid var(--nv-line);
  height: 70px;
}

.slide__category .category-name{
  font-family: var(--nv-font-display);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--nv-gold) !important;
  opacity: .85;
}

.app-sidebar .side-menu__item{
  color: #C6CBE8 !important;
  border-radius: 10px;
  margin: 1px 10px;
  transition: background .2s ease, color .2s ease, transform .15s ease;
}
.app-sidebar .side-menu__item .side-menu__icon{
  filter: none;
  opacity: .85;
}
.app-sidebar .side-menu__item:hover{
  background: rgba(255,255,255,.06);
  color: #fff !important;
  transform: translateX(2px);
}
.app-sidebar .side-menu__item.active,
.app-sidebar .slide.active > .side-menu__item{
  background: linear-gradient(90deg, rgba(245,185,61,.18), rgba(139,92,246,.10));
  color: #fff !important;
  box-shadow: inset 3px 0 0 0 var(--nv-gold);
}
.app-sidebar .slide-menu.child1,
.app-sidebar .slide-menu.child2{
  background: rgba(0,0,0,.18);
  border-radius: 10px;
  margin: 2px 10px;
}

/* ---------------------------------------------------------------------
   Top header bar
--------------------------------------------------------------------- */
.app-header{
  background: linear-gradient(100deg, var(--nv-midnight) 0%, #1E1547 55%, #241B5E 100%) !important;
  border-bottom: 1px solid var(--nv-line);
}
.app-header .header-link,
.app-header .header-link-icon{
  color: #E7E9FB !important;
}
.app-header .header-link:hover{
  color: var(--nv-gold) !important;
}
.main-header-center input.form-control{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: #fff;
}
.main-header-center input.form-control::placeholder{ color: rgba(255,255,255,.55); }
.main-header-center .btn{ color:#fff; }

.header-icon-badge{
  background: var(--nv-coral) !important;
}

.mainuserProfile .user-name{
  color: #fff !important;
}

/* ---------------------------------------------------------------------
   Page header / breadcrumb
--------------------------------------------------------------------- */
.page-header-breadcrumb{
  padding: 1.1rem 1.5rem .25rem;
}
.page-header-breadcrumb h4{
  font-family: var(--nv-font-display);
  font-weight: 700;
  color: var(--nv-ink);
}
.page-header-breadcrumb .breadcrumb-item a,
.page-header-breadcrumb .breadcrumb-item.active{
  color: var(--nv-muted) !important;
}

/* ---------------------------------------------------------------------
   Cards — the glossy classy shell used across the dashboard
--------------------------------------------------------------------- */
.card.custom-card{
  border: 1px solid rgba(16,20,51,.06);
  border-radius: 18px;
  box-shadow: 0 10px 30px -18px rgba(16,20,51,.25);
  overflow: hidden;
}

.btn-secondary{
  background: linear-gradient(135deg, var(--nv-indigo-2), var(--nv-midnight));
  border: none;
  box-shadow: 0 10px 22px -10px rgba(20,27,60,.55);
}
.btn-success{
  background: linear-gradient(135deg, var(--nv-emerald), #0EA37E);
  border: none;
  box-shadow: 0 10px 22px -10px rgba(22,219,170,.55);
}
.btn-warning{
  background: linear-gradient(135deg, var(--nv-gold), #E29A15);
  border: none;
  color: #241B00;
  font-weight: 700;
  box-shadow: 0 10px 22px -10px rgba(245,185,61,.6);
}

.badge.bg-primary{
  background: linear-gradient(135deg, var(--nv-violet), #6D3FE0) !important;
}

::selection{ background: var(--nv-gold-2); color: #241B00; }