/* ==========================================
   FILE: style.css
   DESKRIPSI: Stylesheet utama untuk website artikel
   ========================================== */

/* ==========================================
   SECTION 1: NAVIGATION & HEADER
   ========================================== */

/* Navigation Menu Container */
.nav-menu-container {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.25rem;
  padding: 0.5rem 0;
  max-width: 100%;
}

.nav-menu-container .nav-link {
  white-space: nowrap;
  transition: all 0.3s ease;
  border-radius: 0.375rem;
  padding: 0.375rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  display: inline-block;
  flex-shrink: 0;
}

.nav-menu-container .nav-link:hover {
  transform: translateY(-1px);
}

/* Navigation Link Base Styles */
.nav-link {
  white-space: nowrap;
  transition: all 0.3s ease;
  border-radius: 0.375rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  display: inline-block;
}

.nav-link:hover {
  transform: translateY(-1px);
}

/* Dropdown Menu Styles */
.nav-menu-container .relative {
  position: relative;
}

.nav-menu-container .group:hover .group-hover\:opacity-100 {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-menu-container .group .group-hover\:rotate-180 {
  transition: transform 0.3s ease;
}

.nav-menu-container .group:hover .group-hover\:rotate-180 {
  transform: rotate(180deg);
}

/* Mobile Menu - Sidebar on small screens */
.mobile-menu {
  display: none;
  position: fixed;
  top: 64px; /* mulai di bawah navbar */
  right: 0;
  width: 260px;
  max-width: 80%;
  height: calc(100vh - 64px);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
  z-index: 40; /* di bawah nav utama (z-50) tapi di atas konten */
  opacity: 0;
  pointer-events: none;
}

.mobile-menu.open {
  display: block;
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

/* Search Bar Styles */
.nav-search {
  flex: 1;
  min-width: 200px;
  max-width: none;
}

.nav-search .search-input {
  width: 100%;
  transition: all 0.3s ease;
}

/* Responsive Search Bar */
@media (max-width: 768px) {
  .search-container {
    margin: 0.5rem 0;
  }

  .search-input {
    padding: 0.5rem 2.5rem 0.5rem 2.5rem;
    font-size: 0.875rem;
  }

  .nav-search {
    display: none !important;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .search-container {
    max-width: 400px;
    margin: 0 1rem;
  }
}

@media (min-width: 1025px) {
  .search-container {
    max-width: 600px;
    margin: 0 2rem;
  }
}

/* Scroll Progress Bar */
.scroll-progress {
  position: fixed;
  top: 64px;
  left: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899);
  z-index: 100;
  transition: width 0.1s ease;
}

/* Back to Top Button */
.back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.3s ease;
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ==========================================
   SECTION 2: SLIDER & CAROUSEL
   ========================================== */

/* Slider Container */
.slider-container {
  overflow: hidden;
}

/* Slider text: clamp to 4 lines with ellipsis */
.slider-text-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.slider-track {
  transition: transform 0.5s ease-in-out;
}

/* Slider Controls - Ensure they're always visible */
.slider-prev,
.slider-next {
  position: absolute !important;
  z-index: 40 !important;
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.slider-prev:hover,
.slider-next:hover {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Responsive size & position for main hero slider controls */
@media (max-width: 640px) {
  .slider-prev,
  .slider-next {
    width: 2.25rem !important; /* ~36px */
    height: 2.25rem !important;
    padding: 0.25rem !important; /* kurangi padding agar ikon tidak terlalu besar */
    top: auto !important;
    bottom: 0.25rem !important; /* sedikit lebih ke bawah pada mobile */
    transform: translateY(0) !important; /* hilangkan -translate-y-1/2 di mobile */
  }

  .slider-prev {
    left: 0.5rem !important; /* lebih mepet ke pinggir */
  }

  .slider-next {
    right: 0.5rem !important;
  }

  .slider-prev i,
  .slider-next i {
    font-size: 0.875rem !important; /* kecilkan ikon panah */
  }

  /* Geser indikator slider lebih ke bawah pada mobile */
  .slider-indicators {
    bottom: 0.25rem !important; /* sejajar dengan panah */
  }
}

/* Gradient Overlay */
.gradient-overlay {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.3) 100%);
}

.hero-section .hero-viewport {
  height: 24rem;
}

@media (max-width: 640px) {
  .hero-section .hero-viewport {
    height: 12rem;
  }

  .hero-section h1 {
    font-size: 1rem;
    line-height: 1.2;
  }

  .hero-section p {
    font-size: 0.75rem;
  }

  .hero-section .slider-track > div {
    border-radius: 0.75rem;
  }
}

/* Animated Gradient for Slide */
.animated-gradient {
  background: linear-gradient(-45deg, #2563eb, #7c3aed, #2563eb, #7c3aed);
  background-size: 400% 400%;
  animation: gradientShift 8s ease infinite;
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* ==========================================
   SECTION 3: ANIMATIONS
   ========================================== */

/* Typing Cursor Animation */
.typing-cursor {
  animation: blink 1s infinite;
}

@keyframes blink {
  0%,
  50% {
    opacity: 1;
  }
  51%,
  100% {
    opacity: 0;
  }
}

/* News Ticker Marquee */
.news-ticker-wrapper {
  overflow: hidden;
  width: 100%;
}

.news-ticker-marquee {
  display: inline-block;
  animation: newsTickerMarquee 25s linear infinite;
}

@keyframes newsTickerMarquee {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Marquee Animation */
.animate-marquee {
  animation: marquee 30s linear infinite;
}

@keyframes marquee {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* Floating Elements Animation */
.float-animation {
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* Pulse Ring Animation */
.pulse-ring {
  animation: pulse-ring 2s infinite;
}

@keyframes pulse-ring {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

/* Dropdown Animation */
.dropdown-enter {
  animation: dropdownEnter 0.3s ease-out;
}

@keyframes dropdownEnter {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Glassmorphism Effect */
.glassmorphism {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Team Carousel */
.team-scroll {
  scroll-behavior: smooth;
}

/* Team Carousel Container */
.team-carousel-container {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
}

.custom-scroll {
  scrollbar-width: thin;
  scrollbar-color: rgba(99, 102, 241, 0.45) rgba(100, 116, 139, 0.12);
}
.custom-scroll::-webkit-scrollbar {
  width: 8px;
}
.custom-scroll::-webkit-scrollbar-track {
  background: rgba(100, 116, 139, 0.12);
  border-radius: 9999px;
}
.custom-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.55), rgba(59, 130, 246, 0.45));
  border-radius: 9999px;
  border: 2px solid rgba(255, 255, 255, 0.35);
}
.custom-scroll::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.7), rgba(59, 130, 246, 0.6));
}
.dark .custom-scroll {
  scrollbar-color: rgba(99, 102, 241, 0.55) rgba(31, 41, 55, 0.25);
}
.dark .custom-scroll::-webkit-scrollbar-track {
  background: rgba(31, 41, 55, 0.25);
}
.dark .custom-scroll::-webkit-scrollbar-thumb {
  border: 2px solid rgba(17, 24, 39, 0.5);
}

.team-carousel-container::-webkit-scrollbar {
  height: 6px;
}

.team-carousel-container::-webkit-scrollbar-track {
  background: transparent;
}

.team-carousel-container::-webkit-scrollbar-thumb {
  background-color: rgba(156, 163, 175, 0.5);
  border-radius: 3px;
}

.team-carousel-container::-webkit-scrollbar-thumb:hover {
  background-color: rgba(156, 163, 175, 0.8);
}

/* Team Carousel Track */
.team-carousel-track {
  display: flex;
  gap: 1rem;
  width: max-content;
  min-width: 100%;
}

/* Team Member Cards */
.team-member {
  flex-shrink: 0;
  width: 14rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.team-member:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Responsive adjustments for team section */
@media (max-width: 768px) {
  .team-member {
    width: 14rem !important;
  }

  .team-carousel-track {
    gap: 0.75rem;
  }
}

@media (max-width: 640px) {
  .team-member {
    width: 12rem !important;
  }

  .team-carousel-track {
    gap: 0.5rem;
  }
}

/* ==========================================
   SECTION 4: CARDS & HOVER EFFECTS
   ========================================== */

/* Card Hover Effect */
.card-hover {
  transition: all 0.3s ease;
}

.card-hover:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Categories Widget */
.categories-widget {
  overflow: visible;
  position: relative;
}

/* Resources Subcategories */
.resources-subcategories {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.resources-subcategories.expanded {
  max-height: 400px;
}

/* Article Content */
.article-content {
  max-height: 200px;
  overflow: hidden;
}

/* Chart Bar Animation */
.chart-bar {
  transition: height 0.5s ease;
}

/* Population Bar Animation */
.population-bar {
  transition: height 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================
   SECTION 5: PAGINATION & NAVIGATION
   ========================================== */

/* Pagination Button */
.pagination-btn {
  transition: all 0.3s ease;
}

.pagination-btn:hover {
  transform: scale(1.05);
}

/* Team Member Hover */
.team-member {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.team-member:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* ==========================================
   SECTION 6: AGENDA SLIDER
   ========================================== */

/* Agenda Container with Side Navigation */
.agenda-container-with-nav {
  display: flex;
  gap: 12px;
  align-items: stretch;
}

/* Agenda Slider Container */
.agenda-slider-container {
  flex: 1;
  height: 120px;
  overflow: hidden;
  position: relative;
}

.agenda-slider {
  transition: transform 0.5s ease-in-out;
}

.agenda-item {
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6px 0;
}

/* Agenda Title with Truncation */
.agenda-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: help;
  position: relative;
  max-width: 100%;
}

/* Agenda Title Tooltip */
.agenda-title[data-tooltip] {
  position: relative;
}

.agenda-title[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 12px;
  background-color: rgba(17, 24, 39, 0.95);
  color: #f9fafb;
  border-radius: 6px;
  font-size: 0.875rem;
  white-space: nowrap;
  z-index: 1000;
  margin-bottom: 8px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  pointer-events: none;
  opacity: 0;
  animation: tooltipFadeIn 0.2s ease forwards;
}

.agenda-title[data-tooltip]:hover::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: rgba(17, 24, 39, 0.95);
  z-index: 1001;
  margin-bottom: 2px;
  opacity: 0;
  animation: tooltipFadeIn 0.2s ease forwards;
}

@keyframes tooltipFadeIn {
  to {
    opacity: 1;
  }
}

/* Dark mode tooltip */
.dark .agenda-title[data-tooltip]:hover::after {
  background-color: rgba(249, 250, 251, 0.95);
  color: #111827;
}

.dark .agenda-title[data-tooltip]:hover::before {
  border-top-color: rgba(249, 250, 251, 0.95);
}

/* Agenda Side Navigation */
.agenda-side-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px;
  background: rgba(249, 250, 251, 0.9);
  border-radius: 6px;
  border: 1px solid rgba(229, 231, 235, 0.8);
  min-width: 40px;
  height: fit-content;
  align-self: center;
}

/* Agenda Navigation Buttons */
.agenda-nav-btn {
  width: 24px;
  height: 24px;
  border: none;
  outline: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  border-radius: 4px;
  background: white;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  color: #6b7280;
  font-size: 10px;
}

.agenda-nav-btn:hover:not(:disabled) {
  background: #3b82f6;
  color: white;
  transform: scale(1.05);
  box-shadow: 0 2px 6px rgba(59, 130, 246, 0.3);
}

.agenda-nav-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Dark mode for agenda navigation buttons */
.dark .agenda-nav-btn {
  background: rgba(55, 65, 81, 0.8);
  color: #d1d5db;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.dark .agenda-nav-btn:hover:not(:disabled) {
  background: #3b82f6;
  color: white;
  box-shadow: 0 2px 6px rgba(59, 130, 246, 0.5);
}

.dark .agenda-side-nav {
  background: rgba(55, 65, 81, 0.5);
  border-color: rgba(75, 85, 99, 0.5);
}

.agenda-nav-btn:active:not(:disabled) {
  transform: scale(0.95);
}

/* Responsive Agenda Slider */
@media (max-width: 768px) {
  .agenda-container-with-nav {
    gap: 6px;
    margin-bottom: 6px;
  }

  .agenda-slider-container {
    height: 100px;
  }

  .agenda-item {
    height: 85px;
    padding: 4px 0;
  }

  .agenda-title {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    line-height: 1.4;
    max-height: 1.4em;
    word-break: break-word;
  }

  .agenda-side-nav {
    min-width: 36px;
    padding: 3px;
    gap: 3px;
  }

  .agenda-nav-btn {
    width: 22px;
    height: 22px;
    font-size: 9px;
  }
}

@media (max-width: 480px) {
  .agenda-container-with-nav {
    gap: 4px;
  }

  .agenda-title {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    line-height: 1.4;
    max-height: 1.4em;
    word-break: break-word;
  }

  .agenda-side-nav {
    min-width: 32px;
    padding: 2px;
    gap: 2px;
  }

  .agenda-nav-btn {
    width: 20px;
    height: 20px;
    font-size: 8px;
  }
}

/* ==========================================
   SECTION 7: COMMENT SLIDER
   ========================================== */

/* Comment Container with Side Navigation */
.comment-container-with-nav {
  display: flex;
  gap: 12px;
  align-items: stretch;
}

/* Comment Slider Container */
.comment-slider-container {
  flex: 1;
  height: 140px;
  overflow: hidden;
  position: relative;
}

.comment-slider {
  transition: transform 0.5s ease-in-out;
}

.comment-item {
  height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8px 0;
  transition: all 0.3s ease;
}

.comment-item:hover {
  background-color: #f9fafb;
}

/* Comment Text Truncation */
.comment-text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.5;
  max-height: 4.6em;
}

/* Comment Side Navigation */
.comment-side-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px;
  background: rgba(249, 250, 251, 0.9);
  border-radius: 6px;
  border: 1px solid rgba(229, 231, 235, 0.8);
  min-width: 40px;
  height: fit-content;
  align-self: center;
}

/* Comment Navigation Buttons */
.comment-nav-btn {
  width: 24px;
  height: 24px;
  border: none;
  outline: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  border-radius: 4px;
  background: white;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  color: #6b7280;
  font-size: 10px;
}

.comment-nav-btn:hover:not(:disabled) {
  background: #6366f1;
  color: white;
  transform: scale(1.05);
  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.3);
}

.comment-nav-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Dark mode for comment navigation buttons */
.dark .comment-nav-btn {
  background: rgba(55, 65, 81, 0.8);
  color: #d1d5db;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.dark .comment-nav-btn:hover:not(:disabled) {
  background: #6366f1;
  color: white;
  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.5);
}

.dark .comment-side-nav {
  background: rgba(55, 65, 81, 0.5);
  border-color: rgba(75, 85, 99, 0.5);
}

.dark .comment-item:hover {
  background-color: rgba(55, 65, 81, 0.3);
}

.comment-nav-btn:active:not(:disabled) {
  transform: scale(0.95);
}

/* Responsive Comment Slider */
@media (max-width: 768px) {
  .comment-container-with-nav {
    gap: 6px;
    margin-bottom: 6px;
  }

  .comment-slider-container {
    height: 140px;
  }

  .comment-item {
    height: 120px;
    padding: 6px 0;
  }

  .comment-side-nav {
    min-width: 36px;
    padding: 3px;
    gap: 3px;
  }

  .comment-nav-btn {
    width: 22px;
    height: 22px;
    font-size: 9px;
  }
}

@media (max-width: 480px) {
  .comment-container-with-nav {
    gap: 4px;
  }

  .comment-side-nav {
    min-width: 32px;
    padding: 2px;
    gap: 2px;
  }

  .comment-nav-btn {
    width: 20px;
    height: 20px;
    font-size: 8px;
  }
}

/* ==========================================
   SECTION 8: GALLERY STYLES
   ========================================== */

/* Gallery Slide */
.gallery-slide {
  transition: opacity 0.3s ease-in-out;
}

/* Gallery Item */
.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 0.75rem;
  background: #f3f4f6;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
}

.gallery-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.gallery-item img {
  width: 100%;
  height: 180px; /* Increased height for better landscape display */
  object-fit: cover;
  transition: transform 0.3s ease;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

.gallery-item img[src] {
  animation: none;
  background: none;
}

.gallery-item:hover img {
  transform: scale(1.05);
}

/* Gallery Pagination Dots */
#galleryPagination button {
  transition: all 0.2s ease;
}

#galleryPagination button:hover {
  transform: scale(1.1);
}

/* Gallery Navigation Responsive */
.gallery-nav {
  gap: 12px;
}

@media (max-width: 640px) {
  .gallery-nav {
    flex-direction: column;
    align-items: stretch;
  }

  .gallery-nav button {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .gallery-nav #galleryPagination {
    order: 3;
    width: 100%;
    justify-content: center;
    display: flex;
    gap: 8px;
  }

  .gallery-nav #galleryPagination button {
    width: 10px;
    height: 10px;
  }
}

/* Loading Animation for Gallery Images */
@keyframes loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Responsive Gallery */
@media (max-width: 768px) {
  .gallery-item img {
    height: 150px; /* Adjusted for tablet */
  }
}

@media (max-width: 640px) {
  .gallery-item img {
    height: 120px; /* Adjusted for mobile */
  }

  /* Switch to single column on very small screens */
  .gallery-slide {
    grid-template-columns: 1fr 1fr;
  }
}

/* ==========================================
   SECTION 9: PROGRAM WIDGET STYLES
   ========================================== */

/* Sinergi Program Widget Navigation Buttons */
#sidebarProgramSlides {
  position: relative !important;
}

#sidebarProgramSlides .sidebar-program-slide {
  position: absolute !important;
  inset: 0 !important;
}

#sidebarProgramSlides .program-gradient {
  opacity: 1 !important;
}

#sidebarProgramSlides .program-label {
  opacity: 1 !important;
  z-index: 10 !important;
}

#sidebarProgramSlides .program-label p {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

#sidebarProgramSlides .group {
  height: 100% !important;
}

#sidebarProgramSlides img {
  height: 100% !important;
  object-fit: cover !important;
}

#sidebarProgramPrev,
#sidebarProgramNext {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 20 !important;
  height: 2rem !important;
  width: 2rem !important;
  margin: 0 !important;
  transition: opacity 0.3s ease, transform 0.3s ease !important;
}

#sidebarProgramPrev {
  left: 0.5rem !important;
  right: auto !important;
}

#sidebarProgramNext {
  right: 0.5rem !important;
  left: auto !important;
}

#sidebarProgramPrev:disabled,
#sidebarProgramNext:disabled {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ==========================================
   SECTION 10: DARK MODE STYLES
   ========================================== */

/* Dark Mode - Statistik Desa */
.dark section[class*="bg-gradient-to-br"][class*="from-slate-50"] {
  background: linear-gradient(to bottom right, #0f172a, #1e293b, #0f172a) !important;
  position: relative;
}

.dark section[class*="bg-gradient-to-br"][class*="from-slate-50"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 50%, rgba(59, 130, 246, 0.1) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(99, 102, 241, 0.1) 0%, transparent 50%);
  pointer-events: none;
}

/* Dark mode for inner stat bubble content */
.dark .stat-bubble > div[class*="border-8"] > div[class*="bg-white"] {
  background-color: rgba(17, 24, 39, 0.8) !important;
  border: 1px solid rgba(75, 85, 99, 0.3);
}

/* Dark mode text enhancements */
.dark .stat-bubble .text-gray-900 {
  color: #f9fafb !important;
}

.dark .stat-bubble .text-gray-600 {
  color: #d1d5db !important;
}

.dark .stat-bubble .text-gray-700 {
  color: #e5e7eb !important;
}

/* Dark mode icon enhancements */
.dark .stat-bubble i[class*="fas"] {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

/* Dark mode for connecting lines */
.dark .stat-bubble .border-slate-300 {
  border-color: rgba(75, 85, 99, 0.5) !important;
}

.dark .text-indigo-700 {
  color: #c7d2fe !important;
}

/* Dark mode section title */
.dark section[class*="bg-gradient-to-br"] h2 {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Dark mode description text */
.dark section[class*="bg-gradient-to-br"] p {
  color: #d1d5db !important;
}

/* Stat Bubble Base Styles */
.stat-bubble {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.stat-bubble:hover {
  transform: translateY(-6px);
}

/* Stat Tail */
.stat-tail {
  width: 20px;
  height: 24px;
  border-radius: 10px 10px 14px 14px;
  transform: translate(-50%);
}

/* Stat Tail - Mobile Responsive */
@media (max-width: 640px) {
  .stat-tail {
    width: 14px;
    height: 16px;
    border-radius: 6px 6px 8px 8px;
  }
}

/* Stat Tail - Small screens */
@media (min-width: 641px) and (max-width: 1024px) {
  .stat-tail {
    width: 16px;
    height: 20px;
    border-radius: 8px 8px 10px 10px;
  }
}

/* Smooth transitions for dark mode */
.stat-bubble,
.stat-bubble > div,
.stat-bubble i,
.stat-bubble .text-gray-900,
.stat-bubble .text-gray-600,
.stat-bubble .text-gray-700 {
  transition: all 0.3s ease;
}

/* Dark mode hover effects for stat bubble */
.dark .stat-bubble:hover {
  transform: translateY(-6px) scale(1.02);
}

.dark .stat-bubble > div {
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
}

.dark .stat-bubble:hover > div {
  box-shadow: 0 20px 40px -5px rgba(0, 0, 0, 0.7), 0 10px 15px -6px rgba(0, 0, 0, 0.4);
}

/* Dark mode background pattern enhancement */
.dark section[class*="bg-gradient-to-br"] {
  background: linear-gradient(to bottom right, #111827, #1f2937, #111827);
}

/* Dark Mode Transitions - Global */
.dark-mode-transition {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Ensure smooth transitions for all elements in dark mode */
* {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Dark mode specific overrides for article detail */
.dark .bg-white\/80 {
  background-color: rgba(31, 41, 55, 0.9) !important;
  border-color: rgba(75, 85, 99, 0.5) !important;
}

.dark .bg-gray-100 {
  background-color: #374151 !important;
}

.dark input[type="text"],
.dark input[type="email"],
.dark textarea {
  background-color: #374151 !important;
  color: #fff !important;
  border-color: #4b5563 !important;
}

.dark .comment-form {
  background-color: #374151 !important;
}

.dark .bg-gray-50 {
  background-color: #1f2937 !important;
}

/* Dark Mode - Navbar dropdown hover fix */
.dark .nav-menu-container .p-2 a:hover {
  background-color: #374151 !important; /* gray-700 */
  color: #60a5fa !important; /* blue-400 */
}

.dark .bg-gray-50 {
  background-color: #1f2937 !important;
}

/* Dark mode hover glow effect */
.dark .stat-bubble:hover > div[class*="border-cyan"] {
  box-shadow: 0 0 20px rgba(34, 211, 238, 0.3), 0 10px 25px -5px rgba(0, 0, 0, 0.5);
}

.stat-bubble:hover > div[class*="border-cyan"] {
  box-shadow: 0 0 20px rgb(34, 211, 238), 0 10px 25px -5px rgba(255, 253, 253, 0.5);
}

.dark .stat-bubble:hover > div[class*="border-orange"] {
  box-shadow: 0 0 20px rgba(251, 146, 60, 0.3), 0 10px 25px -5px rgba(0, 0, 0, 0.5);
}

.stat-bubble:hover > div[class*="border-orange"] {
  box-shadow: 0 0 20px rgb(251, 146, 60), 0 10px 25px -5px rgba(255, 255, 255, 0.5);
}

.dark .stat-bubble:hover > div[class*="border-slate"] {
  box-shadow: 0 0 20px rgba(148, 163, 184, 0.3), 0 10px 25px -5px rgba(0, 0, 0, 0.5);
}

.stat-bubble:hover > div[class*="border-slate"] {
  box-shadow: 0 0 20px rgb(148, 163, 184), 0 10px 25px -5px rgba(255, 255, 255, 0.5);
}

.dark .stat-bubble:hover > div[class*="border-purple"] {
  box-shadow: 0 0 20px rgba(196, 181, 253, 0.3), 0 10px 25px -5px rgba(0, 0, 0, 0.5);
}

.stat-bubble:hover > div[class*="border-purple"] {
  box-shadow: 0 0 20px rgb(161, 140, 246), 0 10px 25px -5px rgba(255, 255, 255, 0.5);
}

.dark .stat-bubble:hover > div[class*="border-teal"] {
  box-shadow: 0 0 20px rgba(94, 234, 212, 0.3), 0 10px 25px -5px rgba(0, 0, 0, 0.5);
}

.stat-bubble:hover > div[class*="border-teal"] {
  box-shadow: 0 0 20px rgb(81, 224, 203), 0 10px 25px -5px rgba(255, 255, 255, 0.5);
}

/* Dark Mode - Widget Keuangan */
.dark .bg-white\/80[class*="backdrop-blur"] {
  background-color: rgba(31, 41, 55, 0.9) !important;
  border-color: rgba(75, 85, 99, 0.5) !important;
}

.dark .bg-gray-50[class*="rounded-xl"] {
  background-color: rgba(55, 65, 81, 0.3) !important;
  border-color: rgba(75, 85, 99, 0.5) !important;
}

/* Dark mode for progress bar backgrounds */
.dark .bg-white[class*="rounded-full"][class*="h-2"] {
  background-color: rgba(55, 65, 81, 0.6) !important;
}

.dark .bg-slate-100[class*="rounded-full"] {
  background-color: rgba(55, 65, 81, 0.6) !important;
}

/* Enhanced dark mode hover effects for financial widgets */
.dark .bg-white\/80[class*="backdrop-blur"]:hover {
  background-color: rgba(31, 41, 55, 1) !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
}

/* Dark mode for financial widget icons */
.dark .bg-cyan-100,
.dark .bg-amber-100 {
  background-color: rgba(14, 116, 144, 0.2) !important;
}

.dark .bg-amber-100 {
  background-color: rgba(146, 64, 14, 0.2) !important;
}

/* Dark mode text color enhancements */
.dark .text-gray-900[class*="font-bold"],
.dark .text-gray-900[class*="font-semibold"] {
  color: #f9fafb !important;
}

.dark .text-gray-700[class*="font-semibold"] {
  color: #d1d5db !important;
}

.dark .text-gray-600 {
  color: #9ca3af !important;
}

/* Dark mode for financial widget badges */
.dark .bg-green-50 {
  background-color: rgba(20, 83, 45, 0.2) !important;
  border-color: rgba(34, 197, 94, 0.3) !important;
}

/* Dark mode for section headers in analytics */
.dark .text-indigo-600 {
  color: #818cf8 !important;
}

/* Enhanced gradient visibility in dark mode */
.dark .bg-gradient-to-r {
  opacity: 0.9;
}

/* Dark mode for financial widget progress bars - enhanced visibility */
.dark .bg-green-500,
.dark .bg-emerald-500,
.dark .bg-lime-500 {
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.4);
}

/* Smooth transitions for all financial widget elements */
.bg-white\/80[class*="backdrop-blur"],
.bg-gray-50[class*="rounded-xl"],
.bg-white[class*="rounded-full"],
.text-gray-900,
.text-gray-700,
.text-gray-600 {
  transition: all 0.3s ease;
}

/* Dark Mode - Village Maps Section */
.dark #village-maps-bg-main {
  background: linear-gradient(to bottom right, #111827, #1f2937, #111827) !important;
  background-image: linear-gradient(to bottom right, #111827, #1f2937, #111827) !important;
}

/* Dark mode for overlay background */
.dark #village-maps-bg-overlay {
  background: radial-gradient(circle at 20% 30%, rgba(34, 197, 94, 0.1) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(59, 130, 246, 0.1) 0%, transparent 50%) !important;
  background-image: radial-gradient(circle at 20% 30%, rgba(34, 197, 94, 0.1) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(59, 130, 246, 0.1) 0%, transparent 50%) !important;
  opacity: 0.2 !important;
}

/* Dark mode for map cards */
.dark .bg-white\/80[class*="backdrop-blur"][class*="rounded-3xl"] {
  background-color: rgba(31, 41, 55, 0.9) !important;
  border-color: rgba(75, 85, 99, 0.5) !important;
}

/* Enhanced dark mode hover effects for map cards */
.dark .bg-white\/80[class*="backdrop-blur"][class*="rounded-3xl"]:hover {
  background-color: rgba(31, 41, 55, 1) !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6) !important;
}

/* Dark mode for map container shadows */
.dark .shadow-lg[class*="rounded-2xl"] {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3) !important;
}

/* Dark mode for map overlay */
.dark .bg-black\/20 {
  background-color: rgba(0, 0, 0, 0.4) !important;
}

.dark .bg-gray-50[class*="rounded-xl"] {
  background-color: rgba(55, 65, 81, 0.3) !important;
  border-color: rgba(75, 85, 99, 0.5) !important;
}

/* Dark mode for map images */
.dark img[alt*="Peta"],
.dark img[alt*="Lokasi"] {
  filter: brightness(0.8) contrast(1.1);
}

/* Enhanced button gradients in dark mode */
.dark .bg-gradient-to-r[class*="from-green-600"],
.dark .bg-gradient-to-r[class*="from-purple-600"] {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
}

.dark .bg-gradient-to-r[class*="from-green-600"]:hover,
.dark .bg-gradient-to-r[class*="from-blue-600"]:hover,
.dark .bg-gradient-to-r[class*="from-purple-600"]:hover {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
  transform: translateY(-1px);
}

/* Dark mode text enhancements */
.dark .text-gray-900[class*="font-bold"],
.dark .text-gray-900[class*="font-semibold"] {
  color: #f9fafb !important;
}

.dark .text-gray-700 {
  color: #d1d5db !important;
}

.dark .text-gray-500 {
  color: #9ca3af !important;
}

/* Smooth transitions for all village maps elements */
.bg-white\/80[class*="backdrop-blur"][class*="rounded-3xl"],
.bg-purple-50,
.bg-gray-50[class*="rounded-xl"],
.bg-gradient-to-r[class*="from-green"],
.bg-gradient-to-r[class*="from-blue"],
.bg-gradient-to-r[class*="from-purple"] {
  transition: all 0.3s ease;
}

/* ==========================================
   SECTION 11: ADMINISTRATIVE REGION TABLE
   ========================================== */

/* Table Styles */
.admin-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
}

.admin-table thead {
  background-color: #f3f4f6;
}

.admin-table th {
  padding: 12px;
  text-align: left;
  font-weight: 600;
  color: #374151;
  border: 1px solid #e5e7eb;
}

.admin-table th:first-child {
  width: 60px;
  text-align: center;
}

.admin-table th:nth-child(2) {
  min-width: 300px;
}

.admin-table th:nth-child(n + 3) {
  text-align: right;
  width: 100px;
}

.admin-table td {
  padding: 12px;
  border: 1px solid #e5e7eb;
}

.admin-table td:first-child {
  text-align: center;
}

.admin-table td:nth-child(n + 3) {
  text-align: right;
}

.admin-table tbody tr:nth-child(even) {
  background-color: #f9fafb;
}

.admin-table tbody tr:nth-child(odd) {
  background-color: white;
}

.admin-table tbody tr:hover {
  background-color: #f3f4f7;
}

/* Hierarchical Indentation */
.region-dusun {
  font-weight: 600;
  color: #111827;
}

.region-rw {
  padding-left: 30px;
  color: #374151;
}

.region-rt {
  padding-left: 60px;
  color: #6b7280;
}

/* Dark Mode Styles for Administrative Table */
.dark .admin-table {
  background: #1f2937;
}

.dark .admin-table thead {
  background-color: #374151;
}

.dark .admin-table th {
  color: #f9fafb;
  border-color: #4b5563;
}

.dark .admin-table td {
  border-color: #4b5563;
  color: #e5e7eb;
}

.dark .admin-table tbody tr:nth-child(even) {
  background-color: #1f2937;
}

.dark .admin-table tbody tr:nth-child(odd) {
  background-color: #111827;
}

.dark .admin-table tbody tr:hover {
  background-color: #374151;
}

.dark .region-dusun {
  color: #f9fafb;
}

.dark .region-rw {
  color: #d1d5db;
}

.dark .region-rt {
  color: #9ca3af;
}

/* Dark Mode - override bright purple backgrounds on cards */
.dark .bg-purple-50 {
  background-color: #1f2937 !important; /* gray-800 */
}
.dark .border-purple-100 {
  border-color: #374151 !important; /* gray-700 */
}