/*
   Monitoring V2 (employee /monitoring2, client /infrastructure2): prefix m2-. Loaded after app.css (Components\App.razor),
   whose shared rules it refines (panel, kpis, table, sev, subtab). TTech colours: olive #8d7f56 (--accent), gold #e0bf3f,
   beige background, white panels; severity colours from Severities.Color (inline --sev / --sev-tint).
   Debugging: F12 > Elements on the element, the m2- rule here.
*/

:root {
    --m2-gold: #e0bf3f;
    --m2-gold-soft: #fdf6d8;
}
/* Dark theme (html[data-theme="dark"]; the other colours are the tokens of app.css) */
:root[data-theme="dark"] {
    --m2-gold-soft: #3a3217;
}

/* ---- Status chip, chips, red values ---- */
.m2-status { white-space: nowrap; }
.m2-chip { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--chip); color: var(--muted);
    font-size: 0.72rem; font-weight: 800; letter-spacing: 0.2px; vertical-align: middle; }
.m2-chip.sim { background: var(--m2-gold-soft); color: var(--gold-text); border: 1px solid var(--m2-gold); }
.m2-chip.key { margin: 0; background: var(--accent-soft); color: var(--text); }
.m2-chip.key a { color: var(--muted); font-weight: 900; text-decoration: none; }
.m2-chip.key a:hover { color: var(--bad); }
.m2-bad { color: var(--bad); font-weight: 700; }

/* ---- Tiles of the overview and of the client's home ---- */
.m2-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.m2-tile { display: flex; flex-direction: column; gap: 10px; border-left: 6px solid var(--good); color: var(--text); text-decoration: none; transition: box-shadow 0.15s; }
.m2-tile:hover { box-shadow: 0 2px 10px rgba(141, 127, 86, 0.25); }
.m2-tile-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.m2-tile-name { font-size: 1.02rem; font-weight: 900; }
.m2-tile-sub { color: var(--muted); font-size: 0.8rem; }
.m2-tile-body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 10px; align-items: end; }
.m2-tile-figure { display: flex; flex-direction: column; gap: 2px; }
.m2-tile-figure .label { color: var(--muted); font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.3px; }
.m2-tile-figure .value { font-size: 1.3rem; font-weight: 900; line-height: 1.1; }
.m2-tile-figure small { color: var(--muted); font-size: 0.72rem; font-weight: 600; }
.m2-tile-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.m2-tile-facts span { display: inline-flex; align-items: center; gap: 4px; }
.m2-tile-facts .mud-icon-root { color: var(--accent); font-size: 1rem; }
.m2-tile-foot { display: flex; justify-content: space-between; gap: 8px; padding-top: 8px; border-top: 1px solid var(--rule); color: var(--muted); font-size: 0.8rem; }
.m2-spark { width: 100%; height: 28px; }

/* ---- Header of a system, component or incident page ---- */
.m2-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; border-left: 6px solid var(--good); }
.m2-head h2 { display: flex; align-items: center; gap: 6px; margin: 2px 0; font-size: 1.35rem; font-weight: 900; }
.m2-head-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 0.86rem; }
.m2-tabs { margin: 2px 0; }
.m2-scope { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--rule); border-radius: 10px; background: var(--panel); font-weight: 700; }
.m2-scope .mud-icon-root { color: var(--accent); }
.m2-client-filter { max-width: 260px; }
.m2-search { max-width: 260px; }

/* ---- Component tree ---- */
.m2-tree { display: flex; flex-direction: column; gap: 10px; }
.m2-folder-head { display: flex; align-items: center; gap: 6px; padding: 4px 2px; border-bottom: 1px solid var(--rule); color: var(--accent); font-weight: 800;
    font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.3px; }
.m2-node { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 6px; color: var(--text);
    text-decoration: none; font-size: 0.86rem; }
a.m2-node:hover { background: var(--accent-soft); }
.m2-node.child { padding-left: 26px; font-size: 0.82rem; }
.m2-node.gone { opacity: 0.55; }
.m2-node .dot { width: 10px; height: 10px; border-radius: 50%; }
.m2-node-name { overflow: hidden; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.m2-node-values { display: flex; gap: 10px; color: var(--muted); font-size: 0.8rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.m2-node-values .m2-bad { color: var(--bad); }

/* ---- KPI strip ---- */
.m2-kpis { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }

/* ---- Trends ---- */
.m2-ranges { display: flex; gap: 4px; }
.m2-add { display: flex; gap: 8px; min-width: 0; width: min(520px, 100%); }
.m2-keys { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.m2-chart-title { margin: 12px 0 2px; color: var(--muted); font-size: 0.82rem !important; text-transform: uppercase; letter-spacing: 0.3px; }
.m2-chart { min-height: 120px; }

/* ---- Journals (issues) ---- */
.m2-filters { margin-bottom: 8px; }
.m2-issues td { font-size: 0.84rem; }
.m2-issues .server { min-width: 170px; white-space: normal; overflow-wrap: break-word; }
.m2-pages { margin-top: 8px; }
.m2-legend { font-size: 0.8rem; }
.m2-scroll { max-height: 560px; overflow-y: auto; }
.table tr.m2-alert-row td { background: color-mix(in srgb, var(--bad-soft) 60%, var(--panel)); }
.table tr.m2-current td { background: var(--accent-soft); }
.table tr.m2-current td:first-child { box-shadow: inset 3px 0 0 var(--accent); }

/* ---- Dependencies: point -> attributes -> analyses -> displays ---- */
.m2-flow { display: grid; grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr) 20px minmax(0, 1fr); gap: 6px; align-items: start; }
.m2-flow-col h4 { display: flex; align-items: center; gap: 4px; margin: 0 0 6px; color: var(--accent); font-size: 0.82rem; }
.m2-flow-item { margin-bottom: 4px; padding: 6px 8px; border: 1px solid var(--rule); border-radius: 6px; background: var(--panel-2); font-size: 0.78rem; overflow-wrap: anywhere; }
.m2-flow-arrow { padding-top: 28px; color: var(--m2-gold); font-weight: 900; text-align: center; }

/* ---- Rules on a component, settings ---- */
.m2-rule { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 2px 0; font-size: 0.78rem; }
.m2-rule.active { font-weight: 800; }
.m2-rule.pending .hint { color: #b7791f; }
.m2-rule.off { opacity: 0.5; }
.m2-override { font-size: 0.8rem; }
.m2-edit { border: 1px solid var(--m2-gold); background: var(--panel-2); }
.m2-edit h4 { margin: 12px 0 2px; color: var(--accent); }

/* ---- Client incident steps ---- */
.m2-step { display: grid; grid-template-columns: 110px auto 1fr; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--rule); font-size: 0.86rem; }

@media (max-width: 760px) {
    .m2-tile-body { grid-template-columns: 1fr; }
    .m2-flow { grid-template-columns: 1fr; }
    .m2-flow-arrow { display: none; }
    .m2-add { flex-direction: column; }
}

/* ---- Incident tables ---- */
.table td.m2-system-cell { min-width: 140px; max-width: 260px; font-weight: 700; }