/**
 * style.css
 *
 * Custom styles for the Roster App.
 * These styles supplement or override Bootstrap styles.
 */

/* Make body take full viewport height */
html, body {
    height: 100%;
    /* font-family: 'Your Custom Font', sans-serif; */ /* Optional: Add a custom font */
}

/* Flexbox layout to push footer down */
/* Requires the main content wrapper in base.html to have 'flex-grow: 1' */
body {
    display: flex;
    flex-direction: column;
}

/* Ensure the main content area grows to fill available space */
/* Add class="flex-grow-1" to your main content container in base.html */
/* Example: <main class="container py-4 flex-grow-1"> */
main.flex-grow-1 {
    flex-grow: 1;
}

/* Footer basic styling (already has bg-light from Bootstrap) */
.footer {
    /* background-color: #f8f9fa; */ /* Provided by bg-light */
    padding-top: 1rem;
    padding-bottom: 1rem;
    /* flex-shrink: 0; */ /* Prevent footer from shrinking */ /* Not needed with flex-grow on main */
}


/* --- Component Customizations (Examples) --- */

/* Slightly larger font size for navbar brand */
.navbar-brand {
    font-size: 1.4rem;
}

/* Add some margin below cards */
.card {
    margin-bottom: 1.5rem;
}

/* Style for required form labels (optional) */
label.required::after {
    content: " *";
    color: red;
}

/* Custom styling for specific badges (example) */
.badge.bg-warning.text-dark {
    /* Custom styles for warning badges */
}

/* --- Utility Classes (Optional) --- */

.font-monospace {
    font-family: var(--bs-font-monospace);
}

/* Add more custom styles below as needed */

```

**To Use This:**

1.  **Create Directory:** If it doesn't exist, create the `css` directory inside `app/static/`. Your path should be `app/static/css/`.
2.  **Save the File:** Create a new file named `style.css` inside `app/static/css/`.
3.  **Paste Code:** Copy the code above and paste it into `app/static/css/style.css`.
4.  **Update `base.html` (Important for Sticky Footer):** To make the sticky footer work correctly with the CSS above, find the `<main>` tag in your `app/templates/base.html` [cite: uploaded:app/templates/base.html] and add the class `flex-grow-1` to it:
    ```html
    <main class="container py-4 flex-grow-1"> {# Add flex-grow-1 class here #}
        {% block content %}{% endblock %}
    </main>
    ```
5.  **Reload:** Reload the page in your browser (hard refresh: Ctrl+Shift+R or Cmd+Shift+R).

This will fix the 404 error for `style.css`. You can now add your own custom CSS rules to this file to further style your applicati