/**
 * Service status — the six-month strip.
 *
 * Replaces the .service-status-bars block in style.css (lines ~886-959).
 * The four state colours are set as custom properties by the template, so they
 * stay editable from PHP via the tellus_status_colors filter.
 */

.service-status-bar {
    --bar-radius: 6px;
    --bar-height: 42px;
}

.service-status-bar .bars {
    display: flex;
    gap: 3px;
    height: var(--bar-height);
}

.service-status-bar .bar {
    flex: 1 1 0;
    min-width: 0;
    display: grid;
    gap: 2px;
}

.service-status-bar .bar:first-child > :first-child { border-top-left-radius: var(--bar-radius); }
.service-status-bar .bar:first-child > :last-child  { border-bottom-left-radius: var(--bar-radius); }
.service-status-bar .bar:last-child  > :first-child { border-top-right-radius: var(--bar-radius); }
.service-status-bar .bar:last-child  > :last-child  { border-bottom-right-radius: var(--bar-radius); }

.service-status-bar .status {
    position: relative;
    display: grid;
    transition: filter .15s ease;
}

.service-status-bar .status.state-operational { background: var(--status-operational); }
.service-status-bar .status.state-ongoing     { background: var(--status-ongoing); }
.service-status-bar .status.state-resolved    { background: var(--status-resolved); }
.service-status-bar .status.state-maintenance { background: var(--status-maintenance); }

.service-status-bar .status > a {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.service-status-bar .status:hover,
.service-status-bar .status:focus-within {
    filter: brightness(1.12);
}

/* Tooltip */

.service-status-bar .status-hover {
    position: absolute;
    left: 50%;
    top: calc(100% + 10px);
    transform: translateX(-50%);
    z-index: 9;
    min-width: 180px;
    padding: .85em 1em;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 14px rgba(0, 0, 0, .14);
    font-size: .75rem;
    line-height: 1.35;
    text-align: left;
    pointer-events: none;
    transition: opacity .2s, visibility 0s .2s;
}

.service-status-bar .status:not(:hover):not(:focus-within) .status-hover {
    visibility: hidden;
    opacity: 0;
}

.service-status-bar .status:hover .status-hover,
.service-status-bar .status:focus-within .status-hover {
    transition-delay: 0s;
}

/* Keep the tooltip inside the viewport at the ends of the strip. */
.service-status-bar .bar:first-child .status-hover,
.service-status-bar .bar:nth-child(2) .status-hover {
    left: 0;
    transform: none;
}

.service-status-bar .bar:last-child .status-hover,
.service-status-bar .bar:nth-last-child(2) .status-hover {
    left: auto;
    right: 0;
    transform: none;
}

.service-status-bar .status-hover h4 {
    font-size: 1em;
    line-height: inherit;
    padding-bottom: .35em;
}

.service-status-bar .status-hover .status-state {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: .85em;
}

.service-status-bar .status-hover .status-services,
.service-status-bar .status-hover .date-range {
    color: #666;
    white-space: nowrap;
}

/* Scale and legend */

.service-status-bar .bar-scale {
    display: flex;
    justify-content: space-between;
    margin-top: .6em;
    font-size: .75rem;
    color: #666;
}

.service-status-bar .bar-legend {
    display: flex;
    flex-wrap: wrap;
    gap: .5em 1.4em;
    margin: 1.2em 0 0;
    padding: 0;
    list-style: none;
    font-size: .75rem;
    color: #444;
}

.service-status-bar .bar-legend li {
    display: flex;
    align-items: center;
    gap: .5em;
}

.service-status-bar .bar-legend li::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex: none;
}

.service-status-bar .bar-legend .state-operational::before { background: var(--status-operational); }
.service-status-bar .bar-legend .state-ongoing::before     { background: var(--status-ongoing); }
.service-status-bar .bar-legend .state-resolved::before    { background: var(--status-resolved); }
.service-status-bar .bar-legend .state-maintenance::before { background: var(--status-maintenance); }

/* Below ~600px, 91 buckets is under 4px each — halve the resolution. */
@media (max-width: 600px) {
    .service-status-bar .bars {
        gap: 2px;
    }

    .service-status-bar .bar:nth-child(even) {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .service-status-bar .status,
    .service-status-bar .status-hover {
        transition: none;
    }
}

/* ---------------------------------------------------------------- detail page */

.service-status-detail .status-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1em 2em;
    margin: 1em 0 1.5em;
    padding: 1em 1.25em;
    border-left: 3px solid var(--status-accent);
    background: #f7f8f9;
    border-radius: 4px;
}

.service-status-detail .status-badge {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: .8rem;
    color: var(--status-accent);
}

.service-status-detail .status-times {
    display: flex;
    flex-wrap: wrap;
    gap: .75em 2em;
    margin: 0;
}

.service-status-detail .status-times div {
    display: grid;
    gap: .15em;
}

.service-status-detail .status-times dt {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #6b7683;
    font-weight: 600;
}

.service-status-detail .status-times dd {
    margin: 0;
    font-variant-numeric: tabular-nums;
}

.service-status-detail .status-facets {
    list-style: none;
    margin: 0 0 1.5em;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .4em 2em;
    font-size: .85rem;
}

.service-status-detail .status-facets .facet-label {
    text-transform: uppercase;
    letter-spacing: .07em;
    font-size: .75em;
    color: #6b7683;
    margin-right: .5em;
}

.service-status-detail .status-threads .thread header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .4em 1em;
    margin-bottom: .4em;
}

.service-status-detail .status-threads .thread header h4 {
    padding-bottom: 0;
}

.service-status-detail .status-threads .thread .date-time {
    display: flex;
    gap: .75em;
    font-size: .8rem;
    color: #6b7683;
    font-variant-numeric: tabular-nums;
}

.service-status-detail .status-threads .thread .thread-state {
    text-transform: uppercase;
    letter-spacing: .07em;
    font-weight: 600;
    font-size: .95em;
}

.service-status-detail .status-threads .thread.status-resolved .thread-state,
.service-status-detail .status-threads .thread.status-resolved header h4 {
    color: #91bb2a;
}

.service-status-detail .status-threads .thread p:last-child {
    margin-bottom: 0;
}

/* ---------------------------------------------------------------- listings */

.status-list { margin: 1.5em 0; }

.status-list-title {
    font-size: 1.25em;
    margin-bottom: .6em;
}

.status-list .status-empty {
    color: #6b7683;
    margin: 0;
}

.status-list .status-items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .75em;
}

.status-list .status-item {
    padding: 1em 1.25em;
    background: #f7f8f9;
    border-left: 3px solid var(--status-resolved);
    border-radius: 4px;
}

.status-list .status-item.state-ongoing     { border-left-color: var(--status-ongoing); }
.status-list .status-item.state-maintenance { border-left-color: var(--status-maintenance); }

.status-list .status-item-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .5em 1em;
}

.status-list .status-item-head h3 {
    font-size: 1.05em;
    padding: 0;
    margin: 0;
}

.status-list .status-tag {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    font-weight: 600;
    color: #6b7683;
}

.status-list .status-item-times {
    display: flex;
    flex-wrap: wrap;
    gap: .4em 2em;
    margin: .6em 0 0;
}

.status-list .status-item-times div { display: grid; gap: .1em; }

.status-list .status-item-times dt {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #6b7683;
    font-weight: 600;
}

.status-list .status-item-times dd {
    margin: 0;
    font-size: .9rem;
    font-variant-numeric: tabular-nums;
}

.status-list .status-item-services {
    margin: .7em 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4em;
    font-size: .85rem;
}

.status-list .status-item-services .label {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #6b7683;
    font-weight: 600;
    margin-right: .3em;
}

.status-list .status-item-services .service {
    background: #fff;
    border: 1px solid #e2e6ea;
    padding: .1em .6em;
    border-radius: 2em;
}

/* Search + download */

.status-search {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .75em 1em;
    margin-bottom: 1.2em;
}

.status-search .field { display: grid; gap: .25em; }

.status-search label {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #6b7683;
    font-weight: 600;
}

.status-search input[type="date"] {
    padding: .45em .6em;
    border: 1px solid #d5dbe0;
    border-radius: 3px;
    font-size: .9rem;
}

.status-search .status-clear,
.status-search .status-download {
    font-size: .85rem;
    align-self: center;
}

.status-list .status-more {
    margin: 1em 0 0;
    font-size: .85rem;
    color: #6b7683;
}