/* Clear, readable communication reports at narrow viewport widths. */
#messages-weekly-summary:not(.hidden) {
    display: grid;
    gap: 8px;
    padding: 20px;
}

/* experience.css resets every direct report child to vertical-only padding.
   Override that important rule for this compact summary card. */
#app-container.experience-shell .experience-communication-reports > #messages-weekly-summary {
    padding: 20px !important;
}

#messages-weekly-summary p {
    margin: 0;
    line-height: 1.55;
}

#messages-weekly-total {
    margin: 2px 0 !important;
    line-height: 1.15 !important;
}

#messages-weekly-period {
    color: var(--v1-muted-ink, #52636d);
}

.communication-report-followup {
    min-height: 44px;
    white-space: normal;
}

@media (max-width: 800px) {
    #comm-report-table,
    #parent-target-table {
        overflow: visible;
    }

    .communication-report-table,
    .communication-report-table tbody {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .communication-report-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .communication-report-table tbody tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        padding: 12px 16px;
        margin: 0 0 12px;
        border: 1px solid var(--v1-border, #d6e0e3);
        border-radius: 10px;
        background: var(--v1-surface, #fff);
    }

    .communication-report-table tbody td {
        display: grid;
        grid-template-columns: minmax(118px, 38%) minmax(0, 1fr);
        align-items: start;
        gap: 12px;
        min-width: 0;
        padding: 9px 0;
        border-bottom: 1px solid var(--v1-border, #e2e8e9);
        overflow-wrap: anywhere;
        line-height: 1.45;
    }

    .communication-report-table tbody td:last-child {
        border-bottom: 0;
    }

    .communication-report-table tbody td::before {
        content: attr(data-label);
        color: var(--v1-muted-ink, #52636d);
        font-size: .75rem;
        font-weight: 700;
        letter-spacing: .035em;
        line-height: 1.4;
        text-transform: uppercase;
        overflow-wrap: anywhere;
    }

    .communication-report-table .report-cell-value {
        min-width: 0;
        overflow-wrap: anywhere;
        line-height: 1.45;
    }

    .communication-report-table tbody td[data-label="Teacher"],
    .communication-report-table tbody td[data-label="Parent"] {
        display: block;
        padding: 4px 0 12px;
        border-bottom: 1px solid var(--v1-border, #e2e8e9);
        font-size: 1rem;
        font-weight: 700;
    }

    .communication-report-table tbody td[data-label="Teacher"]::before,
    .communication-report-table tbody td[data-label="Parent"]::before {
        display: block;
        margin-bottom: 4px;
    }

    .communication-report-table tbody td[data-label="Follow up"] {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        padding-top: 12px;
    }

    .communication-report-followup {
        width: 100%;
        max-width: 100%;
        padding: 10px 12px;
        line-height: 1.35;
        overflow-wrap: normal;
        word-break: normal;
    }
}

@media (max-width: 420px) {
    #messages-weekly-summary:not(.hidden) {
        padding: 18px;
        gap: 9px;
    }

    #app-container.experience-shell .experience-communication-reports > #messages-weekly-summary {
        padding: 18px !important;
    }

    #messages-weekly-summary #messages-weekly-total {
        font-size: 2rem;
    }

    .communication-report-table tbody tr {
        padding: 10px 12px;
    }

    .communication-report-table tbody td {
        grid-template-columns: minmax(96px, 36%) minmax(0, 1fr);
        gap: 9px;
    }
}