/* dashboard.css — EW2027 member Dashboard page shell.
   Two-column layout (watch-list cards left, calendar + chart right), mirroring
   the EW2023 col-xl-4 / col-xl-8 split but with CSS grid and EW2027 tokens. */

.dash-page {
    max-width: 1400px;
    margin: 0 auto;
    padding: 8px 16px 60px;
}

.dash-head h1 {
    margin: 0 0 4px;
}

.dash-titlerow {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.dash-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    color: var(--ew-gold, #DDB785); /* matches the lightning & bear title icons */
}

/* account-settings + download buttons, pushed to the right of the title */
.dash-actions {
    margin-left: auto;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.dash-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    border: 1px solid var(--border, #d6dce6);
    border-radius: 8px;
    background: var(--surface, #fff);
    color: var(--text, #323232);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

    .dash-btn svg {
        flex: 0 0 auto;
        color: var(--text-muted, #5b6472);
        transition: color 0.15s ease;
    }

    .dash-btn:hover {
        border-color: var(--ew-gold, #ddb785);
        color: var(--ew-gold, #ddb785);
    }

        .dash-btn:hover svg {
            color: var(--ew-gold, #ddb785);
        }

/* on narrow screens, let the buttons wrap under the title full-width */
@media (max-width: 560px) {
    .dash-actions {
        margin-left: 0;
        width: 100%;
    }

    .dash-btn {
        flex: 1 1 auto;
        justify-content: center;
    }
}

.dash-sub {
    color: var(--text-muted, #5b6472);
    margin: 0 0 20px;
    font-size: 0.92rem;
}

.dash-loading {
    padding: 40px 0;
    text-align: center;
    color: var(--text-muted, #5b6472);
}

/* stacked full-width sections: calendar on top, then chart, then cards */
.dash-cal {
    width: 100%;
}

.dash-chart {
    width: 100%;
    margin-top: 24px;
}

/* cards container is a plain full-width block — the inner .wlc-grid (from
   wl-cards.css) lays out the columns. */
.dash-cards {
    width: 100%;
    margin-top: 28px;
}

    .dash-cards .dash-loading {
        text-align: center;
    }

/* previews section sits between the chart and the cards */
.dash-previews {
    width: 100%;
    margin-top: 28px;
}

/* ---- Dialogs (download chooser, remove confirmation) ----
   Native <dialog>, so Esc, focus trapping and the backdrop come for free. */
.dash-dialog {
    width: min(440px, calc(100vw - 32px));
    padding: 22px 24px 18px;
    border: 1px solid var(--border, #d6dce6);
    border-radius: 14px;
    background: var(--surface, #fff);
    color: var(--text, #323232);
    box-shadow: 0 18px 50px -18px rgba(0, 0, 0, 0.55);
}

    .dash-dialog::backdrop {
        background: rgba(0, 0, 0, 0.45);
    }

.dash-dialog-title {
    margin: 0 0 6px;
    font-size: 1.1rem;
    font-weight: 800;
}

.dash-dialog-body {
    margin: 0 0 16px;
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--text-muted, #5b6472);
}

/* Standard / Expanded selector */
.dash-detail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 14px;
}

    .dash-detail button {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        padding: 9px 11px;
        border: 1px solid var(--border, #d6dce6);
        border-radius: 9px;
        background: transparent;
        color: inherit;
        font: inherit;
        text-align: left;
        cursor: pointer;
    }

        .dash-detail button[aria-checked="true"] {
            border-color: var(--ew-gold, #ddb785);
            background: color-mix(in srgb, var(--ew-gold, #ddb785) 14%, transparent);
        }

        /* locked, not hidden: a member should be able to see what a subscription adds */
        .dash-detail button.is-locked {
            opacity: .55;
            cursor: not-allowed;
        }

.dash-detail-name {
    font-size: .88rem;
    font-weight: 800;
}

.dash-detail-note {
    font-size: .72rem;
    color: var(--text-muted, #5b6472);
}

.dash-dialog-choices {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.dash-choice {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 12px 14px;
    border: 1px solid var(--border, #d6dce6);
    border-radius: 10px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

    .dash-choice:hover:not(:disabled) {
        border-color: var(--ew-gold, #ddb785);
        background: color-mix(in srgb, var(--ew-gold, #ddb785) 10%, transparent);
    }

    .dash-choice:disabled {
        opacity: 0.6;
        cursor: progress;
    }

.dash-choice-name {
    font-size: 0.95rem;
    font-weight: 800;
}

.dash-choice-note {
    font-size: 0.74rem;
    color: var(--text-muted, #5b6472);
}

.dash-dialog-foot {
    margin: 14px 0 0;
    font-size: 0.78rem;
    color: var(--text-muted, #5b6472);
}

    .dash-dialog-foot a {
        color: var(--ew-gold, #ddb785);
        font-weight: 700;
    }

.dash-dialog-status {
    margin: 14px 0 0;
    font-size: 0.82rem;
    color: var(--text-muted, #5b6472);
}

    .dash-dialog-status.is-error {
        color: var(--ew-red, #e13232);
        font-weight: 600;
    }

.dash-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
}

/* destructive confirm, used on the edit page */
.dash-btn-danger {
    border-color: var(--ew-red, #e13232);
    color: var(--ew-red, #e13232);
}

    .dash-btn-danger:hover {
        background: color-mix(in srgb, var(--ew-red, #e13232) 12%, transparent);
        border-color: var(--ew-red, #e13232);
        color: var(--ew-red, #e13232);
    }

@media (max-width: 420px) {
    .dash-dialog-choices {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   Mobile overflow containment
   ------------------------------------------------------------
   The dashboard is not inside .stock-page, so the global containment rule in
   ew-stock.css never reaches it. .dash-page is its own top-level wrapper and
   needs the same treatment.

   The cause is the default min-width on grid and flex items. An item is
   "auto", which means it refuses to shrink below its content's intrinsic
   width. The watch-list cards each hold a Lightweight Charts instance and
   several gauge SVGs, all of which are given explicit pixel widths in script.
   Once one of those measures wider than its track, the track grows, the grid
   grows, and the page gains a horizontal scrollbar -- which is why the bar
   only appears after the charts finish loading, not on first paint.

   This sheet is the last one the Dashboard view links, so these rules win the
   specificity ties against wl-cards.css, wl-reported.css and wl-previews.css.
   ============================================================ */

.dash-page {
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
    /* clip, not hidden: clip contains the x axis without turning the element
       into a scroll container, so the type-ahead dropdown on the edit page and
       any absolutely positioned tooltip still overflow vertically. */
    overflow-x: clip;
}

    .dash-page > * {
        width: 100%;
        box-sizing: border-box;
        min-width: 0;
    }

/* Grid tracks may shrink below their content. Without this every card is a
   floor on the track width. */
.wlc-grid > *,
.wlr-grid > *,
.wlp-grid > * {
    min-width: 0;
    max-width: 100%;
}

/* Inner rows are grids too, and their cells hold fixed-size SVG gauges. */
.wlc-mid > *,
.wlr-statrow > *,
.cca-statrow > *,
.cca-trendrow > * {
    min-width: 0;
}

/* Card children: the header is a flex row with a logo pinned at 40px and a
   names column that must be allowed to collapse. */
.wlc-card > *,
.wlr-card > *,
.wlp-card > * {
    min-width: 0;
    max-width: 100%;
}

/* Long direction labels ("Strongly Improving") and confidence values would
   otherwise set a min-content floor on a 1/3-width cell. */
.cca-dirtext,
.cca-val,
.wlr-val {
    overflow-wrap: break-word;
}

/* ---- charts ----
   The mini chart's canvas is sized in pixels from the host's measured width.
   Capping the host and clipping it means a stale or rounded-up measurement
   can no longer widen the card. */
.wlc-chart {
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

    .wlc-chart canvas,
    .wlc-chart table,
    .wlc-chart .tv-lightweight-charts {
        max-width: 100%;
    }

/* The aggregate chart and the bubble calendar get the x axis only. Both carry
   absolutely positioned overlays -- the chart's two legends, the calendar's
   hover tooltip -- that are meant to sit outside the box vertically, and a
   plain "hidden" would cut them off. */
#wlchart,
#wlcal {
    max-width: 100%;
    min-width: 0;
    overflow-x: clip;
}

    #wlchart canvas,
    #wlchart table,
    #wlchart .tv-lightweight-charts,
    #wlcal svg {
        max-width: 100%;
    }