/* Custom styles inspired by Material Design 3 */
body {
    font-family: 'Roboto', sans-serif;
    background-color: #F0F4F8; /* Light blue-gray surface */
    min-height: 100vh;
    overflow-x: hidden;
}
/* Sidebar (Navigation Drawer) */
#sidebar {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background-color: #FFFFFF; /* White surface */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* Elevation level 3 */
}
#sidebar.hidden {
    transform: translateX(-100%);
}
.nav-link {
    color: #202124; /* Google text color */
    transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-link:hover {
    background-color: #F1F3F4; /* Light hover state */
}
.nav-link.active {
    background-color: #E8F0FE; /* Selected state with blue tint */
    color: #1A73E8; /* Google blue */
}
/* Card styles */
.card {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background-color: #FFFFFF;
    border-radius: 16px; /* Rounded corners */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); /* Elevation level 1 */
}
.card.visible {
    opacity: 1;
    transform: translateY(0);
}
.action-card {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.action-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.16); /* Higher elevation on hover */
}
/* Dropdown */
.dropdown-menu {
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background-color: #FFFFFF;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.dropdown-menu.active {
    opacity: 1;
    transform: translateY(0);
}
/* Buttons */
button {
    transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 4px; /* Standard button radius */
}
button:hover {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
/* Toggle switches (Material style) */
.switch {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 20px;
}
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #BCC1C7; /* Off state */
    transition: .4s;
    border-radius: 20px;
}
.slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}
input:checked + .slider {
    background-color: #1A73E8; /* Google blue on */
}
input:checked + .slider:before {
    transform: translateX(14px);
}
/* Section transitions */
section {
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Header (Top App Bar) */
header {
    background-color: #FFFFFF;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); /* Subtle shadow */
}