/* What OpsCenter adds to the suite theme in app.css: status
   dots, severity colours, usage meters and the dashboard's tiles. */
:root {
    --sev-critical: #d92626;
    --sev-high: #e8590c;
    --sev-warning: #b7791f;
    --sev-normal: #198754;
    --sev-info: #0d6efd;
    --state-unknown: #a7a9ac;
}

.sidebar-wordmark {
    display: flex;
    align-items: center;
    min-width: 0;
}

/* ---- Status dots -------------------------------------------------------
   "● Online": the dot carries the state, the words say which. */
.dot {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    white-space: nowrap;
}

.dot::before {
    content: '';
    flex-shrink: 0;
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    background: var(--state-unknown);
}

.dot-ok::before { background: var(--sev-normal); }
.dot-bad::before { background: var(--sev-critical); }
.dot-warn::before { background: #f0ad00; }
.dot-unknown { color: #6b6b6f; }

/* ---- Severities -------------------------------------------------------- */
.sev {
    display: inline-block;
    min-width: 5.25rem;
    padding: .2rem .5rem;
    border-radius: .25rem;
    color: #fff;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-align: center;
    text-transform: uppercase;
}

.sev-critical { background: var(--sev-critical); }
.sev-high { background: var(--sev-high); }
.sev-warning { background: #f0ad00; color: var(--brand-black); }
.sev-normal { background: var(--sev-normal); }
.sev-info { background: var(--sev-info); }

/* The feed of things needing attention: a coloured edge per severity. */
.alert-feed .list-group-item {
    border-left: 4px solid transparent;
}

.alert-feed .feed-critical { border-left-color: var(--sev-critical); }
.alert-feed .feed-high { border-left-color: var(--sev-high); }
.alert-feed .feed-warning { border-left-color: #f0ad00; }
.alert-feed .feed-normal { border-left-color: var(--sev-normal); }
.alert-feed .feed-info { border-left-color: var(--sev-info); }

/* ---- Usage meters ------------------------------------------------------ */
.meter {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.meter .progress {
    width: 56px;
    height: 6px;
}

.meter-ok .progress-bar { background: var(--sev-normal); }
.meter-warn .progress-bar { background: #f0ad00; }
.meter-bad .progress-bar { background: var(--sev-critical); }

/* ---- Dashboard --------------------------------------------------------- */
.stat-tile .stat-label {
    color: #6b6b6f;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.stat-tile .stat-value {
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.stat-tile .stat-icon {
    color: var(--brand-red);
    font-size: 1.5rem;
}

.health-chip {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .75rem;
    border: 1px solid #e3e3e5;
    border-radius: 2rem;
    background: #fff;
    font-size: .875rem;
    white-space: nowrap;
}

.health-chip b {
    font-variant-numeric: tabular-nums;
}

/* A card's heading or footer strip keeps its own height: when the card is
   stretched to match its neighbour, the spare room goes below the content
   instead of into the strip. */
.card > .card-body.border-bottom,
.card > .card-body.border-top {
    flex-grow: 0;
}

/* A table in a card starts and ends on the card's own padding, so its
   first and last columns line up with the heading above. */
.card > .table-responsive > .table > * > tr > :first-child {
    padding-left: var(--bs-card-spacer-x);
}

.card > .table-responsive > .table > * > tr > :last-child {
    padding-right: var(--bs-card-spacer-x);
}

/* A client's name above its servers in the status table. */
.group-row > td {
    background: #f7f7f8;
    color: var(--brand-black);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* Label / value pairs on a server or application page. */
.kv {
    display: grid;
    grid-template-columns: minmax(8rem, 38%) 1fr;
    gap: .45rem 1rem;
    margin: 0;
}

.kv dt {
    color: #6b6b6f;
    font-weight: 500;
}

.kv dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.mono {
    font-family: var(--bs-font-monospace);
    font-size: .85em;
}

/* The token is shown once: easy to select in full. */
.token-box {
    padding: .75rem 1rem;
    border: 1px dashed var(--brand-grey);
    border-radius: 6px;
    background: #fff;
    font-family: var(--bs-font-monospace);
    overflow-wrap: anywhere;
    user-select: all;
}

/* What a server tool printed (ping, trace route), as it came. */
.tool-output {
    max-height: 32rem;
    padding: .75rem 1rem;
    border-radius: 6px;
    background: var(--brand-black);
    color: #f1f1f2;
    font-size: .8rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* The sign-in page sits on a slightly darker pastel grey than the rest of
   the system, so the white card stands out. */
.login-wrap {
    background: #d9dce1;
}

/* ---- Label capitalisation ----------------------------------------------
   Every label reads with Each Word Capitalised: field labels, column
   headings, page and card headings, buttons and menu items. It is done here
   rather than in each page's text, so new labels follow without thought.
   Values (names, addresses, messages, hints) are left as they are, and
   words already in capitals (CPU, SSH, IP) stay that way. */
.form-label,
.form-check-label,
th,
.kv dt:not(.mono),
h1, h2, h3,
.btn,
.dropdown-item,
.sidebar-link,
.nav-link,
.health-chip,
.badge {
    text-transform: capitalize;
}

/* A code shown inside a heading is a value and keeps its own case. */
h1 code, th code {
    text-transform: none;
}