/* ========================================================
   ASN PRO - Custom Stylesheet
   ======================================================== */

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #f1f5f9;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

#login-screen, #asn-app-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  z-index: 50;
  background-color: #f1f5f9;
}

#login-screen {
  z-index: 60;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

.custom-scrollbar::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

/* Glassmorphism Header */
.glass {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.todo-checkbox:checked + div p {
  text-decoration: line-through;
  color: #9ca3af;
}

/* Animations */
.sub-tab-content, .view-section {
  animation: fadeIn 0.25s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.login-bg {
  background: linear-gradient(135deg, #172554 0%, #2563eb 100%);
}

/* SweetAlert2 Popup Priority */
div.swal2-container {
  z-index: 99999999 !important;
}

/* Sidebar Styles */
#sidebar {
  background-color: #172554 !important;
}

#sidebar .nav-item,
#sidebar a.nav-item,
#sidebar a,
#sidebar nav a {
  color: #ffffff !important;
  text-decoration: none !important;
  opacity: 0.9 !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
  border-left: 4px solid transparent;
}

#sidebar .nav-item i,
#sidebar a.nav-item i {
  color: #93c5fd !important;
  margin-right: 0.75rem !important;
  width: 1.25rem !important;
  text-align: center !important;
}

#sidebar .nav-item:hover,
#sidebar a.nav-item:hover {
  background-color: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  opacity: 1 !important;
}

#sidebar .nav-item:hover i,
#sidebar a.nav-item:hover i {
  color: #fbbf24 !important;
}

#sidebar .nav-item.active,
#sidebar a.nav-item.active {
  background-color: rgba(37, 99, 235, 0.35) !important;
  color: #fbbf24 !important;
  border-left: 4px solid #fbbf24 !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}

#sidebar .nav-item.active i,
#sidebar a.nav-item.active i {
  color: #fbbf24 !important;
}

#sidebar button.btn-logout {
  color: #f87171 !important;
  text-decoration: none !important;
}
#sidebar button.btn-logout:hover {
  color: #fca5a5 !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
}
#sidebar button.btn-logout i {
  color: #f87171 !important;
}

/* Accordion Submenu: Integrasi Sistem */
#sidebar .submenu-item {
  color: #bfdbfe !important;
  font-size: 0.8rem !important;
  padding: 0.5rem 0.75rem 0.5rem 1.25rem !important;
  border-left: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-radius: 0.5rem !important;
  opacity: 0.85 !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
}

#sidebar .submenu-item:hover {
  background-color: rgba(255, 255, 255, 0.12) !important;
  color: #fbbf24 !important;
  opacity: 1 !important;
}

#sidebar .submenu-item i.sub-icon {
  color: #93c5fd !important;
  width: 1.25rem !important;
  margin-right: 0.5rem !important;
  text-align: center !important;
}

#sidebar .submenu-item:hover i.sub-icon {
  color: #fbbf24 !important;
}

#icon-integrasi {
  transition: transform 0.25s ease-in-out;
}