:root { 
  --sbs-purple: #7A2EFF;   /* brand purple from site */ 
  --sbs-purple-dark: #5C10D6; /* slightly darker for hover states */ 
  --sbs-black: #000000; 
  --sbs-black-light: rgba(0,0,0,0.75); /* for secondary labels/hints */ 
  --sbs-white: #FFFFFF; 
} 

.main-wrapper .main-content {
    padding-left: 57px;
}

.page-title_black {
    margin-top: 0 !important;
    padding-top: 0 !important;
     color: var(--sbs-black) !important;
    font-weight: 600;
}
p.page-subtitle_black_light  {
     color:var(--sbs-black);
    margin-bottom: 0;
}
p.invoices-color{
    color:var(--sbs-black-light) !important;
    text-decoration: none;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    transition: all 0.2s ease;
    font-weight: 500;
}
h3.card-title_black {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--sbs-black);
    margin: 0;
}
.font-medium.text-sm {
    color: var(--sbs-black);
   border:none;
    background: #ffffff00;
}
.text-gray_light-black{
    color:var(--sbs-black-light);
}
button.px-4.py-2.text-sm.font-medium.rounded-lg.bg-blue-100.text-blue-700, 
button.px-4.py-2.text-sm.font-medium.rounded-lg.text-blue-100.hover\:text-blue-700 {
    color: #ffffff;
    background: #7D01D4;
    border: purple;
}
button.px-4.py-2.text-sm.font-medium.rounded-lg.bg-blue-100.text-blue-700:hover,
button.px-4.py-2.text-sm.font-medium.rounded-lg.text-blue-100.hover\:text-blue-700:hover  {
   background: linear-gradient(135deg, #7D01D4 0%, #7D01D4 100%) !important;
}
   
.p-4.rounded-lg {
    text-align: left;
}
.flex-shrink-0 {
    margin-top: 26px;
}
button.text-green-600.hover\:text-green-900.mr-3 {
    border: none;
    background-color: #ffffff00;
}
button.text-green-600.hover\:text-green-900.mr-3:hover {
    
    background-color:  #5C10D6;
    color: white;
    border-radius: 40px;
}
button.text-gray-400.hover\:text-gray-600 {
    border: none;
    background-color: white;
}
button.text-gray-400.hover\:text-gray-600:hover {
    border: none;
    background-color: #7A2EFF;
    border-radius: 50%;
}
a.btn.btn-outline.btn-sm,button.btn.btn-outline-primary.me-2  {
    background-color: #7D01d4 !important;
    color: white !important;
}
button.btn.btn-outline-primary.me-2:hover {
    color: black !important;
}
 
  .alert.border-0 {
    background-color: #e9caff;
}
button.btn.me-2 {
    background-color: #7D01d4 !important;
    color: #ffffff;
}
   
a.btn.btn-outline-email {
   color: white !important;
    background: #7d01d4 !important;
}
.space-y-4 {
    color: black;
}
input.kyc-form {
    font-size: 15px;
    border: none !important;
}
/* --------------------------------------------------Responsive------------------------------------------*/
@media (min-width:320px) and (max-width:600px){
    .d-flex.align-items-center.border-top {
    padding: 4px 7px;
}
    span.material-icons-outlined.text-white {
    padding: 6px 15px;
}
    .sidebar-wrapper .sidebar-header .logo-name h5 {
    font-size: 30px;

}
.main-wrapper .main-content {
    padding: 0px;
    width: 90%;
    margin: 0 auto;
}
.main-content {
     padding: 0px; 
  
}
.main-wrapper .main-content {
     padding: 0px; 
}
i.material-icons-outlined {
    color: white!important;
    font-size: 25px;
}
}

/* ===== Sidebar styles ===== */
.sidebar-wrapper {
  position: fixed;
  top: 0;
  left: -260px;  /* hidden by default */
  width: 260px;
  height: 100%;
  background: #fff;
  box-shadow: 2px 0 8px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
  z-index: 1200;
}

/* When toggled (React adds .active) */
.sidebar-wrapper.active {
  left: 0;
}

/* Overlay when sidebar is open on mobile */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 1100;
}

/* ===== Mobile toggle button ===== */
.mobile-menu-btn {
    display: none;
    position: fixed;   /* ✅ stays fixed when scrolling */
    top: 15px;
    left: 15px;
    z-index: 9;     /* ✅ always above overlay/sidebar */
    background: transparent; /* ✅ transparent bg */
    border: none;
    border-radius: 6px;
    padding: 5px 13px;
    cursor: pointer;
    box-shadow: none;  /* ✅ remove box-shadow for clean look */
}

/* Default hamburger icon color */
.mobile-menu-btn .material-icons-outlined {
    font-size: 34px;
    color: black !important;
}
.mobile-menu-btn i {
  font-size: 24px;
}

/* ===== Desktop view (>=1200px) ===== */
@media (min-width: 1200px) {
  .sidebar-wrapper {
    left: 0 !important;
    position: static;
    box-shadow: none;
  }
  .mobile-menu-btn {
    display: none !important; /* hide menu button on desktop */
  }
  .overlay {
    display: none !important;
  }
}

/* ===== Mobile view (<1200px) ===== */
@media (max-width: 1199px) {
  .mobile-menu-btn {
    display: block;
  }
}

/* Sidebar ko fix karne ke liye */
.sidebar-wrapper {
  position: fixed;      /* hamesha screen ke left side pe chipka rahe */
  top: 0;
  left: 0;
  height: 100vh;        /* poora screen height */
  width: 260px;         /* apna sidebar width */
  overflow-y: auto;     /* sirf vertical scroll allow */
  overflow-x: hidden;   /* left-right scroll band */
  z-index: 1000;
}

/* Page content ko sidebar ke baaju shift karo */
.content-wrapper {
  margin-left: 260px;   /* jitna sidebar width hai utna shift */
  width: calc(100% - 260px);
}

/* Body ko safe banane ke liye */
body {
  overflow-x: hidden;   /* left-right scroll ko band karega */
}

.user-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 29px !important; 
    height: 40px;
}


.user-icon-wrapper i {
    color: white !important;
    font-size: 28px;
}
.d-flex.align-items-center.border-top {
    padding: 4px 2px;
}

/* Sidebar expanded */
.sidebar {
  width: 220px;
  transition: width 0.3s ease;
  overflow-x: hidden;
}

/* Sidebar collapsed */
.sidebar.collapsed {
  width: 60px;
}

/* Hide profile text when collapsed */
.sidebar.collapsed .flex-grow-1 {
  display: none;
}

/* Center the profile icon in collapsed mode */
.sidebar.collapsed .user-icon-wrapper {
  margin: 0 auto;
}


/* Sidebar scroll hidden but still scrollable */
.sidebar-wrapper {
  overflow-y: auto;          /* allow vertical scroll */
  -ms-overflow-style: none;  /* hide scrollbar IE/Edge */
  scrollbar-width: none;     /* hide scrollbar Firefox */
}

.sidebar-wrapper::-webkit-scrollbar {
  display: none;             /* hide scrollbar Chrome/Safari */
}

/* ------------sidebar close toggle---------------- */