/* Scoped to the dashboard child: `.data` is also the class on every bar-chart
   label span, which must not become a grid.
   `grid-template-rows: 2` was invalid CSS, so the column fell back to
   min-content and the chart column could not shrink below its content on a
   phone. minmax(0, 1fr) is the fix. */
.dashboard > .data {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.data-container-1,
.chart-wrapper,
.data-container-2 > * {
    min-width: 0;
}

/* Chart.js sizes the canvas from this box (maintainAspectRatio is off), so a
   phone gets a short wide chart instead of a 445px square. */
.chart-wrapper {
    position: relative;
    height: clamp(180px, 45vw, 320px);
}

.data-container-1 p {
    margin-top: 0px;
    margin-bottom: 10px;
    color: var(--color-text-secondary);
}

.data-container-2 {
    margin-top: 30px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 30px;
    grid-row-gap: 10px;
}

/* Labels may extend beyond a short bar, but must stay inside their card.
   Container units keep long paths bounded at desktop widths as well. */
.data-container-2 > * {
    container-type: inline-size;
}
.data-container-2 .charts-css.bar td .data {
    display: block;
    flex: 0 0 auto;
    width: max-content;
    max-width: calc(100cqw - 50px);
    overflow: hidden !important;
    text-overflow: ellipsis;
}

.bar-titles {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin-bottom: 5px;
}

/* The card's heading already names the column ("Top Pages" over "Page"), so
   the first title is for screen readers only. The metric name stays: it says
   which number the column is. */
.bar-titles span:first-child {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* One brand color for every bar section — without this, charts.min.css falls
   back to its multicolor default palette for any section not listed here. */
.charts-css.bar td {
    --color: #cedfeb;
    border-radius: 5px;
}

/* Hovered rows step the bar one shade darker (same hue). */
.charts-css.bar tbody tr:hover td {
    --color: #b9d2e4;
}

.info {
    margin-top: 60px;
    color: var(--color-text-tertiary);
}

.info .link {
    font-size: inherit;
}

/* A card's title and its ›. The › sits beside the heading, not in it, so a
   screen reader reads the heading as just "Countries" (review of #307).
   The heading's margins move to the wrapper (an h3's 1em is 17.55px here),
   so they still collapse with the card's next block as an unwrapped h3's do;
   inside a flex row they would not, and added 15px under each title. */
.card-title {
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 17.55px 0;
}


/* A card heading's ›: the whole list, in a dialog (owner, 2026-10-31). */
.see-all {
    border: 0;
    background: none;
    padding: 0 6px;
    margin-left: 2px;
    min-height: 24px;
    font: inherit;
    font-size: 22px;
    line-height: 1;
    color: var(--color-primary);
    cursor: pointer;
}

.see-all:hover {
    color: var(--color-primary-hover);
}

.see-all:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

.see-all[hidden] {
    display: none;
}

/* The "See all" lists are real <dialog>s: Escape closes them, focus is
   trapped by the browser, and they are announced as modal dialogs. */
.popup {
    padding: 0;
    border: none;
    background: transparent;
    width: min(600px, calc(100vw - 24px));
    max-width: none;
    max-height: 85vh;
    overflow: visible;
}

.popup::backdrop {
    background-color: rgba(0, 0, 0, 0.5);
}

.popup-content {
    container-type: inline-size;
    position: relative;
    padding: 20px;
    padding-right: 52px;
    max-height: 85vh;
    background-color: white;
    border-radius: 10px;
    overflow-y: auto; /* Enable vertical scrolling */
    overflow-x: hidden;
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

.popup-content::-webkit-scrollbar {
    width: 0px;
    background: transparent; /* Optional: just to ensure the scrollbar is invisible */
}

/* 40x40 minimum: the old 17x36 <span> was neither tappable nor focusable. */
.close-button {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: none;
    color: var(--color-text-secondary);
    font-family: inherit;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

.close-button:hover,
.close-button:focus-visible {
    background: var(--color-white-hover);
}

/* Long paths/domains ellipsis instead of scrolling the dialog sideways. The
   label spans carry inline `white-space:nowrap; overflow:visible`, so the
   override has to win over an inline style. */
.popup .charts-css.bar td .data {
    display: block;
    flex: 0 0 auto;
    width: max-content;
    max-width: calc(100cqw - 50px);
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis;
}

.hidden {
    display: none;
}

.start-subscription-again {
    text-decoration: underline; /* Add underline to the text */
    color: rgb(80, 80, 80);
}

.link-title {
    text-decoration: underline;
}

/* Hover ↗ opener */
.charts-css.bar td {
    position: relative;
}

.row-open {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    line-height: 1;
    padding: 2px 4px;
    border-radius: 4px;
    color: var(--color-primary);
    background: var(--color-white);
    text-decoration: none;
    opacity: 0;
    transition: opacity 0.15s ease;
}

/* F-10: keyboard focus must reveal the opener, not only the mouse. 19 of the
   dashboard's ~40 Tab stops land on these links, so with `tr:hover` alone the
   focus ring vanished for 15 consecutive presses — the caret was somewhere,
   and the page gave no way to know where. `tr:focus-within` covers the row a
   browser scrolls to; `:focus-visible` covers the link itself. */
tr:hover .row-open,
tr:focus-within .row-open,
.row-open:focus-visible {
    opacity: 1;
}

.row-open:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
}

.row-open:hover {
    background: rgba(50, 141, 204, 0.12);
}

/* Density: dimension cards flow 3-up on wide screens, slightly tighter rows.
   Pages/Sources keep their prominent 2-up layout. */
@media (min-width: 1100px) {
    .data-container-2.dense {
        grid-template-columns: repeat(3, 1fr);
        grid-column-gap: 24px;
    }
}

.data-container-2.dense .data {
    font-size: 14px;
}

.data-container-2.dense td {
    min-height: 22px !important;
}

.data-container-2.dense h3 {
    margin-bottom: 8px;
}

/* After the rule above, so it wins at equal specificity: a titled card's
   margins live on .card-title (see .card-title). */
.data-container-2 .card-title > h3 {
    margin: 0;
}

.data-container-2.dense .card-title {
    margin-bottom: 8px;
}

/* Events card */
.events-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14.5px;
}

.events-table th {
    text-align: left;
    font-weight: 500;
    color: var(--color-text-secondary);
    padding: 4px 8px 6px 5px;
    border-bottom: 1px solid var(--color-border, #e5e7eb);
}

.events-table td {
    padding: 6px 8px 6px 5px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.events-table th:not(:first-child),
.events-table td:not(:first-child) {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.events-table .event-name {
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
    white-space: nowrap;
}

/* Clicks card: Outbound | Downloads tabs */
.clicks-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.clicks-tabs {
    display: inline-flex;
    gap: 4px;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 8px;
    padding: 3px;
}

.clicks-tab {
    border: none;
    background: none;
    font: inherit;
    font-size: 13px;
    color: var(--color-text-secondary);
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
}

.clicks-tab.active {
    background: var(--color-white);
    color: var(--color-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Delete-website modal extras */
.delete-summary {
    font-size: 14px;
    color: var(--color-text-secondary);
    min-height: 18px;
    margin: 4px 0;
}

.delete-export-tip {
    font-size: 14px;
    margin: 4px 0 10px;
}

@media screen and (max-width: 900px) {
    .dashboard, .title {
        padding-left: 0px;
        padding-right: 0px;
    }

    .website-dropdown::after {
        transform: translateY(-35%);
    }

    /* One column, every row as tall as its own card. This said
       grid-template-rows: 1fr auto 1fr auto, and with no fixed height every
       1fr row is as tall as the tallest one: in the Events / Clicks row, with
       Events hidden, the EMPTY third row took the Clicks card's whole height
       and left a screen of blank space above the heatmap (bestmacapps.com,
       2026-11-02). tests/analytics-extras-caps.test.ts holds this rule. */
    .data-container-2 {
        margin-top: 30px;
        display: grid;
        grid-template-columns: 1fr;
        grid-column-gap: 30px;
        grid-row-gap: 10px;
    }

    .data-container-1, .data-container-2 {
        width: 100%; /* Set width to 100% minus 18px */
    }

    /* Grid items default to min-content; without this the widest page path in
       a card widened the whole dashboard. */
    .data-container-2 > * {
        min-width: 0;
    }

    /* The label lives inside the bar, and the bar's width is the row's share
       of the maximum — so `max-width: 100%` meant a small count got a ~50 px
       label and Spain rendered as "Sp…", Firefox as ".". Clamp against the
       viewport instead, which is what the card is roughly as wide as: short
       labels are now readable whatever their value, long page paths still
       ellipsise before they can widen anything. Desktop already lets the
       label spill past its bar for exactly this reason. */
    .charts-css.bar td .data {
        display: block;
        /* charts.css makes the bar cell a flex container, so the label is a
           flex item and shrinks to the bar however wide `max-content` says it
           wants to be — which is why clamping the width alone changed nothing
           and 21 of 47 labels on the live demo were still cut to "Sp…" after
           the first attempt. `flex: 0 0 auto` is the part that stops it. */
        flex: 0 0 auto;
        width: max-content;
        max-width: calc(100vw - 100px);
        overflow: hidden !important;
        text-overflow: ellipsis;
    }
}
/* Countries card: List | Map view toggle and the choropleth world map.
   Darker blue = more visitors; countries without data stay light gray. */
.card-head-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.view-toggle {
    display: inline-flex;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    overflow: hidden;
}

.view-toggle-btn {
    border: none;
    background: var(--color-white);
    font-family: inherit;
    font-size: 12px;
    padding: 4px 10px;
    cursor: pointer;
    color: var(--color-text-secondary);
}

.view-toggle-btn.active {
    background: rgba(50, 141, 204, 0.12);
    color: #1d5f91;
}

.country-map {
    width: 100%;
    margin-top: 8px;
}

.country-map svg {
    width: 100%;
    height: auto;
    display: block;
}

.country-map path {
    fill: #e9edf1;
    stroke: #ffffff;
    stroke-width: 0.5;
}
.collection-periods {
    margin: 0 0 24px;
    padding: 16px 18px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-background);
}
.collection-periods h2 { margin: 0 0 12px; font-size: 16px; }
.collection-period-totals { max-width: 320px; margin-bottom: 14px; }
.collection-period-totals div { padding: 12px; border-radius: 6px; background: var(--color-background-secondary, #f5f8fa); }
.collection-period-totals span { display: block; color: var(--color-text-secondary); font-size: 12px; }
.collection-period-totals strong { display: block; margin-top: 4px; font-size: 22px; }
.collection-periods nav { display: flex; flex-wrap: wrap; gap: 8px; }
.collection-periods nav a, .collection-period-current {
    display: inline-block;
    padding: 8px 11px;
    border: 1px solid var(--color-border);
    border-radius: 5px;
    color: var(--color-text);
    font-size: 13px;
    line-height: 1.4;
    text-decoration: none;
}
.collection-periods nav a:hover, .collection-periods nav a:focus-visible { border-color: var(--color-primary); color: var(--color-primary); }
.collection-period-current { border-color: var(--color-primary); color: var(--color-primary); font-weight: 600; }
.collection-period-rows { margin-top: 14px; font-size: 13px; }
.collection-period-rows div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--color-border); }
.collection-period-rows div span:first-child { overflow-wrap: anywhere; }
.collection-period-rows div span:last-child { flex-shrink: 0; text-align: right; font-variant-numeric: tabular-nums; }
.collection-periods p { margin: 12px 0 0; color: var(--color-text-secondary); font-size: 13px; line-height: 1.5; }
@media (max-width: 600px) { .collection-period-rows div { flex-direction: column; gap: 2px; } }


.breakdown-search {
    margin-bottom: 16px;
    text-align: left;
}

.breakdown-search label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    color: var(--color-text);
}

.breakdown-search-controls {
    display: flex;
    gap: 8px;
}

.breakdown-search-input,
.breakdown-search-clear {
    min-height: 40px;
    font: inherit;
    font-size: 16px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    color: var(--color-text);
    background: var(--color-white);
}

.breakdown-search-input {
    flex: 1;
    min-width: 0;
    width: 100%;
    padding: 8px;
}

.breakdown-search-clear {
    padding: 8px;
    white-space: nowrap;
    cursor: pointer;
}

.breakdown-search-clear:disabled {
    color: var(--color-text-secondary);
    cursor: default;
}

.breakdown-search-input:focus-visible,
.breakdown-search-clear:focus-visible {
    outline: 2px solid var(--color-secondary);
    outline-offset: 2px;
}

.breakdown-search-count,
.breakdown-search-empty {
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--color-text-secondary);
}

.popup [hidden] {
    display: none !important;
}

/* Empty breakdowns expose a status instead of orphan table headers. */
.data-container-2 [hidden] { display: none !important; }

/* charts.css defaults to100% of the full card, including its heading.
   Natural height keeps transparent table boxes out of the next grid row. */
.data-container-2 .charts-css.bar { height: auto; }