/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

:root {
  --fg: #1f2933;
  --muted: #6b7785;
  --bg: #fff;
  --line: #d9dee4;
  --head: #f3f5f7;
  --pos: #11823b;
  --neg: #c0392b;
  --warn-bg: #fff6dd;
  --warn-line: #e0b84a;
  --error-bg: #fde8e6;
  --error-line: #d9534f;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fg: #e4e8ec;
    --muted: #9aa5b1;
    --bg: #14181d;
    --line: #2f3740;
    --head: #1d232a;
    --pos: #4cc37a;
    --neg: #ff7b6b;
    --warn-bg: #3a3118;
    --warn-line: #8a7326;
    --error-bg: #3d1f1d;
    --error-line: #9b3b37;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 14px/1.5 system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif;
}

main, header.site { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
header.site { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
header.site h1 { font-size: 18px; margin: 12px 0; }
header.site a { color: inherit; text-decoration: none; }
h2 { font-size: 16px; margin: 24px 0 8px; }
a { color: #2b6cb0; }
code { font-family: ui-monospace, monospace; word-break: break-all; }

button.link { background: none; border: 0; color: var(--muted); cursor: pointer; font: inherit; text-decoration: underline; }

.muted { color: var(--muted); }
.empty { color: var(--muted); padding: 16px 0; }
.pos { color: var(--pos); }
.neg { color: var(--neg); }

.status dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0 0 8px; }
.status dt { color: var(--muted); }
.status dd { margin: 0; }
.notice { margin: 8px 0; padding: 8px 12px; border: 1px solid; border-radius: 4px; }
.notice.warn { background: var(--warn-bg); border-color: var(--warn-line); }
.notice.error { background: var(--error-bg); border-color: var(--error-line); }

.scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; white-space: nowrap; }
th, td { padding: 4px 8px; border-bottom: 1px solid var(--line); text-align: left; }
th { background: var(--head); font-weight: 600; }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
tr.selected td { background: var(--head); }

.chart { width: 100%; height: auto; max-width: 720px; }
.chart .axis { stroke: var(--line); }
.chart .tick { fill: var(--muted); font-size: 11px; }
.chart .line { fill: none; stroke-width: 1.5; }
.series-0 { stroke: #1f77b4; fill: #1f77b4; }
.series-1 { stroke: #ff7f0e; fill: #ff7f0e; }
.series-2 { stroke: #2ca02c; fill: #2ca02c; }
.series-3 { stroke: #d62728; fill: #d62728; }
.series-4 { stroke: #9467bd; fill: #9467bd; }
.series-5 { stroke: #8c564b; fill: #8c564b; }
.series-6 { stroke: #e377c2; fill: #e377c2; }

/* ログイン */
.login { display: flex; flex-direction: column; gap: 8px; max-width: 320px; margin: 48px auto; }
.login input { padding: 8px; font: inherit; }
.flash { max-width: 320px; margin: 16px auto 0; }
.flash.alert { color: var(--neg); }
.flash.notice-ok { color: var(--pos); }