/* Pohjateema. Tenantin /theme.css ladataan tämän jälkeen ja ylikirjoittaa muuttujia. */
:root {
  --color-bg: #f6f7f9;
  --color-fg: #1b1f24;
  --color-muted: #5d6673;
  --color-surface: #ffffff;
  --color-border: #dde1e6;
  --color-up: #23854a;
  --color-degraded: #b06a00;
  --color-down: #c42b2b;
  --color-maintenance: #2f63b5;
  --color-nodata: #c9ced6;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-heading: var(--font-body);
  --radius: 8px;
  --max-width: 860px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #111418;
    --color-fg: #e7eaee;
    --color-muted: #9aa4b1;
    --color-surface: #1a1f25;
    --color-border: #2c333c;
    --color-up: #3fb36a;
    --color-degraded: #e0a030;
    --color-down: #ef5a5a;
    --color-maintenance: #5b8fe0;
    --color-nodata: #3a424c;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--color-bg); color: var(--color-fg); font: 16px/1.5 var(--font-body); }
h1, h2, h3, h4 { font-family: var(--font-heading); line-height: 1.25; }
a { color: inherit; }
a:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--color-maintenance); outline-offset: 2px; }
.wrap { max-width: var(--max-width); margin: 0 auto; padding: 0 16px; }
.muted { color: var(--color-muted); }

.site-header { padding: 24px 0 8px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.logo { max-height: 40px; width: auto; }
.brand-name { font: 600 1.25rem var(--font-heading); }

.overall { display: flex; align-items: center; gap: 12px; margin: 16px 0 28px; padding: 16px 20px;
  border-radius: var(--radius); color: #fff; background: var(--color-up); }
.overall h1 { margin: 0; font-size: 1.25rem; }
.overall-degraded { background: var(--color-degraded); }
.overall-outage { background: var(--color-down); }
.overall-maintenance { background: var(--color-maintenance); }
.overall-unknown { background: var(--color-muted); }
.overall .status-icon { background: rgba(255,255,255,.25); color: #fff; }

.status-icon { display: inline-grid; place-items: center; width: 1.4em; height: 1.4em; border-radius: 50%;
  font-size: .85em; font-weight: 700; color: #fff; background: var(--color-muted); flex: none; }
.status-icon.status-operational { background: var(--color-up); }
.status-icon.status-degraded { background: var(--color-degraded); }
.status-icon.status-outage { background: var(--color-down); }
.status-icon.status-maintenance { background: var(--color-maintenance); }

.group { margin: 28px 0; }
.group > h2 { font-size: 1.05rem; margin: 0 0 8px; color: var(--color-muted); }
.component { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius);
  padding: 14px 16px; margin-bottom: 10px; }
.component-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.component-name { margin: 0; font-size: 1rem; }
.component-status { display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; }
.component-status.status-operational { color: var(--color-up); }
.component-status.status-degraded { color: var(--color-degraded); }
.component-status.status-outage { color: var(--color-down); }
.component-status.status-maintenance { color: var(--color-maintenance); }
.component-status.status-unknown { color: var(--color-muted); }

.bars { display: flex; gap: 2px; margin: 12px 0 4px; height: 34px; position: relative; }
.bar { flex: 1 1 0; min-width: 2px; border-radius: 2px; background: var(--color-nodata); display: block; }
.bar-operational { background: var(--color-up); }
.bar-degraded { background: var(--color-degraded); }
.bar-outage { background: var(--color-down); }
.bar-maintenance { background: var(--color-maintenance); }
.bar:hover, .bar:focus { opacity: .7; }
.bars-legend { display: flex; justify-content: space-between; font-size: .8rem; color: var(--color-muted); }
.bars-start-30 { display: none; }
/* Ei-julkinen (näkyy vain kirjautuneelle): raidallinen tausta ja katkoviivareunus. */
.component.private { border: 2px dashed var(--color-maintenance);
  background: repeating-linear-gradient(-45deg, var(--color-surface), var(--color-surface) 10px, rgba(127,127,127,.08) 10px, rgba(127,127,127,.08) 20px); }
.private-tag { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: .75rem; font-weight: 600;
  color: #fff; background: var(--color-maintenance); vertical-align: middle; }
/* Mobiilissa 30 päivää: piilotetaan 60 vanhinta palkkia. */
@media (max-width: 600px) {
  .bars .bar:nth-child(-n+60) { display: none; }
  .bars-start-90 { display: none; }
  .bars-start-30 { display: inline; }
}
.bar-tip { position: absolute; z-index: 5; bottom: 40px; transform: translateX(-50%); min-width: 180px; max-width: 260px;
  padding: 8px 10px; font-size: .8rem; background: var(--color-fg); color: var(--color-bg); border-radius: 6px; pointer-events: auto; }
.bar-tip a { display: block; color: inherit; }

.latency { margin: 10px 0 0; }
.latency figcaption { font-size: .8rem; color: var(--color-muted); }
.latency svg { width: 100%; height: 60px; display: block; }
.line-avg { stroke: var(--color-up); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.line-p95 { stroke: var(--color-muted); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.lg-avg { color: var(--color-up); }

.incidents h2, .recent h2 { font-size: 1.1rem; }
.incident { background: var(--color-surface); border: 1px solid var(--color-border); border-left: 4px solid var(--color-muted);
  border-radius: var(--radius); padding: 12px 16px; margin-bottom: 10px; }
.incident.sev-down { border-left-color: var(--color-down); }
.incident.sev-degraded { border-left-color: var(--color-degraded); }
.incident.sev-maintenance { border-left-color: var(--color-maintenance); }
.incident h3 { margin: 0 0 4px; font-size: 1rem; }
.incident h1 { font-size: 1.3rem; margin: 0 0 8px; }
.incident .meta, .incident time { color: var(--color-muted); font-size: .85rem; }
.incident .latest { margin: 6px 0 0; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 8px 0; }
.facts dt { color: var(--color-muted); }
.facts dd { margin: 0; }
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { border-top: 1px solid var(--color-border); padding: 8px 0; }
.month-nav { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.month-nav h2 { margin: 0; font-size: 1.1rem; }

.site-footer { margin-top: 40px; padding: 20px 0 40px; font-size: .85rem; color: var(--color-muted); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 16px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }