/* public/css/components/detail-view.css */

/*
 * The detail views' report cards — Title detail today, and whatever else picks
 * up the same markup.
 *
 * Every class in this file was already being written by
 * public/js/components/titleDetailView.js and matched by NO rule anywhere in
 * the project. `.stats-grid` in particular: four stat cards went into a bare
 * <div>, fell back to block layout, and rendered one full-width card per row —
 * four screens of scrolling to read four numbers.
 *
 * The treatment deliberately copies `.figures` in layouts/sales.css: a 1px grid
 * gap over a rule-coloured background, so the hairlines between tiles are the
 * gaps themselves rather than borders that double up. Same visual language as
 * the hero figures on the list pages, so a detail view reads as the same app.
 */

/* ── Stat card grid ───────────────────────────────────────────────────────── */

.stats-grid {
    display: grid;
    /* auto-fit rather than a fixed count: these grids carry 3, 4 or 5 cards
     * depending on the card, and the explicit .cols-N modifiers below only
     * exist because titleDetailView already emits one. */
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 1px;
    background: var(--rule-2);
    border: 1px solid var(--rule-2);
    margin-bottom: var(--space-6);
}

.stats-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.stats-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.stats-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

/* ResponsiveStatUtils.createStatCard builds `.figure` / `.figure-label` /
 * `.figure-value` / `.figure-foot`, all styled in layouts/sales.css. Only the
 * value needs toning down here — .figure-value is sized for a page hero, which
 * is too loud inside a card that already has a heading above it. */
.stats-grid .figure {
    background: var(--white);
    padding: var(--space-5);
}

.stats-grid .figure-value {
    font-size: var(--text-lg);
}

/* createStatCard's `maxLength` fallback compacts long values, but a currency
 * total can still run past its column. Let it shrink rather than overflow. */
.stats-grid .figure-value[data-length="16"],
.stats-grid .figure-value[data-length="17"],
.stats-grid .figure-value[data-length="18"],
.stats-grid .figure-value[data-length="19"] {
    font-size: var(--text-md);
}

/* ── Sales by Channel ─────────────────────────────────────────────────────── */

/*
 * One row per channel: name on the left, the figures on the right. Previously
 * two unstyled divs, so each channel took three lines of loose prose.
 */
.channel-breakdown {
    margin-top: var(--space-6);
    max-width: 50%;
}

.channel-breakdown .card-subheading {
    margin-top: 0;
}

.channel-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--rule);
}

.channel-item:last-child {
    border-bottom: none;
}

.channel-name {
    font-family: var(--font-body);
    color: var(--ink);
}

.channel-stats {
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    color: var(--ink-dim);
    text-align: right;
    white-space: nowrap;
}

/* ── Recent Licences ──────────────────────────────────────────────────────── */

.licenses-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-3);
}

.license-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    align-items: flex-start;
    padding: var(--space-4);
    background: var(--paper);
    border: 1px solid var(--rule);
}

.license-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    width: 100%;
}

.license-value {
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    color: var(--ink-dim);
    white-space: nowrap;
}

.license-details {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--ink-dim);
    line-height: 1.5;
}

/* Sub-heading inside a report card, for the blocks that hang straight off the
 * card rather than off a wrapper of their own. A class rather than `.card > h4`
 * — plenty of other views put an <h4> inside a .card and mean something else
 * by it (licenseDetailView's Publisher/Agent blocks, the importers' previews). */
.card-subheading {
    font-family: var(--font-ui);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--ink-dim);
    margin: var(--space-6) 0 var(--space-3);
}

/* ── Narrow screens ───────────────────────────────────────────────────────── */

/* Matching the breakpoints .figures uses, so the two grids step down together
 * on a page that shows both. */
@media (max-width: 900px) {
    .stats-grid,
    .stats-grid.cols-3,
    .stats-grid.cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .stats-grid,
    .stats-grid.cols-2,
    .stats-grid.cols-3,
    .stats-grid.cols-4 {
        grid-template-columns: 1fr;
    }

    .channel-item {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-1);
    }

    .channel-stats {
        text-align: left;
        white-space: normal;
    }
}