/*
 * The only custom stylesheet (spec 7.1 rule 5).
 * Tabler is used as published; this file holds what Tabler does not provide.
 */

.skip-link {
    position: absolute;
    top: .5rem;
    left: .5rem;
    z-index: 2000;
    padding: .5rem .75rem;
    background: var(--tblr-bg-surface);
    border-radius: var(--tblr-border-radius);
}

/* Rotated chevrons for pagination, so one sprite symbol serves both directions. */
.rotate-90  { transform: rotate(90deg); }
.rotate-270 { transform: rotate(270deg); }

/* htmx: dim a region only while its own request is in flight (spec 7.4). */
.htmx-request.region,
.region.htmx-request {
    opacity: .55;
    transition: opacity .15s ease-in;
}

/* Keep focus visible everywhere; never removed (spec 7.9). */
:focus-visible {
    outline: 2px solid var(--tblr-primary);
    outline-offset: 2px;
}

/* JSON preview panel (spec 7.12) - scrollable, monospaced, no highlighting library. */
.json-preview {
    max-height: 26rem;
    overflow: auto;
    font-size: .8125rem;
    line-height: 1.5;
    tab-size: 2;
}

/* mCaptcha frames its widget at 100% of this box (spec 2.12). */
.captcha-frame {
    height: 5.5rem;
}

/* Dashboard clicks (spec 7.10): figures line up, and the bar beside each is a plain <progress>, no chart library. */
.click-count {
    min-width: 4ch;
    text-align: end;
    font-variant-numeric: tabular-nums;
}

/* Dashboard (spec 7.10). No inline styles: the CSP forbids them (spec 9.4). */
.kpi-bar {
    height: 3px;
}

/* The clicks line spans its card; Tabler's sparkline reads its size from these. */
.sparkline-wide {
    --tblr-sparkline-width: 100%;
    --tblr-sparkline-height: 3rem;
    display: block;
}

/* A tracking strip's legend: one swatch per activity level, "none" as an empty square. */
.legend-swatch {
    display: inline-block;
    width: .75rem;
    height: .75rem;
    border-radius: 2px;
    vertical-align: -1px;
    background: var(--tblr-border-color);
}

/* The product mark beside the name in the sidebar (fragments/logo). */
.brand-mark {
    width: 1.75rem;
    height: 1.75rem;
    flex-shrink: 0;
}

/* Webserver configuration for a permalink (spec 7.23): sized by its rows, never wrapped. */
.webserver-snippet {
    font-size: .8125rem;
    resize: vertical;
    white-space: pre;
    overflow-x: auto;
}

/* Tabs as an enhancement (spec 7.1): without app.js every pane shows under its own
   heading; once it runs, Bootstrap's tabs show one pane and the bar replaces the headings. */
[data-tabs]:not(.tabs-enhanced) > .tab-pane {
    display: block;
}
.tabs-enhanced .tabs-fallback-heading {
    display: none;
}

/* A picture inside a Tabler avatar (spec 7.27): Tabler styles only a background
   image, which would need a style attribute the CSP forbids (spec 9.4). */
.avatar > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}