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);
}

label.required::after,
.required:is(label)::after {
  content: ' *';
  color: var(--vz-danger);
}

.spinner {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* ==========================================================================
   Sidebar menu — extends Velzon theme (app.min.css)
   Markup: web/src/views/layouts/components/Sidebar.vue
   ========================================================================== */

.navbar-menu .menu-btn {
  display: flex;
  align-items: center;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
}

.navbar-menu .menu-label {
  flex: 1;
  min-width: 0;
}

.navbar-menu .navbar-nav .nav-link .menu-icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
  flex-shrink: 0;
  margin-right: 0.665rem;
  transition:
    stroke 0.2s ease,
    color 0.2s ease;
}

.navbar-menu .menu-chevron,
.navbar-menu .sub-chevron {
  flex-shrink: 0;
  transition:
    transform 0.25s ease,
    stroke 0.2s ease,
    color 0.2s ease;
}

.navbar-menu .menu-chevron,
.navbar-menu .menu-chevron-spacer {
  width: 14px;
  height: 14px;
  min-width: 14px;
  flex-shrink: 0;
  margin-left: auto;
}

.menu-chevron-spacer {
  visibility: hidden;
  pointer-events: none;
  flex-shrink: 0;
}

.navbar-menu .sub-chevron {
  width: 14px;
  height: 14px;
  min-width: 14px;
  margin-left: auto;
}

.menu-chevron-open {
  transform: rotate(180deg);
}

.sub-chevron-open {
  transform: rotate(90deg);
}

.sub-chevron-flipped {
  transform: rotate(180deg);
}

.sub-chevron-flipped.sub-chevron-open {
  transform: rotate(-90deg);
}

.navbar-menu .nav-sm .menu-dropdown.sub-menu-left {
  left: auto !important;
  right: 100% !important;
}

/* Vertical layout — uniform full-width menu */
[data-layout='vertical'] .navbar-menu #scrollbar,
[data-layout='vertical'] .navbar-menu #scrollbar .simplebar-content,
[data-layout='vertical'] .navbar-menu #scrollbar .container-fluid,
[data-layout='vertical'] .navbar-menu #navbar-nav {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

[data-layout='vertical'] .navbar-menu .navbar-nav .nav-link.menu-link::after,
[data-layout='vertical'] .navbar-menu .navbar-nav .nav-link[data-bs-toggle='collapse']::after {
  display: none !important;
  content: none !important;
}

[data-layout='vertical'] .navbar-menu .navbar-nav,
[data-layout='vertical'] .navbar-menu .navbar-nav .nav-sm,
[data-layout='vertical'] .navbar-menu .menu-dropdown,
[data-layout='vertical'] .navbar-menu .sub-menu-dropdown {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

[data-layout='vertical'] .navbar-menu .navbar-nav .nav-sm {
  padding-left: 0 !important;
  margin: 0;
}

[data-layout='vertical'] .navbar-menu .navbar-nav .nav-item {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 0.125rem 0.75rem;
  box-sizing: border-box;
}

[data-layout='vertical'] .navbar-menu .menu-btn {
  display: flex !important;
  align-items: center;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0;
  margin: 0 !important;
  border-radius: 0.375rem;
  padding: 0.625rem 0.875rem;
  font-weight: 500;
  border: 1px solid transparent;
  box-shadow: none;
  box-sizing: border-box;
  color: var(--vz-vertical-menu-item-color);
  text-decoration: none;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

[data-layout='vertical'] .navbar-menu .nav-sm .nav-link.menu-btn::before {
  display: none !important;
  content: none !important;
}

[data-layout='vertical'] .navbar-menu .menu-btn:hover {
  background: var(--vz-vertical-menu-item-active-bg);
  color: var(--vz-vertical-menu-item-hover-color);
}

[data-layout='vertical'] .navbar-menu .menu-btn.active,
[data-layout='vertical'] .navbar-menu .menu-btn.menu-btn-open {
  background: var(--vz-vertical-menu-item-active-bg);
  color: var(--vz-vertical-menu-item-active-color);
}

/* Vertical — icon & chevron colors (Lucide uses stroke; override theme svg color) */
[data-layout='vertical'] .navbar-menu .navbar-nav .nav-link .menu-icon {
  stroke: var(--vz-vertical-menu-item-color) !important;
  color: var(--vz-vertical-menu-item-color) !important;
}

[data-layout='vertical'] .navbar-menu .navbar-nav .nav-link:hover .menu-icon,
[data-layout='vertical'] .navbar-menu .navbar-nav .nav-link:hover .menu-chevron {
  stroke: var(--vz-vertical-menu-item-hover-color) !important;
  color: var(--vz-vertical-menu-item-hover-color) !important;
}

[data-layout='vertical'] .navbar-menu .navbar-nav .nav-link.active .menu-icon,
[data-layout='vertical'] .navbar-menu .navbar-nav .nav-link.menu-btn-open .menu-icon,
[data-layout='vertical'] .navbar-menu .navbar-nav .nav-link.active .menu-chevron,
[data-layout='vertical'] .navbar-menu .navbar-nav .nav-link.menu-btn-open .menu-chevron {
  stroke: var(--vz-vertical-menu-item-active-color) !important;
  color: var(--vz-vertical-menu-item-active-color) !important;
}

[data-layout='vertical'] .navbar-menu .navbar-nav .nav-link .menu-chevron,
[data-layout='vertical'] .navbar-menu .navbar-nav .nav-link .sub-chevron {
  stroke: var(--vz-vertical-menu-item-color) !important;
  color: var(--vz-vertical-menu-item-color) !important;
}

[data-layout='vertical'] .navbar-menu .menu-btn:hover .sub-chevron {
  stroke: var(--vz-vertical-menu-item-hover-color) !important;
  color: var(--vz-vertical-menu-item-hover-color) !important;
}

[data-layout='vertical'] .navbar-menu .menu-btn.menu-btn-open .sub-chevron,
[data-layout='vertical'] .navbar-menu .menu-btn.active .sub-chevron {
  stroke: var(--vz-vertical-menu-item-active-color) !important;
  color: var(--vz-vertical-menu-item-active-color) !important;
}

/* Horizontal — icon & chevron colors (follows app.min.css topnav tokens) */
[data-layout='horizontal'] .navbar-menu .navbar-nav .nav-link .menu-icon,
[data-layout='horizontal'] .navbar-menu .navbar-nav .nav-link .menu-chevron,
[data-layout='horizontal'] .navbar-menu .navbar-nav .nav-link .sub-chevron {
  stroke: var(--vz-topnav-item-color) !important;
  color: var(--vz-topnav-item-color) !important;
}

[data-layout='horizontal'] .navbar-menu .navbar-nav .nav-item:hover > .nav-link .menu-icon,
[data-layout='horizontal'] .navbar-menu .navbar-nav .nav-item:hover > .nav-link .menu-chevron,
[data-layout='horizontal'] .navbar-menu .navbar-nav .nav-link:hover .menu-icon,
[data-layout='horizontal'] .navbar-menu .navbar-nav .nav-link:hover .menu-chevron {
  stroke: var(--vz-topnav-item-active-color) !important;
  color: var(--vz-topnav-item-active-color) !important;
}

[data-layout='horizontal'] .navbar-menu .navbar-nav .nav-link.active .menu-icon,
[data-layout='horizontal'] .navbar-menu .navbar-nav .nav-link.menu-btn-open .menu-icon,
[data-layout='horizontal'] .navbar-menu .navbar-nav .nav-link.active .menu-chevron,
[data-layout='horizontal'] .navbar-menu .navbar-nav .nav-link.menu-btn-open .menu-chevron {
  stroke: var(--vz-topnav-item-active-color) !important;
  color: var(--vz-topnav-item-active-color) !important;
}

/* Horizontal layout — let app.min.css theme handle menu appearance */
[data-layout='horizontal'] .navbar-menu .menu-btn {
  margin: 0;
  width: auto;
  border-radius: 0;
  border: none;
  font-weight: inherit;
  box-shadow: none;
}

[data-layout='horizontal'] .navbar-menu .menu-btn:hover,
[data-layout='horizontal'] .navbar-menu .menu-btn.active,
[data-layout='horizontal'] .navbar-menu .menu-btn.menu-btn-open {
  background: transparent;
  box-shadow: none;
}

[data-layout='horizontal'] .navbar-menu .menu-dropdown .menu-btn-sub {
  margin: 0;
  width: auto;
  border-radius: 0;
  border: none;
  font-weight: inherit;
}

[data-layout='horizontal'] .navbar-menu .menu-dropdown .menu-btn-sub:hover,
[data-layout='horizontal'] .navbar-menu .menu-dropdown .menu-btn-sub.active,
[data-layout='horizontal'] .navbar-menu .menu-dropdown .menu-btn-sub.menu-btn-open {
  background: transparent;
}