/* scrollbar */
body {
  scrollbar-width: thin;
  scrollbar-color: #fdfdfd;
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-thumb {
  background-color: #17c1e8;
  border: 1px solid #f8f9fa;
  box-shadow: inset 2px 2px 5px 0 rgba(#cb0c9f, 0.5);
  border-radius: 100px;
}

::-webkit-scrollbar-thumb:hover {
  background-image: conic-gradient(left 180deg, #ededed, silver);
}

::-webkit-scrollbar-track {
  background-color: #e9ecef;
  border-radius: 200px;
  border: 1px solid #f8f9fa;
}
/* end of: scrollbar */

.text-justify {
  text-align: justify;
}

.b-my-6 {
  margin-top: 32px !important;
  margin-bottom: 32px !important;
}
.icademic-outline {
  text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.5), 1px -1px 0 rgba(0, 0, 0, 0.5),
    -1px 1px 0 rgba(0, 0, 0, 0.5), 1px 1px 0 rgba(0, 0, 0, 0.5);
}

.hover-bg:hover {
  background-color: #f8f9fa !important;
}

/* colors */
.icademic-white-1 {
  background-color: #ffffff !important;
} /* Pure White */
.icademic-white-2 {
  background-color: #fcfcfc !important;
} /* Ghost White */
.icademic-white-3 {
  background-color: #f8f8f8 !important;
} /* Snow White */
.icademic-white-4 {
  background-color: #f5f5f5 !important;
} /* Cultured Pearl */
.icademic-white-5 {
  background-color: #f2f2f2 !important;
} /* Whisper Gray */
.icademic-light-1 {
  background-color: #f8f9fa !important;
}

.icademic-border-1 {
  border: 1px solid #e0e0e0 !important;
} /* Light Silver */
.icademic-border-2 {
  border: 1px solid #d6d6d6 !important;
} /* Platinum */
.icademic-border-3 {
  border: 1px solid #cccccc !important;
} /* Light Gray */
.icademic-border-4 {
  border: 1px solid #b8b8b8 !important;
} /* Silver */
.icademic-border-5 {
  border: 1px solid #a0a0a0 !important;
} /* Dark Gray */

.icademic-shadow-1 {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
} /* Subtle Lift */
.icademic-shadow-2 {
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.08) !important;
} /* Gentle Float */
.icademic-shadow-3 {
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12) !important;
} /* Medium Depth */
.icademic-shadow-4 {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15) !important;
} /* Pronounced Shadow */
.icademic-shadow-5 {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19) !important;
} /* Strong Elevation */

.aftrait-0 {
  color: #ff0000 !important;
}

.aftrait-1 {
  color: #db2525 !important;
}

.aftrait-2 {
  color: #ffa500 !important;
}

.aftrait-3 {
  color: #d4d0d0 !important;
}

.aftrait-4 {
  color: #64c064 !important;
}

.aftrait-5 {
  color: #008000 !important;
}

.aftrait-bg-0 {
  background: #ff0000 !important;
}

.aftrait-bg-1 {
  background: #db2525 !important;
}

.aftrait-bg-2 {
  background: #ffa500 !important;
}

.aftrait-bg-3 {
  background: #d4d0d0 !important;
}

.aftrait-bg-4 {
  background: #64c064 !important;
}

.aftrait-bg-5 {
  background: #008000 !important;
}

/* ============================================
   RESPONSIVE CHART CONTAINER STYLES
   ============================================ */

.chart-container {
  position: relative;
  width: 100%;
  height: 350px; /* Fixed height like original */
  min-height: 350px;
}

/* ============================================
   SCREEN SIZE SPECIFIC HEIGHTS
   ============================================ */

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .chart-container {
    height: 400px;
    min-height: 400px;
    max-height: 650px;
  }
}

/* Large devices (desktops, 992px to 1199px) */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .chart-container {
    height: 380px;
    min-height: 380px;
    max-height: 550px;
  }
}

/* Medium devices (tablets, 768px to 991px) */
@media (min-width: 768px) and (max-width: 991.98px) {
  .chart-container {
    height: 350px;
    min-height: 350px;
    max-height: 500px;
  }
}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
  .chart-container {
    height: 320px;
    min-height: 320px;
    max-height: 450px;
  }
}

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
  .chart-container {
    height: 300px;
    min-height: 300px;
    max-height: 400px;
  }
}

/* ============================================
   CHART TYPE SPECIFIC ADJUSTMENTS
   ============================================ */

/* Square aspect ratio for circular charts (doughnut, polar, pie) */
.chart-container--doughnut,
.chart-container--polar,
.chart-container--pie {
  height: 400px;
  min-height: 400px;
}

@media (max-width: 767.98px) {
  .chart-container--doughnut,
  .chart-container--polar,
  .chart-container--pie {
    height: 350px;
    min-height: 350px;
  }
}

@media (max-width: 575.98px) {
  .chart-container--doughnut,
  .chart-container--polar,
  .chart-container--pie {
    height: 300px;
    min-height: 300px;
  }
}

/* Taller height for horizontal bar charts */
.chart-container--horizontal-bar {
  height: 450px;
  min-height: 450px;
}

@media (max-width: 767.98px) {
  .chart-container--horizontal-bar {
    height: 500px;
    min-height: 500px;
  }
}

@media (max-width: 575.98px) {
  .chart-container--horizontal-bar {
    height: 450px;
    min-height: 450px;
  }
}

/* Radar/Spider charts work best as squares */
.chart-container--radar {
  height: 400px;
  min-height: 400px;
}

@media (max-width: 767.98px) {
  .chart-container--radar {
    height: 350px;
    min-height: 350px;
  }
}

/* Line charts standard height */
.chart-container--line {
  height: 350px;
  min-height: 350px;
}

@media (min-width: 1200px) {
  .chart-container--line {
    height: 400px;
    min-height: 400px;
  }
}

@media (max-width: 767.98px) {
  .chart-container--line {
    height: 320px;
    min-height: 320px;
  }
}

/* ============================================
   CANVAS RESPONSIVE SETTINGS
   ============================================ */

.chart-container canvas {
  width: 100% !important;
  height: 100% !important;
  max-height: inherit;
}

/* ============================================
   CARD BODY ADJUSTMENTS
   ============================================ */

.card-body:has(.chart-container) {
  padding: 1.5rem;
}

@media (max-width: 991.98px) {
  .card-body:has(.chart-container) {
    padding: 1.25rem;
  }
}

@media (max-width: 767.98px) {
  .card-body:has(.chart-container) {
    padding: 1rem;
  }
}

@media (max-width: 575.98px) {
  .card-body:has(.chart-container) {
    padding: 0.75rem;
  }
}

/* ============================================
   CHART LEGENDS RESPONSIVE
   ============================================ */

@media (max-width: 575.98px) {
  .chart-container canvas {
    /* Chart.js will handle legend sizing, but we ensure container doesn't crop */
    margin-bottom: 0.5rem;
  }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Force full width on mobile */
.chart-full-width-mobile {
  width: 100%;
}

@media (max-width: 767.98px) {
  .chart-full-width-mobile {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* Improve chart card spacing */
.chart-card {
  margin-bottom: 1.5rem;
}

@media (max-width: 767.98px) {
  .chart-card {
    margin-bottom: 1rem;
  }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
  .chart-container {
    height: 450px;
    min-height: 450px;
    max-height: 650px;
    page-break-inside: avoid;
  }

  .chart-loading-overlay {
    display: none;
  }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

/* Focus states for interactive chart elements */
.chart-container:focus-within {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  .chart-container canvas {
    animation: none !important;
    transition: none !important;
  }
}

/* ============================================
   DARK MODE SUPPORT (Optional)
   ============================================ */

@media (prefers-color-scheme: dark) {
  .chart-loading-overlay {
    background: rgba(33, 37, 41, 0.95);
  }

  .chart-empty-state {
    color: #e9ecef;
  }
}

/* ============================================
   CUSTOM SCROLLBAR FOR CHART TOOLTIPS
   ============================================ */

.chart-container::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.chart-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.chart-container::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

.chart-container::-webkit-scrollbar-thumb:hover {
  background: #555;
}

@media (max-width: 481px) {
  .hero-image {
    background-size: contain !important;
    background-repeat: no-repeat !important;
  }
}