/*
    Admin analytics — /1337/analytic/cloudflare

    The week table draws a bar behind each figure as inline SVG: no charting library, and no `style`
    attribute. The bar width travels as an SVG geometry attribute, the accent colour as a class.

    👉 doc/infrastructure/analytics/cloudflare-zone.md
*/

/*
    `root.css` justifies body text, which stretches the thin spaces inside a French-formatted number
    ("2 643" becomes "2  6  43"). Every surface of the page opts back out of it.
*/
.cf-nav,
.cf-table,
.cf-note,
.cf-warning {
    text-align: left;
}

/* One accent per column, inherited by the bar drawn inside its cells. */
.cf-requests {
    --cf-color: var(--blue);
}

.cf-page-views {
    --cf-color: var(--green-dark);
}

.cf-uniques {
    --cf-color: var(--orange-dark);
}

.cf-bytes {
    --cf-color: var(--green-teal);
}

.cf-threats {
    --cf-color: var(--red);
}

/* Week navigation */

.cf-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.5rem;
    font-size: 1.5rem;
}

.cf-nav-week {
    text-align: center;
    font-family: var(--font-title);
    font-weight: 700;
    color: var(--black-blue);
    line-height: 1.2;
}

.cf-nav-week span {
    display: block;
    font-family: var(--font-main);
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--grey-blue);
}

/* Balances the missing next-week link, so the week title stays centred. */
.cf-nav-void {
    width: 8rem;
}

/* The week table */

.cf-table {
    width: 100%;
    margin-top: 1.5rem;
    background-color: #fff;
    border-collapse: collapse;
    border-radius: 0.6rem;
    overflow: hidden;
    box-shadow: var(--shadow-card);
    font-size: 1.3rem;
    font-variant-numeric: tabular-nums;
}

.cf-table th {
    padding: 0.7rem 0.6rem;
    background-color: var(--blue-grey);
    color: var(--grey-blue-dark);
    font-size: 1.1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03rem;
}

.cf-table thead th:first-child,
.cf-table tbody th {
    text-align: left;
}

.cf-table td {
    position: relative;
    padding: 0.6rem;
    text-align: right;
    border-top: 1px solid var(--grey-lavender);
}

.cf-table tbody th {
    padding: 0.6rem;
    font-weight: 600;
    color: var(--black-blue);
    white-space: nowrap;
    border-top: 1px solid var(--grey-lavender);
}

.cf-table tbody tr:hover td,
.cf-table tbody tr:hover th {
    background-color: var(--yellow-light);
}

.cf-table tfoot th,
.cf-table tfoot td {
    padding: 0.8rem 0.6rem;
    background-color: var(--blue-grey);
    font-weight: 700;
    color: var(--black-blue);
    border-top: 2px solid var(--grey-blue-light);
}

.cf-table-void {
    color: var(--grey-light);
}

/* The bar behind a figure: absolutely positioned, so the number keeps the cell's own layout. */
.cf-cell-bar {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.16;
}

.cf-bar {
    fill: var(--cf-color, var(--grey-lavender));
}

.cf-cell-value {
    position: relative;
}

/* Week-over-week change chip */

.cf-delta {
    display: inline-block;
    padding: 0.1rem 0.6rem;
    font-size: 1.2rem;
    font-weight: 600;
    border-radius: 50px;
}

.cf-delta-up {
    background-color: var(--green-pastel);
    color: var(--green-emerald);
}

.cf-delta-down {
    background-color: var(--red-pastel);
    color: var(--red-darker);
}

.cf-delta-flat {
    background-color: var(--grey-lavender);
    color: var(--grey-blue-dark);
}

/* Footnotes */

.cf-note {
    margin-top: 1.5rem;
    font-size: 1.2rem;
    line-height: 1.6;
    color: var(--grey-blue);
}

.cf-warning {
    margin-top: 1.5rem;
    padding: 0.8rem 1.2rem;
    background-color: var(--orange-pastel);
    color: var(--yellow-dark);
    font-size: 1.3rem;
    border-radius: 0.4rem;
}