/* ==========================
   GLOBAL ELEMENT STYLES
   ========================== */
::placeholder {
  opacity: 1;
  color: var(--bs-gray-600) !important;
}

.label-placeholder::placeholder {
  opacity: 1;
  color: var(--bs-gray-750) !important;
}

body {
  background-image: var(--user-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: background-image 0.4s ease;
}

/* ==========================
   UTILITY CLASSES
   ========================== */
.pt-5px {
  padding-top: 5px !important;
}
.w-min {
  width: 1%;
  white-space: nowrap;
}
.w-50px {
  width: 50px;
}
.w-64px {
  width: 64px;
}
.w-72px {
  width: 72px;
}
.h-150px {
  height: 150px;
}
.h-600px {
  height: 600px;
}
.mh-185px {
  max-height: 185px;
}
.mh-400px {
  max-height: 400px;
}
.m-w-350px {
  min-width: 350px;
}
.cursor-pointer {
  cursor: pointer;
}
.aspect-ratio-1x1 {
  aspect-ratio: 1/1;
}
.isolate {
  isolation: isolate;
}
.z-1 {
  z-index: 1;
}
.z-5 {
  z-index: 5;
}
.bg-current-color-10 {
  background-color: color-mix(in srgb, currentColor, transparent 90%);
}

/* ==========================
   LAYOUT CONTAINERS
   ========================== */
#kt_app_root {
  overflow: auto;
}
.kt_gallery {
  width: 99%;
}
.breadcrumb-item {
  position: relative;
  color: var(--bs-gray-750);
}

/* ==========================
   COMPONENT STYLES
   ========================== */
/* Menu Icon */
.menu-icon {
  color: var(--kt-text-gray-800);
  transition: all 0.3s ease;
}
.menu-icon:hover {
  color: var(--kt-primary);
  transform: translateY(-3px);
}
.btn.menu-icon i {
  font-size: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Sidebar Search */
#sidebarSearchWrapper {
  position: relative;
}
#sidebarSearchIcon {
  position: absolute;
  top: 50%;
  left: 0.75rem;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 2;
  color: #b0b0be !important;
}
#sidebarSearch {
  background-color: transparent !important;
  padding-left: 2.5rem !important;
  height: 2.25rem !important;
  color: #b0b0be !important;
  border-color: #b0b0be !important;
}
#sidebarSearch:hover,
#sidebarSearch:focus,
#sidebarSearch:active {
  border-color: #b0b0be !important;
}
#sidebarSearchWrapper:hover #sidebarSearchIcon,
#sidebarSearchWrapper:focus-within #sidebarSearchIcon,
#sidebarSearch::placeholder,
#sidebarSearch:hover::placeholder,
#sidebarSearch:focus::placeholder {
  color: #b0b0be !important;
}

/* Background Preview */
#bg-scroll-container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  max-width: 90vw;
  justify-content: center;
}
.bg-preview {
  width: 60px;
  height: 45px;
  background-size: cover;
  background-position: center;
  border-radius: 6px;
  opacity: 0.5;
  transition: transform 0.3s ease, opacity 0.3s ease, border 0.3s ease;
  cursor: pointer;
  flex: 0 0 auto;
}
.bg-preview.active {
  width: 100px;
  height: 70px;
  border: 2px solid var(--bs-primary);
  transform: scale(1.2);
  opacity: 1;
  z-index: 2;
}

/* Media & Video */
.camera-video {
  width: 100%;
  max-width: 640px;
  border: 2px solid #ddd;
  border-radius: 8px;
}
.lecture-video {
  width: 100%;
  height: auto;
}

/* CKEditor */
.ck-content {
  min-height: 50px;
}

/* Nav Tabs */
.nav.nav-tabs.nav-line-tabs .nav-link {
  display: block;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem 0.5rem 0 0;
  margin: 0 1px;
}
.nav.nav-tabs.nav-line-tabs .nav-link.active,
.nav.nav-tabs.nav-line-tabs .nav-item.show .nav-link {
  background-color: var(--bs-secondary);
  color: var(--bs-white);
}

/* Sidebar Menu Titles */
.app-sidebar .menu .menu-item .menu-link .menu-title,
.flatpickr-day {
  color: var(--bs-gray-750);
}

/* Notification Containers */
#notif-wrapper,
#notif-container,
#notif-footer {
  background-color: var(--bs-body-bg);
}

/* ==========================
   MEDIA QUERIES
   ========================== */
@media (min-width: 992px) {
  [data-kt-app-sidebar-minimize="on"][data-kt-app-sidebar-hoverable="true"] .app-sidebar:not(:hover) #sidebarSearch {
    opacity: 0;
    transition: opacity 0.3s ease !important;
  }
}

[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-link,
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-link .menu-title {
  color: #b0b0be;
}

.menu-item.active > .menu-link {
  background-color: #2b2b40 !important;
}

.gridjs-wrapper {
  overflow: auto;
}

.table-bordered > :not(caption) > * > * {
  border: 1px solid var(--bs-border-color) !important;
}

.table tbody tr:last-child,
.table tfoot tr:last-child {
  border-bottom: 1px solid var(--bs-border-color) !important;
}

.marker-red {
  color: red !important;
}
.marker-blue {
  color: blue !important;
}
.marker-green {
  color: green !important;
}
.marker-yellow {
  color: yellow !important;
}
.marker-purple {
  color: purple !important;
}
.marker-orange {
  color: orange !important;
}
.marker-black {
  color: black !important;
}
.marker-white {
  color: white !important;
}
.marker-gray {
  color: gray !important;
}
.marker-brown {
  color: brown !important;
}
.app-container {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.app-content {
  padding-top: 0;
  padding-bottom: 0;
}

/* ==========================
   Placeholders
   ========================== */
.placeholder-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
  /* At the start and end of the animation, the opacity is 1 */
  0%,
  100% {
    opacity: 1;
  }
  /* At the middle of the animation, the opacity is lower */
  50% {
    opacity: 0.5;
  }
}

.breadcrumb-wrapper::-webkit-scrollbar {
  height: 6px;
}

.h-btn-sm {
  height: 31px;
}
.h-btn-md {
  height: 38px;
}
.h-btn-lg {
  height: 46px;
}

.kpi-container {
  container-type: inline-size;

  .card {
    height: 100% !important;
  }
}

@container (width < 1200px) {
  .kpi-container {
    & > * {
      width: calc(100% / 2) !important;
    }
  }
}

@container (width < 562px) {
  .kpi-container {
    & > * {
      width: calc(100%) !important;
    }
  }
}

textarea.form-control,
.choices__inner,
.select2-container {
  min-width: 120px !important;
}

input.form-control {
  min-width: 60px !important;
}

input:disabled:not([type="checkbox"]),
select:disabled,
textarea:disabled,
input:read-only:not(.select2-input):not([data-choices]):not(.flatpickr-input):not([type="checkbox"]):not([type="file"]),
select:read-only:not(.select2-hidden-accessible):not([data-choices]),
textarea:read-only {
  background-color: var(--bs-gray-150) !important;
}

.choices {
  &:has(select:disabled) {
    cursor: not-allowed;
    background-color: var(--bs-gray-150) !important;

    .choices__button {
      visibility: hidden !important;
    }
  }
}

.gridjs-tbody {
  &:has(.gridjs-tr) tr:not(.gridjs-tr):first-child {
    display: none;
  }
}