/* Monitoring: the clients' cards, severities (sev), the wall screen (wall-, srv-), the client section's Monitoring (if-) and the incident page (incident-).
   Moved out of app.css as they were (design system wave 0.4, Source\Docs\Design system\Design system.md section 14): one
   file per area, so that the app waves never edit the same file. Linked by Components\App.razor right after app.css,
   in the order the rules had there (home, admin, monitoring, management, account, messaging, support, training,
   azurecosts, tools), so every rule keeps its place in the cascade. Tokens only: light and dark both work. */

.menu-client { display: flex; align-items: center; gap: 8px; min-width: 260px; }
.menu-client .dot { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; }
.menu-client .name { flex: 1; font-weight: 700; }
.menu-client .state { color: var(--muted); font-size: 0.8rem; }

/* Client (and server) cards */
.clients { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.client-card {
  display: block;
  padding: 12px 16px 12px 14px;
  border-left: 6px solid var(--good);
  color: inherit;
  text-decoration: none;
  transition: box-shadow 150ms ease;
}
.client-card:hover { box-shadow: 0 10px 28px rgba(0, 0, 0, 0.1); }
.client-card .name { font-size: 1rem; font-weight: 800; }
.client-card .state { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 0.88rem; font-weight: 700; }
.client-card .facts { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; color: var(--muted); font-size: 0.8rem; }
.client-card .silent { margin-top: 6px; color: var(--bad); font-size: 0.8rem; font-weight: 700; }

/* Severity: colour + icon + label, never colour alone */
.sev {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px 2px 6px;
  border-left: 4px solid var(--sev);
  border-radius: 6px;
  background: var(--sev-tint);
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
}
.sev .mud-icon-root { color: var(--sev); font-size: 1rem; }
.sev.big { padding: 4px 12px 4px 8px; font-size: 0.9rem; }

/* Wall screen (monitoring): every server of every client, left on a screen. Full screen / kiosk: no OneStop bars. */
html.wall-mode .topbar { display: none; }
html.wall-mode .content { padding: 14px 18px; }
@media (min-width: 1800px) { html.wall-mode { font-size: 112.5%; } }
@media (min-width: 2500px) { html.wall-mode { font-size: 137.5%; } }
.wall { display: flex; flex-direction: column; gap: 12px; }
.wall-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.wall-head .spacer, .wall-client-head .spacer, .wall-legend .spacer { flex: 1; }
.wall-title { display: flex; align-items: center; gap: 12px; }
.wall-title img { display: none; height: 40px; }
html.wall-mode .wall-title img { display: block; }
.wall-name { font-size: 1.25rem; font-weight: 900; }
.wall-sub { color: var(--muted); font-size: 0.85rem; font-weight: 600; }
.wall-kpis { display: flex; flex-wrap: wrap; gap: 8px; }
.wall-kpi {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel);
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
}
.wall-kpi b { color: var(--text); font-size: 1.15rem; font-weight: 900; }
.wall-kpi.on b { color: var(--accent); }
.wall-kpi.bad { align-items: center; border-color: var(--bad); background: var(--bad-soft); color: var(--bad); }
.wall-kpi.bad b { color: var(--bad); }
.wall-enter, .wall-exit { display: inline-flex; align-items: center; gap: 4px; }
.wall-exit, html.wall-mode .wall-enter { display: none; }
html.wall-mode .wall-exit { display: inline-flex; }
.wall-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); gap: 14px; align-items: start; }
.wall-client { border-top: 5px solid var(--sev); }
.wall-client-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.wall-client-head .name { color: var(--text); font-size: 1.15rem; font-weight: 900; text-decoration: none; }
.wall-client-head .name:hover { text-decoration: underline; }
.wall-client .silent { margin: -4px 0 10px; color: var(--bad); font-size: 0.85rem; font-weight: 800; }
.wall-ok { display: inline-flex; align-items: center; gap: 4px; color: var(--good); font-size: 0.85rem; font-weight: 800; }
.wall-ok.muted { color: var(--muted); }
.wall-servers { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 8px; }
.wall-server {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  min-height: 88px;
  padding: 9px 11px;
  border-left: 6px solid var(--sev);
  border-radius: 8px;
  background: var(--sev-tint);
  color: var(--text);
  text-decoration: none;
}
.wall-server:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08); }
.srv-name { font-size: 0.95rem; font-weight: 900; overflow-wrap: anywhere; }
.srv-state { display: flex; align-items: center; gap: 4px; font-size: 0.82rem; font-weight: 800; }
.srv-state .mud-icon-root { color: var(--sev); font-size: 1.05rem; }
.srv-count { color: var(--muted); }
.srv-new { display: inline-block; width: 9px; height: 9px; margin: 0 2px; border-radius: 50%; background: var(--bad); animation: wall-pulse 2s ease-in-out infinite; }
.srv-problem { display: -webkit-box; overflow: hidden; font-size: 0.78rem; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.srv-since { margin-top: auto; color: var(--muted); font-size: 0.74rem; font-weight: 600; }
.wall-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; color: var(--muted); font-size: 0.8rem; }
.wall-legend .srv-new { animation: none; }
@keyframes wall-pulse { 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .srv-new { animation: none; } }

/* Monitoring (client section, id infrastructure): the client's view of its monitoring */
.if-status { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; border-left: 8px solid var(--good); }
.if-status.warn { border-left-color: #ec835a; }
.if-status.bad { border-left-color: #d03b3b; }
.if-status-icon { color: var(--good); font-size: 2.4rem !important; }
.if-status.warn .if-status-icon { color: #ec835a; }
.if-status.bad .if-status-icon { color: #d03b3b; }
.if-status-text { flex: 1; min-width: 240px; }
.if-headline { font-size: 1.3rem; font-weight: 900; }
.if-sub { margin-top: 2px; color: var(--muted); font-size: 0.88rem; }
.if-watch { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; color: var(--muted); font-size: 0.8rem; font-weight: 700; }
.if-empty { gap: 8px; }
.if-issues { display: flex; flex-direction: column; gap: 8px; }
.if-issue {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-left: 6px solid var(--sev);
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
}
.if-issue:hover { background: var(--accent-soft); }
.if-issue-main { display: flex; flex: 1; min-width: 200px; flex-direction: column; gap: 2px; }
.if-issue-title { font-weight: 800; overflow-wrap: anywhere; }
.if-issue-sub { color: var(--muted); font-size: 0.8rem; }
.if-issue-side { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.if-issue-time { color: var(--muted); font-size: 0.78rem; font-weight: 700; white-space: nowrap; }
.if-issue-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; border-left: 8px solid var(--sev); }
.if-issue-head-main { flex: 1; min-width: 240px; }
.if-issue-head h2 { margin: 0; font-size: 1.2rem; font-weight: 900; }
.if-state { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 0.75rem; font-weight: 800; white-space: nowrap; }
.if-state.open { background: var(--text); color: var(--panel); }
.if-state.acknowledged { background: var(--os-accent); color: var(--os-on-accent); }
.if-state.resolved { background: var(--good-soft); color: var(--good-text); }
.if-timeline { margin: 0; padding: 0; list-style: none; }
.if-timeline li { position: relative; display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 6px 0 6px 18px; border-left: 2px solid var(--rule); }
.if-timeline li::before { position: absolute; top: 11px; left: -6px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); content: ""; }
.if-timeline li.opened::before, .if-timeline li.reopened::before, .if-timeline li.escalated::before { background: #d03b3b; }
.if-timeline li.resolved::before { background: var(--good); }
.if-when { min-width: 130px; color: var(--muted); font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.if-what { font-weight: 700; }
.if-notifications { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px 12px; margin: 0; padding: 0; color: var(--muted); font-size: 0.82rem; list-style: none; font-variant-numeric: tabular-nums; }
.incident-grid { grid-template-columns: minmax(0, 1fr) 230px; }
.incident-grid .meta-panel { width: auto; overflow: visible; }

.incident-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.incident-title h2 { margin: 0; font-size: 1.35rem; font-weight: 900; }
.incident-title .reference { color: var(--muted); font-weight: 900; font-variant-numeric: tabular-nums; }
.email-frame { width: 100%; height: 460px; border: 1px solid var(--border); border-radius: 8px; background: #ffffff; }

@media (max-width: 800px) {
  .incident-grid { grid-template-columns: 1fr; }
}
/* Severity chips and tiles: the light tint (--sev-tint, Severities.Tint) becomes a dark tint of the severity's own colour;
   the icon is lightened so that the dark red of Critical still reads on it */
:root[data-theme="dark"] .sev,
:root[data-theme="dark"] .wall-server { background: color-mix(in srgb, var(--sev) 18%, var(--panel)); }
:root[data-theme="dark"] .sev .mud-icon-root,
:root[data-theme="dark"] .srv-state .mud-icon-root { color: color-mix(in srgb, var(--sev) 65%, #ffffff); }
/* An email shown as it was received (Monitoring incident page, a white HTML page of its own): inverted, the hues kept, so
   that no white page stays in the dark theme */
:root[data-theme="dark"] .email-frame { border-color: var(--border); filter: invert(0.88) hue-rotate(180deg); }