/* ============================================================
   calendar-mobile.css
   Two-line row reflow for the earnings calendar list table.
   Load AFTER calendar.css.

   Pairs with the ew-earnings-calendar.js patch, which wraps all
   line-2 data cells in  <td class="cal-dataline">  and tags each with
   data-label + .cal-data (composite cells get .cal-data-full).

   Desktop (>=760px): the wrapper is display:contents, so its inner
   <td>s act as direct row children and the original 12-column table
   layout is unchanged.

   Mobile (<760px): each <tr> becomes a two-line block —
     line 1: logo · ticker(+confirm) · company .......... time
     line 2: labeled data grid that scrolls sideways if it overflows.
   ============================================================ */

/* ---- DESKTOP: make the wrapper transparent to table layout ---- */
@media (min-width: 760px) {
    .cal-table .cal-dataline {
        display: contents;
    }
    /* the extra confirm icon we add to the time cell is mobile-only */
    .cal-table .cal-td-time .cal-confirm-mobile {
        display: none;
    }
}

/* ---- MOBILE ---- */
@media (max-width: 759px) {

    .cal-table thead {
        display: none;
    }

    .cal-table,
    .cal-table tbody {
        display: block;
        width: 100%;
    }

        .cal-table tbody .cal-row {
            display: grid;
            grid-template-columns: auto 1fr auto;
            grid-template-areas:
                "logo ticker  time"
                "logo company company"
                "data data    data";
            align-items: center;
            column-gap: 10px;
            row-gap: 2px;
            padding: 10px 12px;
            margin-bottom: 10px;
            border: 1px solid var(--border, #d6dce6);
            border-radius: 12px;
            background: var(--surface, #fff);
            cursor: pointer;
        }

            .cal-table tbody .cal-row.cal-stripe {
                background: var(--surface-alt, #f7f8fb);
            }

    /* ----- line 1: logo | ticker/company | time + check ----- */
    /* logo spans the ticker + company rows so it sits centered beside them */
    .cal-row > .cal-td-logo {
        grid-area: logo;
        align-self: center;
        justify-self: start;
        width: auto;
        padding: 0;
    }

        .cal-row > .cal-td-logo .cal-logo {
            width: 38px;
            height: 38px;
        }

    .cal-row > .cal-td-ticker {
        grid-area: ticker;
        align-self: end;
        display: flex;
        align-items: center;
        gap: 5px;
        padding: 0;
        font-size: 1rem;
        font-weight: 700;
    }

    .cal-row > .cal-td-company {
        grid-area: company;
        align-self: start;
        padding: 0;
        max-width: none;
        font-size: 0.76rem;
        color: var(--text-muted, #5b6472);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* time on line 1, right side, across from the ticker; check sits to its right */
    .cal-row > .cal-td-time {
        grid-area: time;
        align-self: center;
        justify-self: end;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 0;
        font-size: 0.85rem;
        font-weight: 700;
        color: var(--text-muted, #5b6472);
        text-align: right;
        white-space: nowrap;
    }

    /* move the confirm/warning icon out of the ticker cell and place it to the
       RIGHT of the time on mobile. It's rendered inside .cal-td-ticker, so we
       pull it visually into the time area with order + absolute-free grid trick:
       we re-home it by making the ticker cell's icon a grid item on the time row. */
    .cal-row > .cal-td-ticker .cal-confirm {
        display: none; /* hide the in-ticker copy on mobile */
    }

    /* a mobile-only check placed after the time (JS adds .cal-confirm-mobile) */
    .cal-row > .cal-td-time .cal-confirm-mobile {
        width: 14px;
        height: 14px;
        flex: 0 0 auto;
    }

        .cal-row > .cal-td-time .cal-confirm-mobile.is-confirmed {
            color: var(--positive, #0f8a3b);
        }

        .cal-row > .cal-td-time .cal-confirm-mobile.is-unconfirmed {
            color: var(--ew-gold, #ddb785);
        }

    /* ----- line 2: multi-column labeled grid (matches the approved mock) ----- */
    /* ~4 columns across, wrapping downward to a second row — wide and short,
       not tall and narrow. auto-fit keeps it 4-up on typical phones and drops
       to 3 on very narrow screens. Every stat visible, no horizontal scroll. */
    .cal-row > .cal-dataline {
        grid-area: data;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        column-gap: 12px;
        row-gap: 10px;
        margin-top: 6px;
        padding: 8px 0 2px;
        border-top: 1px solid var(--border, #eef1f6);
    }

    /* NOTE: stat order (EPS · Earnings Whisper · Revenue · Rev Growth · …) now comes
       from the LIST_COLS array itself, so desktop and mobile match natively and no
       CSS `order` override is needed here. The data-key attributes remain on cells
       as harmless hooks in case the today/reported view ever needs mobile-only
       reordering without touching TODAY_COLS. */

    .cal-dataline .cal-data,
    .cal-dataline .cal-data-full {
        display: flex;
        flex-direction: column;
        gap: 1px;
        min-width: 0;
        padding: 0;
        text-align: left;
        font-size: 0.82rem;
        font-weight: 700;
    }

    /* value line: don't wrap, but allow ellipsis if a value is unusually long */
    .cal-dataline .cal-data {
        overflow: hidden;
    }

        .cal-dataline .cal-data::before {
            content: attr(data-label);
            display: block;
            font-size: 0.55rem;
            font-weight: 700;
            line-height: 1.15;
            text-transform: uppercase;
            letter-spacing: 0.02em;
            color: var(--text-muted, #5b6472);
            /* labels may be two words (e.g. "Earnings Whisper", "Rev Growth") —
               let them wrap to a second line rather than overflow the column */
            white-space: normal;
            overflow-wrap: anywhere;
        }

    /* Composite cells (locked group / expectations) span as many grid columns as
       their colspan says — NOT full width — so the free-user grid keeps the same
       4-up shape as the subscriber grid:
         Row 1: EPS · [Whisper lock ×1] · Revenue · Rev Growth
         Row 2: [Sentiment/Score lock ×2] · [Expectations ×2]
       The JS sets colspan on these cells (lockedGroupCell(1)/(2), expectationsCell(2)). */
    .cal-dataline .cal-data-full {
        grid-column: span 1; /* default: 1-wide (e.g. the Whisper lock) */
        min-width: 0;
    }

        .cal-dataline .cal-data-full[colspan="2"] {
            grid-column: span 2;
        }

        .cal-dataline .cal-data-full[colspan="3"] {
            grid-column: span 3;
        }

        /* keep the lock/expectations UI centered within its span */
        .cal-dataline .cal-data-full .cal-lockwrap,
        .cal-dataline .cal-data-full.cal-expcell {
            justify-content: center;
        }

    .cal-dataline .cal-data .cal-minigauge svg {
        max-height: 32px;
        width: auto;
    }
}

/* very narrow: drop to 3 columns so values don't crush */
@media (max-width: 420px) {
    .cal-row > .cal-dataline {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: 10px;
        row-gap: 8px;
    }
}