/* App-specific styles on top of Primer. Use Primer tokens (var(--*)) only, never raw colors,
   so light and dark mode both work. Agents: add styles for your pages in a clearly marked section. */

body { min-height: 100vh; }

.app-header { position: sticky; top: 0; z-index: 10; }

/* KPI tiles */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.kpi { border: 1px solid var(--borderColor-default); border-radius: 6px; padding: 12px 16px; background: var(--bgColor-default); }
.kpi-label { color: var(--fgColor-muted); font-size: 12px; }
.kpi-value { font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; }
.kpi-delta-up { color: var(--fgColor-success); font-size: 12px; }
.kpi-delta-down { color: var(--fgColor-danger); font-size: 12px; }

/* Panel grid for report tables */
.panel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; }

/* Bar-behind-row tables (top pages, referrers, ...) */
.bar-row { position: relative; }
.bar-row .bar { position: absolute; inset: 2px auto 2px 0; background: var(--bgColor-accent-muted); border-radius: 4px; z-index: 0; }
.bar-row > *:not(.bar) { position: relative; z-index: 1; }
.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

.chart-box { position: relative; height: 260px; }

code.snippet { display: block; white-space: pre-wrap; word-break: break-all; padding: 12px; }

/* htmx loading state */
.htmx-request.panel-loading, .htmx-request .panel-loading { opacity: .5; }

/* accounts */
.settings-section { margin-bottom: 32px; }
.settings-section .form-control, .settings-section .form-select { max-width: 100%; }
.login-wrap { max-width: 340px; margin: 10vh auto 0; }
.copy-row { display: flex; gap: 8px; align-items: flex-start; }
.copy-row > code, .copy-row > input { flex: 1 1 auto; min-width: 0; }
code.snippet { background: var(--bgColor-muted); border: 1px solid var(--borderColor-default); border-radius: 6px; font-size: 12px; }
.row-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.row-actions form { display: flex; gap: 8px; align-items: center; margin: 0; }
.field-error { color: var(--fgColor-danger); font-size: 12px; margin-top: 4px; }