/* GLOBAL COMPONENT STYLES */
@import url("https://fonts.cdnfonts.com/css/poppins");

* {
  border-color: #e5e7eb;
  font-family: "Poppins", sans-serif;
}

/* Side bar styles */
.sidebar-link {
  @apply flex items-center gap-2 p-2 rounded text-gray-600 hover:bg-gray-100 hover:text-blue-600 transition;
}

/* Add thin purple border on focus for all form fields */
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-width: 1.5px;
  border-color: #743891 !important;
  box-shadow: 0 0 0 1.5px #74389133;
}

/* Purple accent for checkboxes in settings */
input[type="checkbox"].toggle-checkbox:checked {
  accent-color: #743891;
}

/* Custom focus styles for better visual feedback */
.select-focus:focus {
  box-shadow: 0 0 0 3px rgba(116, 56, 145, 0.1);
}

/* DASHBOARD STYLES */
/* Hero section */
.bg-hero {
  background-image: url(../images/bg-hero.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Video */
.aspect-w-16.aspect-h-9 {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
}

.aspect-w-16.aspect-h-9 > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@media (min-width: 768px) {
  #videoModal .aspect-w-16.aspect-h-9 {
    height: 70vh !important;
    min-height: 320px;
    max-height: 80vh;
    padding-bottom: 0;
  }
}

/* Smooth hover transition */
.select-hover:hover {
  background-color: #f3ecf7;
  border-color: #c084d1;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

/* Custom scrollbar styles */
.custom-scrollbar::-webkit-scrollbar {
  height: 2px; /* Ultra thin height for horizontal scrollbar */
  width: 2px;
  background: white;
  height: 10px;
  padding-top: 40px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: #f1f5f9; /* Light gray track */
  border-radius: 1px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #743891; /* Purple color matching your theme */
  border-radius: 1px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #a97ac2; /* Lighter purple on hover */
}

/* Completely remove scrollbar buttons/controls at the ends */
.custom-scrollbar::-webkit-scrollbar-button:start:decrement,
.custom-scrollbar::-webkit-scrollbar-button:end:increment {
  display: none;
}

.custom-scrollbar::-webkit-scrollbar-button:horizontal:start:decrement,
.custom-scrollbar::-webkit-scrollbar-button:horizontal:end:increment {
  display: none;
}

/* Firefox scrollbar styling - make it even thinner than 'thin' */
.custom-scrollbar {
  scrollbar-width: none; /* This removes scrollbar in Firefox completely */
  scrollbar-color: #743891 #f1f5f9;
}

.custom-scrollbar::-webkit-scrollbar-track {
  margin-left: 200px;
  margin-right: 200px;
}

/* Show custom thin scrollbar only on webkit browsers */
@supports (-webkit-appearance: none) {
  .custom-scrollbar {
    scrollbar-width: thin; /* Override for webkit browsers */
  }
}

/* SpillOverDrop Animation */
@keyframes spilloverDrop {
  0% {
    transform: translateY(-60px) scale(0.8);
    opacity: 0;
  }

  80% {
    transform: translateY(10px) scale(1.05);
    opacity: 1;
  }

  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

/* Certificate Printing */
@media print {
  body * {
    visibility: hidden !important;
  }

  #certificate-preview,
  #certificate-preview * {
    visibility: visible !important;
  }

  #certificate-preview {
    position: absolute !important;
    left: 0;
    top: 0;
    width: 100vw !important;
    min-height: 100vh !important;
    box-shadow: none !important;
    border: none !important;
  }
}