/*
* =================================================================================
* CSS Kustom Aplikasi - Perbaikan Definitif (Gabungan)
* - Smooth Sidebar Toggle (desktop & mobile)
* - Hover-to-Expand (desktop)
* - Perbaikan z-index overlay/menu/topbar
* - Footer Teks Berjalan (Marquee)
* =================================================================================
*/

/* ----------------------------------
   Variabel umum & baseline container
----------------------------------- */
:root {
  --sidebar-w: 260px; /* lebar penuh */
  --sidebar-w-collapsed: 64px; /* lebar collapsed (ikon saja) */
  --sidebar-dur: 260ms; /* durasi animasi */
  --sidebar-ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* easing halus */
}
.layout-wrapper {
  position: relative;
}

/* ----------------------------------
   Z-Index Overlay / Menu / Topbar
----------------------------------- */

/* 1) Overlay selalu di atas konten umum */
.layout-overlay {
  z-index: 1100 !important;
}

/* 2) MOBILE: saat menu expanded, menu berada di atas overlay */
html.layout-menu-expanded .layout-menu {
  z-index: 1101 !important;
}

/* 3) DESKTOP: menu di belakang topbar (topbar biasanya > 1100) */
@media (min-width: 1200px) {
  html.layout-menu-fixed .layout-menu {
    z-index: 1099 !important;
  }
}

/* ----------------------------------
   Smooth Sidebar Toggle (Desktop)
----------------------------------- */

/* Sidebar (kolom kiri) */
.layout-menu {
  width: var(--sidebar-w);
  transition: width var(--sidebar-dur) var(--sidebar-ease);
  will-change: width;
  contain: layout paint; /* kurangi repaint area besar */
  backface-visibility: hidden; /* kurangi tearing saat compositing */
  overflow: hidden; /* sembunyikan isi saat mengecil */
}

/* Konten kanan mengikuti sidebar */
.layout-page {
  padding-left: var(--sidebar-w);
  transition: padding-left var(--sidebar-dur) var(--sidebar-ease);
  will-change: padding-left;
}

/* State collapsed (desktop) */
.layout-menu-collapsed .layout-menu {
  width: var(--sidebar-w-collapsed);
}
.layout-menu-collapsed .layout-page {
  padding-left: var(--sidebar-w-collapsed);
}

/* Saat transisi berjalan, matikan pointer untuk cegah flip-flop */
.layout-transitioning .layout-menu,
.layout-transitioning .layout-navbar .layout-menu-toggle {
  pointer-events: none !important;
}

/* ----------------------------------
   Hover-to-Expand (Desktop Preview)
----------------------------------- */

/* Lebarkan menu & konten saat preview hover dari mode collapsed */
.layout-menu-hover.layout-menu-collapsed .layout-menu {
  width: var(--sidebar-w);
}
.layout-menu-hover.layout-menu-collapsed .layout-page {
  padding-left: var(--sidebar-w);
}

/* Tampilkan teks brand & label menu saat hover (opsional) */
.app-brand-text,
.menu-inner .menu-link .text-truncate {
  transition: opacity var(--sidebar-dur) var(--sidebar-ease),
    visibility var(--sidebar-dur) var(--sidebar-ease);
}
.layout-menu-collapsed .app-brand-text,
.layout-menu-collapsed .menu-inner .menu-link .text-truncate {
  opacity: 0;
  visibility: hidden;
}
.layout-menu-collapsed.layout-menu-hover .app-brand-text,
.layout-menu-collapsed.layout-menu-hover .menu-inner .menu-link .text-truncate {
  opacity: 1;
  visibility: visible;
}

/* (Kompatibilitas) Jika Anda juga memakai rule non-prefixed: */
.layout-menu-hover:not(.layout-menu-collapsed) .layout-menu {
  width: var(--sidebar-w);
}

/* ----------------------------------
   Mobile / Offcanvas (GPU-friendly)
----------------------------------- */
@media (max-width: 1199.98px) {
  .layout-menu {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    transform: translateX(-100%);
    width: var(--sidebar-w);
    transition: transform var(--sidebar-dur) var(--sidebar-ease),
      visibility 0s linear var(--sidebar-dur);
    visibility: hidden;
  }
  /* Saat expanded di mobile, slide-in & visible */
  .layout-menu-expanded .layout-menu {
    transform: translateX(0);
    visibility: visible;
    transition-delay: 0s, 0s;
  }
  /* Konten tidak dipush di mobile */
  .layout-page {
    padding-left: 0 !important;
    transition: none;
  }
}

/* ----------------------------------
   Preferensi Reduced Motion
----------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .layout-menu,
  .layout-page {
    transition: none !important;
  }
}

/* ----------------------------------
   Footer Teks Berjalan (Marquee)
----------------------------------- */

/* Footer fixed dengan z-index tertinggi agar di atas overlay & menu */
.fixed-bottom-marquee {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 0.5rem 0;
  z-index: 1102; /* di atas overlay(1100) & menu(1101) */
  overflow: hidden;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
  background: var(--bs-body-bg, #fff);
}

/* Container & konten bergerak */
.marquee-container {
  width: 100%;
  display: flex;
  align-items: center;
}
.marquee-content {
  display: inline-block;
  white-space: nowrap;
  animation: marquee-scroll 20s linear infinite;
  color: var(--bs-body-color, #212529);
}

/* Pause saat hover */
.fixed-bottom-marquee:hover .marquee-content {
  animation-play-state: paused;
}

/* Keyframes */
@keyframes marquee-scroll {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-50%);
  }
}