:root {
    --background: #080c11;
    --card: #10161d;
    --card-hover: #151d26;
    --inside: #0c1117;

    --border: rgba(255,255,255,.06);

    --text: #e8edf3;
    --muted: #86919c;

    --green: #50e39b;
    --red: #ff6961;
    --yellow: #f4c451;
    --blue: #68a8ff;
    --gray: #687480;
}


* {
    box-sizing: border-box;
}


html {
    color-scheme: dark;
}


body {

    margin: 0;

    background: var(--background);

    color: var(--text);

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;
}


.page {

    width: min(1200px, calc(100% - 32px));

    margin: auto;

    padding:

        40px
        0
        35px;
}


.header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 25px;
}


h1 {

    margin: 0;

    font-size: 30px;

    font-weight: 650;
}


.subtitle {

    margin-top: 6px;

    color: var(--muted);

    font-size: 14px;
}


/* --------------------------
   OVERALL STATUS
--------------------------- */


.overall-card {

    display: flex;

    align-items: center;

    gap: 15px;

    padding: 19px 22px;

    margin-bottom: 22px;

    background: var(--card);

    border:

        1px solid
        var(--border);

    border-radius: 13px;
}


.status-dot {

    width: 15px;

    height: 15px;

    flex-shrink: 0;

    border-radius: 50%;

    background: var(--gray);
}


.status-dot.up {

    background: var(--green);

    box-shadow:
        0 0 14px
        rgba(80,227,155,.35);
}


.status-dot.down {

    background: var(--red);

    box-shadow:
        0 0 14px
        rgba(255,105,97,.35);
}


.status-dot.pending {

    background: var(--yellow);
}


.status-dot.maintenance {

    background: var(--blue);
}


.overall-title {

    font-size: 17px;

    font-weight: 650;
}


.overall-detail {

    margin-top: 4px;

    color: var(--muted);

    font-size: 13px;
}


/* --------------------------
   GROUPS
--------------------------- */


.group {

    margin-bottom: 12px;

    overflow: hidden;

    background: var(--card);

    border:

        1px solid
        var(--border);

    border-radius: 13px;
}


.group summary {

    display: grid;

    grid-template-columns:

        80px
        18px
        minmax(160px, 1fr)
        auto
        minmax(200px, 360px);

    align-items: center;

    gap: 14px;

    min-height: 68px;

    padding: 10px 16px;

    list-style: none;

    cursor: pointer;

    transition:
        background
        .15s ease;
}


.group summary:hover {

    background: var(--card-hover);
}


.group summary::-webkit-details-marker {

    display: none;
}


.chevron {

    display: inline-block;

    font-size: 26px;

    color: #aab3bd;

    transition:
        transform
        .18s ease;
}


.group[open] .chevron {

    transform: rotate(90deg);
}


.group-name {

    display: block;

    overflow: hidden;

    font-size: 16px;

    font-weight: 550;

    text-overflow: ellipsis;

    white-space: nowrap;
}


.group-meta {

    display: block;

    margin-top: 3px;

    color: var(--muted);

    font-size: 12px;
}


/* --------------------------
   UPTIME PILL
--------------------------- */


.uptime-pill {

    min-width: 75px;

    padding: 6px 8px;

    background: var(--green);

    color: #04150d;

    border-radius: 999px;

    text-align: center;

    font-size: 12px;

    font-weight: 750;
}


.uptime-pill.unknown {

    background:
        rgba(104,116,128,.20);

    color: #bbc4cc;
}


/* --------------------------
   STATUS BADGES
--------------------------- */


.status-badge {

    padding: 6px 10px;

    border-radius: 999px;

    font-size: 12px;

    font-weight: 650;

    white-space: nowrap;
}


.status-badge.up {

    color: var(--green);

    background:
        rgba(80,227,155,.13);
}


.status-badge.down {

    color: var(--red);

    background:
        rgba(255,105,97,.13);
}


.status-badge.pending {

    color: var(--yellow);

    background:
        rgba(244,196,81,.13);
}


.status-badge.maintenance {

    color: var(--blue);

    background:
        rgba(104,168,255,.13);
}


.status-badge.unknown {

    color: #a8b0b8;

    background:
        rgba(104,116,128,.15);
}


/* --------------------------
   HISTORY BARS
--------------------------- */


.history {

    display: grid;

    grid-template-columns:

        repeat(
            36,
            minmax(2px,1fr)
        );

    gap: 3px;

    height: 26px;
}


.bar {

    border-radius: 2px;

    background: var(--gray);

    opacity: .45;
}


.bar.up {

    background: var(--green);

    opacity: 1;
}


.bar.down {

    background: var(--red);

    opacity: 1;
}


.bar.pending {

    background: var(--yellow);

    opacity: 1;
}


.bar.maintenance {

    background: var(--blue);

    opacity: 1;
}


/* --------------------------
   MONITOR ROWS
--------------------------- */


.monitor-list {

    padding: 8px;

    background: var(--inside);

    border-top:

        1px solid
        var(--border);
}


.monitor {

    display: grid;

    grid-template-columns:

        75px
        minmax(170px,1fr)
        auto
        minmax(200px,360px);

    align-items: center;

    gap: 14px;

    min-height: 55px;

    padding: 8px 10px;

    margin: 3px 0;

    border-radius: 9px;
}


.monitor:hover {

    background:
        rgba(255,255,255,.035);
}


.monitor-name {

    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    font-size: 14px;
}


.monitor-detail {

    display: block;

    margin-top: 3px;

    color: var(--muted);

    font-size: 11px;
}


/* --------------------------
   INCIDENT
--------------------------- */


.incident-card {

    display: none;

    padding: 16px 18px;

    margin-bottom: 20px;

    border:

        1px solid
        rgba(244,196,81,.3);

    border-radius: 12px;

    background:
        rgba(244,196,81,.09);
}


.incident-title {

    margin-bottom: 5px;

    font-weight: 650;
}


.incident-content {

    color: #ced3d8;

    font-size: 14px;
}


/* --------------------------
   ERRORS
--------------------------- */


.error-box {

    display: none;

    margin-bottom: 20px;

    padding: 16px;

    border:

        1px solid
        rgba(255,105,97,.35);

    border-radius: 12px;

    background:
        rgba(255,105,97,.1);

    color: #ffaaa5;
}


/* --------------------------
   FOOTER
--------------------------- */


footer {

    margin-top: 34px;

    text-align: center;

    color: var(--muted);

    font-size: 12px;

    line-height: 1.7;
}


/* --------------------------
   MOBILE
--------------------------- */


@media (max-width: 850px) {

    .group summary {

        grid-template-columns:

            73px
            16px
            1fr
            auto;
    }


    .group summary .history {

        grid-column:

            1 / -1;

        height: 18px;
    }


    .monitor {

        grid-template-columns:

            73px
            1fr
            auto;
    }


    .monitor .history {

        grid-column:

            1 / -1;

        height: 18px;
    }

}


@media (max-width: 550px) {

    .page {

        width:
            calc(100% - 20px);

        padding-top: 24px;
    }


    h1 {

        font-size: 25px;
    }


    .group summary {

        gap: 9px;

        padding: 11px;
    }


    .monitor {

        gap: 9px;
    }

}