Move CSS styling from inline attributes to CSS isolation files

[Copilot]

Replaced all inline Style= attributes and utility classes (d-flex, align-center, etc.) with semantic CSS classes in CSS isolation files.

Changes by component

SettingsPage

• d-flex justify-center + inline styles → .loading-container / .loading-spinner

ManageCategoriesPage

• Inline margin-right: -2px → .manage-category-enabled-switch

EditCategoryDialog

• Created new CSS isolation file
• d-flex flex-row flex-grow-1 → .medication-fields
• d-flex flex-column → .more-options-content

DataPointView

• d-flex align-center flex-grow-1 → .sleep-controls
• d-flex flex-column flex-grow-1 note-container → .note-container
• d-flex flex-grow-1 justify-space-between align-center → .medication-controls

Example

Before:

<div class="d-flex align-center flex-grow-1" style="gap: 8px">
    <MudText Class="sleep-hours">@hours</MudText>
    ...
</div>

After:

<div class="sleep-controls">
    <MudText Class="sleep-hours">@hours</MudText>
    ...
</div>

.sleep-controls {
  display: flex;
  align-items: center;
  flex-grow: 1;
  gap: 8px;
}

Original prompt

Move ALL CSS styling to actual CSS files instead of doing it inside razor via classes like "d-flex". Prefer CSS isolation

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.