.loader {
    width: 50px;
    aspect-ratio: 1;
    display: grid;
    border-radius: 50%;
    background:
      linear-gradient(0deg ,rgba(47, 11, 211, 0.5) 30%,#1a0fbd00 0 70%,rgb(61, 31, 196) 0) 50%/8% 100%,
      linear-gradient(90deg,rgba(70, 31, 179, 0.25) 30%,#2b119e00 0 70%,rgba(2, 13, 107, 0.75) 0) 50%/100% 8%;
    background-repeat: no-repeat;
    animation: l23 1s infinite steps(12);
  }
  .loader::before,
  .loader::after {
    content: "";
    grid-area: 1/1;
    border-radius: 50%;
    background: inherit;
    opacity: 0.915;
    transform: rotate(30deg);
  }
  .loader::after {
    opacity: 0.83;
    transform: rotate(60deg);
  }
  @keyframes l23 {
    100% {transform: rotate(1turn)}
  }
  
  /* Loader container styling */
  .loader-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
  }
  .loader-container.active {
    opacity: 1;
    visibility: visible;
  }
/* Remove scrollbar for all elements */
html, body, div, section, main, aside, header, footer, 
article, nav, figure, figcaption, details, summary,
.auth-modal, .modal, .modal-content, .sidebar, .content-area,
.stats-cards, .card, .tab-container, .table-responsive,
.qr-code-container, .prescription-instructions,
.prescription-items, .footer-content {
    /* Hide scrollbar but maintain functionality */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

/* Hide scrollbar for Chrome, Safari and Opera */
html::-webkit-scrollbar,
body::-webkit-scrollbar,
div::-webkit-scrollbar,
section::-webkit-scrollbar,
main::-webkit-scrollbar,
aside::-webkit-scrollbar,
header::-webkit-scrollbar,
footer::-webkit-scrollbar,
article::-webkit-scrollbar,
nav::-webkit-scrollbar,
figure::-webkit-scrollbar,
figcaption::-webkit-scrollbar,
details::-webkit-scrollbar,
summary::-webkit-scrollbar,
.auth-modal::-webkit-scrollbar,
.modal::-webkit-scrollbar,
.modal-content::-webkit-scrollbar,
.sidebar::-webkit-scrollbar,
.content-area::-webkit-scrollbar,
.stats-cards::-webkit-scrollbar,
.card::-webkit-scrollbar,
.tab-container::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar,
.qr-code-container::-webkit-scrollbar,
.prescription-instructions::-webkit-scrollbar,
.prescription-items::-webkit-scrollbar,
.footer-content::-webkit-scrollbar {
    display: none;
}

html, body {
    overflow: auto;
}

.auth-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(255, 255, 255);
    z-index: 2000;
    justify-content: center;
    align-items: center;
    padding: 20px;
    overflow-y: auto;
}

.modal-content {
    background-color: var(--white);
    border-radius: 8px;
    width: 100%;
    max-width: 450px;
    padding: 30px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    position: relative;
    animation: modalFadeIn 0.3s ease-out;
    /* Ensure modal content doesn't create its own scroll */
    max-height: calc(100vh - 40px);
    overflow-y: auto;
}

.sidebar {
  
 
    overflow-y: auto;
}

.content-area {
  
  
    overflow-y: auto;
}

.table-responsive {
    overflow-x: auto;
    overflow-y: hidden;
}

/* Mobile responsiveness */
@media (max-width: 992px) {
    .sidebar-menu {
        display: flex;
        overflow-x: auto;
        padding: 0 10px;
        /* Hide scrollbar but allow scrolling */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    
    .sidebar-menu::-webkit-scrollbar {
        display: none;
    }
}

.mobile-scroll {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.mobile-scroll::-webkit-scrollbar {
    display: none;
}