/* StatusPulse public status page — independent from the main app's CSS on purpose.
   Keeps the status page bundle tiny so it loads under degraded network conditions. */

:root {
    --ink: #0f1211;
    --ink-3: #55605c;
    --ink-4: #8a948f;
    --paper: #fbfaf6;
    --paper-2: #f3f1ea;
    --line: rgba(15, 18, 17, 0.08);

    --ok: #10c074;
    --ok-soft: #d5f7e7;
    --warn: #ff7a1a;
    --warn-soft: #ffe4d0;
    --down: #a32d2d;
    --down-soft: #fceaea;
    --unknown: #9aa39d;

    --radius: 10px;
    --container: 1440px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    background: var(--paper);
    color: var(--ink);
    font-family: "Inter Tight", -apple-system, BlinkMacSystemFont, sans-serif;
    line-height: 1.5;
    font-size: 16px;
}

.container { max-width: var(--container); margin: 0 auto; padding: 48px 24px; }

.status-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    flex-wrap: wrap; gap: 16px;
    padding-bottom: 28px;
    margin-bottom: 28px;
    border-bottom: 1px solid var(--line);
}
.status-header h1 {
    margin: 0;
    font-size: 28px;
    letter-spacing: -0.015em;
}
.status-domain {
    margin: 4px 0 0;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 12.5px;
    color: var(--ink-4);
}

.overall-pill {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 14px; font-weight: 500;
}
.overall-pill .pulse {
    width: 8px; height: 8px; border-radius: 50%;
    animation: sp-pulse 2s ease-in-out infinite;
}
.pill-ok      { background: var(--ok-soft);   color: #065f46; }
.pill-ok      .pulse { background: var(--ok); }
.pill-warn    { background: var(--warn-soft); color: #9a3412; }
.pill-warn    .pulse { background: var(--warn); }
.pill-down    { background: var(--down-soft); color: var(--down); }
.pill-down    .pulse { background: var(--down); }
.pill-unknown { background: var(--paper-2);   color: var(--ink-3); }
.pill-unknown .pulse { background: var(--unknown); }

@keyframes sp-pulse {
    0%, 100% { transform: scale(1);   opacity: 1;   }
    50%      { transform: scale(1.4); opacity: 0.55; }
}

.services { list-style: none; margin: 0; padding: 0; }
.service-row {
    display: flex; flex-direction: column;
    gap: 12px;
    padding: 16px 18px;
    background: #fff;
    border: 1px solid var(--line);
    border-left-width: 4px;
    border-left-color: var(--ok);
    border-radius: var(--radius);
    margin-bottom: 8px;
    overflow: visible; /* tooltip needs to escape the row bounds */
}
.service-row-top {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px;
}
.service-row-chart {
    padding-top: 10px;
    border-top: 1px dashed var(--line);
}
.service-row-metrics {
    display: flex; flex-wrap: wrap; align-items: center; gap: 18px;
    padding-top: 8px;
    border-top: 1px dashed var(--line);
    font-size: 12.5px; color: var(--ink-3);
}
.metric-uptime { margin-left: auto; }
.service-info { min-width: 0; }
.service-row strong { display: block; font-size: 15px; }
.service-meta {
    display: block; margin-top: 2px;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 11.5px; color: var(--ink-4);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Heatmap chart — 24h × 6 ten-min slots (24 cols × 6 rows = 144 cells). The grid
   stretches to fill the card width via 1fr columns; cells keep 1:1 aspect so
   they scale responsively with the container. Y-axis labels align with row ticks,
   X-axis labels align with column ticks. */
.chart {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 8px;
    row-gap: 4px;
    width: 100%;
}

.chart-y-axis {
    grid-column: 1; grid-row: 1;
    display: flex; flex-direction: column; justify-content: space-between;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 10px; line-height: 1;
    color: var(--ink-4);
}

.chart-grid {
    grid-column: 2; grid-row: 1;
    display: grid;
    /* 48 columns (hours), variable width via 1fr. 6 rows (10-min slots) fixed at 10px
       so the chart stays a thin band regardless of viewport width. Cells become
       wide rectangles on large screens — intentional, width is responsive. */
    grid-template-columns: repeat(48, 1fr);
    grid-template-rows: repeat(6, 10px);
    grid-auto-flow: column;
    gap: 2px;
    width: 100%;
}

.cell {
    border-radius: 2px;
    background: var(--unknown);
    position: relative; /* anchor for ::after tooltip */
    transition: filter 0.15s, transform 0.15s;
    cursor: default;
    min-width: 0; min-height: 0;
}
.cell:hover { filter: brightness(1.15); transform: scale(1.25); z-index: 5; }
.cell-ok      { background: var(--ok); }
.cell-warn    { background: var(--warn); }
.cell-down    { background: var(--down); }
.cell-unknown { background: var(--unknown); }
.cell-empty   { background: var(--paper-2); }

/* CSS tooltip — replaces the default browser title tooltip, which is slow,
   unstyleable, and doesn't show on touch devices. Positions above the cell;
   the `::before` gives it a little arrow. */
.cell[data-tip]:hover::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) scale(0.8); /* counter-scale the hover zoom */
    padding: 6px 10px;
    background: var(--ink);
    color: var(--paper);
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 11px; line-height: 1.3;
    border-radius: 4px;
    white-space: nowrap;
    z-index: 10;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.cell[data-tip]:hover::before {
    content: "";
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%) scale(0.8);
    border: 4px solid transparent;
    border-top-color: var(--ink);
    z-index: 10;
    pointer-events: none;
}

.chart-x-axis {
    grid-column: 2; grid-row: 2;
    display: flex; justify-content: space-between;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 10px; line-height: 1;
    color: var(--ink-4);
    padding-top: 2px;
}

.theme-toggle {
    color: var(--ink-3);
    border-bottom: 1px dotted var(--ink-4);
}
.theme-toggle:hover { color: var(--ok); border-bottom-color: var(--ok); }

.metric-pair { display: inline-flex; gap: 6px; align-items: baseline; }
.metric-pair strong {
    display: inline;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-weight: 500; font-size: 13px;
    color: var(--ink);
}

.service-badges {
    display: flex; align-items: center; gap: 8px;
    flex-shrink: 0;
}

.service-status {
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 13px; font-weight: 500;
    flex-shrink: 0;
}

/* SLA badge — twin pill next to .service-status. Reflects the rolling-window
   comparison vs. the monitor's configured SLA target; the status pill next to
   it is independent and reflects the latest check only. */
.sla-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px; font-weight: 500;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    flex-shrink: 0;
}
.sla-badge-ok      { background: var(--ok-soft);      color: #065f46; }
.sla-badge-breach  { background: var(--down-soft);    color: var(--down); }
.sla-badge-unknown { background: var(--paper-2);      color: var(--ink-3); }

/* Status-driven row color — border and tint track the current status pill only.
   Up = green, Degraded = amber, Down = red, Paused/Unknown = neutral gray border.
   SLA breach does NOT alter the row: it is conveyed exclusively by the SLA badge. */
.service-row.status-row-ok      { background: var(--ok-soft);   border-left-color: var(--ok); }
.service-row.status-row-warn    { background: var(--warn-soft); border-left-color: var(--warn); }
.service-row.status-row-down    { background: var(--down-soft); border-left-color: var(--down); }
.service-row.status-row-paused  { border-left-color: var(--unknown); }
.service-row.status-row-unknown { border-left-color: var(--unknown); }
.status-ok      { background: var(--ok-soft);   color: #065f46; }
.status-warn    { background: var(--warn-soft); color: #9a3412; }
.status-down    { background: var(--down-soft); color: var(--down); }
.status-paused  { background: var(--paper-2);   color: var(--ink-4); }
.status-unknown { background: var(--paper-2);   color: var(--ink-3); }

.empty {
    text-align: center;
    padding: 48px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--ink-3);
}

.last-updated {
    text-align: center;
    margin-top: 24px;
    font-size: 12px;
    color: var(--ink-4);
    font-family: "JetBrains Mono", ui-monospace, monospace;
}

.site-footer {
    max-width: var(--container);
    margin: 48px auto 32px;
    padding: 16px 24px;
    text-align: center;
    font-size: 12.5px;
    color: var(--ink-4);
    border-top: 1px solid var(--line);
}
.site-footer a { color: var(--ink-3); text-decoration: none; }
.site-footer a:hover { color: var(--ok); }

/* Dark theme — default for the public status page. Applied via `body.theme-dark`.
   Mirrors the landing page's dark variant so a tenant's status domain visually
   matches the marketing site. Light mode is opt-in via ?theme=light.
   ============================================================================= */

body.theme-dark {
    --ink: #f3f1ea;
    --ink-3: #a0a79f;
    --ink-4: #6b7470;
    --paper: #0e1413;
    --paper-2: #1a2220;
    --line: rgba(255, 255, 255, 0.08);

    --ok:       #18d884;
    --ok-soft:  #13332a;
    --warn:     #ff8a3a;
    --warn-soft:#3d2418;
    --down:     #ef6b6b;
    --down-soft:#3d1a1a;
    --unknown:  #555e58;

    background: var(--paper);
    color: var(--ink);
}

/* Surfaces that hard-code #fff need an explicit override. */
body.theme-dark .service-row { background: var(--paper-2); }
body.theme-dark .service-row.status-row-ok   { background: var(--ok-soft); }
body.theme-dark .service-row.status-row-warn { background: var(--warn-soft); }
body.theme-dark .service-row.status-row-down { background: var(--down-soft); }
body.theme-dark .empty        { background: var(--paper-2); }

/* Empty cells on dark theme blend into the row bg — raise them slightly. */
body.theme-dark .cell-empty { background: rgba(255, 255, 255, 0.06); }

/* Tooltip on dark theme — flip colors so the tooltip contrasts with its surroundings. */
body.theme-dark .cell[data-tip]:hover::after {
    background: var(--ink);
    color: var(--paper);
}
body.theme-dark .cell[data-tip]:hover::before { border-top-color: var(--ink); }

/* Pill text — the light-mode hexes (#065f46 / #9a3412) are too dim on dark bg.
   Bright accents of each hue take over. */
body.theme-dark .pill-ok      { color: #5fe5a7; }
body.theme-dark .pill-warn    { color: #ffb27a; }
body.theme-dark .pill-down    { color: #ff8a8a; }
body.theme-dark .status-ok    { color: #5fe5a7; }
body.theme-dark .status-warn  { color: #ffb27a; }
body.theme-dark .status-down  { color: #ff8a8a; }
body.theme-dark .sla-badge-ok     { color: #5fe5a7; }
body.theme-dark .sla-badge-breach { color: #ff8a8a; }