/* Global word-break helpers to prevent overflow on small screens */
:root {
    /* no-op placeholder to keep file non-empty beyond rules below */
}

.card,
.btn,
.badge,
.tag,
body {
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* DaisyUI's .label uses white-space: nowrap (inline-flex), which can cause overflow
   for long toggle descriptions on mobile. Scope this override to Settings only. */
[data-cy="settings-page"] label.label.cursor-pointer {
    white-space: normal;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

[data-cy="settings-page"] label.label.cursor-pointer .label-text,
[data-cy="settings-page"] label.label.cursor-pointer .label-text-alt {
    white-space: normal;
}

/* Blazor's <FocusOnNavigate Selector="h1" /> programmatically focuses the first h1 on navigation.
   Some browsers render a visible outline for that focus, which looks like a white border on headings.
   Keep keyboard focus indicators (focus-visible), but hide the outline for non-keyboard/programmatic focus. */
h1:focus:not(:focus-visible),
h2:focus:not(:focus-visible),
h3:focus:not(:focus-visible) {
    outline: none;
}