/* STL Cloud Capture - analytics styles
   -------------------------------------------------------------------------
   Scoped under #tt-stats so nothing here reaches the rest of the storefront.

   The palette is the capture portal's, restated rather than shared: the two
   pages load different stylesheets and neither should depend on the other
   being present. If the portal's colours change, these want changing too.

   This file is stl-stats-1.1.0.css.

   History:
     1.0.0  first version
     1.0.1  a visitor who is not an admin gets a plain "page not found" with a
            way back, rather than the page's heading above a grey note saying
            it is unavailable
     1.0.2  that not-found state fills the viewport instead of sitting in the
            top third with the footer pulled up behind it
     1.1.0  the container hour is priced at $1.12 rather than $0.80, which
            adds the CPU and memory Modal bills alongside the L4. The card says
            "estimated", and the real invoice sits beside it - fetching it
            automatically needs Modal's billing API, which is Team and
            Enterprise only
*/

#tt-stats {
    --ts-bg: #000;
    --ts-card: #0e0e0e;
    --ts-card2: #1a1a1a;
    --ts-line: rgba(255, 255, 255, .06);
    --ts-line2: rgba(255, 255, 255, .1);
    --ts-muted: rgba(255, 255, 255, .6);
    --ts-faint: rgba(255, 255, 255, .35);
    --ts-green: #0bfb2d;
    --ts-amber: #ffc200;
    --ts-red: #ff4d4f;
    --ts-blue: #3aa0ff;
    --ts-font: 'SF Pro', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
    max-width: 1540px;
    margin: 0 auto;
    padding: 120px 40px 100px;
    background: var(--ts-bg);
    color: #fff;
    font-family: var(--ts-font);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-align: left
}

#tt-stats * {
    box-sizing: border-box
}

#tt-stats .ts-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 26px
}

#tt-stats h1 {
    font-size: 40px;
    font-weight: 700;
    letter-spacing: -.03em;
    margin: 0;
    color: #fff
}

#tt-stats h2 {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.02em;
    margin: 0;
    color: #fff
}

/* --- range buttons ------------------------------------------------------ */

#tt-stats .ts-range {
    display: flex;
    gap: 6px;
    background: var(--ts-card);
    border: 1px solid var(--ts-line);
    border-radius: 999px;
    padding: 4px
}

#tt-stats .ts-rbtn {
    border: 0;
    background: transparent;
    color: var(--ts-muted);
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 999px;
    cursor: pointer
}

#tt-stats .ts-rbtn:hover {
    color: #fff
}

#tt-stats .ts-rbtn.is-on {
    background: #fff;
    color: #000
}

#tt-stats .ts-rbtn:focus-visible {
    outline: 2px solid rgba(255, 255, 255, .55);
    outline-offset: 1px
}

#tt-stats .ts-msg {
    color: var(--ts-faint);
    font-size: 15px;
    padding: 60px 0
}

/* What somebody sees if they reach this page without being an admin. Centred
   and given room, because it is the whole page for them rather than a note
   above something else. */
/* Fills the viewport rather than sitting in the top third with the footer
   pulled up behind it. 62vh with the page's own padding lands the message at
   about the same height as a real not-found page, and the footer where it
   would normally be. */
#tt-stats .ts-gone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 62vh;
    padding: 60px 20px;
    max-width: 46ch;
    margin: 0 auto
}

#tt-stats .ts-gone-title {
    font-size: 34px;
    font-weight: 700;
    letter-spacing: -.03em;
    margin: 0 0 12px;
    color: #fff
}

#tt-stats .ts-gone-body {
    font-size: 16px;
    line-height: 1.6;
    color: var(--ts-muted);
    margin: 0 0 26px
}

#tt-stats .ts-gone-link {
    display: inline-block;
    background: #fff;
    color: #000;
    text-decoration: none;
    font-size: 15px;
    font-weight: 700;
    padding: 12px 26px;
    border-radius: 999px
}

#tt-stats .ts-gone-link:hover {
    opacity: .88
}

#tt-stats .ts-gone-link:focus-visible {
    outline: 2px solid rgba(255, 255, 255, .55);
    outline-offset: 2px
}

/* --- the number cards --------------------------------------------------- */

/* auto-fit rather than a fixed count, so six cards become three rows of two
   on a laptop without a breakpoint for every width. */
#tt-stats .ts-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
    margin-bottom: 26px
}

#tt-stats .ts-card {
    background: var(--ts-card);
    border: 1px solid var(--ts-line);
    border-radius: 16px;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0
}

#tt-stats .ts-card-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ts-faint)
}

#tt-stats .ts-card-value {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.15;
    overflow-wrap: anywhere
}

#tt-stats .ts-card-sub {
    font-size: 13px;
    color: var(--ts-muted)
}

/* --- panels ------------------------------------------------------------- */

#tt-stats .ts-panel {
    background: var(--ts-card);
    border: 1px solid var(--ts-line);
    border-radius: 20px;
    padding: 22px 24px;
    margin-bottom: 14px;
    min-width: 0
}

#tt-stats .ts-panel-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px
}

#tt-stats .ts-legend {
    font-size: 13px;
    color: var(--ts-faint);
    white-space: nowrap
}

#tt-stats .ts-key {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    margin: 0 5px 0 12px;
    vertical-align: -1px
}

#tt-stats .ts-key-ok {
    background: var(--ts-green)
}

#tt-stats .ts-key-bad {
    background: var(--ts-red)
}

#tt-stats .ts-split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 14px
}

#tt-stats .ts-split .ts-panel {
    margin-bottom: 0
}

#tt-stats .ts-empty {
    color: var(--ts-faint);
    font-size: 14px;
    margin: 0;
    padding: 40px 0;
    text-align: center
}

/* --- charts ------------------------------------------------------------- */

#tt-stats .ts-chart {
    width: 100%
}

#tt-stats .ts-svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible
}

#tt-stats .ts-grid {
    stroke: rgba(255, 255, 255, .07);
    stroke-width: 1
}

#tt-stats .ts-axis {
    fill: var(--ts-faint);
    font-size: 11px;
    font-family: var(--ts-font)
}

#tt-stats .ts-bar-ok {
    fill: var(--ts-green)
}

#tt-stats .ts-bar-bad {
    fill: var(--ts-red)
}

#tt-stats .ts-bar-cost {
    fill: var(--ts-blue)
}

#tt-stats rect:hover {
    opacity: .82
}

#tt-stats .ts-line {
    fill: none;
    stroke: var(--ts-green);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round
}

#tt-stats .ts-area {
    fill: rgba(11, 251, 45, .1);
    stroke: none
}

/* Invisible, and wide enough to be easy to hit - the dot exists so the
   tooltip has something to hang on, not to be seen. */
#tt-stats .ts-hit {
    fill: transparent
}

#tt-stats .ts-hit:hover {
    fill: rgba(255, 255, 255, .18)
}

/* --- labelled bars ------------------------------------------------------ */

#tt-stats .ts-bl {
    display: grid;
    grid-template-columns: 108px 1fr 84px;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    font-size: 14px
}

#tt-stats .ts-bl-label {
    color: var(--ts-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

#tt-stats .ts-bl-track {
    background: rgba(255, 255, 255, .06);
    border-radius: 999px;
    height: 10px;
    overflow: hidden
}

#tt-stats .ts-bl-fill {
    height: 100%;
    border-radius: 999px;
    background: rgba(255, 255, 255, .35)
}

#tt-stats .ts-bl-ok {
    background: var(--ts-green)
}

#tt-stats .ts-bl-warn {
    background: var(--ts-amber)
}

#tt-stats .ts-bl-n {
    color: var(--ts-faint);
    font-size: 13px;
    text-align: right;
    white-space: nowrap
}

/* --- the day by day table ---------------------------------------------- */

/* Scrolls sideways rather than wrapping. Eight columns of numbers reflow into
   an unreadable mess on a narrow screen, and a table people scroll is better
   than one they cannot parse. */
#tt-stats .ts-tablewrap {
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .22) transparent
}

#tt-stats .ts-tablewrap::-webkit-scrollbar {
    height: 10px
}

#tt-stats .ts-tablewrap::-webkit-scrollbar-track {
    background: transparent
}

#tt-stats .ts-tablewrap::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .22);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box
}

#tt-stats .ts-tr {
    display: grid;
    grid-template-columns: 110px repeat(7, minmax(96px, 1fr));
    align-items: center;
    border-top: 1px solid var(--ts-line);
    font-size: 14px;
    min-width: 760px
}

#tt-stats .ts-tr>* {
    padding: 11px 10px 11px 0;
    color: var(--ts-muted);
    white-space: nowrap
}

#tt-stats .ts-th {
    border-top: none;
    border-bottom: 1px solid var(--ts-line)
}

#tt-stats .ts-th>* {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ts-faint);
    font-weight: 600;
    padding-bottom: 9px
}

/* The day is what the row is about, so it is the only thing at full
   strength - the same reasoning as the captures list. */
#tt-stats .ts-td-day {
    color: #fff;
    font-weight: 700
}

#tt-stats .ts-td-warn {
    color: var(--ts-amber)
}

#tt-stats .ts-foot {
    color: var(--ts-faint);
    font-size: 13px;
    margin: 18px 0 0;
    max-width: 90ch
}

/* --- narrow ------------------------------------------------------------- */

@media (max-width:640px) {
    #tt-stats {
        padding: 90px 18px 70px;
        font-size: 15px
    }

    #tt-stats h1 {
        font-size: 30px
    }

    #tt-stats .ts-panel {
        padding: 18px 16px;
        border-radius: 16px
    }

    #tt-stats .ts-card-value {
        font-size: 26px
    }

    #tt-stats .ts-bl {
        grid-template-columns: 92px 1fr 68px
    }

    /* The legend sits under the heading rather than beside it, where there is
       no longer room for both. */
    #tt-stats .ts-panel-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px
    }

    /* Less on a phone, where the header and footer already take a good share
       of the screen and 62vh would push the button below the fold. */
    #tt-stats .ts-gone {
        min-height: 48vh;
        padding: 40px 12px
    }

    #tt-stats .ts-gone-title {
        font-size: 27px
    }
}