/* Custom Glassmorphism Theme for FlaskProject UI Kit */

/* Light Mode Header Glassmorphism */
#page-topbar {
    background: rgba(255, 255, 255, 0.45) !important;
    backdrop-filter: blur(16px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.3s ease;
}

/* Dark Mode Header Glassmorphism */
[data-layout-mode="dark"] #page-topbar {
    background: rgba(38, 41, 48, 0.55) !important;
    backdrop-filter: blur(16px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
    border-bottom: 0px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.15) !important;
}

/* Header hover subtle micro-animation */
#page-topbar:hover {
    background: rgba(222, 218, 218, 0.55) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06) !important;
}

[data-layout-mode="dark"] #page-topbar:hover {
    background: rgba(36, 37, 39, 0.65) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25) !important;
}

/* Smooth active state transitions */
.navbar-header {
    background: transparent !important;
}

/* User profile dropdown and search glassmorphism tweaks */
.dropdown-menu-lg, .dropdown-menu-end {
    backdrop-filter: blur(80px) !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
}

[data-layout-mode="dark"] .dropdown-menu-lg, 
[data-layout-mode="dark"] .dropdown-menu-end {
    background: rgba(31, 33, 36, 0.85) !important; /* Diubah ke 0.85 agar efek blur terlihat */
    border-radius: 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.15) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}
[data-layout-mode="light"] .dropdown-menu-lg, 
[data-layout-mode="light"] .dropdown-menu-end {
    background: rgba(233, 235, 236, 0.80) !important; /* Diubah ke 0.80 agar efek blur terlihat */
    border-radius: 10px !important;
    border: 1px solid rgba(243, 244, 246, 0.992) !important;
    box-shadow: 0 4px 30px rgba(161, 164, 168, 0.992) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}


/* Honeypot anti-brute force field display styling to prevent human visibility */
.website-hp-field {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    border: 0 !important;
}

/* Force Dark Mode Sidebar Styling */
[data-layout-mode="dark"] .navbar-menu {
    background: #212529 !important; /* Beautiful deep dark blue matching dark theme */
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.15) !important;
    border-radius: 14px !important;
}

/* Sidebar navigation links colors in dark mode */
[data-layout-mode="dark"] .navbar-menu .navbar-nav .nav-link {
    color: #abb9e8 !important;
}

[data-layout-mode="dark"] .navbar-menu .navbar-nav .nav-link:hover {
    color: #ffffff !important;
    
}

[data-layout-mode="dark"] .navbar-menu .navbar-nav .nav-link.active {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.07) !important;
}

[data-layout-mode="dark"] .navbar-menu .navbar-nav .nav-link i {
    color: #8b9cd3 !important;
}

[data-layout-mode="dark"] .navbar-menu .navbar-nav .nav-link.active i,
[data-layout-mode="dark"] .navbar-menu .navbar-nav .nav-link:hover i {
    color: #ffffff !important;
}

[data-layout-mode="dark"] .navbar-menu .menu-title {
    color: #495d7e !important;
}

/* Custom Active Sidebar Item Styling matching success classes */
.navbar-menu .navbar-nav .nav-link.bg-soft-success {
    background-color: rgba(10, 179, 156, 0.12) !important;
    color: #0ab39c !important;
    font-weight: 600 !important;
}
.navbar-menu .navbar-nav .nav-link.bg-soft-success i {
    color: #0ab39c !important;
}

[data-layout-mode="dark"] .navbar-menu .navbar-nav .nav-link.bg-soft-success {
    background-color: rgba(10, 179, 156, 0.22) !important;
    color: #29d6be !important;
}
[data-layout-mode="dark"] .navbar-menu .navbar-nav .nav-link.bg-soft-success i {
    color: #29d6be !important;
}

/* Sidebar Flexbox Layout & Footer Adjustments */
.navbar-menu {
    display: flex !important;
    flex-direction: column !important;
}

#scrollbar {
    flex: 1 1 auto !important;
}

.sidebar-footer {
    position: relative;
    z-index: 2;
    background: transparent;
}

/* WhatsApp Repeating Chat Doodle Background (Optimized opacity to ensure visibility) */
body, #layout-wrapper {
    background-color: #f0f0f06d !important; /* WhatsApp light mode pale background */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M10 10h20a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H18l-6 5v-5h-2a5 5 0 0 1-5-5V15a5 5 0 0 1 5-5z' fill='none' stroke='%23128C7E' stroke-width='1.2' stroke-opacity='0.12'/%3E%3Crect x='45' y='15' width='12' height='22' rx='2' fill='none' stroke='%23128C7E' stroke-width='1.2' stroke-opacity='0.12'/%3E%3Ccircle cx='51' cy='33' r='1' fill='%23128C7E' fill-opacity='0.12'/%3E%3Cpath d='M15 50l4 4 10-10' fill='none' stroke='%23128C7E' stroke-width='1.2' stroke-opacity='0.12'/%3E%3Cpath d='M50 50h12a3 3 0 0 1 3 3v6a3 3 0 0 1-3 3h-12a3 3 0 0 1-3-3v-6a3 3 0 0 1 3-3z' fill='none' stroke='%23128C7E' stroke-width='1.2' stroke-opacity='0.12'/%3E%3C/svg%3E") !important;
}

[data-layout-mode="dark"] body, 
[data-layout-mode="dark"] #layout-wrapper {
    background-color: #0b141a !important; /* WhatsApp dark mode background */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M10 10h20a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H18l-6 5v-5h-2a5 5 0 0 1-5-5V15a5 5 0 0 1 5-5z' fill='none' stroke='%23ffffff' stroke-width='1.2' stroke-opacity='0.05'/%3E%3Crect x='45' y='15' width='12' height='22' rx='2' fill='none' stroke='%23ffffff' stroke-width='1.2' stroke-opacity='0.05'/%3E%3Ccircle cx='51' cy='33' r='1' fill='%23ffffff' fill-opacity='0.05'/%3E%3Cpath d='M15 50l4 4 10-10' fill='none' stroke='%23ffffff' stroke-width='1.2' stroke-opacity='0.05'/%3E%3Cpath d='M50 50h12a3 3 0 0 1 3 3v6a3 3 0 0 1-3 3h-12a3 3 0 0 1-3-3v-6a3 3 0 0 1 3-3z' fill='none' stroke='%23ffffff' stroke-width='1.2' stroke-opacity='0.05'/%3E%3C/svg%3E") !important;
}

/* Semi-transparent wrappers to let the background doodles peek through */
.page-content, .main-content {
    background: transparent !important;
}

.card {
    border-radius: 12px !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08) !important;
}

.modal-content {
    border-radius: 12px !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08) !important;
}