/*
 * Dashboard styling. Deliberately thin: Bootstrap does the layout, this file only adds
 * the three board states and the "readable from across the room" sizing.
 */

:root {
    --state-critical: #d7263d;
    --state-warning: #f6c445;
    --state-calm: #f4f6f8;
}

body {
    /* The state colour is a whole-page signal, so it must not stop at the fold. */
    min-height: 100vh;
    transition: background-color 200ms linear;
}

/* --- Board state -------------------------------------------------------------- */

body.state-calm {
    background-color: var(--state-calm);
    color: #1b1f23;
}

body.state-warning {
    background-color: var(--state-warning);
    color: #1b1f23;
}

/*
 * Text is flipped to white on the red state; without it the default near-black body
 * colour sits at roughly 4:1 against #d7263d, which is exactly the range where a wall
 * display at a few metres becomes guesswork.
 */
body.state-critical {
    background-color: var(--state-critical);
    color: #ffffff;
}

body.state-critical a:not(.btn),
body.state-critical .navbar-brand,
body.state-critical .navbar-text,
body.state-critical .nav-link {
    color: #ffffff;
}

body.state-critical .state-banner {
    border-color: rgba(255, 255, 255, 0.5);
}

/* The cards keep their own light background so event text stays black-on-white. */
body.state-critical .card,
body.state-warning .card,
body.state-critical .table,
body.state-warning .table {
    color: #1b1f23;
}

.app-navbar {
    background-color: rgba(255, 255, 255, 0.75);
}

body.state-critical .app-navbar {
    background-color: rgba(0, 0, 0, 0.25);
}

/* --- Board legibility ---------------------------------------------------------- */

.board-table {
    /* Fixed layout plus a wrapping message column is what keeps the board free of the
       horizontal scrollbar a wall display can never reach. */
    table-layout: fixed;
    width: 100%;
}

.board-table td,
.board-table th {
    vertical-align: middle;
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
}

.board-table .col-severity {
    width: 8rem;
}

.board-table .col-application {
    width: 16rem;
}

.board-table .col-when {
    width: 11rem;
}

.board-table .col-status {
    width: 9rem;
}

.board-table .col-actions {
    width: 14rem;
}

.board-message {
    /* Long single-token messages (stack traces, URLs) must wrap rather than widen. */
    overflow-wrap: anywhere;
}

/* Application name at the same weight as the message, per docs/05-dashboard.md. */
.board-application,
.board-message {
    font-size: 1.05rem;
    font-weight: 400;
}

.board-type {
    font-family: var(--bs-font-monospace);
    font-size: 0.9rem;
}

.state-banner {
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 0.5rem;
    background-color: rgba(255, 255, 255, 0.75);
}

.metric-value {
    font-variant-numeric: tabular-nums;
}

.context-json {
    max-height: 30rem;
    overflow: auto;
}

.stale {
    color: var(--state-critical);
    font-weight: 600;
}

body.state-critical .stale {
    color: #ffffff;
    text-decoration: underline;
}