/* Reports is a reading page, not a working one: nobody edits anything here.
   So it is laid out as a document — a filter row, a row of figures, one
   chart, then the tables that back them — rather than as a workspace. */
.reports-page {
    min-width: 0;
}

/* ── Filter row ─────────────────────────────────────────────────────
   One row above everything it scopes. Changing granularity re-renders the
   tiles, the chart and the period table together, so the control belongs
   to the page rather than to any one card. */
.reports-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.reports-context {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

/* ── States ─────────────────────────────────────────────────────────
   A refetch dims what is already on screen instead of swapping it for a
   spinner: the figures stay readable and nothing below them moves. */
.reports-body-stale {
    opacity: 0.55;
    transition: opacity 0.14s ease;
}

/* The skeleton reuses the page's own layout classes, so it reserves the
   real geometry; only the pieces that have no live counterpart are defined
   here. */
.reports-skeleton {
    display: grid;
    gap: 0;
}

.reports-skeleton .reports-tile {
    gap: var(--space-2);
    justify-content: center;
}

/* The plot silhouette: bars on a baseline, at the height the real chart
   occupies, so nothing shifts when the data replaces it. */
.reports-chart-skeleton {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-2);
    height: 200px;
    padding: 0 var(--space-2) 24px;
}

/* One row per row the table will show, on the same pitch, so the card is
   the height it is about to become. */
.reports-table-skeleton {
    display: grid;
    gap: 23px;
    padding: var(--space-3) 0;
}

.reports-state {
    margin: 0;
    padding: var(--space-6) var(--space-4);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    font-size: var(--text-base);
    text-align: center;
}

.reports-error.p-message {
    margin: var(--space-3) 0 0;
}

/* Sits above the figures it is warning about, not below them. */
.reports-error-stale.p-message {
    margin: 0 0 var(--space-4);
}

/* ── Figures ────────────────────────────────────────────────────────
   Six tiles, because six numbers is the whole answer to "how is the club
   doing" — a grouped chart of them would be harder to read, not easier. */
/* Four occupancy shares, then the two hour averages. They are different
   measures — a percentage of capacity against a count of hours — so they get
   their own row rather than being mixed, and the pair widens to fill that row
   instead of leaving two empty cells beside them. */
.reports-tiles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.reports-tile-wide {
    grid-column: span 2;
}

@media (max-width: 900px) {
    .reports-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .reports-tiles {
        grid-template-columns: minmax(0, 1fr);
    }

    .reports-tile-wide {
        grid-column: span 1;
    }
}

.reports-tile {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-4);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.reports-tile-title {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    font-weight: 500;
}

/* Proportional figures, not tabular: equal-width digits make a large
   standalone number look loose. The table below is where they align. */
.reports-tile-value {
    margin: 0;
    color: var(--color-text);
    font-size: var(--text-2xl);
    font-weight: 600;
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
}

.reports-tile-meter.p-progressbar {
    height: 4px;
    margin: 2px 0;
    border-radius: var(--radius-full);
    background: var(--color-bg-hover);
}

.reports-tile-meter.p-progressbar .p-progressbar-value {
    background: var(--color-primary);
}

/* Under the meter: what the segment means, then the hours behind it. Tiles
   with no hours simply do not render that line — a reserved empty row read
   as a value that had failed to load. */
.reports-tile-sub {
    margin: 0;
    color: var(--color-text-tertiary);
    font-size: var(--text-sm);
    line-height: var(--leading-body);
}

.reports-tile-hours {
    margin: 0;
    color: var(--color-text-tertiary);
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
    line-height: var(--leading-body);
}

/* A methodology caveat sits next to the numbers it qualifies, not in the
   page description where it would be read once and forgotten. */
.reports-note {
    max-width: 74ch;
    margin: 0 0 var(--space-5);
    color: var(--color-text-tertiary);
    font-size: var(--text-sm);
    line-height: var(--leading-body);
}

.reports-note-block {
    margin: 0 0 var(--space-3);
}

/* ── Cards ──────────────────────────────────────────────────────────*/
.reports-card.p-card {
    margin-bottom: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: none;
}

.reports-card .p-card-body,
.reports-card .p-card-content {
    padding: 0;
}

.reports-card .p-card-body {
    padding: var(--space-5);
}

/* The heading takes whatever the controls leave and wraps inside its own
   column; the controls never get pushed onto a row of their own. Without
   this the block sized to its text, so a longer translation of the same
   title — "Media de horas reservadas por día" is 260px where "Occupancy" is
   81px — pushed the switcher down and dropped the chart 47px with it, every
   time you changed metric. */
.reports-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.reports-card-head > :first-child {
    flex: 1 1 200px;
    min-width: 0;
}

.reports-card-head > .p-selectbutton,
.reports-card-head > .p-select {
    flex: 0 0 auto;
}

.reports-card-title {
    margin: 0;
    color: var(--color-text);
    font-size: var(--text-lg);
    font-weight: 600;
}

.reports-card-sub {
    margin: 2px 0 0;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

/* ── Chart ──────────────────────────────────────────────────────────
   One series at a time, so the bars carry no hue of their own beyond the
   brand primary: a colour here would encode nothing. Twelve buckets at a
   fixed slot width scroll rather than squash. */
/* The chart is a fixed drawing box scaled to the card: it never scrolls, so
   the whole range is always in view and the card's width is the only thing
   that decides how big it is. */
.reports-chart {
    position: relative;
}

.reports-chart-svg {
    display: block;
    width: 100%;
}

/* Solid hairlines, one shade off the surface — never dashed, which reads
   as a threshold when it is only a grid. */
.reports-grid line {
    stroke: var(--color-border-subtle);
    stroke-width: 1;
}

/* The zero line is structural, not just a gridline: it is where the sign of
   the value changes, so it reads a shade stronger than the rest. */
.reports-grid line.reports-grid-zero {
    stroke: var(--color-border);
}

.reports-axis text,
.reports-bar-tick {
    fill: var(--color-text-tertiary);
    font-size: var(--text-xs);
}

.reports-bar {
    fill: var(--color-primary);
    transition: fill 0.12s ease;
}

.reports-bar-hover {
    fill: var(--color-primary-hover);
}

/* Values wear text ink, never the mark's colour. Every bar carries one, so
   they sit a step back from the figures in the tiles above — present to be
   read off, not competing with the bars for attention. */
.reports-bar-label {
    fill: var(--color-text-secondary);
    font-size: var(--text-xs);
    font-weight: 500;
}

.reports-bar-hit {
    fill: transparent;
    cursor: default;
}

.reports-tooltip {
    position: absolute;
    top: 0;
    z-index: 2;
    display: grid;
    gap: 2px;
    padding: 6px var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    box-shadow: var(--shadow-2);
    font-size: var(--text-sm);
    line-height: var(--leading-tight);
    pointer-events: none;
    white-space: nowrap;
    transform: translateX(-50%);
}

.reports-tooltip strong {
    color: var(--color-text);
    font-weight: 600;
}

.reports-tooltip span {
    color: var(--color-text-secondary);
}

/* ── Tables ─────────────────────────────────────────────────────────*/
.reports-table .p-datatable-tbody > tr > td {
    font-variant-numeric: tabular-nums;
}

/* Specific enough to beat PrimeVue's own cell rule (.p-datatable-tbody > tr
   > td), which would otherwise keep every column left-aligned. */
.reports-table .p-datatable-thead > tr > th.reports-num,
.reports-table .p-datatable-tbody > tr > td.reports-num {
    text-align: right;
}

.reports-table .p-datatable-tbody > tr > td.reports-nowrap {
    white-space: nowrap;
}

.reports-muted {
    color: var(--color-text-tertiary);
}

/* The by-design list is reachable but recessive: it is the list that is
   working as intended, kept out of the way of the one that is not. */
.reports-bydesign.p-accordion {
    margin-top: var(--space-4);
}

.reports-bydesign .p-accordionheader {
    padding: var(--space-2) 0;
    border: 0;
    background: transparent;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    font-weight: 500;
}

.reports-bydesign .p-accordionheader:hover {
    background: transparent;
    color: var(--color-text);
}

.reports-bydesign .p-accordioncontent-content {
    padding: 0;
    border: 0;
    background: transparent;
}

.reports-table-quiet .p-datatable-tbody > tr > td {
    color: var(--color-text-secondary);
}

@media (max-width: 640px) {
    .reports-card .p-card-body {
        padding: var(--space-4);
    }

    .reports-card-head {
        align-items: stretch;
        flex-direction: column;
    }

    /* Five metrics do not fit one phone-width row; they wrap into a block
       rather than being squeezed into unreadable slivers. */
    .reports-metric-switch.p-selectbutton {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
}