/* admin/assets/css/style.css */

/* --- Layout Base --- */
#main-navbar {
    position: fixed; top: 0; left: 0; width: 100%; height: 70px;
    z-index: 1001; background-color: #111827; border-bottom: 1px solid #1f2937;
}

#sidebar {
    width: 260px; position: fixed; top: 70px; left: 0;
    height: calc(100vh - 70px); z-index: 1000;
    background-color: #0d111c; border-right: 1px solid #1f2937;
    transition: transform 0.3s ease;
}

.main-content {
    margin-left: 260px; margin-top: 70px; padding: 2rem;
    min-height: calc(100vh - 70px); transition: margin-left 0.3s ease;
}

/* Desktop Sidebar Collapse */
.sidebar-collapsed { transform: translateX(-260px); }
.main-full { margin-left: 0 !important; }

/* --- 📂 Submenu & Arrows --- */
.submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out; /* Slide down effect */
}

.submenu.open {
    max-height: 500px; /* ලිස්ට් එක පෙන්වීමට අවශ්‍ය ඉඩ */
}

.menu-arrow {
    transition: transform 0.3s ease;
}

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

/* --- Mobile View --- */
@media (max-width: 768px) {
    .main-content { margin-left: 0 !important; margin-top: 75px; padding: 1.25rem; }
    #sidebar { transform: translateX(-100%); z-index: 3000; top: 0; height: 100vh; }
    #sidebar.mobile-active { transform: translateX(0); }
    #sidebar-overlay {
        display: none; position: fixed; inset: 0;
        background: rgba(0, 0, 0, 0.85); z-index: 2500;
    }
    #sidebar-overlay.active { display: block; }
}

/* Status Colors */
.status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.bg-online { background-color: #4ade80; box-shadow: 0 0 8px #4ade80; }
.bg-offline { background-color: #f87171; box-shadow: 0 0 8px #f87171; }
.bg-warning { background-color: #fbbf24; box-shadow: 0 0 8px #fbbf24; }

/* Scrollbar */
.custom-scrollbar::-webkit-scrollbar { width: 4px; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #1f2937; border-radius: 10px; }