.portal-filter { display: flex; align-items: center; gap: 8px; margin: 12px 0; font-size: .8rem; font-weight: 700; }
.portal-filter select { font: inherit; padding: 8px 12px; border: 1px solid #dce7de; border-radius: 8px; background: white; color: #1e3b2b; }
:is(button, a, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid #39754f; outline-offset: 3px; }
.diagnostic-section table th:first-child, .diagnostic-section table td:first-child { min-width: 135px; overflow-wrap: normal; word-break: normal; }
.notification .notif-msg { white-space: normal; overflow: visible; text-overflow: clip; -webkit-line-clamp: unset; }
.table-wrap { max-width: 100%; overflow-x: auto; }
.main-wrapper, .panel, .stat, .stat-card { min-width: 0; }
/* Keep page titles in their own row, clear of the first card and its hover lift. */
.main-wrapper > .topbar {
    flex: 0 0 auto;
    height: auto !important;
    padding-block: 16px !important;
}
.main-wrapper > .topbar h1 {
    line-height: 1.3;
    overflow-wrap: anywhere;
}
.main-wrapper > .topbar + .content-area {
    min-height: 0;
    padding-top: 12px !important;
}
/* Constrain dialog content, not the full-screen backdrop carrying role="dialog". */
dialog, .modal-card, .action-modal-card, .logout-modal-card { max-height: 90dvh; overflow-y: auto; }
@media (max-width: 768px) {
    .modal-card, .action-modal-card, .logout-modal-card, dialog { max-width: calc(100vw - 24px); }
    .portal-filter select, button, [role=button] { min-height: 40px; }
    .content-area { min-width: 0; }
}