body {
    font-family: 'Inter', sans-serif;
    background-color: #f4f6f9;
    /* AdminLTE light background */
    overflow-x: hidden;
}

/* Sidebar Wrapper */
#wrapper {
    display: flex;
    width: 100%;
    align-items: stretch;
    min-height: 100vh;
}

/* Sidebar Styling */
#sidebar {
    min-width: 250px;
    max-width: 250px;
    background: #343a40 !important;
    /* AdminLTE dark gray */
    color: #fff;
    transition: all 0.3s;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
    z-index: 1040;
    
    /* Sticky Full Height */
    height: 100vh;
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Mode toggled (hidden sidebar) */
#sidebar.toggled {
    margin-left: -250px;
}

#sidebar .sidebar-header {
    padding: 20px;
    background: #343a40;
    border-bottom: 1px solid #4b545c;
}

#sidebar ul.components {
    padding: 10px 0;
    flex: 1;
}

/* Custom Scrollbar for Sidebar */
#sidebar::-webkit-scrollbar {
    width: 6px;
}
#sidebar::-webkit-scrollbar-track {
    background: transparent;
}
#sidebar::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.1);
    border-radius: 10px;
}
#sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.2);
}

#sidebar ul li a {
    padding: 10px 20px;
    font-size: 1.05em;
    display: block;
    color: #c2c7d0;
    text-decoration: none;
    transition: all 0.2s;
}

#sidebar ul li a:hover,
#sidebar ul li>a[aria-expanded="true"] {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    /* Hover effect */
}

/* Navbar Toggle icon right float for dropdowns */
#sidebar .dropdown-toggle::after {
    float: right;
    margin-top: 8px;
}

/* Dropdown list styling in sidebar */
#sidebar ul.collapse {
    background: #2b3035;
}

/* Main Content Area */
#content {
    width: 100%;
    min-height: 100vh;
    transition: all 0.3s;
    background-color: #f4f6f9;
}

/* Responsive constraints on small screen */
@media (max-width: 768px) {
    #sidebar {
        margin-left: -250px;
        /* Hidden by default on mobile */
        position: fixed;
        height: 100vh;
        overflow-y: auto;
    }

    #sidebar.toggled {
        margin-left: 0;
        /* Shown on mobile when toggled */
    }
}

/* Card hover animation */
.card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.card:hover {
    transform: translateY(-3px);
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .10) !important;
}

.form-control:focus,
.form-select:focus {
    box-shadow: none;
    border-color: #0d6efd;
}

.navbar-brand {
    letter-spacing: 1px;
}

/* Redefined Login Layout Styles */
.bg-gradient-light {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.announcement-card {
    transition: transform 0.3s ease, border-left 0.3s ease;
    border-left: 0 solid #0d6efd;
}

.announcement-card:hover {
    transform: translateX(10px) !important;
    border-left: 5px solid #0d6efd !important;
}

.rounded-5 {
    border-radius: 2rem !important;
}

.bg-primary-subtle {
    background-color: #cfe2ff !important;
}

.min-vh-100 {
    min-height: 100vh !important;
}

/* Custom Scrollbar for Announcement List */
.announcement-list::-webkit-scrollbar {
    width: 4px;
}
.announcement-list::-webkit-scrollbar-track {
    background: transparent;
}
.announcement-list::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.1);
    border-radius: 10px;
}