/* Public status page. Deliberately theme-agnostic: inherits typography from the
   host theme and only styles what carries meaning. */

/* The toggle lives on the shell, outside .jb-status, so the palette is defined
   on both. */
.jb-status-shell,
.jb-status {
    --jb-ok: #1a7f4b;
    --jb-warn: #b26a00;
    --jb-down: #b3261e;
    --jb-unknown: #6b7280;
    --jb-border: rgba(0, 0, 0, 0.12);
}

.jb-status-shell,
.jb-status {
    max-width: 46rem;
    margin: 0 auto;
}

/* Some themes reset [hidden]; the language switch depends on it. */
.jb-status-shell [hidden] {
    display: none !important;
}

/* Language toggle */

.jb-lang-toggle {
    display: flex;
    justify-content: flex-end;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}

.jb-lang-button {
    font: inherit;
    font-size: 0.8125rem;
    line-height: 1.4;
    padding: 0.2rem 0.8rem;
    border: 1px solid var(--jb-border);
    border-radius: 999px;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.jb-lang-button[aria-pressed="true"] {
    border-color: currentColor;
    font-weight: 600;
}

/* The theme's page title ("Status") sits in a full-width coloured band above
   the content. The brand bar directly below it already names the site, so the
   band is dead weight — hidden here rather than in Additional CSS so it travels
   with the plugin that owns the rest of this page. The second selector is the
   fallback if the theme ever restructures the wrapper: at worst the heading
   goes and the empty band stays. */

main > .wp-block-group:first-child,
.wp-block-post-title {
    display: none;
}

/* Brand bar — page chrome for the status site, styled here because this
   stylesheet is the only one the site ships. Full-bleed despite living inside
   the theme's constrained content column. It is now the topmost element on the
   page, so it carries the breathing room the title band used to provide. */

.jb-brand-bar {
    background: #ff9e03; /* --brand-accent on jobbooster.dk */
    width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
    padding: 0.75rem 1.25rem;
    margin-bottom: 2.25rem;
    box-sizing: border-box;
}

.jb-brand-link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    max-width: 46rem;
    margin: 0 auto;
    text-decoration: none;
}

.jb-brand-logo {
    display: block;
    height: 1.4rem;
    width: auto;
}

.jb-brand-tag {
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1;
    opacity: 0.95;
}

.jb-status-headline {
    font-size: 1.5rem;
    margin: 0 0 1rem;
    padding-left: 1.25rem;
    position: relative;
}

.jb-status-tagline {
    font-size: 0.8125rem;
    color: var(--jb-unknown);
    margin: -0.5rem 0 1.25rem;
    padding-left: 1.25rem;
}

.jb-status-headline::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.45em;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background: var(--jb-unknown);
}

.jb-overall-ok .jb-status-headline::before { background: var(--jb-ok); }
.jb-overall-degraded .jb-status-headline::before { background: var(--jb-warn); }
.jb-overall-down .jb-status-headline::before { background: var(--jb-down); }
.jb-overall-stale .jb-status-headline::before { background: var(--jb-unknown); }

.jb-status-warning {
    background: rgba(178, 106, 0, 0.1);
    border-left: 3px solid var(--jb-warn);
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
}

.jb-status-components {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    border: 1px solid var(--jb-border);
    border-radius: 6px;
}

.jb-status-component {
    border-bottom: 1px solid var(--jb-border);
}

.jb-status-component:last-child {
    border-bottom: none;
}

/* The row layout lives on .jb-status-row so it applies both to the accordion
   <summary> and to the plain fallback row of an unknown component. */
.jb-status-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 1rem;
}

summary.jb-status-row {
    cursor: pointer;
    list-style: none;
}

summary.jb-status-row::-webkit-details-marker {
    display: none;
}

.jb-status-chevron {
    flex: 0 0 auto;
    width: 0.45rem;
    height: 0.45rem;
    border-right: 2px solid var(--jb-unknown);
    border-bottom: 2px solid var(--jb-unknown);
    transform: rotate(45deg);
    margin-top: -0.2rem;
    transition: transform 0.15s ease;
}

.jb-status-details[open] > summary .jb-status-chevron {
    transform: rotate(225deg);
    margin-top: 0.2rem;
}

.jb-status-info {
    padding: 0 1rem 0.9rem 2.2rem;
    font-size: 0.875rem;
    line-height: 1.5;
}

.jb-status-info p {
    margin: 0 0 0.5rem;
}

.jb-status-info p:last-child {
    margin-bottom: 0;
}

.jb-status-hint {
    border-left: 3px solid var(--jb-warn);
    padding: 0.4rem 0.7rem;
    background: rgba(178, 106, 0, 0.08);
    border-radius: 0 3px 3px 0;
}

.jb-status-dot {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    flex: 0 0 auto;
    background: var(--jb-unknown);
}

.jb-state-ok .jb-status-dot { background: var(--jb-ok); }
.jb-state-warn .jb-status-dot { background: var(--jb-warn); }
.jb-state-down .jb-status-dot { background: var(--jb-down); }

.jb-status-label {
    flex: 1 1 auto;
}

.jb-status-state {
    font-size: 0.875rem;
    color: var(--jb-unknown);
}

.jb-state-ok .jb-status-state { color: var(--jb-ok); }
.jb-state-warn .jb-status-state { color: var(--jb-warn); }
.jb-state-down .jb-status-state { color: var(--jb-down); }

.jb-uptime {
    margin-bottom: 1rem;
}

.jb-uptime-bar {
    display: flex;
    gap: 2px;
    align-items: flex-end;
    /* 90 days of history must not force the page to scroll sideways. */
    overflow-x: auto;
}

.jb-uptime-day {
    flex: 1 0 3px;
    min-width: 3px;
    height: 2rem;
    border-radius: 1px;
    background: var(--jb-unknown);
    opacity: 0.25;
}

.jb-uptime-ok { background: var(--jb-ok); opacity: 1; }
.jb-uptime-warn { background: var(--jb-warn); opacity: 1; }
.jb-uptime-down { background: var(--jb-down); opacity: 1; }

.jb-uptime-average,
.jb-status-updated {
    display: block;
    font-size: 0.8125rem;
    color: var(--jb-unknown);
    margin-top: 0.5rem;
}

.jb-status-version {
    opacity: 0.75;
    white-space: nowrap;
}

@media (prefers-color-scheme: dark) {
    .jb-status-shell,
    .jb-status {
        --jb-ok: #4ade80;
        --jb-warn: #fbbf24;
        --jb-down: #f87171;
        --jb-unknown: #9ca3af;
        --jb-border: rgba(255, 255, 255, 0.15);
    }

    .jb-status-hint {
        background: rgba(251, 191, 36, 0.12);
    }
}

/* Event history */

.jb-history-current {
    display: grid;
    grid-template-columns: auto auto 1fr;
    gap: 0.25rem 1rem;
    align-items: baseline;
    padding: 0.9rem 1rem;
    margin-bottom: 0.75rem;
    border: 1px solid var(--jb-border);
    border-left: 4px solid var(--jb-unknown);
    border-radius: 6px;
    background: rgba(127, 127, 127, 0.06);
}

.jb-history-current.jb-state-ok { border-left-color: var(--jb-ok); }
.jb-history-current.jb-state-warn { border-left-color: var(--jb-warn); }
.jb-history-current.jb-state-down { border-left-color: var(--jb-down); }

.jb-history-current-day {
    font-size: 1.0625rem;
    font-weight: 700;
}

.jb-history-current-state {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--jb-unknown);
}

.jb-history-current.jb-state-ok .jb-history-current-state { color: var(--jb-ok); }
.jb-history-current.jb-state-warn .jb-history-current-state { color: var(--jb-warn); }
.jb-history-current.jb-state-down .jb-history-current-state { color: var(--jb-down); }

.jb-history-current-note {
    font-size: 0.9375rem;
}

.jb-history-current-since {
    grid-column: 1 / -1;
    font-size: 0.8125rem;
    color: var(--jb-unknown);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 40rem) {
    .jb-history-current {
        grid-template-columns: 1fr;
        gap: 0.15rem;
    }
}

.jb-history-title {
    font-size: 1rem;
    margin: 1.75rem 0 0.5rem;
}

.jb-history-empty {
    font-size: 0.875rem;
    color: var(--jb-unknown);
}

.jb-history {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    font-size: 0.875rem;
    line-height: 1.5;
}

.jb-history-day {
    font-weight: 600;
    margin-top: 1rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--jb-border);
    color: var(--jb-unknown);
    letter-spacing: 0.02em;
}

.jb-history-event {
    display: grid;
    /* state | time | duration | components */
    grid-template-columns: 5.5rem 9.5rem 6rem 1fr;
    gap: 0 0.9rem;
    align-items: baseline;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--jb-border);
}

.jb-history-event:last-child {
    border-bottom: none;
}

.jb-history-state {
    font-weight: 600;
}

.jb-history-event.jb-state-down .jb-history-state { color: var(--jb-down); }
.jb-history-event.jb-state-warn .jb-history-state { color: var(--jb-warn); }

.jb-history-time {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.jb-history-duration {
    color: var(--jb-unknown);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.jb-history-what {
    min-width: 0;
    color: var(--jb-unknown);
}

/* On a phone: state and time on one line, components underneath. */
@media (max-width: 40rem) {
    .jb-history-event {
        grid-template-columns: 5.5rem 1fr auto;
        gap: 0.15rem 0.6rem;
    }
    .jb-history-what {
        grid-column: 1 / -1;
    }
}