/* Evie Uptime — styles for the parts MudBlazor does not cover.
   ---------------------------------------------------------------------------
   The palette lives in EverflowTheme.cs, matched to the Azure FinOps
   application. Nothing here should hard-code a brand colour: the tokens below
   name the brand values once, and everything else refers to those or to the
   --mud-palette-* variables MudBlazor emits from the theme. */

:root {
    --ef-magenta: #ff0088;
    --ef-magenta-ink: #c2006a;
    --ef-aquamarine: #7fffd4;
    --ef-teal: #22687e;
    --ef-green: #0a5f07;
    --ef-amber: #ffcc33;
    --ef-red: #e31d3d;
    --ef-ink: #282828;
    --ef-mist: #f5f5f5;

    /* RAG. Brand green and red rather than generic ones, with a mid-green for
       the heatmap's second band so the four steps stay distinguishable. */
    --ef-rag-healthy: var(--ef-green);
    --ef-rag-healthy-soft: #3f8c3b;
    --ef-rag-degraded: var(--ef-amber);
    --ef-rag-degraded-deep: #d98b00;
    --ef-rag-unavailable: var(--ef-red);
    --ef-rag-unknown: #9e9e9e;

    /* Brand amber is a FILL colour. As text on white it lands around 1.7:1, well
       under the 4.5:1 that body text needs, so text uses of "warning" get a
       darkened amber. Fills, chips and indicators keep the brand value. */
    --ef-amber-text: #8a6100;
}

html, body {
    font-family: 'Altform-Regular', sans-serif;
    background: var(--ef-mist);
}

/* FinOps runs a 41.25px app bar rather than MudBlazor's 48px dense default.
   Matched explicitly so the two applications line up when open side by side. */
.mud-appbar.mud-appbar-dense .mud-toolbar,
.mud-appbar.mud-appbar-dense .mud-toolbar-dense {
    height: 41.25px;
    min-height: 41.25px;
}

/* Warning text, legibly. See --ef-amber-text above. */
.mud-alert-text-warning,
.mud-alert-text-warning .mud-alert-icon .mud-icon-root {
    color: var(--ef-amber-text);
}

.mud-alert-text-warning { background-color: rgba(255, 204, 51, 0.16); }

.loading { display: flex; align-items: center; justify-content: center; height: 100vh; }
.loading-text { font-size: 1rem; color: #5b6472; font-family: 'Altform-Regular', sans-serif; }

#blazor-error-ui {
    background: #fde7e9;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }

/* The environment picker sits on the magenta bar, so it inherits the bar's text
   colour rather than the form defaults. */
.uptime-appbar-select .mud-input-slot,
.uptime-appbar-select .mud-input .mud-input-slot,
.uptime-appbar-select .mud-select-input .mud-input-slot,
.uptime-appbar-select .mud-input-adornment .mud-icon-root {
    color: var(--mud-palette-appbar-text);
}

.uptime-appbar-select .mud-input.mud-input-text:before,
.uptime-appbar-select .mud-input.mud-input-text:after {
    border-color: rgba(255, 255, 255, 0.5);
}

/* --- RAG states -----------------------------------------------------------
   Colour is never the only signal: green is a circle, amber a triangle, red a
   square and unknown a faded rounded square, and every use carries a label or
   a tooltip. That keeps the map readable without colour vision. */
.rag-dot { display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: middle; }
.rag-healthy { background: var(--ef-rag-healthy); border-radius: 50%; }
.rag-degraded { background: var(--ef-rag-degraded); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.rag-unavailable { background: var(--ef-rag-unavailable); }
.rag-unknown { background: var(--ef-rag-unknown); border-radius: 2px; opacity: 0.55; }

/* The tooltip's service-name pill. */
.node-pill {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--ef-ink);
    color: #fff;
    font-family: 'Altform-SemiBold', sans-serif;
    font-size: 0.78rem;
    letter-spacing: 0.01em;
}

/* --- Dependency map ------------------------------------------------------- */
/* The SVG sizes its own viewBox to the busiest column, so a fixed CSS height
   would squash it. */
.map-surface { width: 100%; height: auto; background: var(--mud-palette-surface); border-radius: 4px; }
.map-node { cursor: pointer; }
.map-node text { pointer-events: none; }

/* The tier caption sits above each band, so the vertical order of the map is
   stated rather than left to be inferred. */
.map-tier-label {
    fill: var(--mud-palette-text-secondary);
    font-family: 'Altform-SemiBold', sans-serif;
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.map-node-name {
    fill: var(--mud-palette-text-primary);
    font-family: 'Altform-Regular', sans-serif;
    font-size: 11px;
}

/* The node count under each server, quieter than the name it belongs to. */
.map-node-meta {
    fill: var(--mud-palette-text-secondary);
    font-family: 'Altform-Regular', sans-serif;
    font-size: 9.5px;
}

/* Shown above the stack when a service has more replicas than the four rack
   units drawn. */
.node-replicas {
    fill: var(--mud-palette-text-secondary);
    font-family: 'Altform-SemiBold', sans-serif;
    font-size: 9.5px;
}
.map-edge { stroke-width: 1.4; fill: none; }
.map-edge-impacting { stroke-width: 2.6; }

/* --- Line charts ----------------------------------------------------------
   Hand-rolled SVG so the axes can be titled and missing data can be shown as
   missing. Sized by the container; the viewBox handles the rest. */
.metric-chart { width: 100%; height: 260px; display: block; }

.chart-grid { stroke: var(--mud-palette-lines-default); stroke-width: 1; opacity: 0.45; }
.chart-axis { stroke: var(--mud-palette-text-secondary); stroke-width: 1; opacity: 0.6; }

/* Brand magenta, darkened. The full #FF0088 shimmers at a two-pixel stroke on
   white, which is tiring to read a month of data through. */
.chart-line {
    fill: none;
    stroke: var(--ef-magenta-ink);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.chart-point-solo { fill: var(--ef-magenta-ink); }

/* Invisible hover targets, so every reading has a tooltip without cluttering
   the line with dots. */
.chart-hit { fill: transparent; stroke: none; cursor: crosshair; }
.chart-hit:hover { fill: var(--ef-magenta); fill-opacity: 0.35; }

.chart-tick {
    fill: var(--mud-palette-text-secondary);
    font-size: 11px;
    font-family: 'Altform-Regular', sans-serif;
}

.chart-tick-y { text-anchor: end; }

.chart-axis-title {
    fill: var(--mud-palette-text-secondary);
    font-size: 12px;
    font-family: 'Altform-SemiBold', sans-serif;
}

/* The objective line: present but never competing with the data. */
.chart-reference {
    stroke: var(--ef-rag-healthy);
    stroke-width: 1.5;
    stroke-dasharray: 6 4;
    opacity: 0.85;
}

.chart-reference-label {
    fill: var(--ef-rag-healthy);
    font-size: 11px;
    font-family: 'Altform-Regular', sans-serif;
}

/* A band where nothing was measured — a gap the viewer can see and name,
   rather than an unexplained break in the line. */
.chart-nodata {
    fill: var(--mud-palette-text-disabled);
    opacity: 0.12;
}

.chart-help-tooltip { cursor: help; }

/* --- Uptime heatmap -------------------------------------------------------
   One column per day, 24 stacked cells per column. MudTooltip wraps each cell
   in an inline-block root, which would otherwise make the cells flow across
   the row instead of down the column — hence the explicit grid on the day
   column and the block display on the tooltip root. */
.heatmap-frame { display: flex; gap: 8px; align-items: flex-start; overflow-x: auto; padding-bottom: 4px; }

.heatmap { display: grid; grid-auto-flow: column; gap: 2px; align-items: start; }
.heatmap > div { display: grid; grid-template-rows: repeat(24, 13px); }
.heatmap .mud-tooltip-root { display: block; width: 11px; height: 11px; }
.heatmap-cell { width: 11px; height: 11px; border-radius: 2px; }

.heatmap-hours { display: grid; grid-template-rows: repeat(24, 13px); }

.heatmap-hour-label {
    font-size: 9px;
    line-height: 13px;
    color: var(--mud-palette-text-secondary);
    text-align: right;
    padding-right: 2px;
    white-space: nowrap;
}

/* Rotated so dates fit an 11px column without colliding; the row is given room
   below so the labels are not clipped by the panel. */
.heatmap-days {
    display: grid;
    grid-auto-flow: column;
    gap: 2px;
    margin-top: 6px;
    height: 46px;
}

.heatmap-day-label {
    width: 11px;
    font-size: 9px;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    transform: rotate(60deg);
    transform-origin: left top;
}

.heatmap-key {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
}

.heatmap-swatch { width: 11px; height: 11px; border-radius: 2px; display: inline-block; }
.heatmap-swatch-nodata { background: #e0e0e0; opacity: 0.45; }
.heatmap-swatch-excluded {
    background: repeating-linear-gradient(45deg, #cfd8dc, #cfd8dc 3px, #eceff1 3px, #eceff1 6px);
}

/* --- Log viewer -----------------------------------------------------------
   Monospace and dense: reading logs is scanning, and proportional text at
   comfortable line height halves how much fits on a screen. Altform is not a
   monospace family, so this is the one place the brand face is not used. */
.log-viewport {
    max-height: 560px;
    overflow: auto;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    background: var(--ef-mist);
    padding: 6px 0;
    font-family: "Cascadia Mono", Consolas, "Courier New", monospace;
    font-size: 0.78rem;
    line-height: 1.45;
}

.log-line {
    display: flex;
    gap: 10px;
    padding: 1px 12px;
    white-space: pre-wrap;
    word-break: break-word;
    border-left: 3px solid transparent;
}

.log-line:hover { background: var(--mud-palette-action-default-hover); }

/* Severity is carried by the level token and a left border, not by colouring
   the whole line, which would make an error-heavy window unreadable. */
.log-warn { border-left-color: var(--ef-rag-degraded); }
.log-error { border-left-color: var(--ef-rag-unavailable); }

.log-time { flex: 0 0 auto; opacity: 0.65; }
.log-level { flex: 0 0 34px; font-weight: 600; }
.log-level-warning { color: var(--ef-rag-degraded-deep); }
.log-level-error, .log-level-fatal { color: var(--ef-rag-unavailable); }
.log-level-information { color: var(--ef-teal); }
.log-level-debug, .log-level-verbose { opacity: 0.6; }
.log-level-unknown { opacity: 0.4; }

.log-pod { flex: 0 0 auto; opacity: 0.55; }
.log-message { flex: 1 1 auto; }