/* Guardian / dashboard styling. Plain global stylesheet (not CSS isolation)
   so the rules apply regardless of each primitive's root element. Every class
   is prefixed usp- to avoid colliding with MudBlazor or app.css. */

/* ---- Page shell & layout grids ------------------------------------------ */

/* White card on the grey page (page grey comes from the MudTheme background). */
.usp-dashboard {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    background-color: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 1.5rem 1.75rem;
}

.usp-section-block {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.usp-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.usp-children-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.usp-panels-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    align-items: stretch;
}

.usp-panel-col {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ---- Page header --------------------------------------------------------- */

.usp-header {
    padding-bottom: 1rem;
    border-bottom: 1px solid #E8E6EC;
}

.usp-header-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 2rem;
    line-height: 1.15;
    font-weight: 600;
    color: #1F2430;
}

/* Opt-in accent for a greeting title (student dashboard). Additive; only applied when
   DashboardPageHeader.AccentTitle is true, so it never affects the guardian header. */
.usp-header-title-accent {
    color: var(--mud-palette-primary, #7F00FF);
}

.usp-header-subtitle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #7F00FF;
}

.usp-header-dot {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background-color: #7F00FF;
    flex: 0 0 auto;
}

/* ---- Summary statement --------------------------------------------------- */

.usp-summary {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    height: 100%;
    padding: 1rem 1.15rem;
    background-color: #FFFFFF;
    border: 1px solid #E8E6EC;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(16, 15, 20, 0.04);
}

.usp-summary-label {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8A8794;
}

.usp-summary-dot {
    width: 0.35rem;
    height: 0.35rem;
    border-radius: 50%;
    background-color: #7F00FF;
    flex: 0 0 auto;
}

.usp-summary-text {
    font-family: var(--font-display);
    font-size: 1.19rem;
    line-height: 1.3;
    font-weight: 600;
    color: #1F2430;
}

.usp-summary-detail {
    font-size: 0.82rem;
    line-height: 1.4;
    color: #6B7280;
}

/* ---- Section heading ----------------------------------------------------- */

.usp-section {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.usp-section-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.375rem;
    line-height: 1.2;
    font-weight: 600;
    color: #1F2430;
}

.usp-section-lede {
    font-size: 0.82rem;
    color: #6B7280;
}

/* ---- Panel card ---------------------------------------------------------- */

.usp-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: #FFFFFF;
    border: 1px solid #E8E6EC;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(16, 15, 20, 0.04), 0 1px 3px rgba(16, 15, 20, 0.05);
    overflow: hidden;
}

.usp-panel-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #EFEEF2;
}

.usp-panel-title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    color: #1F2430;
}

.usp-panel-meta {
    font-size: 0.78rem;
    color: #8A8794;
    flex: 0 0 auto;
}

.usp-panel-body {
    flex: 1 1 auto;
    padding: 1.25rem;
}

/* ---- Empty state --------------------------------------------------------- */

.usp-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1rem 0.5rem;
}

.usp-empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid #E8E6EC;
    border-radius: 12px;
    background-color: #FAF9FB;
    color: #8A8794;
    margin-bottom: 0.85rem;
}

.usp-empty-heading {
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.35;
    color: #1F2430;
    max-width: 30rem;
}

.usp-empty-body {
    margin-top: 0.4rem;
    font-size: 0.84rem;
    line-height: 1.45;
    color: #6B7280;
    max-width: 430px;
}

.usp-empty-actions {
    margin-top: 1rem;
    width: 100%;
    display: flex;
    justify-content: center;
}

/* ---- Ghost slot ---------------------------------------------------------- */

.usp-ghost {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.1rem;
    height: 100%;
    padding: 1.5rem;
    border: 1px dashed #D9D6E0;
    border-radius: 16px;
    background-color: #FBFAFC;
}

.usp-ghost-bars {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    width: 70%;
    align-items: center;
}

.usp-ghost-bar {
    width: 100%;
    height: 0.55rem;
    border-radius: 999px;
    background-color: #ECEAF0;
}

.usp-ghost-bar-short {
    width: 60%;
}

.usp-ghost-label {
    font-size: 0.78rem;
    color: #A5A2AE;
    text-align: center;
}

/* ---- Child card ---------------------------------------------------------- */

.usp-child {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 268px;
    padding: 1.25rem;
    background-color: #FFFFFF;
    border: 1px solid #E8E6EC;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(16, 15, 20, 0.04), 0 1px 3px rgba(16, 15, 20, 0.05);
}

.usp-child-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background-color: #F5EFFF;
    border: 1px solid #E5D8FF;
    color: #7F00FF;
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.85rem;
}

.usp-child-heading {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 600;
    color: #1F2430;
}

.usp-child-school {
    margin-top: 0.15rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: #6D28D9;
}

.usp-child-body {
    margin-top: 0.4rem;
    font-size: 0.84rem;
    line-height: 1.45;
    color: #6B7280;
}

.usp-child-rows {
    margin-top: 1rem;
    margin-bottom: 1rem;
    padding-top: 0.85rem;
    border-top: 1px dashed #DDD9E4;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.usp-child-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.usp-child-row-label {
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #8A8794;
}

.usp-child-row-value {
    font-size: 0.85rem;
    font-weight: 600;
    color: #1F2430;
}

.usp-child-row-bar {
    height: 0.5rem;
    width: 5.5rem;
    border-radius: 999px;
    background-color: #ECEAF0;
}

/* ---- Status legend (recent activity empty state) ------------------------- */

.usp-legend {
    width: 100%;
    padding-top: 1rem;
    border-top: 1px dashed #DDD9E4;
}

.usp-legend-label {
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8A8794;
    margin-bottom: 0.6rem;
}

.usp-legend-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}

.usp-legend-row .mud-chip {
    margin: 0;
    height: 20px;
    padding: 0 7px;
    font-size: 0.66rem;
}

.usp-legend-arrow {
    color: #A5A2AE;
    font-size: 0.8rem;
}

/* Status line directly under the page heading. */
.usp-status-line {
    margin: -0.4rem 0 1.5rem;
    font-size: 0.95rem;
    color: #4B5563;
}

/* Guardian-only plain-language severity note beneath "What happened". */
.usp-severity-note {
    margin-top: 0.2rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #B91C1C;
}

/* ---- Rebuilt guardian dashboard: metrics, filter, table, pager ----------- */

.usp-metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.875rem;
    margin-bottom: 1.25rem;
}

.usp-metric {
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    padding: 1rem 1.125rem;
}

.usp-metric-label {
    font-size: 0.75rem;
    color: #6B7280;
    margin-bottom: 0.5rem;
}

.usp-metric-value {
    font-size: 1.75rem;
    font-weight: 600;
    color: #111827;
    line-height: 1.1;
}

.usp-metric-value-alert {
    color: #B42318;
}

/* Short one-word metric labels, the metrics caption and the metrics section wrapper are
   phone-only. On desktop the wrapper is transparent (display: contents) so the metrics grid
   stays a direct flex child of .usp-dashboard exactly as before, and the short labels and
   caption are hidden. */
.usp-metrics-section { display: contents; }
.usp-metric-label-short { display: none; }
.usp-metrics-note { display: none; }

.usp-trend {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.25rem;
    font-weight: 600;
}

.usp-trend-arrow {
    font-size: 1.25rem;
    line-height: 1;
}

.usp-trend-down { color: #067647; }
.usp-trend-flat { color: #6B7280; }
.usp-trend-up { color: #B42318; }

.usp-reports-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.85rem;
}

.usp-filter {
    display: inline-flex;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    overflow: hidden;
}

.usp-filter-btn {
    font-family: inherit;
    font-size: 0.8125rem;
    padding: 0.4rem 0.85rem;
    border: none;
    background: #FFFFFF;
    color: #6B7280;
    cursor: pointer;
}

.usp-filter-btn + .usp-filter-btn {
    border-left: 1px solid #E5E7EB;
}

.usp-filter-btn.active {
    background: #FAF5FF;
    color: #5B00B5;
    font-weight: 500;
}

.usp-table-wrap {
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    overflow: hidden;
}

.usp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.usp-table thead th {
    text-align: left;
    background: #F9FAFB;
    padding: 0.7rem 1rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: #6B7280;
    border-bottom: 1px solid #E5E7EB;
}

.usp-table tbody td {
    padding: 0.875rem 1rem;
    border-bottom: 1px solid #E5E7EB;
    vertical-align: middle;
    color: #374151;
}

.usp-table tbody tr:last-child td {
    border-bottom: none;
}

.usp-row {
    cursor: pointer;
}

.usp-row:hover {
    background: #FCFCFD;
}

.usp-col-child { width: 90px; }
.usp-col-date { width: 150px; }
.usp-col-status { width: 130px; }
.usp-col-reporter { width: 140px; }

.usp-cell-child { font-weight: 500; color: #1F2430; }
.usp-cell-date { color: #6B7280; white-space: nowrap; }

.usp-table-empty {
    padding: 1.75rem 1rem;
    text-align: center;
    color: #9CA3AF;
}

.usp-pill {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 500;
    padding: 0.18rem 0.55rem;
    border-radius: 100px;
    white-space: nowrap;
}

.usp-pill-confidential {
    background: #FAF5FF;
    border: 1px solid #E9D5FF;
    color: #5B00B5;
    /* Spacing now sits before the pill, since it follows the event-type text. */
    margin-left: 0.5rem;
}


.usp-empty-card {
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 3.5rem 2rem;
    text-align: center;
}

.usp-empty-card-heading {
    font-size: 1.2rem;
    font-weight: 600;
    color: #111827;
    margin-bottom: 0.625rem;
}

.usp-empty-card-body {
    font-size: 0.875rem;
    color: #6B7280;
    line-height: 1.6;
    max-width: 420px;
    margin: 0 auto 1.5rem;
}

/* ---- Staff reports desktop grid (mockup styling) ------------------------- */
/* Scoped to this one grid via the staff-reports-grid class on the MudDataGrid, so no other page's
   tables are affected. Targets MudBlazor's own table markup. */

/* Table scrolls sideways inside its own container when wider than the space; the page never does. The header
   info-tooltip panels render through MudPopoverProvider (above the page), so they are never clipped by this
   container and no bottom-padding workaround is needed. */
.staff-reports-grid .mud-table-container {
    overflow-x: auto;
}

/* Every header and cell on a single line, including Date and Affected party values. */
.staff-reports-grid table { white-space: nowrap; }

.staff-reports-grid th.mud-table-cell {
    padding: 16px;
    font-weight: 600;
    border-bottom: 1px solid #E7E8EE;
}

.staff-reports-grid td.mud-table-cell {
    padding: 14px 16px;
    border-bottom: 1px solid #EEEFF3;
}

/* Row hover from the mockup. The extra class beats MudBlazor's default .mud-table-hover rule. */
.staff-reports-grid tbody .mud-table-row:hover {
    background: #FAF8FF;
}

/* The Event type and Flags header info tooltips. The wrapper lays out the header text and the info button;
   each panel itself is a MudPopover (see Dashboard.razor) so it renders above the page and is never clipped
   by the grid. The panel shows on hover and on keyboard focus of the button. */
.usp-tip {
    position: relative;
    display: inline-flex;
    align-items: center;   /* button vertically centred on the header text */
    gap: 6px;              /* 6px between the header text and the button */
}

/* 22x22 round button, no padding, transparent, #6B7280; the icon inside is 16x16. */
.usp-tip-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: #6B7280;
    cursor: help;
}

.usp-tip-btn:hover,
.usp-tip-btn:focus-visible {
    background: #EFE7FD;
    color: #5B12D6;
    outline: none;
}

.usp-tip-btn svg { display: block; }

/* Sortable column header buttons, styled from the mockup's .sort-btn: borderless, transparent, inheriting
   the header's font and colour, with a 4px gap before the sort icon. The label turns purple on hover and
   (via an inline style) when its column is the active sort. */
.usp-sort-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.usp-sort-btn:hover {
    color: #5B12D6;
}

/* ---- Staff reports toolbar (mockup styling) ------------------------------ */
/* Scoped under .staff-reports-toolbar (and its chips/empty companions). Values are taken verbatim from
   docs/mockups/staff-reports-dashboard-mockup.html. One markup, shared by the desktop grid and the phone
   cards; the phone media query below reflows it (tabs scroll, search full width, Concern/Type side by side). */

.staff-reports-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    background: #FFFFFF;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(20, 20, 40, 0.08);
    padding: 12px;
}

/* Tabs */
.staff-reports-tabs-scroll {
    display: flex;
    min-width: 0;
}

.staff-reports-tabs {
    display: flex;
    gap: 4px;
    background: #F3F3F7;
    border-radius: 8px;
    padding: 4px;
}

.staff-reports-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 14px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: #4B5060;
    white-space: nowrap;
    cursor: pointer;
}

.staff-reports-tab:hover {
    color: #5B12D6;
}

.staff-reports-tab.is-active {
    background: #FFFFFF;
    color: #3B0F8F;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(20, 20, 40, 0.12);
}

.staff-reports-tab:focus-visible {
    outline: 2px solid #7A1CF5;
    outline-offset: 2px;
}

.staff-reports-pill {
    display: inline-block;
    min-width: 22px;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    background: #E4E5EB;
    color: #3A3F4C;
}

.staff-reports-tab.is-active .staff-reports-pill {
    background: #7A1CF5;
    color: #FFFFFF;
}

/* The Unread tab's pill takes the table's Unread status-badge colours when the tab is not selected and there
   are unread reports. Selected (the purple rule above) and zero (the grey base rule) are unchanged; this is
   added only via the markup in that one case, so no other tab's pill is affected. */
.staff-reports-pill-unread {
    background: #FEE2E2;
    color: #991B1B;
}

/* Search */
.staff-reports-search {
    flex: 1 1 260px;
    min-width: 260px;
    position: relative;
    display: flex;
    align-items: center;
}

.staff-reports-search > svg {
    position: absolute;
    left: 12px;
    width: 18px;
    height: 18px;
    color: #6B7280;
    pointer-events: none;
}

.staff-reports-search input {
    width: 100%;
    box-sizing: border-box;
    height: 44px;
    border: 1px solid #C9CBD3;
    border-radius: 8px;
    padding: 0 14px 0 38px;
    font-family: inherit;
    font-size: 15px;
    color: #1F2430;
    background: #FFFFFF;
}

.staff-reports-search input::placeholder {
    color: #6B7280;
}

.staff-reports-search input:focus {
    outline: 2px solid #7A1CF5;
    outline-offset: -1px;
}

/* Filter buttons */
.staff-reports-filter {
    position: relative;
}

.staff-reports-fbtn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 14px;
    border: 1px solid #C9CBD3;
    border-radius: 8px;
    background: #FFFFFF;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: #1F2430;
    white-space: nowrap;
    cursor: pointer;
}

.staff-reports-fbtn > svg {
    width: 12px;
    height: 12px;
}

.staff-reports-fbtn:hover {
    border-color: #7A1CF5;
}

.staff-reports-fbtn:focus-visible {
    outline: 2px solid #7A1CF5;
    outline-offset: 2px;
}

.staff-reports-fbtn.has-selection {
    border: 1px solid #7A1CF5;
    color: #3B0F8F;
    font-weight: 600;
}

/* Dropdown: a transparent full-viewport backdrop closes the menu on an outside click; the panel sits above it
   and opens 6px below its button, aligned to the button's right edge. */
.staff-reports-backdrop {
    position: fixed;
    inset: 0;
    z-index: 29;
}

.staff-reports-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(20, 20, 40, 0.18);
    padding: 6px;
}

.staff-reports-opt {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    padding: 9px 12px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    font-family: inherit;
    font-size: 14px;
    color: #1F2430;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

/* The option label sits immediately after the tick box; the tick box keeps its own fixed size, so every tick
   box lines up in one column down the full-width rows. */
.staff-reports-opt-label {
    flex: 0 1 auto;
    min-width: 0;
}

.staff-reports-opt:hover {
    background: #F3EDFE;
}

.staff-reports-opt.is-selected {
    color: #3B0F8F;
    font-weight: 600;
}

.staff-reports-opt:focus-visible {
    outline: 2px solid #7A1CF5;
    outline-offset: -2px;
}

/* Tick box drawn in CSS; filled purple with a white check when its option is selected. */
.staff-reports-tickbox {
    flex: 0 0 auto;
    position: relative;
    width: 16px;
    height: 16px;
    border: 1.5px solid #C9CBD3;
    border-radius: 4px;
    background: #FFFFFF;
}

.staff-reports-tickbox.is-on {
    border-color: #7A1CF5;
    background: #7A1CF5;
}

.staff-reports-tickbox.is-on::after {
    content: "";
    position: absolute;
    left: 4.5px;
    top: 1px;
    width: 4px;
    height: 8px;
    border: solid #FFFFFF;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Chips row + "Showing X of Y" line */
.staff-reports-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    font-size: 14px;
}

.staff-reports-showing {
    color: #4B5060;
}

.staff-reports-showing strong {
    font-weight: 600;
    color: #1F2430;
}

.staff-reports-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #EFE7FD;
    color: #3B0F8F;
    border-radius: 16px;
    padding: 5px 8px 5px 12px;
    font-weight: 500;
}

.staff-reports-chip-x {
    display: inline-flex;
    align-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: #5B12D6;
    cursor: pointer;
}

.staff-reports-chip-x:focus-visible {
    outline: 2px solid #7A1CF5;
    outline-offset: 2px;
    border-radius: 4px;
}

.staff-reports-clear {
    padding: 0;
    border: 0;
    background: transparent;
    color: #5B12D6;
    text-decoration: underline;
    font-family: inherit;
    font-size: 14px;
    cursor: pointer;
}

.staff-reports-clear:focus-visible {
    outline: 2px solid #7A1CF5;
    outline-offset: 2px;
}

/* Empty state, shared by the grid's NoRecordsContent and the phone card list. */
.staff-reports-empty {
    padding: 48px 16px;
    text-align: center;
    color: #4B5060;
    font-size: 15px;
}

/* ---- Phone toolbar (below 960px): search + Status/Concern/Type buttons, full-width dropdowns ---------- */
/* A separate block from the desktop toolbar, shown only on phone (the desktop toolbar and chips are hidden on
   phone by the media query at the end). All state and handlers are shared with the desktop toolbar. */

.staff-reports-phone {
    display: none;   /* hidden on desktop; the media query below shows it on phone */
    flex-direction: column;
    gap: 8px;
}

.staff-reports-phone-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #FFFFFF;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(20, 20, 40, 0.08);
    padding: 12px;
}

/* The shared search box, full width and natural height inside the stacked card. */
.staff-reports-phone-card .staff-reports-search {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
}

/* One row of three buttons sized to their content, 8px apart, filling the card width (any leftover space is
   split evenly between them). */
.staff-reports-phone-row {
    display: flex;
    gap: 8px;
}

.staff-reports-pbtn {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 4px;
    height: 44px;
    padding: 0 8px 0 10px;
    border: 1px solid #C9CBD3;
    border-radius: 8px;
    background: #FFFFFF;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: #1F2430;
    cursor: pointer;
}

.staff-reports-pbtn:hover {
    border-color: #7A1CF5;
}

.staff-reports-pbtn:focus-visible {
    outline: 2px solid #7A1CF5;
    outline-offset: 2px;
}

.staff-reports-pbtn.has-selection {
    border: 1px solid #7A1CF5;
    color: #3B0F8F;
    font-weight: 600;
}

/* Labels stay on one line at their natural width (Concern and Type never truncate); the optional pill and the
   chevron keep their size at the right. Only the Status button may ellipsize — see the rule below. */
.staff-reports-pbtn-label {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    text-align: left;
}

/* Only the Status button (the first in the row) may shrink below its content and ellipsize its label; Concern
   and Type keep at least their content width, so their labels are never cut off. */
.staff-reports-phone-row > .staff-reports-pbtn:first-child {
    min-width: 0;
}

.staff-reports-phone-row > .staff-reports-pbtn:first-child .staff-reports-pbtn-label {
    overflow: hidden;
    text-overflow: ellipsis;
}

.staff-reports-pbtn > svg {
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
}

/* Phone button pills (shared size): Status unread (red) and Concern/Type count (purple). */
.staff-reports-ppill {
    flex: 0 0 auto;
    display: inline-block;
    min-width: 18px;
    padding: 1px 6px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}

.staff-reports-ppill.is-unread {
    background: #FEE2E2;
    color: #991B1B;
}

.staff-reports-ppill.is-count {
    background: #7A1CF5;
    color: #FFFFFF;
}

/* Full-width dropdown anchored to the card, opening just below it, 12px in from each side. */
.staff-reports-pmenu {
    position: absolute;
    left: 12px;
    right: 12px;
    top: calc(100% + 6px);
    z-index: 30;
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(20, 20, 40, 0.18);
    padding: 6px;
}

.staff-reports-popt {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    padding: 11px 12px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    font-family: inherit;
    font-size: 15px;
    color: #1F2430;
    text-align: left;
    cursor: pointer;
}

.staff-reports-popt:hover {
    background: #F3EDFE;
}

.staff-reports-popt.is-selected {
    color: #3B0F8F;
    font-weight: 600;
    background: #F3EDFE;
}

.staff-reports-popt:focus-visible {
    outline: 2px solid #7A1CF5;
    outline-offset: -2px;
}

/* Label fills the row so a Status option's count pill sits at the right edge, and the Concern/Type label sits
   immediately after the tick box. */
.staff-reports-popt-label {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
}

/* 18px tick boxes in the phone dropdowns, lined up in one column. */
.staff-reports-pmenu .staff-reports-tickbox {
    width: 18px;
    height: 18px;
}

.staff-reports-pmenu .staff-reports-tickbox.is-on::after {
    left: 5.5px;
    top: 2px;
}

/* Status dropdown option pills: grey by default, purple when the option is selected, red for unread > 0. */
.staff-reports-dpill {
    flex: 0 0 auto;
    display: inline-block;
    min-width: 18px;
    padding: 1px 6px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    background: #E4E5EB;
    color: #3A3F4C;
}

.staff-reports-dpill.is-sel {
    background: #7A1CF5;
    color: #FFFFFF;
}

.staff-reports-dpill.is-unread {
    background: #FEE2E2;
    color: #991B1B;
}

/* "Showing X of Y reports · Clear all" line directly below the phone card. */
.staff-reports-phone-showing {
    font-size: 14px;
    color: #4B5060;
}

/* Phone layout (below 960px): hide the desktop toolbar and chips, show the phone toolbar. */
@media (max-width: 959.98px) {
    .staff-reports-toolbar,
    .staff-reports-chips {
        display: none;
    }

    .staff-reports-phone {
        display: flex;
    }
}

/* ---- Phone report cards (shown below 960px only) ------------------------- */

.usp-cards-phone { display: none; }

.usp-report-card {
    display: block;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 14px 16px;
    text-decoration: none;
    color: inherit;
    min-height: 56px;
}

.usp-report-card + .usp-report-card { margin-top: 10px; }

.usp-report-card:active { background: #F9FAFB; }

.usp-report-card-top {
    display: flex;
    align-items: center;          /* status chip vertically centred */
    justify-content: space-between;
    gap: 8px;
}

.usp-report-card-title {
    flex: 1 1 auto;
    min-width: 0;                 /* allow wrap, never pushed under the chip */
    font-size: 15px;
    font-weight: 600;
    color: #111827;
}

.usp-report-card-top .mud-chip { flex: 0 0 auto; }   /* chip never squashed */

.usp-report-card-meta {
    margin-top: 6px;
    font-size: 13px;
    color: #6B7280;
}

.usp-report-card-meta-2 { margin-top: 2px; }

.usp-cards-more { margin-top: 10px; }

/* ---- Family pages: header rows and phone cards --------------------------- */

/* Header row (title + action buttons). Plain flex, reproducing the desktop look
   of the MudStack it replaces so desktop is unchanged: the title pushes the
   controls to the right with margin-right:auto. The phone rules below turn it
   into a title+menu top line with full-width buttons underneath. */
.usp-family-header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.usp-family-title {
    margin-right: auto;
}

/* Phone card lists sit hidden on desktop; the tables show instead. */
.usp-family-cards-phone { display: none; }

.usp-family-card {
    display: block;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 14px 16px;
    text-decoration: none;
    color: inherit;
}

.usp-family-card + .usp-family-card { margin-top: 10px; }

.usp-family-card-tappable { cursor: pointer; }
.usp-family-card-tappable:active { background: #F9FAFB; }

/* A row with the text column on the left and a trailing control (Leave / chevron). */
.usp-family-card-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.usp-family-card-main { min-width: 0; }

.usp-family-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.usp-family-card-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 15px;
    font-weight: 600;
    color: #111827;
}

.usp-family-card-top .mud-chip { flex: 0 0 auto; }

.usp-family-card-meta {
    margin-top: 4px;
    font-size: 13px;
    color: #6B7280;
}

.usp-family-card-chevron {
    flex: 0 0 auto;
    color: #9CA3AF;
}

/* Accept + Decline: side by side, equal width, comfortable tap target. */
.usp-family-card-actions {
    margin-top: 10px;
    display: flex;
    gap: 8px;
}

.usp-family-card-actions .mud-button-root {
    flex: 1 1 0;
    min-height: 44px;
}

/* A single trailing text button (Remove / Revoke) sits at the right. */
.usp-family-card-action-end {
    margin-top: 6px;
    display: flex;
    justify-content: flex-end;
}

/* ---- Responsive ---------------------------------------------------------- */

@media (max-width: 959.98px) {
    .usp-dashboard {
        padding: 1.25rem;
    }

    .usp-summary-grid,
    .usp-children-grid,
    .usp-panels-grid {
        grid-template-columns: 1fr;
    }

    /* Metrics: one compact row of four tiles with a short caption below. */
    .usp-metrics-section { display: block; }

    .usp-metrics {
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
        margin-bottom: 0;
    }

    .usp-metric {
        padding: 10px 6px;
        text-align: center;
    }

    .usp-metric-value {
        font-size: 22px;
        font-weight: 700;
    }

    /* Long desktop labels give way to the one-word phone labels. */
    .usp-metric-label { display: none; }

    .usp-metric-label-short {
        display: block;
        margin-top: 2px;
        font-size: 12px;
        color: #6B7280;
    }

    /* Trend tile shows only the icon at 22px; the word stays for screen readers. */
    .usp-trend-arrow { font-size: 22px; }

    .usp-trend-label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .usp-metrics-note {
        display: block;
        margin-top: 6px;
        font-size: 12px;
        color: #6B7280;
    }

    /* Link-a-child prompt: compact, with a filled purple button below the message. */
    .usp-link-prompt.mud-alert {
        padding: 12px 14px;
    }

    .usp-link-prompt .mud-alert-message {
        padding: 0;
        font-size: 14px;
        line-height: 1.4;
    }

    .usp-link-prompt .mud-alert-icon .mud-icon-root {
        font-size: 20px;
    }

    /* MudStack lays out inline, so its row direction, alignment and gap need !important. */
    .usp-link-prompt .mud-stack {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }

    .usp-link-prompt .usp-link-prompt-btn.mud-button-root {
        min-height: 40px;
        padding: 0 16px;
        background-color: var(--mud-palette-primary, #7F00FF);
        color: var(--mud-palette-primary-text, #FFFFFF);
    }

    .usp-link-prompt .usp-link-prompt-btn.mud-button-root:hover {
        background-color: var(--mud-palette-primary, #7F00FF);
    }

    .usp-ghost-col {
        display: none;
    }

    /* Cards replace the data grid on phones. */
    .usp-grid-desktop { display: none; }
    .usp-cards-phone { display: block; }

    /* The flag legend wraps on narrow screens so its three items never overflow the card width.
       Phone-only: no desktop rule targets this class, and the inline style never sets flex-wrap, so the
       desktop legend stays on one line exactly as before. */
    .usp-flag-legend { flex-wrap: wrap; }

    /* Family pages: tables give way to card lists. */
    .usp-family-grid-desktop { display: none; }
    .usp-family-cards-phone { display: block; }

    /* Header row: the title and the overflow menu share the top line (the title
       ellipsizes rather than pushing the menu down); action buttons go full width
       beneath. Visual order is set with `order` so the desktop DOM order (title,
       buttons, menu) is unchanged. */
    .usp-family-header {
        flex-wrap: wrap;
        align-items: center;
    }

    .usp-family-title {
        flex: 1 1 auto;
        min-width: 0;
        margin-right: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        order: 0;
    }

    .usp-family-menu {
        order: 1;
        flex: 0 0 auto;
    }

    .usp-family-header-btn.mud-button-root {
        order: 2;
        flex: 1 1 100%;
        width: 100%;
        min-height: 44px;
    }

    /* Request-an-update button: keep the countdown text on one line at phone width. */
    .report-update-btn.mud-button-root {
        font-size: 13px;
        white-space: nowrap;
    }

    /* Guardian filter: one swipeable row that scrolls sideways when it does not fit. */
    .usp-filter {
        display: flex;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .usp-filter::-webkit-scrollbar { display: none; }

    .usp-filter-btn {
        flex: 0 0 auto;
        white-space: nowrap;
        min-height: 36px;
    }
}

/* ---- Dialogs on small phones (below 600px) ------------------------------- */

@media (max-width: 599.98px) {
    .mud-dialog-container .mud-dialog {
        margin: 16px;
        max-width: calc(100vw - 32px);
        max-height: 90vh;
        display: flex;
        flex-direction: column;
    }

    /* Title and actions stay put; the body scrolls when the dialog is tall. */
    .mud-dialog-container .mud-dialog .mud-dialog-content {
        overflow-y: auto;
    }

    .mud-dialog-container .mud-dialog .mud-dialog-actions .mud-button-root {
        min-height: 44px;
    }
}

/* ---- Phone polish (below 600px): tighter dashboard, plain family rows ----- */

@media (max-width: 599.98px) {
    /* Tighter dashboard shell padding; the shell background, border and radius
       are kept. */
    .usp-dashboard { padding: 16px; }

    /* 12px gap between the filter row and the first report card. */
    .usp-reports-header { margin-bottom: 12px; }

    /* My family: one white card with plain rows, not cards inside a card. Each
       row drops its own border, background and radius and is separated from the
       next by a 1px divider in the existing border colour; the last row has none.
       Horizontal padding is removed so the row content lines up with the paper's
       own padding and the dividers span the full width. */
    .usp-family-card {
        padding: 14px 0;
        border: none;
        background: transparent;
        border-radius: 0;
        border-bottom: 1px solid #E5E7EB;
    }

    .usp-family-card + .usp-family-card { margin-top: 0; }

    .usp-family-card:last-child { border-bottom: none; }
}