input.form-control:read-only,
textarea.form-control:read-only {
  background-color: var(--vz-gray-200);
  color: var(--vz-gray-600);
}

.sticky-last th:last-child,
.sticky-last td:last-child {
  position: sticky;
  right: 0;
  --tw-bg-opacity: 1;
  background-color: var(--vz-body-bg);
  z-index: 2;
  box-shadow: -2px 0 2px rgba(0, 0, 0, 0.1);
}

.leaflet-routing-alt {
  font-family: 'Public Sans', sans-serif;
}

.pagination-container {
  display: flex;
  align-items: center;
  gap: 5px;
}

.bg-grey {
  background-color: var(--vz-gray-100);
}

.avatar-xs {
  width: 2rem;
  height: 2rem;
}

.paginate-buttons {
  display: grid;
  width: auto;
  padding: 0.4rem 0.8rem;
  align-items: center;
  justify-content: center;
  border-radius: 20%;
  cursor: pointer;
  background-color: var(--vz-body-bg);
  border: 1px solid var(--vz-border-color);
  color: var(--vz-body-color);
  transition:
    background-color 0.3s,
    border 0.3s,
    color 0.3s;
}

.paginate-buttons:hover {
  background-color: var(--vz-primary);
  border-color: var(--vz-primary);
  color: white;
}

.active-page {
  background-color: var(--vz-primary);
  border: 1px solid var(--vz-primary);
  color: white;
}

.active-page:hover {
  background-color: var(--vz-primary-600, var(--vz-primary));
  border-color: var(--vz-primary-600, var(--vz-primary));
}

.tooltip-container {
  position: relative;
  display: inline-block;
}

.tooltip-text {
  visibility: hidden;
  width: 100px;
  background-color: var(--vz-dark);
  color: var(--vz-light);
  text-align: center;
  border-radius: 5px;
  padding: 5px;
  position: absolute;
  bottom: 125%; /* Sesuaikan untuk menentukan posisi */
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 1;
}

.tooltip-container:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

.form-check-lg {
  height: 1.25rem;
  width: 1.25rem;
}

* {
  scrollbar-width: thin;
  scrollbar-color: #888 var(--vz-secondary-bg);
}
.icon-fontawesome:hover {
  color: var(--vz-primary) !important;
  transform: scale(1.2);
  transition: all 0.3s ease;
}

.icon-fontawesome:active {
  color: var(--vz-primary) !important;
}

.navbar-nav .nav-item .icon-fontawesome:hover {
  color: var(--vz-primary) !important;
  transform: scale(1.2);
  transition: all 0.3s ease;
}

.thumbnail-sm {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: cover;
  aspect-ratio: 1 / 1;
}

.navbar-nav .nav-item .icon-fontawesome:active {
  color: var(--vz-primary) !important;
}

.img-hoverable {
  transition:
    transform 0.2s,
    box-shadow 0.2s,
    border-color 0.2s;
  cursor: pointer;
}

.img-hoverable:hover,
.img-hoverable:focus {
  transform: scale(1.05) rotate(-2deg);
  box-shadow:
    0 4px 24px rgba(60, 60, 60, 0.18),
    0 1.5px 8px rgba(0, 0, 0, 0.09);
  border-color: var(--vz-primary);
  outline: none;
}

.img-hoverable:active {
  transform: scale(0.97);
  box-shadow: 0 2px 8px rgba(60, 60, 60, 0.22);
  border-color: var(--vz-primary-600, var(--vz-primary));
}

/* Dark Mode Support */
[data-bs-theme='dark'] input.form-control:read-only,
[data-bs-theme='dark'] textarea.form-control:read-only {
  background-color: var(--vz-gray-700);
  color: var(--vz-gray-300);
}

[data-bs-theme='dark'] .sticky-last th:last-child,
[data-bs-theme='dark'] .sticky-last td:last-child {
  background-color: var(--vz-dark);
}

[data-bs-theme='dark'] .bg-grey {
  background-color: var(--vz-gray-800);
}

[data-bs-theme='dark'] .paginate-buttons {
  background-color: var(--vz-dark);
  border-color: var(--vz-border-color-dark);
  color: var(--vz-light);
}

[data-bs-theme='dark'] .tooltip-text {
  background-color: var(--vz-gray-800);
  color: var(--vz-light);
}