/* App styles on top of Picnic.css (vendor/assets/stylesheets/picnic.min.css). */
body { padding-top: 3.5em; background: #f5f6f8; }
main { max-width: 1100px; margin: 0 auto; padding: 1em; }
nav .menu form.inline { display: inline; }
nav .menu .active { background: rgba(0, 0, 0, 0.08); }

.flash { padding: 0.6em 1em; border-radius: 0.2em; margin-bottom: 1em; }
.flash.notice { background: #e3f6e8; color: #1e6b34; }
.flash.alert { background: #fbe4e4; color: #8a1f1f; }

.card { background: #fff; padding: 1em; margin-bottom: 1em; border-radius: 0.3em; }
.card h3 { margin-top: 0; padding: 0; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1em; margin-bottom: 1em; }
.stat .big { font-size: 1.8em; font-weight: bold; }
.stat .sub { color: #666; font-size: 0.9em; }

table { width: 100%; background: #fff; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.muted { color: #777; }
.dot { display: inline-block; width: 0.7em; height: 0.7em; border-radius: 50%; margin-right: 0.4em; }
.dot.online { background: #2ecc40; }
.dot.offline { background: #ff4136; }

.filters { display: flex; flex-wrap: wrap; gap: 0.5em; align-items: end; margin-bottom: 1em; }
.filters label { display: block; font-size: 0.85em; color: #555; }
.filters > div { min-width: 10em; }
.narrow { max-width: 28em; }
code.token { display: block; padding: 0.8em; background: #222; color: #eee; word-break: break-all; }