:root {
    --body-background-color: #0d1117;
    --body-text-color: #e6edf3;
    --card-background-color: #161b22;
    --nav-background-color: #161b22;
    --nav-border-bottom-color: #30363d;
    --nav-current-border-bottom-color: #e6edf3;
    --card-border-color: #30363d;
    --down-border-left-color: #f85149;
    --down-background-color: #490202;
    --degraded-border-left-color: #d29922;
    --degraded-background-color: #4d2d00;
    --up-border-left-color: #3fb950;
    --up-background-color: #04260f;
    --tag-color: #e6edf3;
    --tag-up-background-color: #238636;
    --tag-down-background-color: #da3633;
    --tag-degraded-background-color: #9e6a03;
    --change-background-color: #9e6a03;
    --error-button-border-color: #f85149;
    --error-button-background-color: #da3633;
    --error-button-color: #ffffff;
    --submit-button-border-color: #238636;
    --submit-button-background-color: #2ea043;
    --submit-button-color: #ffffff;
    --graph-opacity: 1;
    --graph-filter: none;
}

/* Resize logo image */
nav a.logo > img {
    height: 2.5rem !important;
}

/* Hide logo text */
nav a.logo > div {
    display: none !important;
}

/* Bold navbar links */
nav ul > li > a {
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.025rem !important;
}

/* Center header text */
main > header {
    text-align: center !important;
}

/* Style operational articles */
main > header + article.up {
    background: var(--up-background-color) !important;
    border-color: var(--up-border-left-color) !important;
    font-size: 1.2rem !important;
    font-weight: bold !important;
}

/* Style degraded articles */
main > section > article.down-active.degraded {
    background: var(--change-background-color) !important;
    border-color: var(--degraded-border-left-color) !important;
}

/* Hide all form divs except the third one */
main > div > form > div {
    display: none !important;
}

/* Show only the third form div (30 Days) */
main > div > form > div:nth-child(3) {
    display: block !important;
}

/* Style form labels */
main > div > form > div > input:checked + label {
    font-size: 0.875rem !important;
    font-weight: normal !important;
}

/* Hide graph in live status section */
main > section.live-status > article.graph {
    --background: none !important;
    background-image: none !important;
}

/* Hide the second div in live status articles */
main > section.live-status > article > div:nth-of-type(2) {
    display: none !important;
}

/* Flex layout for live status articles */
main > section.live-status > article {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
}

/* Align h4 to the left and push uptime text to the right */
main > section.live-status > article > h4 {
    margin: 0 auto 0 0 !important;
}

/* Keep uptime on the top row */
main > section.live-status > article > h4 + div {
    white-space: nowrap;
}

/* Push other info to the next row */
main > section.live-status > article > div:not(:first-of-type) {
    flex-basis: 100%;
}

/* Style status text in live status articles */
main > section.live-status > article > h4 + div > span {
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.025rem !important;
}

/* Apply color to uptime text when article status is UP */
main > section.live-status > article.up > h4 + div > span {
    color: var(--up-border-left-color) !important;
}

/* Apply color to uptime text when article status is DEGRADED */
main > section.live-status > article.degraded > h4 + div > span {
    color: var(--degraded-border-left-color) !important;
}

/* Apply color to uptime text when article status is DOWN */
main > section.live-status > article.down > h4 + div > span {
    color: var(--down-border-left-color) !important;
}

/* Uptime History Bar Container */
main > section.live-status > article > .uptime-history {
    flex-basis: 100%;
    display: flex;
    gap: clamp(3px, 1vw, 6px);
    height: 25px;
    margin-top: 0.75rem;
    order: 999;
}

/* Individual day bar */
main > section.live-status > article > .uptime-history > .day {
    flex: 1;
    background-color: var(--up-border-left-color);
    border-radius: 2px;
    opacity: 0.8;
    transition: opacity 0.2s, transform 0.2s;
    cursor: pointer;
    position: relative;
}

/* Hover effect */
main > section.live-status > article > .uptime-history > .day:hover {
    opacity: 1;
    transform: scaleY(1.1);
}

/* Minor Outage (< 30 minutes) */
main > section.live-status > article > .uptime-history > .day.minor {
    background-color: var(--tag-degraded-background-color);
}

/* Partial Outage (30-59 minutes) */
main > section.live-status > article > .uptime-history > .day.partial {
    background-color: var(--degraded-border-left-color);
}

/* Major Outage (≥ 60 minutes) */
main > section.live-status > article > .uptime-history > .day.major {
    background-color: var(--down-border-left-color);
}

/* Tooltip */
main > section.live-status > article > .uptime-history > .day::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.9);
    color: #ffffff;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    font-size: 0.75rem;
    white-space: pre-line;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    margin-bottom: 0.25rem;
    z-index: 1000;
    text-align: left;
    line-height: 1.5;
    min-width: 220px;
    max-width: 300px;
    width: max-content;
}

/* Show tooltip on hover */
main > section.live-status > article > .uptime-history > .day:hover::before {
    opacity: 1;
}

/* Uptime History Labels Container */
main > section.live-status > article > .uptime-history-labels {
    flex-basis: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 0.375rem;
    font-size: 0.75rem;
    color: var(--body-text-color);
    opacity: 0.6;
    order: 1000;
}

/* Left label (30 days ago) */
main > section.live-status > article > .uptime-history-labels > .label-left {
    text-align: left;
}

/* Right label (Today) */
main > section.live-status > article > .uptime-history-labels > .label-right {
    text-align: right;
}