/* home - responsive fixes for this module only. Loaded after css/shared/responsive.css
   on every page in the area. See DOCS/Showcase-Mobile.md. */

@media (max-width: 1023.98px) {

    /* ---- My Week ----
       The header actions hold two flex rows (week navigation, status filters).
       The shared two-up grid put them side by side and both overflowed the
       phone; stack them and let each row wrap. */
    .page-header-actions:has(.week-navigation) {
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .week-navigation {
        flex-wrap: wrap;
    }

    .week-display {
        min-width: 0;
        flex: 1 1 100%;
        order: -1;
        padding: 4px 0;
    }

    .week-navigation .btn {
        flex: 1 1 auto;
        justify-content: center;
        margin-left: 0 !important;
    }

    /* The seven-day grid does not collapse; it scrolls sideways inside its
       card and grows to its natural height so the page, not the grid, scrolls. */
    .weekly-calendar-container {
        overflow-x: auto;
    }

    .weekly-grid {
        min-width: 720px;
        height: auto;
        min-height: 0;
    }

    /* ---- Home dashboard ----
       Overlapping Today items are positioned by script in pixels; the slots
       column already scrolls, so only the forced height needs relaxing. */
    .today-view {
        min-height: 0;
    }
}

@media (max-width: 767.98px) {

    /* ---- Today timeline / weekly grid (QA items 2, 4) ----
       Items are positioned by script in pixels and the all-day row lays its
       cards side by side, so a 300px day column squeezes them into slivers.
       Give the timeline a floor and let it scroll sideways inside its card
       instead of overlapping. */
    .today-view {
        overflow-x: auto;
    }

    .today-view .schedule-slots {
        min-width: 520px;
    }

    .weekly-grid {
        min-width: 980px;
    }

    /* ---- Concierge request attachments (QA item 5) ----
       Name + size + Remove on one line ran the button into the size text. */
    .file-item {
        flex-wrap: wrap;
        gap: 8px 12px;
    }

    .file-item .file-info {
        flex: 1 1 180px;
        min-width: 0;
        gap: 8px;
    }

    .file-item .file-name {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .file-item .file-size {
        white-space: nowrap;
        flex-shrink: 0;
    }

    .file-item .btn-delete {
        flex-shrink: 0;
    }

    /* ---- Concierge request cards (QA item 6) ----
       The card layout right-aligns every value under its label, which reads
       wrong for a paragraph. A description drops under its label, full width,
       left-aligned. */
    .data-table td:has(> .concierge-desc) {
        flex-direction: column;
        align-items: stretch;
        text-align: left !important;
    }

    .data-table td:has(> .concierge-desc)::before {
        margin-right: 0;
    }

    .concierge-desc {
        max-width: none;
        text-align: left;
    }
}