body { background: #f4f6f9; font-family: 'Segoe UI', sans-serif; }

.sidebar {
    position: fixed; top: 0; left: 0; width: 230px; height: 100vh;
    background: #1e1e2d; color: #fff; padding: 0; overflow-y: auto;
}
.sidebar-brand {
    padding: 20px; background: #181825; text-align: center;
    border-bottom: 1px solid #2a2a3c;
}
.sidebar-brand h4 { margin: 0; color: #4ecca3; font-size: 18px; }
.sidebar-menu { list-style: none; padding: 10px 0; margin: 0; }
.sidebar-menu li a {
    display: block; padding: 12px 20px; color: #bfc0c9;
    text-decoration: none; transition: 0.2s;
}
.sidebar-menu li a:hover,
.sidebar-menu li a.active {
    background: #2a2a3c; color: #4ecca3;
    border-left: 3px solid #4ecca3;
}
.main-content { margin-left: 230px; padding: 25px; }
.page-header { margin-bottom: 20px; }
.card-box {
    background: #fff; border-radius: 10px; padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
/* Mobile Responsive Fixes */
@media (max-width: 768px) {
    .sidebar {
        left: -230px; /* Mobile par sidebar chhupa rahega */
        transition: 0.3s;
        z-index: 1050;
    }
    .sidebar.active {
        left: 0; /* Toggle karne par show hoga */
    }
    .main-content {
        margin-left: 0; /* Mobile par content poori screen lega */
        padding: 15px;
    }
    .mobile-menu-btn {
        display: block; /* Mobile par menu button show hoga */
        position: fixed;
        top: 15px;
        left: 15px;
        z-index: 1040;
        background: #1e1e2d;
        color: #fff;
        border: none;
        border-radius: 5px;
        padding: 5px 10px;
        font-size: 20px;
    }
    .page-header {
        padding-left: 50px; /* Button ke liye jagah */
    }
    /* Tables ko scrollable banayein */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .table th, .table td {
        white-space: nowrap; /* Text ko wrap hone se roke */
        font-size: 13px; /* Mobile par font thora chota */
    }
    .input-group-sm > .form-control, .input-group-sm > .input-group-text {
        font-size: 12px;
        padding: 0.25rem 0.5rem;
    }
}

/* Desktop par mobile menu button chhupayen */
@media (min-width: 769px) {
    .mobile-menu-btn {
        display: none;
    }
}