/*
 * Vikunja Compact Mobile CSS — v9 (fix title ellipsis: hide priority badge,
 *                                    project icon, and force ellipsis on inner spans)
 * Targets Vikunja v2.3.0 frontend
 *
 * v9 root cause from live DOM inspection at 390x844:
 *   .tasktext > span.is-inline-flex > [.task-project (hidden)] [span.high-priority "Urgent" 54px]
 *                                     [span.task-glance-trigger > a.task-link "<title>" 288px]
 *   .tasktext > span > span.project-task-icon  ← trailing folder icon at right:443 (off-screen)
 *
 * Even with .tasktext overflow:hidden + ellipsis, the inline-flex child's
 * content is a flex item (block-ish), so text-overflow:ellipsis on the
 * parent doesn't clip a char from the child's text. We must apply ellipsis
 * to the inner .is-inline-flex AND .task-link directly, AND remove the
 * .high-priority badge + trailing project icon that push title off-screen.
 */

/* ============================================================
 * 0. PARENT CONTAINERS — defeat the 53vw max-width on .tasks.short
 * ============================================================ */
body .tasks,
body .tasks.short,
body .tasks.noborder {
    max-width: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* ============================================================
 * 1. TASK ROW — single line, tight padding, can clip overflow
 * ============================================================ */
body .tasks .task,
body .task {
    display: flex !important;
    flex-wrap: nowrap !important;
    padding: 0.3rem 0.5rem !important;
    gap: 0.35rem !important;
    border-radius: 2px !important;
    border-bottom: 1px solid var(--grey-100) !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    min-height: 0 !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    align-items: center !important;
}

/* The <a class="task-link"> wrapping content also needs flex shrink */
body .task .task-link,
body .task a.task-link {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    overflow: hidden !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* ============================================================
 * 2. TITLE — single line, ellipsis
 *
 * iOS Safari only renders text-overflow: ellipsis on `display: block`
 * elements with a definite width. `inline-block` inside flex doesn't
 * always trigger it. Fix: keep flex shrink behavior, but force
 * `display: block` AND wrap the actual text in a span via CSS
 * (we can't add markup, so we use `min-width: 0` on the parent and
 * an explicit `width: 100%` here).
 *
 * The key insight: a flex item's `text-overflow: ellipsis` works only
 * when (a) parent has `min-width: 0`, (b) item has `overflow: hidden`,
 * (c) item is `display: block` (not inline-block in flex), (d) it has
 * `width: 100%` or `flex-basis: 0` and won't grow past parent.
 * ============================================================ */
body .task .tasktext,
body .task.tasktext,
body .tasktext {
    /* v8 root cause: on mobile the row contains [checkbox][status dot][title]
     * [project chip][priority badge][labels][due date][menu] all inline.
     * The title doesn't overflow — the SIBLINGS after it do, getting cut
     * at the row edge by overflow:hidden. The fix is to hide siblings on
     * mobile (rules 4+5 below) so the title can occupy the whole right side
     * AND have its own ellipsis kick in if needed. */
    flex: 1 1 0 !important;
    flex-basis: 0 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: auto !important;
    -webkit-line-clamp: none !important;
    line-clamp: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
    hyphens: none !important;
    word-break: normal !important;
    word-wrap: normal !important;
    font-size: 0.95rem !important;
    line-height: 1.35 !important;
    order: 3 !important;
    -webkit-box-orient: initial !important;
    padding-inline-end: 0.5rem !important;
}

/* ============================================================
 * 3. PRIORITY BADGE — keep inline, capped width, no stacking
 *
 * Note: only HIGH priority (DO NOW / Urgent / High) renders the
 * .high-priority component with red text. MEDIUM and LOW use a
 * different (or no) badge, but the spacing is similar.
 *
 * Don't add left margin — the row's gap already spaces it.
 * ============================================================ */
body .high-priority,
body .task .high-priority {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.2rem !important;
    inline-size: auto !important;
    width: auto !important;
    flex: 0 0 auto !important;
    font-size: 0.7rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    max-width: 5.5rem !important;
    order: 2 !important;
}

body .high-priority .icon,
body .high-priority svg {
    block-size: 0.9rem !important;
    inline-size: 0.9rem !important;
    flex-shrink: 0 !important;
}

body .high-priority span {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    max-width: 4rem !important;
}

/* ============================================================
 * 4. PROJECT NAME — HIDDEN on mobile (this was the overflow culprit!)
 *
 * The .task-project chip renders inline AFTER the title and its text
 * ("Bloom Retirement", "Shipping & Logistics") gets cut at the row
 * edge. The user already knows which project they're in (sidebar +
 * page title), so on mobile the chip is pure noise. Hide it.
 * On desktop (>=769px) it still shows.
 * ============================================================ */
@media (max-width: 768px) {
    body .task .task-project,
    body .task a.task-project {
        display: none !important;
    }
}

/* On desktop, keep the chip but make it smaller and constrained */
@media (min-width: 769px) {
    body .task .task-project {
        font-size: 0.75rem !important;
        color: var(--grey-500) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        flex: 0 1 8rem !important;
        min-width: 0 !important;
        order: 5 !important;
        margin-inline-start: 0.4rem !important;
    }
}

/* ============================================================
 * 5. DUE DATE — HIDDEN on mobile, smaller on desktop
 *
 * The due-date text "– Due in 12 hours" is also a sibling that pushes
 * content off-screen on mobile. Hide it; the user has Today/Upcoming
 * views to see dates.
 * ============================================================ */
@media (max-width: 768px) {
    body .task .dueDate {
        display: none !important;
    }
}

@media (min-width: 769px) {
    body .task .dueDate {
        font-size: 0.78rem !important;
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        margin-inline-start: 0.4rem !important;
        order: 6 !important;
    }
}

/* ============================================================
 * 5b. LABEL CHIPS (quick-win, critical-path, urgent, etc.)
 * Hide on mobile — user can see them in detail view if needed.
 * ============================================================ */
@media (max-width: 768px) {
    body .task .tag,
    body .task .label-wrapper {
        display: none !important;
    }
}

/* ============================================================
 * 5c. THE "…" MENU TRIGGER (3-dot icon at far right)
 * Hide on mobile — swipe left or long-press for options.
 * ============================================================ */
@media (max-width: 768px) {
    body .task .more-options,
    body .task .menu-trigger,
    body .task button[aria-label*="menu" i],
    body .task button[title*="menu" i] {
        display: none !important;
    }
}

/* ============================================================
 * 6. AVATARS, ICONS
 * ============================================================ */
body .task .avatar {
    block-size: 18px !important;
    inline-size: 18px !important;
    margin-inline-start: 3px !important;
    flex-shrink: 0 !important;
}

body .task .project-task-icon {
    margin-inline-start: 4px !important;
    font-size: 0.8rem !important;
    flex-shrink: 0 !important;
}

@media (max-width: 768px) {
    body .task .favorite {
        display: none !important;
    }
}

/* ============================================================
 * 7. CHECKBOX
 * ============================================================ */
body .task .fancy-checkbox {
    padding-block-start: 0 !important;
    padding-inline-end: 0.3rem !important;
    flex-shrink: 0 !important;
    order: 0 !important;
}

/* ============================================================
 * 8. MOBILE APP SHELL
 * ============================================================ */
@media (max-width: 768px) {
    .app-container .app-content,
    .content {
        padding: 0.75rem 0.5rem !important;
    }
}

/* ============================================================
 * 9. KANBAN — denser cards
 * ============================================================ */
.bucket .task {
    padding: 0.4rem 0.5rem !important;
    margin-bottom: 0.3rem !important;
}

/* ============================================================
 * 10. TABLE VIEW — denser rows
 * ============================================================ */
.project-table table td,
.project-table table th {
    padding: 0.3rem 0.5rem !important;
    font-size: 0.88rem !important;
}

/* ============================================================
 * 11. v9 MOBILE FIXES — actually paint the ellipsis
 *
 * Live DOM inspection at 390x844 revealed two title-clipping causes
 * NOT addressed by v8:
 *
 *   (a) span.high-priority "Urgent" badge (54px) is rendered INSIDE
 *       .tasktext > span.is-inline-flex, BEFORE the title, so the
 *       title starts ~60px later and overflows by exactly that amount.
 *   (b) span.project-task-icon (trailing folder icon, 20px) sits
 *       AFTER the inline-flex span and pushes content right:443 —
 *       past the row right edge (357), so the row's overflow:hidden
 *       clips the END of the title text (mid-letter look).
 *
 * Plus the ellipsis-not-painting issue: .tasktext has overflow:hidden
 * + text-overflow:ellipsis, but its child is a flex item containing
 * an <a> with the text. Ellipsis only clips text directly inside the
 * element it's set on; flex items don't propagate. We must apply the
 * ellipsis stack to the inner .is-inline-flex AND the .task-link.
 * ============================================================ */
@media (max-width: 768px) {
    /* Hide the "Urgent / High / Do Now" priority badge on mobile.
       Title alone is enough; the row's color cue (red text on title)
       still communicates urgency. */
    body .task .high-priority,
    body .task .priority-label {
        display: none !important;
    }

    /* Hide the trailing project-task-icon (small folder icon at far
       right). Redundant with the project context already in the
       sidebar / page title. The icon is wrapped in an empty-class
       <span> sibling of .is-inline-flex inside .tasktext. */
    body .task .project-task-icon {
        display: none !important;
    }
    /* The icon-wrapper span has empty class (no class names), so we
       hide it via :has() — any direct-child span of .tasktext that
       contains a .project-task-icon. */
    body .task .tasktext > span:has(.project-task-icon) {
        display: none !important;
    }

    /* Force the inner .is-inline-flex span (which wraps title +
       priority + project chip) to behave as a single-line block with
       ellipsis. Without this, ellipsis on .tasktext doesn't fire
       because the child is a flex item, not flowing text. */
    body .task .tasktext > span.is-inline-flex,
    body .task .tasktext > span:first-child {
        display: block !important;
        overflow: hidden !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    /* The actual <a class="task-link"> carrying the title text —
       force ellipsis here too so it clips with … instead of mid-letter. */
    body .task .task-glance-trigger,
    body .task .task-link,
    body .task a.task-link {
        display: inline-block !important;
        max-width: 100% !important;
        overflow: hidden !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
        vertical-align: bottom !important;
    }

    /* Add a tiny right-side breathing margin on the row so the ellipsis
       glyph never sits flush against the row's clipped edge. */
    body .tasks .task,
    body .task {
        padding-inline-end: 0.75rem !important;
    }
}