/********** Template CSS **********/
:root {
  --primary: #00b894;
  --secondary: #018f6b;
  --light: #F0F6FF;
  --dark: #262B47;
}


/*** Spinner ***/
#spinner {
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s ease-out, visibility 0s linear .5s;
  z-index: 99999;
}

#spinner.show {
  transition: opacity .5s ease-out, visibility 0s linear 0s;
  visibility: visible;
  opacity: 1;
}

/* Use primary color for the login button */
.btn-login {
  background-color: var(--secondary);
  /* Default to secondary color */
  color: white;
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.btn-login:hover {
  background-color: var(--primary);
  /* Hover to primary color */
  color: white;
}


/* Offcanvas Header Styling */
.offcanvas-header {
  background-color: var(--primary);
  /* Primary color for the header */
  color: white;
}

/* Offcanvas Title Styling */
.offcanvas-title {
  font-size: 24px;
  font-weight: bold;
}

/* Form Input Styling */
.member-login-form input[type="text"],
.member-login-form input[type="password"] {
  border: 2px solid var(--primary);
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 20px;
  font-size: 16px;
}

/* General Form Styling - More Visible Borders */
.form-control,
.form-select {
  border: 2px solid #d9dee3 !important;
}

.form-control:focus,
.form-select:focus {
  border: 2px solid var(--primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(0, 184, 148, 0.25);
}

.card {
  border: 2px solid #d9dee3 !important;
}

.card-header {
  border-bottom: none !important;
}

/* Label Styling */
.member-login-form label {
  font-size: 16px;
  font-weight: bold;
  color: var(--dark);
  /* Dark color for labels */
}

/* Text links and forgot password. Links styled as buttons (.btn) are excluded so
   they keep their own text colour, e.g. white on .btn-primary, instead of
   turning the same green as their background. */
.text-center a:not(.btn) {
  color: var(--primary);
  /* Primary color for links */
}

.text-center a:not(.btn):hover {
  color: var(--secondary);
  /* Secondary color on hover */
}

/* Footer section Styling */
.mt-auto.mb-5 {
  color: var(--dark);
  /* Set the text color to dark for footer */
}

.contact-link {
  color: var(--primary);
  /* Primary color for the contact link */
}

.contact-link:hover {
  color: var(--secondary);
  /* Secondary color on hover */
}



/*** Heading ***/
h1,
h2,
.fw-bold {
  font-weight: 700 !important;
}

h3,
h4,
.fw-semi-bold {
  font-weight: 600 !important;
}

h5,
h6,
.fw-medium {
  font-weight: 500 !important;
}


/*** Gradient Text & BG ***/
.text-primary-gradient {
  background: linear-gradient(to bottom right, var(--primary), var(--secondary));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-secondary-gradient {
  background: linear-gradient(to bottom right, var(--secondary), var(--primary));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.bg-primary-gradient {
  background: linear-gradient(to bottom right, var(--primary), var(--secondary));
}

.bg-secondary-gradient {
  background: linear-gradient(to bottom right, var(--secondary), var(--primary));
}


/*** Button ***/
.btn {
  transition: .5s;
}

.btn.btn-primary-gradient,
.btn.btn-secondary-gradient {
  position: relative;
  overflow: hidden;
  border: none;
  color: #FFFFFF;
  z-index: 1;
}

.btn.btn-primary-gradient::after,
.btn.btn-secondary-gradient::after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: .5s;
  z-index: -1;
  opacity: 0;
}

.btn.btn-primary-gradient,
.btn.btn-secondary-gradient::after {
  background: linear-gradient(to bottom right, var(--primary), var(--secondary));
}

.btn.btn-secondary-gradient,
.btn.btn-primary-gradient::after {
  background: linear-gradient(to bottom right, var(--secondary), var(--primary));
}

.btn.btn-primary-gradient:hover::after,
.btn.btn-secondary-gradient:hover::after {
  opacity: 1;
}

.btn-square {
  width: 38px;
  height: 38px;
}

.btn-sm-square {
  width: 32px;
  height: 32px;
}

.btn-lg-square {
  width: 48px;
  height: 48px;
}

.btn-square,
.btn-sm-square,
.btn-lg-square {
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: normal;
  border-radius: 50px;
}

.back-to-top {
  position: fixed;
  display: none;
  right: 45px;
  bottom: 45px;
  z-index: 99;
  border: none;
  background: linear-gradient(to bottom right, var(--primary), var(--secondary));
}


/*** Navbar ***/
.navbar-light .navbar-nav .nav-link {
  position: relative;
  margin-right: 25px;
  padding: 45px 0;
  font-family: 'Jost', sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: var(--light) !important;
  outline: none;
  transition: .5s;
}

.navbar-light .navbar-nav .nav-link::before {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  border: 10px solid;
  border-color: var(--light) transparent transparent transparent;
  transition: .5s;
}

.sticky-top.navbar-light .navbar-nav .nav-link {
  padding: 20px 0;
  color: var(--dark) !important;
}

.navbar-light .navbar-nav .nav-link:hover::before,
.navbar-light .navbar-nav .nav-link.active::before {
  top: 0;
}

.navbar-light .navbar-brand h1 {
  color: #FFFFFF;
}

.navbar-light .navbar-brand img {
  max-height: 60px;
  transition: .5s;
}

.sticky-top.navbar-light .navbar-brand img {
  max-height: 45px;
}

@media (max-width: 991.98px) {
  .sticky-top.navbar-light {
    position: relative;
    background: #FFFFFF;
  }

  .navbar-light .navbar-collapse {
    margin-top: 15px;
    border-top: 1px solid #DDDDDD;
  }

  .navbar-light .navbar-nav .nav-link,
  .sticky-top.navbar-light .navbar-nav .nav-link {
    padding: 10px 0;
    margin-left: 0;
    color: var(--dark) !important;
  }

  .navbar-light .navbar-nav .nav-link::before {
    display: none;
  }

  .navbar-light .navbar-nav .nav-link:hover,
  .navbar-light .navbar-nav .nav-link.active {
    color: var(--primary) !important;
  }

  .navbar-light .navbar-brand h1 {
    background: linear-gradient(to bottom right, var(--primary), var(--secondary));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .navbar-light .navbar-brand img {
    max-height: 45px;
  }
}

@media (min-width: 992px) {
  .navbar-light {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 999;
  }

  .sticky-top.navbar-light {
    position: fixed;
    background: #FFFFFF;
  }

  .sticky-top.navbar-light .navbar-nav .nav-link::before {
    border-top-color: var(--primary);
  }

  .sticky-top.navbar-light .navbar-brand h1 {
    background: linear-gradient(to bottom right, var(--primary), var(--secondary));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}


/*** Hero Header ***/
.hero-header {
  margin-bottom: 6rem;
  padding: 16rem 0 0 0;
  background:
    url(../img/bg-circle.png),
    url(../img/bg-triangle.png),
    url(../img/bg-bottom.png),
    linear-gradient(to bottom right, var(--primary), var(--secondary));
  background-position:
    left 0px top 0px,
    right 0px top 50%,
    center bottom;
  background-repeat: no-repeat;
}

@media (max-width: 991.98px) {
  .hero-header {
    padding: 6rem 0 9rem 0;
  }
}


/*** Feature ***/
.feature-item {
  transition: .5s;
}

.feature-item:hover {
  margin-top: -15px;
  box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .08);
}


/*** Pricing ***/
.pricing .nav {
  padding: 2px;
}

.pricing .nav-link {
  padding: 12px 30px;
  font-weight: 500;
  color: var(--dark);
  background: #FFFFFF;
}

.pricing .nav-item:first-child .nav-link {
  border-radius: 30px 0 0 30px;
}

.pricing .nav-item:last-child .nav-link {
  border-radius: 0 30px 30px 0;
}

.pricing .nav-link.active {
  color: #FFFFFF;
  background: linear-gradient(to bottom right, var(--primary), var(--secondary));
}


/*** Screenshot ***/
.screenshot-carousel {
  position: relative;
  width: 253px;
  height: 500px;
  padding: 15px;
  margin-right: 30px;
}

.screenshot-carousel::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: url(../img/screenshot-frame.png) center center no-repeat;
  background-size: 253px 500px;
  z-index: 1;
}

.screenshot-carousel .owl-item img {
  position: relative;
  width: 223px;
  height: 470px;
}

.screenshot-carousel .owl-dots {
  position: absolute;
  top: 50%;
  right: -30px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.screenshot-carousel .owl-dot {
  position: relative;
  display: inline-block;
  margin: 5px 0;
  width: 15px;
  height: 15px;
  background: linear-gradient(to bottom right, var(--primary), var(--secondary));
  border-radius: 15px;
  transition: .5s;
}

.screenshot-carousel .owl-dot::after {
  position: absolute;
  content: "";
  width: 5px;
  height: 5px;
  top: 5px;
  left: 5px;
  background: #FFFFFF;
  border-radius: 5px;
}

.screenshot-carousel .owl-dot.active {
  box-shadow: 0 0 10px var(--dark);
}


/*** Testimonial ***/
.testimonial-carousel .owl-item .testimonial-item,
.testimonial-carousel .owl-item .testimonial-item * {
  transition: .5s;
}

.testimonial-carousel .owl-item.center .testimonial-item {
  background: linear-gradient(to bottom right, var(--primary), var(--secondary));
}

.testimonial-carousel .owl-item.center .testimonial-item h5,
.testimonial-carousel .owl-item.center .testimonial-item p {
  color: #FFFFFF !important;
}

.testimonial-carousel .owl-nav {
  margin-top: 30px;
  display: flex;
  justify-content: center;
}

.testimonial-carousel .owl-nav .owl-prev,
.testimonial-carousel .owl-nav .owl-next {
  margin: 0 12px;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  background: linear-gradient(to bottom right, var(--primary), var(--secondary));
  border-radius: 60px;
  font-size: 18px;
  transition: .5s;
}

.testimonial-carousel .owl-nav .owl-prev:hover,
.testimonial-carousel .owl-nav .owl-next:hover {
  background: linear-gradient(to bottom right, var(--secondary), var(--primary));
}


/*** Footer ***/
.footer {
  margin-top: 6rem;
  padding-top: 9rem;
  background:
    url(../img/bg-circle.png),
    url(../img/bg-triangle.png),
    url(../img/bg-top.png),
    linear-gradient(to bottom right, var(--primary), var(--secondary));
  background-position:
    left 0px bottom 0px,
    right 0px top 50%,
    center top;
  background-repeat: no-repeat;
}

.content-wrapper .content-footer.footer {
  margin-top: 0 !important;
  padding-top: 1.5rem !important;
  background: none !important;
}

.footer .btn.btn-social {
  margin-right: 5px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--light);
  border: 1px solid rgba(256, 256, 256, .1);
  border-radius: 40px;
  transition: .3s;
}

.footer .btn.btn-social:hover {
  color: var(--primary);
}

.footer .btn.btn-link {
  display: block;
  margin-bottom: 10px;
  padding: 0;
  text-align: left;
  color: var(--light);
  font-weight: normal;
  transition: .3s;
}

.footer .btn.btn-link::before {
  position: relative;
  content: "\f105";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-right: 10px;
}

.footer .btn.btn-link:hover {
  letter-spacing: 1px;
  box-shadow: none;
}

.footer .copyright {
  padding: 25px 0;
  font-size: 14px;
  border-top: 1px solid rgba(256, 256, 256, .1);
}

.footer .copyright a {
  color: var(--light);
}

.footer .footer-menu a {
  margin-right: 15px;
  padding-right: 15px;
  border-right: 1px solid rgba(255, 255, 255, .1);
}

.footer .footer-menu a:last-child {
  margin-right: 0;
  padding-right: 0;
  border-right: none;
}

/* Sidebar toggle functionality - Override template defaults with high specificity */

/* Force flex layout on containers */
.layout-wrapper,
.layout-content-navbar,
.layout-container {
  display: flex !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
}

/* Default sidebar state - ensure it participates in flex layout */
.layout-menu-expanded .layout-menu,
.layout-menu,
#layout-menu {
  position: relative !important;
  flex: 0 0 260px !important;
  max-width: 260px !important;
  width: 260px !important;
  min-width: 260px !important;
  transition: all 0.3s ease !important;
}

/* Keep navbar fixed while scrolling. The width leaves the same 1.625rem side
   gutters the page content has (auto side margins centre it between them), so it
   lines up with the content below instead of sitting flush against the sidebar
   and the right edge. */
.layout-navbar {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  left: 260px !important;
  width: calc(100% - 260px - 3.25rem) !important;
  z-index: 1030 !important;
}

/* Remove detached navbar gap at the top */
.layout-navbar.navbar-detached {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.sidebar-hidden .layout-navbar {
  left: 0 !important;
  width: calc(100% - 3.25rem) !important;
}

/* Most pages sit in a centred .container-xxl, which caps the navbar to match. The
   dashboard is full width, so its navbar spans the same width as its content. */
.layout-page:has(.twc-dashboard-top) .layout-navbar.navbar-detached {
  max-width: none;
}

@media (max-width: 1199.98px) {
  .layout-navbar {
    left: 0 !important;
    width: 100% !important;
  }
}

/* Offset content so it doesn't hide behind the fixed navbar */
.layout-content-navbar .layout-page,
.layout-menu-expanded .layout-page,
.layout-page {
  padding-top: 4.5rem !important;
}

/* Ensure page content clears the fixed sidebar/header on all pages */
.content-wrapper,
.container-xxl {
  margin-top: 2rem !important;
}

/* Dashboard needs extra top spacing for the embedded view */
.powerbi-dashboard {
  margin-top: 2.5rem;
}

/* Keep sidebar fixed on screen and allow its content to scroll */
.layout-menu,
#layout-menu {
  position: fixed !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100vh !important;
  overflow: hidden !important;
}

.layout-menu .menu-inner {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* Default page state - override template's width: 0 */
.layout-content-navbar .layout-page,
.layout-menu-expanded .layout-page,
.layout-page {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  margin-left: 260px !important;
  padding-left: 0 !important;
  transition: all 0.3s ease !important;
}

/* When sidebar is hidden - completely collapse it */
.sidebar-hidden .layout-menu,
.sidebar-hidden #layout-menu {
  transform: translateX(-100%) !important;
  flex: 0 0 0 !important;
  flex-basis: 0 !important;
  max-width: 0 !important;
  width: 0 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
}

/* When sidebar is hidden - expand content to full width */
.sidebar-hidden.layout-content-navbar .layout-page,
.sidebar-hidden .layout-page {
  flex: 1 1 100% !important;
  flex-basis: 100% !important;
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* Ensure content wrapper also expands */
.sidebar-hidden .content-wrapper,
.sidebar-hidden .container-xxl {
  max-width: 100% !important;
  width: 100% !important;
}

/* ==================== Dark Theme Styles ==================== */
html.dark-style {
  color-scheme: dark;
}

html.dark-style body {
  background-color: #232333 !important;
  color: #b4b7bd !important;
}

html.dark-style .layout-wrapper,
html.dark-style .layout-page,
html.dark-style .content-wrapper {
  background-color: #232333 !important;
}

html.dark-style .card {
  background-color: #2b2c40 !important;
  border: 2px solid #4a4d66 !important;
  color: #b4b7bd !important;
}

html.dark-style .card-header {
  background-color: #2b2c40 !important;
  border-bottom: none !important;
  color: #d5d8de !important;
}

html.dark-style .card-body {
  background-color: #2b2c40 !important;
}

html.dark-style .form-control,
html.dark-style .form-select {
  background-color: #2b2c40 !important;
  border: 2px solid #4a4d66 !important;
  color: #b4b7bd !important;
}

html.dark-style .form-control:focus,
html.dark-style .form-select:focus {
  background-color: #323349 !important;
  border: 2px solid #696cff !important;
  color: #d5d8de !important;
  box-shadow: 0 0 0 0.2rem rgba(105, 108, 255, 0.25) !important;
}

html.dark-style .form-control[readonly],
html.dark-style .form-control:disabled {
  background-color: #1f1f2e !important;
  color: #8592a3 !important;
}

html.dark-style .form-label {
  color: #b4b7bd !important;
}

html.dark-style .btn-primary {
  background-color: #696cff !important;
  border-color: #696cff !important;
  color: #fff !important;
}

html.dark-style .btn-primary:hover {
  background-color: #5f5acf !important;
  border-color: #5f5acf !important;
}

html.dark-style .btn-outline-primary {
  color: #696cff !important;
  border-color: #696cff !important;
  background-color: transparent !important;
}

html.dark-style .btn-outline-primary:hover {
  background-color: #696cff !important;
  color: #fff !important;
}

html.dark-style .btn-outline-secondary {
  color: #8592a3 !important;
  border-color: #3b3d52 !important;
  background-color: transparent !important;
}

html.dark-style .btn-outline-secondary:hover {
  background-color: #3b3d52 !important;
  color: #b4b7bd !important;
  border-color: #3b3d52 !important;
}

html.dark-style .btn-secondary {
  background-color: #8592a3 !important;
  border-color: #8592a3 !important;
  color: #fff !important;
}

html.dark-style .layout-navbar {
  background-color: #2b2c40 !important;
  border-bottom: 1px solid #3b3d52 !important;
}

html.dark-style .bg-navbar-theme {
  background-color: #2b2c40 !important;
}

html.dark-style .layout-menu,
html.dark-style .bg-menu-theme {
  background-color: #2b2c40 !important;
  border-right: 1px solid #3b3d52 !important;
}

html.dark-style .menu-link {
  color: #b4b7bd !important;
}

html.dark-style .menu-link:hover,
html.dark-style .menu-item.active .menu-link {
  background-color: #323349 !important;
  color: #fff !important;
}

html.dark-style .menu-header {
  color: #8592a3 !important;
}

html.dark-style .menu-inner .menu-item.active:before {
  background: linear-gradient(270deg, #696cff 0%, rgba(105, 108, 255, 0.7) 100%) !important;
}

html.dark-style .alert-success {
  background-color: #1a3a1a !important;
  border-color: #2d5f2d !important;
  color: #a5d6a5 !important;
}

html.dark-style .alert-danger {
  background-color: #3a1a1a !important;
  border-color: #5f2d2d !important;
  color: #d6a5a5 !important;
}

html.dark-style .alert-warning {
  background-color: #3a341a !important;
  border-color: #5f542d !important;
  color: #d6cba5 !important;
}

html.dark-style .alert-info {
  background-color: #1a2a3a !important;
  border-color: #2d445f !important;
  color: #a5c5d6 !important;
}

html.dark-style h1,
html.dark-style h2,
html.dark-style h3,
html.dark-style h4,
html.dark-style h5,
html.dark-style h6 {
  color: #d5d8de !important;
}

html.dark-style .text-muted {
  color: #8592a3 !important;
}

html.dark-style .dropdown-menu {
  background-color: #2b2c40 !important;
  border-color: #3b3d52 !important;
}

html.dark-style .dropdown-item {
  color: #b4b7bd !important;
}

html.dark-style .dropdown-item:hover,
html.dark-style .dropdown-item:focus {
  background-color: #323349 !important;
  color: #fff !important;
}

html.dark-style .dropdown-divider {
  border-top-color: #3b3d52 !important;
}

html.dark-style .avatar {
  border-color: #3b3d52 !important;
}

html.dark-style .table {
  color: #b4b7bd !important;
  border-color: #3b3d52 !important;
}

html.dark-style .table thead th {
  background-color: #2b2c40 !important;
  color: #d5d8de !important;
  border-bottom-color: #3b3d52 !important;
}

html.dark-style .table tbody td {
  border-color: #3b3d52 !important;
}

html.dark-style .table-hover tbody tr:hover {
  background-color: #323349 !important;
}

html.dark-style .badge {
  border-color: #3b3d52 !important;
}

html.dark-style .modal-content {
  background-color: #2b2c40 !important;
  border-color: #3b3d52 !important;
}

html.dark-style .modal-header {
  border-bottom-color: #3b3d52 !important;
}

html.dark-style .modal-footer {
  border-top-color: #3b3d52 !important;
}

html.dark-style .close {
  color: #b4b7bd !important;
}

html.dark-style small {
  color: #8592a3 !important;
}

html.dark-style .fw-semibold {
  color: #d5d8de !important;
}

/* Custom options for dark theme */
html.dark-style .custom-option {
  border-color: #3b3d52 !important;
  background-color: #2b2c40 !important;
}

html.dark-style .custom-option:hover {
  border-color: #696cff !important;
}

html.dark-style .custom-option-body {
  color: #8592a3 !important;
}

html.dark-style .custom-option:has(.form-check-input:checked) {
  border-color: #696cff !important;
  background-color: rgba(105, 108, 255, 0.1) !important;
}

/* ==================== Mobile Responsiveness ==================== */
html,
body {
  overflow-x: hidden;
}

img,
svg,
video,
canvas {
  max-width: 100%;
  height: auto;
}

@media (max-width: 1199.98px) {

  .layout-content-navbar .layout-page,
  .layout-menu-expanded .layout-page,
  .layout-page {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-top: 5rem !important;
  }

  .layout-menu,
  #layout-menu {
    transform: translateX(-100%) !important;
  }

  .layout-menu-expanded .layout-menu,
  .layout-menu-expanded #layout-menu {
    transform: translateX(0) !important;
  }

  .layout-navbar {
    left: 0 !important;
    width: 100% !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  .content-wrapper,
  .container-xxl {
    margin-top: 1.25rem !important;
  }
}

@media (max-width: 767.98px) {

  .layout-content-navbar .layout-page,
  .layout-menu-expanded .layout-page,
  .layout-page {
    padding-top: 5.25rem !important;
  }

  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-xxl {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  .card-header,
  .card-body,
  .card-footer {
    padding: 1rem !important;
  }

  .card-header h4,
  .card-header h5 {
    font-size: 1rem !important;
    line-height: 1.4;
  }

  .navbar-nav-right {
    width: 100%;
    justify-content: flex-end;
  }

  #sidebarToggle {
    display: none !important;
  }

  .d-flex.justify-content-between {
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .d-flex.justify-content-between>.btn,
  .d-flex.justify-content-between>button {
    flex: 1 1 auto;
  }

  .table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .dropdown-menu {
    min-width: 12rem;
    max-width: calc(100vw - 1.5rem);
  }

  .powerbi-dashboard {
    margin-top: 3rem;
  }
}

/* Force table cells to wrap naturally to avoid horizontal scrollbars */
.table th,
.table td {
  white-space: normal !important;
}

/* Hide scrollbar for sidebar menu */
.layout-menu,
.menu-inner {
  scrollbar-width: none !important;
  /* Firefox */
  -ms-overflow-style: none !important;
  /* IE and Edge */
}

.layout-menu::-webkit-scrollbar,
.menu-inner::-webkit-scrollbar {
  display: none !important;
  /* Webkit browser engines */
}

/* Hide horizontal scrollbar for tables while keeping them responsive */
.table-responsive {
  scrollbar-width: none !important;
  /* Firefox */
  -ms-overflow-style: none !important;
  /* IE and Edge */
}

.table-responsive::-webkit-scrollbar {
  display: none !important;
  /* Webkit browser engines */
}

/* Restrict name column width to prevent overflow and force clean wrapping */
.text-wrap-column {
  max-width: 140px !important;
  min-width: 110px !important;
  white-space: normal !important;
  word-break: break-word !important;
}

/* Tighten table spacing and adjust font size to guarantee all columns fit */
.table th,
.table td {
  padding: 0.65rem 0.65rem !important;
  font-size: 0.825rem !important;
  vertical-align: middle !important;
}