/* status.qsai.app — QSAI design system, standalone.
 *
 * Tokens, radii, type scale and component shapes are lifted from the app's own
 * app/static/css/main.css + components.css so this page IS the product's UI
 * rather than a lookalike: warm off-white surfaces, teal #4DA49C accent,
 * IBM Plex Sans, 15px radius on cards and 2px on controls.
 *
 * It is a COPY on purpose — the page must render with the app, its CDN and its
 * database all unreachable, so it cannot link to the app's stylesheets. Re-sync
 * the token block below when the app's palette changes.
 *
 * Two deliberate departures from the app shell:
 *   · LIGHT ONLY (no prefers-color-scheme block) — a status page is read in a
 *     hurry, projected and screenshotted into tickets, so it keeps one
 *     predictable appearance instead of following the reader's OS theme.
 *   · A single 80%-wide centred column (--page-width) shared by the header,
 *     content and footer, instead of the app's fixed max-width. The header and
 *     footer *surfaces* still span the full viewport; only their contents are
 *     constrained, so every element lines up on the same two edges.
 */

/* ============================================================
   VARIABLES  (mirrors app/static/css/main.css)
   ============================================================ */
:root {
    /* ── Accent ── */
    --accent: #4DA49C;
    --accent-light: #6BC7BC;
    --accent-hover: #3C8982;
    --accent-strong: #2d736d;

    --color-primary: var(--accent);
    --color-primary-dark: var(--accent-strong);
    --color-primary-bg: #eeeee4;
    --color-qs-teal: var(--accent);
    --color-qs-teal-light: var(--accent-light);
    --color-qs-coral: #D85A30;
    --color-qs-blue: #0c447c;

    /* Surfaces */
    --color-header-bg: #fffdf8;
    --color-content-bg: #fcfcf9;
    --color-footer-bg: #fffdf8;
    --color-card-bg: #fffdf8;
    --color-card-hover-bg: #f1f0ec;

    /* Borders & text */
    --color-border: #edebe9;
    --color-text: #201f1e;
    --color-text-muted: #605e5c;

    /* Semantic status */
    --color-danger: #a4262c;
    --color-danger-bg: #fde7e9;
    --color-success: #1f8a4c;
    --color-success-bg: #dcfce7;
    --color-info: var(--color-qs-blue);
    --color-info-bg: #dbeafe;
    --color-warning: #b45309;
    --color-warning-bg: #fef3c7;

    /* Layout & type */
    --main-border-radius: 15px;
    --font-main: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
    /* The shared content column: 80% of the viewport, centred. Header inner,
       page content and footer inner all use it, so nothing is inset differently
       from anything else. --page-pad only kicks in on narrow screens, where an
       80% column would waste too much room (see the media query at the end). */
    --page-width: 80%;
    --page-pad: 0px;

    /* ── Status-page additions ──
       Component states mapped onto the app's semantic colors, so an "outage" is
       the same red as an app error. Partial borrows the QSAI coral, which sits
       between warning and danger by design. */
    --state-operational: var(--color-success);
    --state-degraded: var(--color-warning);
    --state-partial: #b5451f;
    --state-partial-bg: rgba(216, 90, 48, 0.14);
    --state-major: var(--color-danger);
    --state-maintenance: var(--color-info);
    --state-nodata: #d8d5cf;
}

* {
    box-sizing: border-box;
}

/* Column layout so the footer sits at the bottom of the viewport even when the
   page is short — which it is whenever everything is green. */
body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--color-content-bg);
    color: var(--color-text);
    font-family: var(--font-main);
    font-size: 14px;
    line-height: 1.5;
}

a {
    color: var(--color-primary-dark);
    text-decoration: none;
}

a:hover {
    color: var(--color-primary);
}

h1, h2, h3 {
    margin: 0;
    letter-spacing: -0.02em;
}

.wrap,
.app-header__inner,
.app-footer__inner {
    width: var(--page-width);
    margin-inline: auto;
    padding: 0 var(--page-pad);
}

main.wrap {
    flex: 1;
    padding-bottom: 8px;
}

/* Lone sign-in card: centred rather than floating at the left edge of a
   full-width page. `.block` sets `margin: 28px 0`, so the side margins have to
   be restated on the combined selector to survive the cascade. */
.narrow {
    max-width: 440px;
}

.block.narrow {
    margin-inline: auto;
}

.mono {
    font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
}

.muted {
    color: var(--color-text-muted);
}

.small {
    font-size: 13px;
}

/* ============================================================
   HEADER — one full-width bar: logo + wordmark, nothing else
   ============================================================ */
.app-header {
    background: var(--color-header-bg);
    border-bottom: 1px solid var(--color-border);
}

.app-header__inner {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 64px;
}

.app-launcher__logo {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.app-launcher__logo img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.app-launcher__name {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
}

.app-launcher__name span {
    font-weight: 400;
    color: var(--color-text-muted);
}

/* Right end of the bar: the debug-console link once signed in. */
.app-header__end {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 13px;
}

/* ============================================================
   FOOTER  (main.css .app-footer, full width)
   ============================================================ */
.app-footer {
    background: var(--color-footer-bg);
    border-top: 1px solid var(--color-border);
    margin-top: 40px;
    font-size: 13px;
    color: var(--color-text-muted);
}

.app-footer__inner {
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.app-footer a {
    color: var(--color-text-muted);
}

.app-footer a:hover {
    color: var(--color-primary);
}

.foot-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.inline-form {
    display: inline;
}

.linkish {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: var(--color-text-muted);
    cursor: pointer;
}

.linkish:hover {
    color: var(--color-primary);
}

/* ============================================================
   OVERALL BANNER
   The state is carried by the dot and the headline — no coloured
   rule down the side.
   ============================================================ */
.banner {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 20px 0 28px;
    padding: 20px 24px;
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--main-border-radius);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.banner.compact {
    padding: 16px 24px;
}

.banner h1 {
    font-size: 22px;
    font-weight: 600;
}

.banner p {
    margin: 5px 0 0;
    font-size: 13px;
    color: var(--color-text-muted);
}

/* Status dot — square-ish like the app's controls, not a circle */
.dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background: var(--state-operational);
    flex: none;
}

.dot-degraded    { background: var(--state-degraded); }
.dot-partial     { background: var(--state-partial); }
.dot-major       { background: var(--state-major); }
.dot-maintenance { background: var(--state-maintenance); }
.dot-unknown     { background: var(--state-nodata); }

.banner .dot {
    width: 16px;
    height: 16px;
    border-radius: 3px;
}

/* ============================================================
   BLOCKS & CARDS  (components.css .card)
   ============================================================ */
.block {
    margin: 28px 0;
}

.block-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.block h1 {
    font-size: 22px;
    font-weight: 600;
}

.block h2 {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 12px;
}

.block-head h1,
.block-head h2 {
    margin-bottom: 0;
}

.group-name {
    font-size: 11px;
    font-weight: 700;
    color: var(--color-text-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 20px 0 8px;
}

.card {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--main-border-radius);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

.card.pad {
    padding: 20px 24px;
}

.card.empty {
    padding: 28px 24px;
    text-align: center;
    color: var(--color-text-muted);
}

.listrow {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--color-border);
    flex-wrap: wrap;
}

.listrow:last-child {
    border-bottom: 0;
}

.crumb {
    margin: 20px 0 0;
    font-size: 13px;
}

hr {
    border: 0;
    border-top: 1px solid var(--color-border);
    margin: 20px 0;
}

/* ============================================================
   COMPONENT ROWS
   Every component is one card of identical width, so the rows and
   their uptime strips line up exactly down the page.
   ============================================================ */
.comp {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--main-border-radius);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    padding: 18px 24px;
    margin-bottom: 10px;
}

.comp:last-child {
    margin-bottom: 0;
}

.comp-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.comp-id {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.comp-name {
    font-size: 14px;
    font-weight: 600;
}

.comp-state {
    font-size: 13px;
    font-weight: 500;
    color: var(--state-operational);
    white-space: nowrap;
}

.state-degraded    { color: var(--state-degraded); }
.state-partial     { color: var(--state-partial); }
.state-major       { color: var(--state-major); }
.state-maintenance { color: var(--state-maintenance); }
.state-unknown     { color: var(--color-text-muted); }

.comp-desc {
    margin: 4px 0 0 20px;
    font-size: 13px;
    color: var(--color-text-muted);
}

/* Debug-mode detail strip: the app's .card--grey treatment */
.comp-debug {
    margin: 12px 0 0;
    padding: 8px 10px;
    background: var(--color-card-hover-bg);
    border-radius: 2px;
    font-size: 12px;
    color: var(--color-text-muted);
    overflow-wrap: anywhere;
}

/* ============================================================
   UPTIME BAR — square ticks, 2px radius like the app's controls
   ============================================================ */
.bar-wrap {
    margin-top: 14px;
}

.bar {
    display: flex;
    gap: 2px;
    height: 30px;
    align-items: stretch;
}

.tick {
    flex: 1 1 0;
    min-width: 2px;
    border-radius: 2px;
    background: var(--state-operational);
    transition: filter 0.1s;
}

.tick-degraded { background: var(--state-degraded); }
.tick-minor    { background: var(--state-degraded); }
.tick-partial  { background: var(--state-partial); }
.tick-major    { background: var(--state-major); }
.tick-nodata   { background: var(--state-nodata); }

.tick:hover {
    filter: brightness(1.12);
}

.bar-legend {
    display: flex;
    justify-content: space-between;
    margin-top: 7px;
    font-size: 12px;
    color: var(--color-text-muted);
}

.bar-uptime {
    font-variant-numeric: tabular-nums;
}

/* Below ~600px, 90 one-pixel ticks are noise — thin the strip out. */
@media (max-width: 600px) {
    .tick:nth-child(even) {
        display: none;
    }
}

/* ============================================================
   INCIDENTS
   ============================================================ */
.incident {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--main-border-radius);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    padding: 18px 24px;
    margin-bottom: 10px;
}

.incident-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.incident h3 {
    font-size: 15px;
    font-weight: 600;
}

.incident-meta {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.incident-when {
    margin: 6px 0 0;
    font-size: 12.5px;
    color: var(--color-text-muted);
}

/* Badges — components.css .badge: uppercase, 11px/700, 2px radius */
.tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 2px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    background: var(--color-content-bg);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
}

.tag-none,
.tag-minor         { background: var(--color-warning-bg); color: var(--color-warning); border-color: transparent; }
.tag-major         { background: var(--state-partial-bg);  color: var(--state-partial);  border-color: transparent; }
.tag-critical      { background: var(--color-danger-bg);   color: var(--color-danger);   border-color: transparent; }
.tag-auto          { background: var(--color-info-bg);     color: var(--color-info);     border-color: transparent; }
.tag-investigating { background: var(--color-danger-bg);   color: var(--color-danger);   border-color: transparent; }
.tag-identified    { background: var(--state-partial-bg);  color: var(--state-partial);  border-color: transparent; }
.tag-monitoring    { background: var(--color-info-bg);     color: var(--color-info);     border-color: transparent; }
.tag-resolved      { background: var(--color-success-bg);  color: var(--color-success);  border-color: transparent; }

/* The timeline rail is a neutral structural line (it groups the updates of one
   incident), not a status accent. */
.timeline {
    list-style: none;
    margin: 16px 0 0;
    padding: 0 0 0 16px;
    border-left: 2px solid var(--color-border);
}

.timeline li {
    position: relative;
    margin-bottom: 16px;
}

.timeline li:last-child {
    margin-bottom: 0;
}

.timeline li::before {
    content: "";
    position: absolute;
    left: -22px;
    top: 5px;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--color-border);
}

.tl-status {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.tl-investigating { color: var(--color-danger); }
.tl-identified    { color: var(--state-partial); }
.tl-monitoring    { color: var(--color-info); }
.tl-resolved      { color: var(--color-success); }

.tl-body {
    display: block;
    margin: 3px 0;
}

.tl-when {
    display: block;
    font-size: 12px;
    color: var(--color-text-muted);
}

.pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
    font-size: 13px;
}

/* ============================================================
   FORMS  (components.css .form-input / .btn)
   ============================================================ */
.stack {
    display: grid;
    gap: 14px;
}

.stack > label,
.row > label {
    display: grid;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text);
    letter-spacing: 0.01em;
}

.row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: end;
}

.row-tight {
    margin-top: 12px;
}

.row-tight select { flex: 0 1 230px; }
.row-tight input  { flex: 1 1 200px; }

input,
select,
textarea {
    height: 32px;
    padding: 0 8px;
    width: 100%;
    font-family: var(--font-main);
    font-size: 13px;
    color: var(--color-text);
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: 2px;
    outline: none;
    transition: border-color 0.1s;
}

textarea {
    height: auto;
    padding: 8px;
    resize: vertical;
    line-height: 1.5;
}

input:focus,
select:focus,
textarea:focus {
    border: solid 2px var(--color-primary);
}

input::placeholder,
textarea::placeholder {
    color: var(--color-text-muted);
}

fieldset.checks {
    border: 1px solid var(--color-border);
    border-radius: 2px;
    padding: 10px 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
}

fieldset.checks legend {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text);
    padding: 0 4px;
}

.check {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 400;
}

.check input {
    width: auto;
    height: auto;
    accent-color: var(--color-primary);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 32px;
    padding: 0 16px;
    width: auto;
    font-family: var(--font-main);
    font-size: 13px;
    font-weight: 500;
    border: 1px solid var(--color-border);
    border-radius: 2px;
    background: var(--color-card-hover-bg);
    color: var(--color-text);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.1s, color 0.1s, border-color 0.1s;
}

.btn-primary {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #ffffff;
}

.btn-primary:hover {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}

.btn-danger {
    background: transparent;
    border-color: var(--color-danger);
    color: var(--color-danger);
}

.btn-danger:hover {
    background: var(--color-danger-bg);
}

.stack > .btn,
.card.pad > form > .btn {
    justify-self: start;
}

/* Admin link in the header / on an incident page — the app's .badge-primary */
.pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 2px;
}

.pill-admin {
    background: var(--color-primary-bg);
    color: var(--color-primary-dark);
}

/* Flashes — flat tinted alerts (components.css .alert) */
.flashes {
    display: grid;
    gap: 8px;
    margin-top: 16px;
}

.flash {
    padding: 10px 14px;
    font-size: 13px;
    border-radius: 2px;
    background: var(--color-card-hover-bg);
}

.flash-ok {
    background: var(--color-success-bg);
    color: var(--color-success);
}

.flash-error {
    background: var(--color-danger-bg);
    color: var(--color-danger);
}

/* ── Narrow screens ── */
/* An 80% column leaves too little room on a phone — go full width with a small
   gutter instead. */
@media (max-width: 900px) {
    :root {
        --page-width: 100%;
        --page-pad: 16px;
    }
}

@media (max-width: 700px) {
    .comp-top { flex-wrap: wrap; }
}