/* Small additions on top of Pico's defaults -- see static/vendor/. */

.container { max-width: 76rem; }

nav .whoami { margin-right: 0.75rem; font-size: 0.85rem; }
nav .logout { display: flex; align-items: center; margin: 0; }
nav .logout button { margin: 0; padding: 0.25rem 0.75rem; font-size: 0.8rem; }

/* Flash region. Kept at a fixed minimum height so a message appearing does not
   shove the page down under the pointer mid-click. */
#flash:not(:empty) { margin-bottom: 1rem; }
.flash { padding: 0.6rem 0.9rem; border-radius: var(--pico-border-radius); margin: 0 0 0.5rem; }
.flash-error { background: var(--pico-del-color, #fdd); color: #6d1010; }
.flash-success { background: var(--pico-ins-color, #dfd); color: #10502a; }

small.error, p.error { color: #b3261e; }

.filters { margin-bottom: 1rem; }
.filters .grid { align-items: end; }
.label-spacer { display: block; }

.create-panel { margin-bottom: 1.5rem; }
.create-panel summary { width: auto; display: inline-block; }

table { font-size: 0.9rem; }
th a.sort { text-decoration: none; }
th a.sort.sorted { font-weight: 700; }

.license-toggle { margin: 0; }
.license-toggle label { margin: 0; display: inline-flex; align-items: center; gap: 0.4rem; }
.license-label { font-size: 0.85rem; }

/* The select and date input keep Pico's own bottom margin: Pico pulls a following
   <small> up by most of it, so shrinking the margin makes the hint overlap the box. */
.tier-select { margin: 0; }
.license-date { margin: 0; }

/* Marks a tier whose number and prompts/month are locked (routes/tiers.py). */
.in-use {
  display: inline-block; margin-left: 0.35rem; padding: 0 0.35rem;
  border-radius: 0.6rem; background: var(--pico-muted-border-color); font-size: 0.7rem;
}

.over {
  display: inline-block; margin-left: 0.35rem; padding: 0 0.35rem;
  border-radius: 0.6rem; background: #fde7c8; color: #7a4a05; font-size: 0.7rem;
}

/* Monthly usage history on the customer detail page. The red is a second signal
   only -- the "over" badge in the same cell carries it in text too. */
.usage-history tr.over-limit td { background: #fdecea; color: #b3261e; font-weight: 600; }
.usage-history tr.over-limit .over { background: #f6c6c1; color: #7a1710; }

/* Prompt bodies can be long; clamp the column so one outlier does not make the
   whole table horizontally scrollable. */
.prompt-text { max-width: 42rem; overflow-wrap: anywhere; }

.token-row { display: flex; gap: 0.5rem; align-items: center; }
.token-row input { font-family: var(--pico-font-family-monospace); margin: 0; }
.token-row button { margin: 0; white-space: nowrap; }
.token-reveal { border: 2px solid var(--pico-primary); }

.row-actions { display: flex; gap: 0.4rem; }
.row-actions button { margin: 0; padding: 0.2rem 0.6rem; font-size: 0.8rem; }
tr.editing td { background: var(--pico-card-sectioning-background-color); }

.login { max-width: 26rem; margin-top: 4rem; }
.error-page { border-left: 4px solid #b3261e; }

/* --- Dashboard ------------------------------------------------------------------
   Stat tiles and the usage-vs-allowance bar charts (inline SVG built by
   routes/dashboard.py). Colours live here rather than on the SVG because the CSP
   blocks inline styles. Bars: series blue under the limit, status critical over it --
   and over-limit rows also carry a text label, so colour never carries it alone.
   Text stays in text colours, never the bar colour. */
.dashboard-months { align-items: start; }
.month-panel h3 { margin-bottom: 0.75rem; }
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin-bottom: 1rem; }
.stat {
  display: flex; flex-direction: column; padding: 0.6rem 0.8rem;
  border: 1px solid var(--pico-muted-border-color); border-radius: 0.4rem;
}
.stat-label { font-size: 0.8rem; color: var(--pico-muted-color); }
.stat-value { font-size: 1.6rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.stat-value small { font-size: 0.9rem; font-weight: 400; color: var(--pico-muted-color); }
.stat-warn { color: #d03b3b; }

/* Captured on the <svg>, outside the row links: Pico redefines --pico-color inside
   <a>, which painted every label link-blue. */
.usage-chart {
  --chart-text: var(--pico-color); --chart-muted: var(--pico-muted-color);
  width: 100%; height: auto; font-size: 11px; margin-bottom: 1rem;
}
.usage-chart a { text-decoration: none; }
.usage-chart text { fill: var(--chart-text); }
.usage-chart .axis-label { fill: var(--chart-muted); font-size: 10px; }
.usage-chart .ref-line { stroke: var(--chart-muted); stroke-width: 1; stroke-dasharray: 3 3; }
.usage-chart .bar { fill: #2a78d6; }
.usage-chart .bar.over { fill: #d03b3b; }
.usage-chart .row-hit { fill: transparent; }
.usage-chart a:hover .row-hit, .usage-chart a:focus .row-hit { fill: var(--pico-muted-border-color); }
.usage-chart .over-note { font-weight: 600; }
.usage-chart .clip-mark { font-weight: 700; }

.over-table tr.over-limit td { color: inherit; }
.all-customers { margin-top: 1rem; }