/* Custom styles can go here if needed to override Tabler defaults */

/* Make graph placeholders a bit taller */
.graph-placeholder {
    min-height: 200px;
}

/* Adjust form fieldset legend styling if desired */
.form-fieldset legend {
    font-size: 1rem; /* Example: Slightly larger legend */
    font-weight: 600; /* Example: Make legend bolder */
    margin-bottom: 0.75rem;
}

/* Ensure KPI card value stands out */
.card-sm .card-body .font-weight-medium {
    font-size: 1.25rem; /* Make the number slightly larger */
    font-weight: 600 !important; /* Make it bold */
}

.card-sm .card-body .text-muted {
    font-size: 0.875rem; /* Smaller label text */
}

.card-sm .avatar {
    width: 2.5rem; /* Adjust icon size */
    height: 2.5rem;
    font-size: 1.25rem; /* Adjust icon content size */
}

.card-sm .card-body .col-auto {
    padding-right: 1rem; /* Space between icon and text */
}

/* Ensure charts resize correctly */
.graph-container {
    position: relative;
    height: 300px; /* Give a default height */
    width: 100%;
}

canvas {
    display: block;
    width: 100% !important; /* Override inline styles */
    height: 100% !important;
}

/* Ensure SVG icons within KPI avatars scale properly */
.card-sm span.avatar svg.icon {
    width: 60%; /* Adjust percentage as needed */
    height: 60%;
}

/* Style for the page logo in the header */
.page-logo {
  height: 24px; /* Set height via CSS */
  width: auto; /* Maintain aspect ratio */
  vertical-align: middle; /* Adjust vertical alignment if needed */
}

/* --- Loader Styles --- */
#loader-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff; /* White background */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000; /* Ensure it's on top */
  transition: opacity 0.5s ease-out; /* Smooth fade-out */
}

.loader-logo {
  width: 80px; /* Adjust size as needed */
  height: 80px;
  animation: pulse 1.5s ease-in-out infinite; /* Apply pulsing animation */
}

/* Pulsing Animation */
@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1); /* Scale up slightly */
    opacity: 0.7; /* Fade slightly */
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Class to hide the loader */
#loader-overlay.hidden {
  opacity: 0;
  visibility: hidden; /* Prevent interaction after fade */
}

/* Initially hide the main page content */
/* Using opacity/visibility for smoother transition */
.page {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease-in;
}

/* Class to show the page */
.page.loaded {
   opacity: 1;
   visibility: visible;
}

/* Add padding to the top of the main page container */
.page {
    padding-top: 1.5rem; /* Adjust value as needed */
}

/* Style the favicon on the login screen */
#login-favicon {
    max-height: 40px; /* Control size via max-height */
    width: auto; /* Maintain aspect ratio */
}