/* --- Existing Styles --- */
body {
    font-family: 'Segoe UI', Arial, sans-serif;
    background-color: #f4f7f6;
    margin: 0;
    display: flex;
    flex-direction: row; /* Default: Sidebar next to content */
}

.main-content {
    flex: 1;
    padding: 20px;
    width: 100%;
    box-sizing: border-box;
}

/* Make tables scrollable on small screens */
.table-container {
    width: 100%;
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px; /* Prevents table from squishing too much */
}

/* --- Mobile Responsive Rules --- */
@media screen and (max-width: 768px) {
    body {
        flex-direction: column; /* Stack Sidebar on top of Content */
        font-family: 'Segoe UI', Arial, sans-serif;
        background-color: #f4f7f6;
        margin: 0;
        display: flex;
        
        
    }

    .sidebar {
        width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        padding: 10px 0 !important;
    }

    .sidebar ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        padding: 0 !important;
    }

    .sidebar li {
        padding: 5px 10px !important;
        margin: 2px !important;
    }

    .main-content {
        padding: 15px;
    }

    .dashboard-grid {
        grid-template-columns: 1fr; /* Single column cards on mobile */
    }
    
    input, select, button {
        font-size: 16px; /* Prevents iOS auto-zoom on focus */
    }
}

/* 2. Management Button එකට අදාළ වර්ණ වෙනස් කිරීම් (Color Change Overlay) */
.btn-white {
    background-color: #ffffff !important;
    color: #0d6efd !important; /* මුලින් අකුරු සහ Icon නිල් පාටින් */
    border: 2px solid #0d6efd !important;
    transition: all 0.4s ease !important;
    position: relative;
    z-index: 1;
}

/* Mouse Hover කළ විට වර්ණය නිල් පාටට වෙනස් වීම */
.btn-white:hover {
    background-color: #0d6efd !important; /* පසුබිම නිල් වෙයි */
    color: #ffffff !important;           /* අකුරු සුදු වෙයි */
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 20px rgba(13, 110, 253, 0.4) !important;
}

/* Hover කරන විට Icon එකේ වර්ණය වෙනස් කිරීම */
.btn-white:hover i {
    color: #ffffff !important;
    transform: scale(1.2);
    display: inline-block;
}

/* 3. Stats Card (Total counts) සඳහා Hover Effect */
.card {
    transition: all 0.3s ease !important;
    border: none !important;
}

.card:hover {
    background-color: #f0f7ff !important;
    transform: scale(1.02);
}

/* 4. Mobile Responsive සැකසුම් */
@media screen and (max-width: 768px) {
    body { flex-direction: column; }
    .sidebar { width: 100% !important; height: auto !important; }
    .main-content { padding: 15px; }
}