body {
    font-family: 'Inter', sans-serif;
    background-color: #f4f7fa; /* A light, soft grey */
    padding-bottom: 70px; /* Provides space for the bottom nav bar */
}

/* --- Main Layout & Header --- */
.main-header {
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* --- Mobile Bottom Navigation --- */
.mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    border-top: 1px solid #e2e8f0; /* slate-200 */
    display: flex;
    justify-content: space-around;
    padding-top: 8px;
    padding-bottom: 8px;
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #64748b; /* slate-500 */
    text-decoration: none;
    flex-grow: 1;
}

    .nav-item .mud-icon-root {
        color: #64748b; /* slate-500 */
    }

    .nav-item .nav-text {
        font-size: 0.75rem; /* 12px */
    }

    /* Style for the active navigation item */
    .nav-item.active .mud-icon-root,
    .nav-item.active .nav-text {
        color: #2563eb; /* blue-600 */
    }

/* --- Floating Action Button (FAB) --- */
.fab {
    position: fixed;
    bottom: 80px;
    right: 20px;
    z-index: 999;
}

/* --- Agenda View Specific Styles --- */
.day-separator {
    display: flex;
    align-items: center;
    color: #64748b; /* slate-500 */
    font-weight: 500;
    margin: 24px 0 12px;
}

    .day-separator::after {
        content: '';
        flex-grow: 1;
        height: 1px;
        background: #e2e8f0; /* slate-200 */
        margin-left: 12px;
    }

/* --- Bottom Sheet Modal Styles (for MudDialog) --- */
/* You can apply these styles to MudDialog via its Class property */
.bottom-sheet-dialog .mud-dialog-title {
    display: none; /* Hide default title, we use our own */
}

.bottom-sheet-dialog .mud-dialog-content {
    padding: 16px !important;
}

.sheet-handle {
    width: 40px;
    height: 5px;
    background-color: #d1d5db; /* gray-300 */
    border-radius: 2.5px;
    margin: 0 auto 16px;
}

/* --- Login Screen --- */
.login-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1.5rem;
    background-color: #ffffff;
}

.mud-theme-primary-darker {
    background-color: color-mix(in srgb, var(--mud-palette-primary), black 40%);
    /* Keep the text color standard */
    color: var(--mud-palette-primary-text);
}