/* Mobile Text Readability Overrides
   Ensures all text content is fully visible without truncation on mobile devices.
   Adjusts font sizes, line heights, and word wrapping for smaller screens. */

@media (max-width: 767px) {
    /* ─── Global text wrapping ─────────────────────────────────── */
    /* Ensure long words/emails break properly on narrow screens */
    h1, h2, h3, h4, p, span, a, td, th, label, option {
        overflow-wrap: break-word;
        word-wrap: break-word;
    }

    /* ─── Table cells: prevent text clipping ────────────────────── */
    table td, table th {
        white-space: normal;
        word-break: break-word;
    }

    /* ─── Task list table: improved readability ─────────────────── */
    .divide-y > tr td:first-child,
    tbody > tr > td:first-child {
        max-width: 45vw;
    }

    /* ─── Kanban card text: ensure titles and descriptions wrap ── */
    .task-card h4 {
        white-space: normal;
        word-break: break-word;
        line-height: 1.4;
    }

    .task-card .card-description {
        white-space: normal;
        word-break: break-word;
    }

    /* ─── Team management: names and emails fully visible ──────── */
    [data-member-id] h4,
    [data-member-id] p,
    [data-invitation-id] h4,
    [data-invitation-id] p {
        white-space: normal;
        word-break: break-word;
    }

    /* ─── Filter and sort buttons: text wrapping ──────────────── */
    .flex-wrap > a,
    .flex-wrap > button {
        white-space: normal;
        text-align: center;
    }

    /* ─── Modal text: ensure titles and descriptions don't clip ─ */
    #task-detail-modal h2,
    #task-detail-modal p,
    #global-task-modal h2,
    #new-project-modal h2 {
        white-space: normal;
        word-break: break-word;
    }

    /* ─── Breadcrumb text: wrap instead of truncate ─────────────── */
    nav .text-on-primary-container {
        white-space: normal;
        word-break: break-word;
    }

    /* ─── Improved line heights for mobile readability ─────────── */
    .text-xs {
        line-height: 1.5;
    }

    .text-sm {
        line-height: 1.6;
    }

    /* ─── Role badges and status badges: prevent clipping ──────── */
    .rounded-full[class*="font-bold"],
    .rounded[class*="font-bold"] {
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* ─── Invite form and seats info: readable text ─────────────── */
    .sticky .text-sm,
    .sticky .text-xs,
    .sticky p {
        white-space: normal;
        word-break: break-word;
    }

    /* ─── Dashboard stats: prevent overflow ──────────────────────── */
    .items-baseline .text-sm {
        white-space: normal;
    }

    /* ─── Activity feed: ensure full visibility ──────────────────── */
    .space-y-6 .text-sm.leading-relaxed {
        white-space: normal;
        word-break: break-word;
    }
}