/*
 * TTech OneStop - same look as the TTech Portal and the monitoring system:
 * light background, white panels with a soft shadow, 10px corners, olive accent, pill buttons.
 * Copyright (c) 2026 Toupin Technologies Inc. All rights reserved.
 *
 * Linked by the page shell (TTech.Platform.Server\Components\App.razor), after MudBlazor. In order:
 *   the platform (top bar, panels, home pages and their app tiles, tables, portal editor), then the apps: Monitoring
 *   (KPIs, severity, status chips, wall- / srv-, incident page) with the demo bar of the client apps (demo-), the
 *   Messaging send page (msg-), client Monitoring (if-), Management (mg-, pay-), client Management (ac-), Messaging and
 *   client Messaging (msg2-, us-).
 *   Targets (tg-), CONNECT Helper (cn-), Downtime (dt-), Simulator (sim-), Reporting portal (rp-, pbi-, piv-) and
 *   Weather (wx-) have their own files (targets.css, connect.css, downtime.css, simulator.css, portal.css, weather.css),
 *   linked after this one: their rules win over a rule here of the same weight.
 *   The main colours of :root are also in the MudBlazor theme (client Theme.cs): change both together.
 * Dark theme: <html data-theme="dark"> (set before the first paint by App.razor, switched by the sun | moon of the top bar,
 *   ThemeState.cs) gives every token of :root its dark value (block :root[data-theme="dark"] below). Use the tokens, never a
 *   fixed light colour (#ffffff, #f8f9fb...): a fixed colour stays light in the dark theme. The few colours that have no
 *   token get their dark value in the "Dark theme" section at the end of this file. Check a change in both themes.
 * Before removing a rule, search the class in every .razor and .cs file: some classes are built in code
 * ("ac-" states of AccountClient.cs, the event names of the client Monitoring timeline...).
 */

:root {
  --background: #f7f5ef;
  --panel: #ffffff;
  --text: #1f2937;
  --muted: #6b7280;
  --faint: #858b96;   /* hints, "Updated 01:02", the version chip: 3.4:1 on white (#9ca3af was 2.5:1, hard to read) */
  --accent: #8d7f56;
  --accent-soft: #f4f1e8;
  --brand-gold: #e0bf3f;
  --border: rgba(0, 0, 0, 0.1);
  --rule: rgba(0, 0, 0, 0.07);
  --radius: 10px;
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  --good: #0ca30c;
  --bad: #8f1f1f;
  --bad-soft: #fae6e6;
  --warn: #9a4a12;
  /* Quieter surfaces, fields and chips (each has its dark value below) */
  --panel-2: #fbfaf6;          /* a quiet area inside a panel: figures, threads, totals, the app bar */
  --head-bg: #f7f6f1;          /* head of a group inside a panel */
  --field: #ffffff;            /* inputs, selects, text areas */
  --chip: #eaeaea;             /* neutral pill, chip or track */
  --chip-hover: #e0e0e0;
  --chip-text: #4b4535;        /* text of a neutral chip */
  --btn: #f4f4f4;              /* plain button (.btn) */
  --btn-hover: #e9e9e9;
  --code-bg: #f3f3f3;
  --on-accent: #ffffff;        /* text on an --accent (or --good) background */
  --accent-strong: #5f5538;    /* olive text on --accent-soft */
  --good-soft: #e3f4e3;
  --good-text: #176217;
  --warn-soft: #fdeedd;
  --note-soft: #fff8e1;        /* yellow: a change not saved yet, something to look at */
  --gold-soft: #fbf3d2;
  --gold-text: #7a6418;
  --info-soft: #e3edf8;
  --info: #1f4f82;
  color-scheme: light;         /* native controls, scrollbars and date pickers in light */
}

/* Dark theme: deep warm charcoal, slightly lighter panels, olive and gold lightened so they read on the dark (MudBlazor:
   PaletteDark of Theme.cs, keep the main values in step) */
:root[data-theme="dark"] {
  --background: #161411;
  --panel: #221f1a;
  --text: #ebe6da;
  --muted: #aba494;
  --faint: #7f796d;
  --accent: #c4b385;
  --accent-soft: #312c21;
  --brand-gold: #e0bf3f;
  --border: rgba(255, 244, 220, 0.14);
  --rule: rgba(255, 244, 220, 0.08);
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  --good: #4cc354;
  --bad: #f29494;
  --bad-soft: #3d2121;
  --warn: #eda866;
  --panel-2: #1c1a16;
  --head-bg: #2a2620;
  --field: #1a1814;
  --chip: #332f28;
  --chip-hover: #3e392f;
  --chip-text: #ddd6c6;
  --btn: #2e2a23;
  --btn-hover: #3a352c;
  --code-bg: #2d2923;
  --on-accent: #17150f;
  --accent-strong: #dccd9f;
  --good-soft: #1d3420;
  --good-text: #8ad98f;
  --warn-soft: #3b2b19;
  --note-soft: #373018;
  --gold-soft: #3a3217;
  --gold-text: #e8cb6c;
  --info-soft: #1b2a3b;
  --info: #96bfe9;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--background);
  color: var(--text);
}

/* The bar on top, the page below: only the page scrolls */
body { display: flex; flex-direction: column; }

a { color: inherit; }
code { padding: 1px 5px; border-radius: 4px; background: var(--code-bg); font-size: 0.85em; }

/* ---- Start-up screen (until the UI is loaded in the browser) ---- */
.boot {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: var(--background);
  color: var(--muted);
  font-weight: 800;
  letter-spacing: 0.3px;
}
.boot img { width: 72px; height: 72px; animation: boot-pulse 1.4s ease-in-out infinite; }
@keyframes boot-pulse { 50% { opacity: 0.45; } }

.error-bar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  display: none;
  gap: 12px;
  padding: 10px 16px;
  background: var(--bad-soft);
  color: var(--bad);
  font-weight: 700;
}
.error-bar .reload { color: var(--bad); }
.error-bar .dismiss { margin-left: auto; cursor: pointer; }

/* ---- Top bar: main bar (brand, Client | Employee, language, user) + app bar (where you are, the app's pages) ---- */
.topbar {
  position: relative;
  z-index: 10;
  flex: 0 0 auto;
  background: var(--panel);
  box-shadow: 0 1px 0 var(--border), 0 6px 18px rgba(31, 41, 55, 0.06);
}
/* Brand line: the gold of the logo fading into the olive accent */
.topbar::before {
  display: block;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-gold) 0%, var(--accent) 55%, rgba(141, 127, 86, 0.25) 100%);
  content: "";
}

.mainbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px 20px;
  min-height: 62px;
  padding: 8px 20px;
}

/* Outfit (SIL Open Font License, fonts.google.com/specimen/Outfit), the typeface of the OneStop wordmark: served by the
   website itself (fonts\outfit-latin.woff2: Latin, every weight), nothing is asked of Google */
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/outfit-latin.woff2") format("woff2");
}

/* The brand, top left (Layout\MainLayout.razor): the Toupin Technologies logo (Shared\TtechLogo.razor: its T follows the
   theme through --logo-ink) beside the OneStop wordmark: OneStop in Outfit (the @font-face above), Stop in
   gold, TOUPIN TECHNOLOGIES in small spaced capitals under it. --brand-gold: a deeper gold on white, the logo's gold on
   the dark theme (both readable). */
:root { --logo-ink: #2E2E2E; --brand-gold: #B8962E; --brand-font: "Outfit", "Segoe UI", Arial, sans-serif; }
:root[data-theme="dark"] { --logo-ink: #F4F1E8; --brand-gold: #E0BF3F; }
.brand { display: flex; align-items: center; gap: 12px; justify-self: start; min-width: 0; max-width: 100%; text-decoration: none; }
.brand-logo { flex: 0 0 auto; width: 40px; height: 40px; transition: transform 0.2s ease; }
.brand:hover .brand-logo { transform: scale(1.06); }
.brand-text { display: flex; min-width: 0; flex-direction: column; gap: 3px; line-height: 1; }
.brand-name { color: var(--text); font-family: var(--brand-font); font-size: 1.6rem; font-weight: 700; letter-spacing: -0.035em; white-space: nowrap; }
.brand-gold { color: var(--brand-gold); }
.brand-sub {
  color: var(--muted);
  font-family: var(--brand-font);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
  /* A phone: cut with "..." rather than running under the other tools of the bar */
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Client | Employee: segmented switch in the middle of the bar */
.section-switch {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--accent-soft);
}
.section-switch a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 18px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  transition: background 150ms ease, color 150ms ease, box-shadow 150ms ease;
}
.section-switch a:hover { color: var(--text); background: color-mix(in srgb, var(--panel) 60%, transparent); }
.section-switch a.active { background: var(--panel); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.section-switch a.active .mud-icon-root { color: var(--accent); }

.tools { display: flex; align-items: center; justify-content: flex-end; gap: 10px; justify-self: end; min-width: 0; }
.version-chip {
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--faint);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.4px;
}
.lang-switch { display: inline-flex; padding: 2px; border: 1px solid var(--border); border-radius: 8px; }
.lang-switch button {
  padding: 3px 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 800;
}
.lang-switch button:hover { color: var(--text); }
.lang-switch button.active { background: var(--text); color: var(--panel); }
/* Light | dark, next to the language: the same switch with a sun and a moon (MainLayout, ThemeState) */
.theme-switch button { display: inline-flex; align-items: center; padding: 3px 6px; }
.theme-switch .mud-icon-root { width: 16px; height: 16px; font-size: 16px; }
.user-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 3px 12px 3px 3px;
  border: 1px solid var(--border);
  border-radius: 999px;
}
.avatar {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #8d7f56, #6f6443);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.3px;
}
.user-name { overflow: hidden; color: var(--text); font-size: 0.84rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }

/* App bar: only inside an app (the app's pages fill it) */
.appbar {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0 28px;
  min-height: 46px;
  padding: 0 20px;
  border-top: 1px solid var(--rule);
  background: var(--panel-2);
}
.appbar:not(:has(*)) { display: none; }

.crumbs { display: flex; align-items: center; gap: 2px; min-width: 0; }
.crumb-section { color: var(--muted); font-size: 0.84rem; font-weight: 700; text-decoration: none; }
.crumb-section:hover { color: var(--accent); }
.crumbs .crumb-sep { color: var(--faint); }
.crumb-app {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
}
.crumb-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent);
}

.apptabs { display: flex; align-items: stretch; gap: 4px; }
/* Reporting portal: the client's logo at the right of the app bar (the portal header's logo) */
.appbar-logo { align-self: center; max-width: 220px; height: 32px; margin-left: auto; object-fit: contain; }
.apptab {
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: color 150ms ease, border-color 150ms ease;
}
.apptab:hover { color: var(--text); border-bottom-color: rgba(141, 127, 86, 0.35); }
.apptab.active { color: var(--text); border-bottom-color: var(--accent); }

/* Inside a frame (app shown in the Reporting portal's viewer): no bars */
html.framed .topbar { display: none; }
html.framed .content { padding: 8px; }

@media (max-width: 900px) {
  .mainbar { grid-template-columns: minmax(0, 1fr) auto; padding: 8px 12px; }
  .section-switch { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
  .version-chip, .user-name { display: none; }
  .user-chip { padding-right: 3px; }
  .appbar { padding: 0 12px; }
  /* App tabs wider than a phone (Monitoring, Messaging, Administration, Targets...) wrap to a second line instead of
     widening the page. Downtime and CONNECT Helper scroll theirs instead (downtime.css, connect.css). */
  .appbar:not(:has(.dt-apptab)):not(:has(.crumb-app[href="connect"])) .apptabs { flex-wrap: wrap; min-width: 0; max-width: 100%; }
  .appbar:not(:has(.dt-apptab)):not(:has(.crumb-app[href="connect"])) .apptab { min-height: 34px; }
}

.content {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: 12px;
}
.content:focus, .content:focus-visible { outline: none; }

/* ---- Panels and pill buttons (the portal's report tabs) ---- */
.subtabs, .panel, .info-card, .viewer-wrap, .dept-tabs {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.subtabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
}
.subtabs-divider { padding: 0 4px; color: var(--muted); }

.subtab {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border: 0;
  border-radius: 999px;
  background: var(--chip);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.subtab-count { margin-left: 4px; }   /* "Unknown senders (1)": a flex item loses its leading space */
.subtab:hover { background: var(--chip-hover); }
.subtab.active { background: var(--accent); color: var(--on-accent); }
.subtab.quiet { background: transparent; color: var(--muted); }
.subtab.quiet:hover { background: var(--chip); }
.subtab.disabled, .subtab:disabled { background: var(--chip); color: var(--faint); cursor: not-allowed; opacity: 0.65; }
/* Applications that open in a separate browser tab */
.subtab.external::after { margin-left: 6px; content: "\2197"; font-weight: 400; opacity: 0.7; }

.btn {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--btn);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
}
.btn:hover:not(:disabled) { background: var(--btn-hover); }
.btn:disabled { cursor: not-allowed; opacity: 0.55; }

.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 2px; }
.toolbar .spacer { flex: 1; }
.toolbar-title { padding: 0 6px 0 2px; font-size: 1.05rem; font-weight: 900; }

.panel { min-width: 0; padding: 14px 16px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.panel h2, .panel h3 { margin: 0; font-size: 1rem; font-weight: 800; }
.panel h3 { margin: 18px 0 6px; }
.panel p { margin: 8px 0; }
.narrow-panel { width: 100%; max-width: 640px; margin: 24px auto; }
.hint { color: var(--muted); font-size: 0.82rem; }
.muted { color: var(--muted); }
.strong { font-weight: 700; }
.warn { color: var(--warn); font-weight: 600; }
.groups { margin: 4px 0; padding-left: 20px; }

.empty { display: flex; align-items: center; justify-content: center; min-height: 120px; padding: 24px; color: var(--muted); text-align: center; }
.error { padding: 10px 14px; border-radius: 8px; background: var(--bad-soft); color: var(--bad); font-weight: 600; }
.notice { padding: 10px 14px; border-radius: 8px; background: var(--accent-soft); font-weight: 600; }

/* ---- Home pages (/client and /employee): welcome header (WelcomeHeader), app tiles (SectionPanel, AppTile), quick
   links (QuickLinks). The tiles are the same size in both sections. Sized so that the welcome header and 12 tiles (4 x 3)
   fit without scrolling in a 1920 x 1080 or 2048 x 1100 browser window: a tile's height follows the window's
   (min-height in vh), the grid has 4, 3, 2, then 1 column as the window narrows. ---- */
.home { display: flex; flex-direction: column; gap: 18px; width: 100%; max-width: 1680px; margin: 0 auto; padding: 6px 8px 12px; }

/* Welcome header: greeting on the left, the selected mine on the right, faint contour lines of an open pit behind */
.welcome {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 28px;
  overflow: hidden;
  padding: 22px 28px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background:
    radial-gradient(circle at 100% 0%, rgba(224, 191, 63, 0.2), transparent 45%),
    linear-gradient(115deg, var(--panel) 45%, var(--accent-soft) 100%);
  box-shadow: var(--shadow);
}
.welcome::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 55%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 220' fill='none' stroke='%238d7f56' stroke-opacity='0.2' stroke-width='1.5'%3E%3Cg transform='rotate(-8 470 110)'%3E%3Cellipse cx='470' cy='110' rx='38' ry='20'/%3E%3Cellipse cx='470' cy='110' rx='78' ry='44'/%3E%3Cellipse cx='470' cy='110' rx='120' ry='68'/%3E%3Cellipse cx='470' cy='110' rx='164' ry='93'/%3E%3Cellipse cx='470' cy='110' rx='210' ry='119'/%3E%3Cellipse cx='470' cy='110' rx='258' ry='146'/%3E%3Cellipse cx='470' cy='110' rx='308' ry='174'/%3E%3C/g%3E%3C/svg%3E") right center / cover no-repeat;
  content: "";
  pointer-events: none;
}
.welcome > * { position: relative; z-index: 1; }
.welcome-text { min-width: 0; }
.welcome-section {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.welcome-section .mud-icon-root { width: 16px; height: 16px; font-size: 16px; }
.welcome h1 {
  margin: 6px 0 4px;
  color: var(--text);
  font-size: clamp(1.45rem, 1.05rem + 1vw, 2.1rem);
  font-weight: 900;
  letter-spacing: -0.5px;
  line-height: 1.15;
}
.welcome-sub { display: flex; flex-wrap: wrap; gap: 2px 8px; margin: 0; color: var(--muted); font-weight: 600; }
.welcome-company { color: var(--text); font-weight: 800; }
.welcome-dot { color: var(--faint); }

.welcome-mine {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  max-width: 100%;
  padding: 12px 20px 12px 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}
.welcome-mine-icon {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--brand-gold);
  color: var(--text);
}
.welcome-mine-text { display: flex; min-width: 0; flex-direction: column; line-height: 1.35; }
.welcome-mine-label { color: var(--muted); font-size: 0.66rem; font-weight: 900; letter-spacing: 0.8px; text-transform: uppercase; }
.welcome-mine-name { color: var(--text); font-size: 1.1rem; font-weight: 900; }
.welcome-mine-facts { color: var(--muted); font-size: 0.82rem; }
.welcome-mine-time { display: inline-flex; align-items: center; gap: 3px; margin-left: 8px; color: var(--text); font-weight: 700; white-space: nowrap; }
.welcome-mine-time .mud-icon-root { width: 15px; height: 15px; font-size: 15px; color: var(--accent); }

/* The apps of the section */
.home-apps { display: flex; flex-direction: column; gap: 12px; }
.home-apps-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 0 2px; }
.home-apps-head h2 { margin: 0; font-size: 1.15rem; font-weight: 900; }
.home-apps-head h2::before {
  display: inline-block;
  width: 6px;
  height: 18px;
  margin-right: 8px;
  border-radius: 3px;
  background: var(--brand-gold);
  content: "";
  vertical-align: -2px;
}

.home-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.home-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  min-height: clamp(150px, 20vh, 220px);
  overflow: hidden;
  padding: 22px 24px 20px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--panel);
  box-shadow: 0 1px 2px rgba(31, 41, 55, 0.04), 0 6px 18px rgba(31, 41, 55, 0.05);
  color: inherit;
  text-decoration: none;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
/* Gold-to-olive line on top of an open tile, drawn on hover */
.home-tile::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--brand-gold), var(--accent));
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms ease;
}
.home-tile.open:hover, .home-tile.open:focus-visible {
  border-color: rgba(141, 127, 86, 0.45);
  box-shadow: 0 14px 34px rgba(31, 41, 55, 0.12);
  transform: translateY(-3px);
}
.home-tile.open:hover::before, .home-tile.open:focus-visible::before { transform: scaleX(1); }
.home-tile.open:focus-visible { outline: 3px solid rgba(224, 191, 63, 0.6); outline-offset: 2px; }

.home-tile-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.home-tile-icon {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  transition: background 180ms ease, color 180ms ease;
}
.home-tile-icon .mud-icon-root { width: 30px; height: 30px; font-size: 30px; }
.home-tile.open:hover .home-tile-icon, .home-tile.open:focus-visible .home-tile-icon { background: var(--accent); color: var(--on-accent); }
.home-tile-name { color: var(--text); font-size: 1.18rem; font-weight: 800; letter-spacing: -0.2px; }
.home-tile-desc {
  display: -webkit-box;
  overflow: hidden;
  padding-right: 26px;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.home-tile-go {
  position: absolute;
  right: 20px;
  bottom: 18px;
  display: flex;
  color: var(--faint);
  transition: transform 180ms ease, color 180ms ease;
}
.home-tile.open:hover .home-tile-go, .home-tile.open:focus-visible .home-tile-go { color: var(--accent); transform: translateX(4px); }

/* Coming soon (Available false) and No access: no link, a chip says why */
.home-tile-state {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
}
.home-tile-state .mud-icon-root { width: 15px; height: 15px; font-size: 15px; }
.home-tile-state.soon { background: var(--gold-soft); color: var(--gold-text); }
.home-tile-state.denied { background: var(--chip); color: var(--muted); }
.home-tile.soon { border-style: dashed; border-color: rgba(141, 127, 86, 0.4); background: var(--panel-2); box-shadow: none; }
.home-tile.soon .home-tile-icon { background: var(--accent-soft); color: #a99f82; }
.home-tile.denied { background: var(--panel-2); box-shadow: none; cursor: not-allowed; }
.home-tile.denied .home-tile-icon { background: var(--chip); color: var(--faint); }
.home-tile.denied .home-tile-name { color: var(--muted); }
.home-tile.denied .home-tile-desc { color: var(--faint); }

/* Quick links of the employee section, below the tiles: bubbles opening external sites in a new tab */
.quick-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-top: 6px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel);
}
.quick-links-title {
  margin-right: 4px;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.bubble {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 4px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel);
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
.bubble:hover { border-color: var(--accent); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08); transform: translateY(-1px); }
.bubble-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
}
.bubble .bubble-out { color: var(--faint); font-size: 1rem; }
.bubble:hover .bubble-out { color: var(--accent); }

/* Short windows (1440 x 900 laptops): a bit less padding so that 3 rows of tiles still fit */
@media (max-height: 950px) and (min-width: 560px) {
  .home { gap: 14px; }
  .welcome { padding: 16px 24px; }
  .home-tile { padding: 18px 22px 16px; }
  .home-tile-top { margin-bottom: 6px; }
  .home-tile-icon { width: 50px; height: 50px; }
  .home-tile-icon .mud-icon-root { width: 26px; height: 26px; font-size: 26px; }
}
@media (max-width: 1279px) { .home-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 959px) { .home-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .home { gap: 14px; padding: 0; }
  .welcome { padding: 18px; }
  .welcome::after { width: 100%; opacity: 0.6; }
  .welcome-mine { width: 100%; }
}
/* Phones: one tile per row, the icon on the left of the name and description (the chip, when there is one, above the
   name), so that more apps show on one screen */
@media (max-width: 559px) {
  /* The company and the date on two lines: no dot left hanging at the end of the first one */
  .welcome-sub { flex-direction: column; }
  .welcome-dot { display: none; }
  /* The mine's local time on its own line, aligned with the region above it */
  .welcome-mine-time { display: flex; margin-left: 0; }
  .home-tiles { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .home-tile {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: start;
    gap: 2px 14px;
    min-height: 0;
    padding: 14px 16px;
  }
  .home-tile-top { display: contents; }
  .home-tile-icon { grid-row: 1 / span 3; grid-column: 1; width: 48px; height: 48px; }
  .home-tile-icon .mud-icon-root { width: 26px; height: 26px; font-size: 26px; }
  .home-tile-state { grid-row: 1; grid-column: 2; justify-self: start; margin-bottom: 2px; }
  .home-tile-name { font-size: 1.05rem; }
  .home-tile-desc { font-size: 0.85rem; }
  .home-tile-go { right: 14px; bottom: auto; top: 50%; margin-top: -12px; }
}
@media (prefers-reduced-motion: reduce) {
  .home-tile, .home-tile::before, .home-tile-icon, .home-tile-go { transition: none; }
  .home-tile.open:hover, .home-tile.open:focus-visible { transform: none; }
}

/* ---- Tiles of the Administration home (Apps\Admin\AdminPage.razor) ---- */
.app-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.app-tile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  gap: 4px 12px;
  padding: 14px;
  color: inherit;
  text-decoration: none;
  box-shadow: none;
  transition: box-shadow 150ms ease, border-color 150ms ease;
}
.app-tile:hover { border-color: var(--accent); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08); }
.app-tile.locked { cursor: not-allowed; opacity: 0.6; }
.app-tile.locked:hover { border-color: var(--border); box-shadow: none; }
.app-icon {
  display: flex;
  grid-row: 1 / 3;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent);
}
.app-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.app-name { font-size: 1rem; font-weight: 800; }
.app-description { color: var(--muted); font-size: 0.82rem; line-height: 1.35; }

/* ---- Side navigation of Administration > Portal configuration (dept-), viewer layout of the incident page ---- */
.sidebar { display: flex; min-height: 0; flex-direction: column; overflow: hidden; }
.dept-list { min-height: 0; flex: 1; overflow: auto; }
.dept-item {
  display: block;
  width: 100%;
  padding: 14px 16px;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  text-align: left;
}
.dept-item:hover { background: var(--btn-hover); }
.dept-item.active { background: var(--accent); color: var(--on-accent); }
.dept-item.sub { padding-left: 22px; font-weight: 600; }
.dept-item.has-error:not(.active) { color: var(--bad); }
.nav-title {
  padding: 14px 16px 6px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.sidebar-footer { padding: 8px; border-top: 1px solid var(--border); }
.viewer-wrap { display: flex; min-height: 0; flex: 1; flex-direction: column; margin-top: 12px; overflow: hidden; }
.viewer-body-grid { display: grid; grid-template-columns: minmax(0, 1fr) 210px; flex: 1; gap: 12px; min-height: 0; padding: 12px; }

.meta-panel { display: flex; width: 210px; min-width: 0; flex-direction: column; gap: 10px; overflow: hidden; }
.meta-actions { display: flex; width: 100%; flex-direction: column; gap: 10px; }
.meta-actions .btn { width: 100%; white-space: nowrap; }
.info-card { padding: 12px; }
.info-card h4 { margin: 0 0 8px; color: var(--muted); font-size: 0.95rem; }
.info-card .value { font-weight: 700; line-height: 1.35; white-space: pre-wrap; }

/* ---- Tables ---- */
.table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.table th {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.3px;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}
.table td { padding: 8px 10px; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.table tr.link { cursor: pointer; }
.table tr.link:hover td { background: var(--accent-soft); }
.table .num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.table .nowrap { white-space: nowrap; }
.table-wrap { overflow-x: auto; }
.edit-table td { padding: 4px 6px; }
.edit-table .narrow { width: 110px; }
.edit-table .action-cell { width: 48px; text-align: center; }

/* ---- Portal configuration editor ---- */
.editor-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 12px; align-items: start; }
.editor-grid .sidebar { position: sticky; top: 0; max-height: calc(100vh - 140px); }
.editor h2 { font-size: 1.1rem; font-weight: 900; margin-bottom: 10px; }
.head-actions { display: flex; align-items: center; gap: 4px; }
.change-status { color: var(--muted); font-size: 0.82rem; font-weight: 700; }
.change-status.dirty { color: var(--warn); }
.form-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; }
.form-row > * { flex: 1 1 220px; }
.report-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel-2);
}
.report-row { display: grid; grid-template-columns: minmax(160px, 1.3fr) minmax(140px, 1fr) minmax(150px, 1fr) auto; gap: 10px; align-items: center; }
.row-actions { display: flex; gap: 2px; }
.url-row { display: flex; align-items: flex-start; gap: 10px; }
.url-row > .mud-input-control { flex: 1; }
.url-app-menu { flex: 0 0 auto; margin-top: 6px; }
.issues { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.issues h3 { margin: 6px 0 2px; font-size: 0.85rem; }
.error-title { color: var(--bad); }
.warn-title { color: var(--warn); }
.issue { padding: 3px 0; border: 0; background: none; color: var(--text); cursor: pointer; font: inherit; font-size: 0.85rem; text-align: left; }
.issue:hover { text-decoration: underline; }
.error-issue::before { content: "✕ "; color: var(--bad); font-weight: 800; }
.warn-issue::before { content: "! "; color: var(--warn); font-weight: 800; }

/* ---- Small screens ---- */
@media (max-width: 1000px) {
  .editor-grid { grid-template-columns: 1fr; }
  .editor-grid .sidebar { position: static; max-height: none; }
  .report-row { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 800px) {
  .viewer-body-grid { grid-template-columns: 1fr; overflow: auto; }
  .meta-panel { display: grid; grid-template-columns: 1fr 1fr; width: auto; }
  .meta-actions { grid-column: 1 / -1; flex-direction: row; }
}

/* ==== Monitoring (same look as the former monitoring site) ==== */
.updated { color: var(--faint); font-size: 0.78rem; white-space: nowrap; }

/* App bar: count of active incidents, clients menu, worker warning */
/* A tab that opens a menu (Clients): same height, colour and underline as the other tabs */
.apptabs .apptab-menu { display: flex; align-self: stretch; }
button.apptab {
  align-self: stretch;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 700;
}
button.apptab:hover, button.apptab.active { color: var(--text); }
.apptab .count {
  margin-left: 6px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.72rem;
  font-weight: 800;
}
.apptab .caret { margin-left: 3px; font-size: 0.7rem; opacity: 0.7; }
.apptab.alert { gap: 4px; color: var(--bad); }
.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; }

/* Headline numbers */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.kpi { padding: 12px 16px; }
.kpi .label { color: var(--muted); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.3px; text-transform: uppercase; }
.kpi .value { margin-top: 2px; font-size: 1.9rem; font-weight: 900; line-height: 1.15; }
.kpi .sub { color: var(--muted); font-size: 0.8rem; }
.kpi.alert .value { color: var(--bad); }

/* 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; }

.status {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--chip);
  font-size: 0.75rem;
  font-weight: 800;
  white-space: nowrap;
}
.status.open { background: var(--text); color: var(--panel); }
.status.acknowledged { background: var(--accent); color: var(--on-accent); }
.status.resolved { background: var(--chip); color: var(--muted); }
/* Administration > Demo databases */
.status.good { background: var(--good); color: var(--on-accent); }
.status.bad { background: var(--bad-soft); color: var(--bad); }

.table tr.resolved td { color: var(--muted); }
.table .server { font-weight: 700; white-space: nowrap; }
.table .problem { min-width: 180px; overflow-wrap: anywhere; }
.table .problem small { display: flex; align-items: center; gap: 6px; margin-top: 3px; color: var(--muted); }
.table .sub { display: block; color: var(--muted); font-size: 0.78rem; font-weight: 500; }

/* Inline bar of the "most frequent problems" table */
.bar-cell { width: 34%; }
.bar { position: relative; min-width: 3px; height: 10px; border-radius: 0 4px 4px 0; background: var(--sev); }

.grid-2 { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 12px; }
.grid-2 > .stack { display: flex; min-width: 0; flex-direction: column; gap: 12px; }
.status-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.chart-box { min-height: 270px; }

/* Client demo apps: the demo bar (DemoBar), with the mine of the top bar and its operator for the apps that follow it */
.demo-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  padding: 8px 12px;
  border: 1px dashed var(--accent);
  border-radius: var(--radius);
  background: var(--accent-soft);
}
.demo-badge {
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.demo-mine { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; font-size: 0.86rem; }
.demo-mine .mud-icon-root { color: var(--accent); }
.demo-mine b { color: var(--text); font-weight: 900; }
.demo-client { font-weight: 800; }
.demo-sep { color: var(--accent); font-weight: 900; }
.demo-where { color: var(--muted); font-weight: 600; }
/* A phone: where the mine is goes on its own line, without a dot at its start */
@media (max-width: 720px) {
  .demo-sep:has(+ .demo-where) { display: none; }
  .demo-where { flex-basis: 100%; }
}
.demo-note { margin-left: auto; color: var(--muted); font-size: 0.78rem; font-weight: 700; }
.demo-top { margin-bottom: 12px; }   /* DemoBar alone at the top of an app (Downtime, Targets) */
.demo-label { color: var(--muted); font-size: 0.8rem; font-weight: 800; }
.demo-select {
  min-width: 220px;
  max-width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--field);
  color: var(--text);
  font: inherit;
  font-weight: 700;
}

/* 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; } }

/* Messaging: a new text (numbers, contacts, text) and the texts sent */
.msg-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; }
.msg-label { margin: 10px 0 4px; color: var(--muted); font-size: 0.78rem; font-weight: 800; text-transform: uppercase; }
.msg-to { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px; border: 1px solid var(--border); border-radius: 8px; }
.msg-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 10px; border-radius: 999px; background: var(--accent-soft); font-size: 0.84rem; font-weight: 700; }
.msg-chip button { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 0.75rem; }
.msg-input { flex: 1; min-width: 140px; padding: 6px; border: 0; outline: none; background: transparent; color: var(--text); font: inherit; }
.msg-contacts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.msg-contact { padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--panel); color: var(--text); cursor: pointer; font: inherit; font-size: 0.8rem; font-weight: 700; }
.msg-contact small { margin-left: 4px; color: var(--muted); font-weight: 600; }
.msg-contact.on { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.msg-contact.on small { color: var(--on-accent); }
.msg2-select.msg-account { width: 100%; max-width: none; }
.msg-hint { margin-top: 4px; }
.msg-text { width: 100%; padding: 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--field); color: var(--text); font: inherit; resize: vertical; }
.msg-text:focus, .msg-to:focus-within { border-color: var(--accent); outline: none; }
.msg-foot { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.msg-foot .spacer { flex: 1; }
.msg-body { min-width: 200px; overflow-wrap: anywhere; }
.msg-state { display: inline-block; padding: 2px 9px; border-radius: 999px; background: var(--chip); font-size: 0.75rem; font-weight: 800; white-space: nowrap; }
.msg-state.sent { background: var(--good-soft); color: var(--good-text); }
.msg-state.waiting { background: var(--accent-soft); color: var(--accent); }
.msg-state.failed { background: var(--bad-soft); color: var(--bad); }
@media (max-width: 900px) { .msg-grid { grid-template-columns: minmax(0, 1fr); } }

/* 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; }
.kpi .value.small { font-size: 1.15rem; }
.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(--accent); color: var(--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 page: the portal's viewer, content and a panel on the right; the page scrolls (no inner scroll) */
.viewer-wrap.incident { flex: none; margin-top: 0; overflow: visible; }
.incident-grid { grid-template-columns: minmax(0, 1fr) 230px; }
.viewer-main { display: flex; min-width: 0; flex-direction: column; gap: 12px; }
.incident-grid .meta-panel { width: auto; overflow: visible; }
.meta-actions .mud-button-root { justify-content: center; width: 100%; }
.info-card .hint { margin-top: 6px; color: var(--muted); font-size: 0.78rem; }
.info-card a { color: var(--accent); font-weight: 800; }

.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; }

.solution { font-size: 0.9rem; line-height: 1.5; }
.solution h2 { margin: 14px 0 4px; font-size: 0.95rem; font-weight: 800; }
.solution h2:first-child { margin-top: 0; }
.solution ol, .solution ul { margin: 4px 0; padding-left: 22px; }
.solution code { padding: 1px 4px; border-radius: 4px; background: var(--code-bg); font-size: 0.85em; }
.solution pre { overflow: auto; padding: 10px; border-radius: 8px; background: var(--background); }
.solution a { color: var(--accent); font-weight: 600; }
.solution-meta { margin-top: 10px; color: var(--faint); font-size: 0.76rem; }

.email-text {
  max-height: 420px;
  margin: 0;
  overflow: auto;
  padding: 12px;
  border-radius: 8px;
  background: var(--background);
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.8rem;
  white-space: pre-wrap;
}
.email-frame { width: 100%; height: 460px; border: 1px solid var(--border); border-radius: 8px; background: #ffffff; }

.timeline { margin: 0; padding: 0; list-style: none; }
.timeline li { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--rule); font-size: 0.85rem; }
.timeline .when { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.timeline .what b { font-weight: 800; }
.timeline .details { color: var(--muted); overflow-wrap: anywhere; white-space: pre-wrap; }

@media (max-width: 1100px) {
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 800px) {
  .incident-grid { grid-template-columns: 1fr; }
  .timeline li { grid-template-columns: 1fr; gap: 2px; }
}

/* ===== Management ===== */
/* Master-detail grids: 2 or 3 columns of panels, each column a stack */
.mg-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.mg-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.mg-kpis .kpi .value { font-size: 1.5rem; }
.mg-kpis .kpi .sub { margin-top: 2px; }
/* Tables: inactive row, worklog qty <> invoiced qty (Retool #df705f), changed row, inline inputs */
.table tr.mg-inactive td { color: var(--muted); background: var(--panel-2); }
.table tr.mg-mismatch td { background: #f6d3cd; }
.table tr.mg-dirty td { background: var(--note-soft); }
.table td.mg-check, .table th.mg-check { width: 34px; text-align: center; }
.mg-cell-input {
  width: 100%;
  min-width: 70px;
  padding: 4px 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--field);
  color: var(--text);
  font: inherit;
  font-size: 0.84rem;
}
.mg-cell-input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 2px var(--accent-soft); }
.mg-cell-input.num { text-align: right; }
select.mg-cell-input { padding: 3px 4px; }
.mg-scroll { max-height: 420px; overflow: auto; }
.mg-scroll thead th { position: sticky; top: 0; z-index: 1; background: var(--panel); }
.mg-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mg-savebar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--note-soft);
}
.mg-savebar .spacer { flex: 1; }
.mg-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 8px; }
.mg-filters input[type=date] { width: auto; min-width: 0; }
.mg-budget { display: flex; align-items: center; gap: 8px; min-width: 150px; }
.mg-budget .track { flex: 1; height: 8px; overflow: hidden; border-radius: 4px; background: var(--rule); }
.mg-budget .fill { height: 100%; border-radius: 4px; background: var(--accent); }
.mg-budget .fill.over { background: var(--bad); }
.mg-budget .pct { min-width: 42px; color: var(--muted); font-size: 0.78rem; text-align: right; }
.mg-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: 0.74rem;
  font-weight: 800;
  white-space: nowrap;
}
.mg-tag.good { background: var(--good-soft); color: var(--good-text); }
.mg-tag.bad { background: var(--bad-soft); color: var(--bad); }
.mg-tag.warn { background: var(--warn-soft); color: var(--warn); }
.mg-pdf { width: 100%; height: 75vh; border: 0; border-radius: 8px; background: var(--code-bg); }
.mg-notice { padding: 8px 12px; border-radius: 8px; background: var(--accent-soft); color: var(--accent-strong); font-size: 0.86rem; }
.mg-notice.warn { background: var(--warn-soft); color: var(--warn); }
/* Invoice contacts (Invoice contacts tab of the client page, PO page) and the email recipients of an invoice */
.mg-wrap-head { flex-wrap: wrap; }
.mg-wrap-head .mud-button-root { white-space: nowrap; }
.mg-contacts { display: flex; flex-direction: column; }
.mg-contact { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 4px; border-top: 1px solid var(--rule); }
.mg-contact:first-child { border-top: 0; }
.mg-group .mg-contact { padding: 8px 10px; }
.mg-contact .who { flex: 1 1 220px; min-width: 0; }
.mg-contact .who > div:first-child { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.mg-contact .email { overflow-wrap: anywhere; }
.mg-contact .mg-type { min-width: 48px; justify-content: center; }
.mg-contact .mg-actions { margin-left: auto; }
.mg-contact.inactive { background: var(--panel-2); color: var(--muted); }
.mg-contact.inactive .mg-type { opacity: 0.6; }
.mg-group.mg-focus { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.mg-recipients { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 0.86rem; }
.mg-recipients .grp { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.mg-recipients .kind { color: var(--muted); font-size: 0.74rem; font-weight: 800; text-transform: uppercase; }
.mg-recipients .addr { padding: 1px 8px; border-radius: 999px; background: var(--chip); color: var(--chip-text); overflow-wrap: anywhere; }
.mg-recipients-none { display: flex; align-items: flex-start; gap: 8px; }
.mg-contact-form { display: flex; flex-direction: column; gap: 6px; }
/* Drill-down pages: breadcrumbs, page header with key figures, status chips, forms, link rows, groups */
.mg-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 2px 0 10px; color: var(--muted); font-size: 0.86rem; }
.mg-crumbs a { color: var(--accent); font-weight: 700; text-decoration: none; }
.mg-crumbs a:hover { text-decoration: underline; }
.mg-crumbs .sep { color: var(--muted); }
.mg-hero { display: flex; flex-direction: column; gap: 10px; }
.mg-hero-main { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px; }
.mg-hero h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 4px; font-size: 1.35rem; }
.mg-hero .sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--muted); font-size: 0.9rem; }
.mg-figures { display: flex; flex-wrap: wrap; gap: 22px; }
.mg-figures > div { display: flex; flex-direction: column; min-width: 90px; }
.mg-figures .label { color: var(--muted); font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.mg-figures .value { font-size: 1.15rem; font-weight: 800; }
.mg-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--chip);
  color: var(--chip-text);
  font-size: 0.76rem;
  font-weight: 800;
  white-space: nowrap;
}
.mg-chip.good { background: var(--good-soft); color: var(--good-text); }
.mg-chip.bad { background: var(--bad-soft); color: var(--bad); }
.mg-chip.warn { background: var(--warn-soft); color: var(--warn); }
.mg-chip.info { background: var(--info-soft); color: var(--info); }
.mg-chip.neutral { background: var(--accent-soft); color: var(--accent-strong); }
.mg-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mg-chipfilter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel);
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
}
.mg-chipfilter .n { color: var(--muted); font-weight: 600; }
.mg-chipfilter:hover { border-color: var(--accent); }
.mg-chipfilter.on { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.mg-chipfilter.on .n { color: var(--on-accent); opacity: 0.8; }
.mg-chipfilter.disabled { cursor: not-allowed; opacity: 0.5; }
.mg-search { width: 230px; }
.mg-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.mg-form label { display: flex; flex-direction: column; gap: 4px; color: var(--muted); font-size: 0.78rem; font-weight: 700; }
.mg-form .mg-cell-input { font-size: 0.9rem; padding: 6px 8px; }
.mg-linktable tbody tr.link { cursor: pointer; }
.mg-linktable tbody tr.link:hover td { background: var(--accent-soft); }
.mg-linktable a { color: inherit; text-decoration: none; }
.mg-linktable td.mg-go { width: 28px; color: var(--muted); }
.mg-foot { margin-top: 8px; text-align: right; }
.mg-newbox { border: 1px solid var(--accent); }
.mg-addbox { margin-bottom: 12px; padding: 10px; border: 1px dashed var(--accent); border-radius: 8px; background: var(--panel-2); }
.mg-group { margin-top: 8px; border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; }
.mg-group-head {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border: 0;
  background: var(--head-bg);
  color: var(--text);
  font: inherit;
  text-align: left;
  justify-content: flex-start;
}
button.mg-group-head { cursor: pointer; }
.mg-group .table { margin: 0; }
.mg-jira { display: inline-flex; align-items: center; gap: 8px; }
.mg-bad { color: var(--bad); font-weight: 700; }
.mg-kpilink { color: inherit; text-decoration: none; transition: border-color 0.15s, box-shadow 0.15s; }
.mg-kpilink:hover { border-color: var(--accent); box-shadow: 0 2px 10px rgba(141, 127, 86, 0.18); }
.mg-kpis.small { margin-bottom: 12px; }
.mg-kpis.small .kpi .value { font-size: 1.25rem; }
/* Cards (clients, POs): each card is a link to its page */
.mg-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.mg-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.mg-card:hover { border-color: var(--accent); box-shadow: 0 2px 10px rgba(141, 127, 86, 0.18); }
.mg-card .title { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 1rem; font-weight: 800; }
.mg-card .title .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-card .sub { color: var(--muted); font-size: 0.84rem; }
.mg-card .figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; }
.mg-card .figs .label { display: block; color: var(--muted); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.mg-card .figs .value { font-weight: 800; }
.mg-card.inactive { opacity: 0.65; background: var(--panel-2); }
.mg-card.add { align-items: center; justify-content: center; border-style: dashed; color: var(--accent); font-weight: 800; cursor: pointer; }
/* Section tabs inside a page (links with ?tab=) */
.mg-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 12px; border-bottom: 1px solid var(--rule); }
.mg-tabs a {
  margin-bottom: -1px;
  padding: 8px 14px;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-weight: 700;
  text-decoration: none;
}
.mg-tabs a:hover { color: var(--text); }
.mg-tabs a.on { border-bottom-color: var(--accent); color: var(--text); }
.mg-tabs a .n { margin-left: 4px; color: var(--muted); font-weight: 600; }
.mg-check-label { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 0.84rem; font-weight: 700; }
.mg-empty-cta { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 28px 12px; color: var(--muted); text-align: center; }
/* Dashboard: needs attention (each item opens the page where it is fixed) */
.mg-attention { display: flex; flex-direction: column; gap: 4px; }
.mg-attention .item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-left: 3px solid var(--rule);
  border-radius: 6px;
  background: var(--panel-2);
  color: inherit;
  text-decoration: none;
}
.mg-attention .item:hover { background: var(--accent-soft); }
.mg-attention .item .text { font-weight: 700; }
.mg-attention .item .hint { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-attention .item .go { margin-left: auto; color: var(--muted); }
.mg-attention .item.bad { border-left-color: var(--bad); }
.mg-attention .item.bad .mud-icon-root:first-child { color: var(--bad); }
.mg-attention .item.warn { border-left-color: var(--warn); }
.mg-attention .item.warn .mud-icon-root:first-child { color: var(--warn); }
.mg-attention .item.info { border-left-color: var(--accent); }
.mg-attention .item.info .mud-icon-root:first-child { color: var(--accent); }
.mg-link { color: var(--accent); font-weight: 700; text-decoration: none; }
.mg-link:hover { text-decoration: underline; }
.mg-shares { display: flex; flex-direction: column; gap: 6px; }
.mg-shares .share { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(140px, 2fr) 90px; align-items: center; gap: 12px; padding: 4px 6px; border-radius: 6px; color: inherit; text-decoration: none; }
.mg-shares .share:hover { background: var(--accent-soft); }
.mg-shares .name { overflow: hidden; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.mg-shares .amount { font-weight: 700; text-align: right; }
/* App bar search (quick results) */
.apptabs:has(.mg-appsearch) { flex: 1; }
.mg-appsearch { position: relative; align-self: center; margin-left: auto; padding-left: 12px; }
.mg-appsearch input { width: 240px; padding: 5px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--field); color: var(--text); font: inherit; font-size: 0.84rem; }
.mg-appsearch input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 2px var(--accent-soft); }
.mg-appsearch .results {
  position: absolute;
  z-index: 1300;
  top: calc(100% + 4px);
  right: 0;
  width: 340px;
  max-height: 420px;
  overflow: auto;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.mg-appsearch .hit { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; color: inherit; text-decoration: none; }
.mg-appsearch .hit:hover, .mg-appsearch .hit.on { background: var(--accent-soft); }
.mg-appsearch .hit .kind { min-width: 58px; color: var(--muted); font-size: 0.7rem; font-weight: 800; text-transform: uppercase; }
.mg-appsearch .hit .t { font-weight: 700; }
.mg-appsearch .hit .s { overflow: hidden; color: var(--muted); font-size: 0.8rem; text-overflow: ellipsis; white-space: nowrap; }
.mg-appsearch .none { padding: 8px; color: var(--muted); font-size: 0.84rem; }
/* Pay tab: period picker, due line, warnings, hours per employee (rows expand to their 14 days); Settings > Pay */
.pay-page { display: flex; flex-direction: column; gap: 12px; }
.pay-pick { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.pay-select { width: auto; min-width: 210px; padding: 5px 8px; font-size: 0.86rem; }
.pay-step {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
}
.pay-step:hover { border-color: var(--accent); background: var(--accent-soft); }
.pay-step.off { color: var(--faint); opacity: 0.5; }
.pay-due { display: flex; align-items: flex-start; gap: 6px; margin-top: 8px; font-weight: 800; }
.pay-due .mud-icon-root { flex: 0 0 auto; color: var(--accent); }
.pay-page .panel-head { flex-wrap: wrap; }
.pay-notice { display: flex; align-items: center; gap: 8px; }
.pay-notice .mud-icon-root { flex: 0 0 auto; }
.pay-notice.pay-warn { background: var(--warn-soft); color: var(--warn); }
.pay-notice.pay-bad { background: var(--bad-soft); color: var(--bad); font-weight: 700; }
.pay-table th small { display: block; margin-top: 2px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
.pay-table td.pay-total, .pay-table th.pay-total { background: var(--panel-2); color: var(--text); font-weight: 900; }
.pay-table td.pay-total { font-size: 0.95rem; }
.pay-table tfoot td { border-top: 2px solid var(--border); border-bottom: 0; font-weight: 900; }
.pay-name {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.pay-name:hover .strong { color: var(--accent); }
.pay-days-row td { padding-top: 2px; background: var(--panel-2); }
.pay-days { display: flex; flex-direction: column; gap: 6px; padding-left: 24px; }
.pay-week { display: grid; grid-template-columns: 76px repeat(7, minmax(0, 1fr)); align-items: center; gap: 4px; }
.pay-week-name { color: var(--muted); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.3px; text-transform: uppercase; }
.pay-day { display: flex; min-width: 0; flex-direction: column; align-items: center; padding: 3px 2px; border: 1px solid var(--rule); border-radius: 6px; background: var(--panel); }
.pay-day .d { color: var(--muted); font-size: 0.7rem; white-space: nowrap; }
.pay-day .h { font-variant-numeric: tabular-nums; font-weight: 700; }
.pay-day.weekend { background: var(--accent-soft); }
.pay-day.zero .h { color: var(--faint); font-weight: 400; }
.pay-foot { margin-top: 8px; }
.pay-settings { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.pay-settings .panel-head { flex-wrap: wrap; }
.pay-calendar tr.pay-past td { color: var(--muted); }
.pay-calendar input[type=date] { min-width: 128px; }
.pay-calendar .mg-chip { margin-left: 4px; }
.pay-acct { width: 64px; min-width: 0; }
.pay-year { width: auto; min-width: 0; }
/* Pay tab, hours paid (PayPaidPanel, PayPaidDialog, PayPage summary): per employee and week, logged | paid (input) |
   difference; red chip "Changed after pay". Difference: logged - paid (up: hours not paid, red; down: orange; none: green) */
.pay-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pay-paid-help { margin: -4px 0 8px; }
.pay-paid-table th small { display: block; margin-top: 2px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
.pay-paid-table th.pay-wk, .pay-paid-table td.pay-wk { border-left: 2px solid var(--rule); }
.pay-paid-table th[colspan] { text-align: center; }
.pay-paid-table td { vertical-align: middle; }
.pay-paid-box { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; }
.pay-paid-input { width: 84px; min-width: 0; }
.pay-paid-input.invalid { border-color: var(--bad); background: var(--bad-soft); }
.pay-paid-state { display: inline-flex; width: 20px; height: 20px; align-items: center; justify-content: center; }
.pay-paid-state .pay-saving { width: 16px !important; height: 16px !important; color: var(--accent); }
.pay-paid-state .pay-saved { color: var(--good-text); }
.pay-paid-state .pay-error { color: var(--bad); }
.pay-paid-error { display: block; max-width: 220px; margin-top: 2px; margin-left: auto; color: var(--bad); font-size: 0.74rem; font-weight: 700; text-align: right; white-space: normal; }
.pay-diff-cell { white-space: nowrap; }
.pay-diff { font-variant-numeric: tabular-nums; font-weight: 800; }
.pay-diff-up { color: var(--bad); }
.pay-diff-down { color: var(--warn); }
.pay-diff-zero { color: var(--good-text); }
.pay-chip { margin-left: 6px; border: 0; cursor: pointer; font-family: inherit; }
.pay-chip:hover, .pay-chip:focus-visible { outline: 2px solid var(--bad); outline-offset: 1px; }
.pay-more {
  display: inline-flex;
  margin-left: 4px;
  padding: 2px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--muted);
  cursor: pointer;
  vertical-align: middle;
}
.pay-more:hover, .pay-more:focus-visible { background: var(--accent-soft); color: var(--text); }
.pay-paid-summary .pay-sum-text { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.pay-paid-summary .pay-sum-person { display: inline-flex; gap: 6px; padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--panel) 60%, transparent); color: var(--text); font-weight: 700; }
.pay-notice.pay-ok { background: var(--good-soft); color: var(--good-text); }
.pay-dialog-title { font-weight: 800; }
.pay-dialog { display: flex; flex-direction: column; gap: 10px; }
.pay-dialog h4 { margin: 8px 0 0; font-size: 0.95rem; }
.pay-dialog .nowrap { white-space: nowrap; }
@media (max-width: 800px) {
  .mg-search { width: 100%; }
  .mg-figures { gap: 14px; }
  /* Phone: the seven tabs wrap and the search takes its own line (the page no longer scrolls sideways) */
  .apptabs:has(.mg-appsearch) { flex: 1 1 100%; flex-wrap: wrap; min-width: 0; }
  .apptabs:has(.mg-appsearch) .apptab { min-height: 34px; }
  .mg-appsearch { flex: 1 1 100%; margin-left: 0; padding: 0 0 8px; }
  .mg-appsearch input { width: 100%; }
  .mg-appsearch .results { left: 0; width: auto; }
}
@media (max-width: 1100px) {
  .mg-cols, .pay-settings { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .pay-pick { flex: 1 1 100%; }
  .pay-select { flex: 1; min-width: 0; }
  .pay-table th, .pay-table td { padding: 6px 4px; }
  .pay-table th { font-size: 0.64rem; letter-spacing: 0; }
  .pay-table td { font-size: 0.8rem; }
  .pay-table td.pay-total { font-size: 0.86rem; }
  .pay-days { padding-left: 0; }
  .pay-week { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
  .pay-week-name { grid-column: 1 / -1; }
  .pay-day .d { font-size: 0.62rem; }
  .pay-day .h { font-size: 0.78rem; }
  /* Hours paid: one card per employee, its name, then week 1 and week 2 on a line each (logged | paid | difference) with
     the column titles in the cells (data-label) */
  .pay-paid-table thead { display: none; }
  .pay-paid-table, .pay-paid-table tbody { display: block; }
  .pay-paid-table tr { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr) minmax(0, 1fr); gap: 6px 8px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
  .pay-paid-table td { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; padding: 0; border: 0 !important; text-align: left; white-space: normal; }
  .pay-paid-table td.pay-paid-name { grid-column: 1 / -1; }
  .pay-paid-table td.num { text-align: left; }
  .pay-paid-table td[data-label]::before { content: attr(data-label); max-width: 100%; color: var(--muted); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; white-space: normal; }
  .pay-paid-box { justify-content: flex-start; }
  .pay-paid-input { width: 76px; font-size: 1rem; }
  .pay-paid-error { margin-left: 0; text-align: left; }
  .pay-chip { max-width: 100%; margin: 4px 0 0; white-space: normal; text-align: left; }
}
/* Printed Pay tab: the period, its warnings and the table only (no bars, buttons or scrolling area) */
@media print {
  html:has(.pay-page), body:has(.pay-page) { display: block; height: auto; background: #ffffff; }
  body:has(.pay-page) .topbar, .pay-noprint { display: none !important; }
  body:has(.pay-page) .content { display: block; overflow: visible; padding: 0; }
  .pay-page .panel { margin-bottom: 10px; padding: 0; border: 0; box-shadow: none; }
  .pay-page .table-wrap { overflow: visible; }
  .pay-page .pay-name { cursor: default; }
}

/* ===== Management (client section, id account) ===== */
/* Management app of the client section (id account, ex Account): summary, purchase orders, invoices and their comments (Apps/Account). Also used by the
   invoice comments of the Management app (Apps/Management/InvoiceComments.razor). */
.ac-page, .ac-body { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ac-bar-sep { width: 1px; height: 22px; margin: 0 4px; background: var(--border); }
.ac-view-select { min-width: 280px; }

.ac-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 6px 16px; }
.ac-head-note { padding-bottom: 3px; }
.ac-eyebrow { color: var(--muted); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; }
.ac-eyebrow b { color: var(--text); }
.ac-title { margin: 2px 0 0; font-size: 1.45rem; font-weight: 900; line-height: 1.2; }
.ac-title:focus { outline: none; }
.panel h2.ac-title { font-size: 1.35rem; font-weight: 900; }
.panel h3.ac-h { display: flex; align-items: center; gap: 6px; margin: 0; }
.ac-kpis .kpi .value { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.ac-kpis .kpi .value.ac-kpi-date { font-size: 1.3rem; }
.ac-neg { color: var(--bad); }
.ac-empty { min-height: 80px; }
.ac-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Chips: colour + text (+ icon), never colour alone */
.ac-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--chip);
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
  white-space: nowrap;
}
.ac-chip .mud-icon-root { font-size: 0.95rem; }
.ac-chip.ac-ok { background: var(--good-soft); color: var(--good-text); }
.ac-chip.ac-due { background: var(--info-soft); color: var(--info); }
.ac-chip.ac-low { background: var(--warn-soft); color: var(--warn); }
.ac-chip.ac-over { background: var(--bad-soft); color: var(--bad); }
.ac-chip.big { padding: 4px 12px; font-size: 0.85rem; }
.ac-chip.ac-off { background: var(--chip); color: var(--muted); }                 /* a declined quote */
.ac-local { margin-top: 2px; color: var(--accent); font-size: 0.8rem; font-weight: 800; }   /* ≈ amount in the client's currency */
.ac-quotes .sub { display: block; color: var(--muted); font-size: 0.78rem; }

/* Buttons and links (no row selection: each row has its own actions) */
.ac-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;   /* a link and a button side by side stay on one line (their baselines differ) */
  transition: background 120ms ease, border-color 120ms ease;
}
.ac-btn:hover { border-color: var(--accent); background: var(--accent-soft); }
.ac-btn:focus-visible, .ac-po-card:focus-visible, .ac-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ac-btn.on, .ac-btn.primary { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.ac-btn.primary:hover:not(:disabled) { filter: brightness(1.08); }
.ac-btn:disabled, .ac-btn.disabled { cursor: not-allowed; opacity: 0.4; pointer-events: none; }
.ac-btn.ac-icon { padding: 5px 6px; }
.ac-count {
  display: inline-block;
  min-width: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.7rem;
  font-weight: 900;
  line-height: 18px;
  text-align: center;
}
.ac-btn.on .ac-count { background: var(--on-accent); color: var(--accent); }
.ac-link { color: var(--accent); font-weight: 700; text-decoration: none; }
.ac-link:hover { text-decoration: underline; }
.ac-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ac-spacer { flex: 1; }
.ac-more { display: flex; justify-content: center; padding-top: 10px; }

/* Purchase order cards (links to the PO's view) and consumption bars */
.ac-po-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.ac-po-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-left: 5px solid var(--good);
  border-radius: var(--radius);
  background: var(--panel);
  color: inherit;
  text-decoration: none;
  transition: box-shadow 150ms ease, transform 150ms ease;
}
.ac-po-card:hover { box-shadow: 0 10px 28px rgba(0, 0, 0, 0.1); transform: translateY(-1px); }
.ac-po-card.ac-low { border-left-color: #d08a2a; }
.ac-po-card.ac-over { border-left-color: var(--bad); }
.ac-po-card.ac-off, .ac-po-card.ac-none { border-left-color: #c7c7c7; }
.ac-po-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ac-po-number { font-size: 0.95rem; font-weight: 900; overflow-wrap: anywhere; }
.ac-po-summary { min-height: 1.2em; color: var(--muted); font-size: 0.88rem; }
.ac-po-figures, .ac-po-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; font-size: 0.84rem; font-variant-numeric: tabular-nums; }
.ac-po-foot { color: var(--muted); }
.ac-po-foot b { color: var(--text); }
.ac-po-go { display: inline-flex; align-items: center; color: var(--accent); font-weight: 700; }
.ac-meter { height: 8px; overflow: hidden; border-radius: 999px; background: var(--chip); }
.ac-meter > span { display: block; height: 100%; border-radius: inherit; background: var(--good); }
.ac-meter.ac-low > span { background: #d08a2a; }
.ac-meter.ac-over > span { background: var(--bad); }
.ac-meter.ac-off > span, .ac-meter.ac-none > span { background: #a3a3a3; }
.ac-meter.big { height: 12px; margin: 12px 0 6px; }
.ac-closed { margin-top: 12px; }
.ac-closed > summary { padding: 4px 0; color: var(--muted); cursor: pointer; font-size: 0.85rem; font-weight: 800; }
.ac-closed[open] > summary { margin-bottom: 10px; }

/* One purchase order */
.ac-po-head { border-top: 4px solid var(--good); }
.ac-po-head.ac-low { border-top-color: #d08a2a; }
.ac-po-head.ac-over { border-top-color: var(--bad); }
.ac-po-head.ac-off, .ac-po-head.ac-none { border-top-color: #c7c7c7; }
.ac-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-top: 14px; }
.ac-figures > div { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: 8px; background: var(--panel-2); }
.ac-figures .label, .ac-projects-label, .ac-add-label {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.ac-figures b { font-size: 1.2rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.ac-projects { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.ac-projects-label { margin-right: 4px; }
.ac-project { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; background: var(--accent-soft); font-size: 0.8rem; font-weight: 700; }
.ac-project .mud-icon-root { color: var(--accent); font-size: 1rem; }
.ac-project.done { background: var(--chip); color: var(--muted); }
.ac-project.done .mud-icon-root { color: var(--good); }

/* Invoices and their comments (opened under the row) */
.ac-actions { text-align: right; white-space: nowrap; }
.ac-actions .ac-btn + .ac-btn { margin-left: 6px; }
.ac-invoices tr.ac-open > td { border-bottom-color: transparent; }
.ac-thread-row > td { padding: 2px 10px 14px; }
.ac-thread-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; font-size: 0.85rem; }
.ac-close { padding: 2px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; }
.ac-close:hover { background: var(--accent-soft); }
.ac-thread { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel-2); }
.ac-add { display: flex; flex-direction: column; gap: 6px; }
.ac-textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 56px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--field);
  color: var(--text);
  font: inherit;
  font-size: 0.88rem;
  resize: vertical;
}
.ac-textarea:focus { border-color: var(--accent); outline: 2px solid var(--accent-soft); }
.ac-add-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ac-thread-empty { padding: 4px 2px; }
.ac-comments { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ac-comment { padding: 8px 12px; border: 1px solid var(--rule); border-left: 4px solid #c9c4b3; border-radius: 8px; background: var(--panel); }
.ac-comment.company { border-left-color: var(--brand-gold); }
.ac-comment-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 0.82rem; }
.ac-avatar { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 0.72rem; font-weight: 900; }
.ac-comment.company .ac-avatar { background: var(--brand-gold); color: var(--text); }
.ac-source { padding: 0 7px; border-radius: 999px; background: var(--chip); color: var(--muted); font-size: 0.7rem; font-weight: 800; }
.ac-when { margin-left: auto; color: var(--faint); font-size: 0.75rem; }
.ac-comment-text { margin-top: 4px; font-size: 0.88rem; overflow-wrap: anywhere; white-space: pre-wrap; }

/* Narrow screens and the Reporting portal's frame */
@media (max-width: 720px) {
  .ac-hide-narrow, .ac-btn-text, .ac-bar-sep { display: none; }
  .ac-page .demo-select { flex: 1 1 200px; min-width: 0; }
  .ac-title, .panel h2.ac-title { font-size: 1.2rem; }
  .ac-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ac-kpis .kpi .value { font-size: 1.2rem; }
  .ac-kpis .kpi .value.ac-kpi-date { font-size: 1.05rem; }
  .ac-po-grid { grid-template-columns: minmax(0, 1fr); }
}
.ac-page .panel-head { flex-wrap: wrap; }
@media (max-width: 720px) {
  /* Invoices as cards: number, date, total / status, actions */
  .ac-invoices thead { display: none; }
  .ac-invoices, .ac-invoices tbody { display: block; }
  .ac-invoices tr { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px 10px; padding: 10px 2px; border-bottom: 1px solid var(--rule); }
  .ac-invoices tr.ac-open { border-bottom: 0; }
  .ac-invoices td { padding: 0; border: 0; }
  .ac-invoices td.ac-actions { grid-column: 2 / -1; }
  .ac-invoices tr.ac-thread-row { display: block; padding: 0 0 12px; }
  .ac-invoices tr.ac-thread-row > td { display: block; padding: 0; }
  .ac-thread { padding: 10px; }
}

/* ===== Messaging (msg2-) and Messaging of the client section (us-) ===== */
/* Messaging app on MessagingSystem (Apps/Messaging: overview, messages, a text, billing, a client's month) and the client
   app Messaging (id usage, Apps/Usage). Also uses the shared tables, panels, KPIs and the mg- chips / crumbs / hero. */
.msg2-link { color: var(--accent); font-weight: 700; text-decoration: none; white-space: nowrap; }
.msg2-link:hover { text-decoration: underline; }
.msg2-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.msg2-btn:hover { border-color: var(--accent); background: var(--accent-soft); }
.msg2-btn.disabled { cursor: not-allowed; opacity: 0.4; pointer-events: none; }
.msg2-btn:focus-visible, .msg2-link:focus-visible, .msg2-kpi:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Month: previous, the months, next */
.msg2-monthpick { display: inline-flex; align-items: center; gap: 4px; }
.msg2-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
}
.msg2-step:hover { border-color: var(--accent); background: var(--accent-soft); }
.msg2-step.off { color: var(--faint); opacity: 0.5; }
.msg2-select, .msg2-input {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--field);
  color: var(--text);
  font: inherit;
  font-size: 0.86rem;
}
.msg2-select { min-width: 150px; max-width: 260px; font-weight: 700; }
.msg2-select:focus, .msg2-input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 2px var(--accent-soft); }
.msg2-num { width: 140px; text-align: right; font-variant-numeric: tabular-nums; }
.msg2-filters { gap: 8px 10px; }
.msg2-inline { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 0.82rem; font-weight: 700; }
.msg2-search { width: 240px; }

/* Headline numbers: the month against the one before; a linked tile opens its detail */
.msg2-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.msg2-kpis .kpi .value { font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.msg2-kpi { color: inherit; text-decoration: none; transition: border-color 0.15s, box-shadow 0.15s; }
.msg2-kpi:hover { border-color: var(--accent); box-shadow: 0 2px 10px rgba(141, 127, 86, 0.18); }
.msg2-kpi.msg2-alert .value { color: var(--bad); }
.msg2-final { color: var(--good-text); font-weight: 700; }
.msg2-provisional { color: var(--warn); font-weight: 700; text-decoration: none; }
a.msg2-provisional:hover { text-decoration: underline; }

/* Notices: pricing late (warning), texts waiting for their price (info) */
.msg2-warning, .msg2-info { display: flex; align-items: flex-start; gap: 8px; padding: 9px 12px; border-radius: 8px; font-size: 0.86rem; font-weight: 600; }
.msg2-warning { background: var(--warn-soft); color: var(--warn); }
.msg2-info { background: var(--accent-soft); color: var(--accent-strong); }
.msg2-warning a, .msg2-info a { color: inherit; font-weight: 800; }
.msg2-warning .mud-icon-root, .msg2-info .mud-icon-root { flex: 0 0 auto; margin-top: 1px; }
.mg-hero .msg2-warning, .mg-hero .msg2-info { margin-top: 4px; }

/* Charts and tables */
.grid-2.msg2-even, .grid-2.us-even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.msg2-chart-empty { min-height: 260px; }
.msg2-barcol { width: 22%; min-width: 80px; }
.msg2-bar { display: block; height: 8px; min-width: 2px; border-radius: 999px; background: var(--accent); opacity: 0.55; }
.table tr.msg2-current td, .table tr.us-current td { background: var(--accent-soft); }
.table tr.msg2-current td:first-child, .table tr.us-current td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.table tr.msg2-quiet td { color: var(--muted); }
.table tr.msg2-noclient td { background: var(--note-soft); }
.msg2-billing tfoot td { padding: 8px 10px; border-top: 2px solid var(--rule); font-weight: 800; }
.msg2-preview { min-width: 220px; max-width: 420px; overflow: hidden; color: var(--muted); font-size: 0.82rem; text-overflow: ellipsis; white-space: nowrap; }
.msg2-account { display: block; margin-top: 2px; color: var(--muted); font-size: 0.74rem; font-weight: 700; white-space: nowrap; }
.msg2-foot, .us-foot { margin-top: 8px; }
.msg2-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; padding-top: 12px; }
.msg2-markup {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.msg2-markup .mud-icon-root { color: var(--muted); font-size: 0.95rem; }
.msg2-markup:hover { border-color: var(--accent); background: var(--accent-soft); }
.msg2-markup:hover .mud-icon-root { color: var(--accent); }
.msg2-markup.big { font-size: 1.05rem; }

/* One text */
.msg2-text {
  padding: 12px 14px;
  border: 1px solid var(--rule);
  border-left: 4px solid var(--brand-gold);
  border-radius: 8px;
  background: var(--panel-2);
  font-size: 0.95rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.msg2-details { display: grid; grid-template-columns: minmax(120px, auto) minmax(0, 1fr); gap: 6px 14px; margin: 0; font-size: 0.86rem; }
.msg2-details dt { color: var(--muted); font-weight: 700; }
.msg2-details dd { margin: 0; overflow-wrap: anywhere; }
.msg2-mono { font-family: Consolas, "Courier New", monospace; font-size: 0.8rem; }

/* Markup dialog */
.msg2-dialog-title { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; }
.msg2-field { display: flex; flex-direction: column; gap: 4px; }
.msg2-field > span { color: var(--muted); font-size: 0.76rem; font-weight: 800; letter-spacing: 0.3px; text-transform: uppercase; }
.msg2-dialog-error { margin-top: 10px; }

/* ---- Messaging (client section, id usage) ---- */
.us-page, .us-body { display: flex; min-width: 0; flex-direction: column; gap: 12px; }
.us-bar-sep { width: 1px; height: 22px; margin: 0 4px; background: var(--border); }
.us-month-select { min-width: 180px; }
.us-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 6px 16px; }
.us-head-note { max-width: 520px; padding-bottom: 3px; }
.us-eyebrow { color: var(--muted); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; }
.us-title { margin: 2px 0 0; font-size: 1.45rem; font-weight: 900; line-height: 1.2; }
.panel h2.us-title { font-size: 1.35rem; }
.us-crumbs { display: flex; align-items: center; gap: 8px; }
.us-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px; }
.us-figures > div { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: 8px; background: var(--panel-2); }
.us-figures .label { color: var(--muted); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.3px; text-transform: uppercase; }
.us-figures b { font-size: 1.35rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.us-figures .sub { color: var(--muted); font-size: 0.78rem; }
.us-mark { color: var(--warn); font-weight: 800; }
.us-phone { font-variant-numeric: tabular-nums; letter-spacing: 0.2px; }
.us-text-head { display: flex; flex-direction: column; gap: 12px; border-top: 4px solid var(--accent); }
/* Client Messaging reports (UsagePage): tiles, breakdown tables with a bar of their share, changes against the year before */
.us-kpis { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.us-forecast { border-top: 3px solid var(--brand-gold); }
.us-export { margin-left: 4px; }
.us-shares td { vertical-align: middle; }
.us-shares .sub { display: block; color: var(--muted); font-size: 0.78rem; }
.us-sev { display: inline-block; margin-left: 8px; vertical-align: middle; }
.us-bar-cell { width: 28%; }
.us-bar { display: block; min-width: 2px; height: 9px; border-radius: 0 4px 4px 0; background: var(--accent); }
.us-change { color: var(--muted); font-size: 0.82rem; font-weight: 800; white-space: nowrap; }
.us-change.up { color: var(--warn); }      /* more texts than a year before */
.us-change.down { color: var(--good); }
.table .sub.us-phone { display: block; color: var(--muted); font-size: 0.78rem; }

@media (max-width: 1100px) {
  .grid-2.msg2-even, .grid-2.us-even { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .msg2-search, .msg2-select { width: 100%; max-width: none; }
  .msg2-preview { display: none; }
  .msg2-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .msg2-kpis .kpi .value { font-size: 1.2rem; }
  .us-page .demo-select { flex: 1 1 200px; min-width: 0; }
  .us-figures > div { padding: 8px 10px; }
  .us-bar-sep { display: none; }
  .us-title, .panel h2.us-title { font-size: 1.2rem; }
  .us-figures b { font-size: 1.1rem; }
  .us-hide-narrow { display: none; }
  .msg2-details { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .msg2-details dd { margin-bottom: 6px; }
}

/* ---- Sign-in, mine picker, user menu (MainLayout, Pages\Login.razor) and Administration > Clients (admin-) ---- */

/* Mine picker of the top bar: the mine every app shows (locked when the company is fixed to one mine) */
.mine-picker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 220px;
  padding: 5px 8px 5px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  white-space: nowrap;
}
.mine-picker .mud-icon-root { flex: 0 0 auto; color: var(--accent); }
.mine-picker:hover { border-color: var(--accent); }
.mine-picker.mine-locked { cursor: default; background: transparent; }
.mine-picker.mine-locked:hover { border-color: var(--border); }
.mine-name { overflow: hidden; text-overflow: ellipsis; }
.mine-item .mud-menu-item-text { display: flex; flex-direction: column; line-height: 1.25; }
.mine-item-name { font-weight: 700; }
.mine-item-sub { color: var(--muted); font-size: 0.78rem; }
.mine-item.current .mine-item-name { color: var(--accent); }

/* The user chip is the button of the user menu */
button.user-chip { background: transparent; color: inherit; cursor: pointer; font: inherit; }
button.user-chip:hover { border-color: var(--accent); }
.user-card { display: flex; flex-direction: column; gap: 2px; min-width: 220px; padding: 10px 16px 8px; border-bottom: 1px solid var(--rule); }

/* Welcome page (/login): one card in the middle of the beige page */
.login-page { display: flex; flex: 1; align-items: center; justify-content: center; padding: 24px 0; }
.login-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 440px;
  padding: 32px 28px 24px;
  border-top: 4px solid var(--brand-gold);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-align: center;
}
.login-logo { width: 64px; height: 64px; }
.login-title { margin: 0; color: var(--text); font-family: var(--brand-font); font-size: 2.2rem; font-weight: 700; letter-spacing: -0.035em; }
.login-sub { margin: 0; color: var(--muted); font-family: var(--brand-font); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; }
.login-text { margin: 6px 0 4px; color: var(--text); }
.login-card .error, .login-card .notice { width: 100%; text-align: left; }

/* Legal pages (Pages\Privacy.razor, Pages\Terms.razor, frame Shared\LegalPage.razor): public, a readable column of text */
.legal-page { display: flex; justify-content: center; padding: 24px 0 40px; }
.legal-card { width: min(100%, 760px); padding: 28px 32px; line-height: 1.55; }
.legal-card h1 { margin: 6px 0 2px; font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; }
.legal-card h2 { margin: 22px 0 6px; font-size: 1.02rem; font-weight: 800; }
.legal-card p, .legal-card li { color: var(--text); }
.legal-card ul { padding-left: 20px; }
.legal-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-family: var(--brand-font); font-size: 1.25rem; font-weight: 700; letter-spacing: -0.035em; text-decoration: none; }
.legal-brand svg { width: 32px; height: 32px; }
.legal-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin-top: 22px; font-size: 0.82rem; }
.legal-links a { color: var(--muted); }
.legal-links a:hover { color: var(--accent); }
@media (max-width: 600px) { .legal-card { padding: 20px 16px; } }
.login-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  margin-top: 6px;
  padding: 11px 16px;
  border: 1px solid #8c8c8c;
  border-radius: 6px;
  background: #ffffff;
  color: #5e5e5e;
  cursor: pointer;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
}
.login-button:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }
.ms-logo { width: 21px; height: 21px; }
.login-help { margin-top: 6px; }
.signin-refused h2 { display: flex; align-items: center; gap: 8px; }
button.subtab { border: 0; cursor: pointer; font: inherit; }

/* Administration > Clients, Access, History */
.admin-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px 16px; align-items: start; }
.admin-apps { display: flex; flex-wrap: wrap; gap: 0 18px; margin: 4px 0 8px; }
.admin-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.admin-state {
  display: inline-block;
  margin-right: 6px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 800;
  white-space: nowrap;
}
.admin-state.on { background: var(--accent); color: var(--on-accent); }
.admin-state.off { background: var(--bad-soft); color: var(--bad); }
.admin-state.warn { background: var(--warn-soft); color: var(--warn); }
.admin-consent { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.admin-consent code { overflow-wrap: anywhere; }
.admin-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: 8px 0 14px; }
.admin-facts dt { color: var(--muted); font-weight: 700; }
/* Administration > Access, "Test the office link": the button, the verdict, then the local API's answer or the error */
.admin-gateway { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 4px 0 14px; }
.admin-gateway .good { color: var(--good, #2f7d32); font-weight: 700; }
.admin-gateway .warn { color: var(--bad); font-weight: 700; }
.admin-gateway-detail { flex-basis: 100%; padding: 8px 10px; border-radius: 6px; background: var(--panel-2); font-size: 0.8rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.admin-facts dd { margin: 0; }
.admin-code { display: inline-block; margin: 0 6px 4px 0; }

/* No Client | Employee switch (clients, the welcome page): the brand and the tools only */
.mainbar.no-switch { grid-template-columns: minmax(0, 1fr) auto; }
/* The mine picker widens the right of the bar: the Client | Employee switch leaves the middle earlier, then goes under */
@media (max-width: 1320px) {
  .mainbar { grid-template-columns: auto minmax(0, 1fr) auto; }
}
@media (max-width: 1080px) {
  .mainbar { grid-template-columns: minmax(0, 1fr) auto; }
  .section-switch { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
}
@media (max-width: 900px) {
  .mine-picker { max-width: 150px; }
}
@media (max-width: 600px) {
  .mine-name { display: none; }
  /* A phone: the brand keeps OneStop only, so the mine picker never covers its subtitle */
  .brand-sub { display: none; }
  .brand-text { overflow: hidden; }
  .admin-facts { grid-template-columns: minmax(0, 1fr); }
  /* The language and the light | dark switches a bit smaller, so that the bar keeps room for the brand */
  .tools { gap: 6px; }
  .lang-switch button { padding: 3px 6px; }
  .theme-switch button { padding: 3px 4px; }
  .theme-switch .mud-icon-root { width: 15px; height: 15px; font-size: 15px; }
}
/* A narrow phone with the mine picker: the wordmark would be cut next to the mine, the two switches and the user; the
   logo alone instead */
@media (max-width: 440px) {
  .mainbar:has(.mine-picker) :is(.brand-divider, .brand-text) { display: none; }
}

/* ==== Dark theme (html[data-theme="dark"]): what the tokens of :root cannot do alone ==== */
/* The logos' dark parts would vanish on the dark: their light-grey versions instead (same shapes) */
:root[data-theme="dark"] img[src="ttech-logo.svg"],
:root[data-theme="dark"] img[src="logo.png"] { content: url("ttech-logo-dark.svg"); }
:root[data-theme="dark"] img[src="logo.svg"] { content: url("logo-dark.svg"); }
/* 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); }
/* Management: worklog quantity differs from the invoiced one (Retool's pink) */
:root[data-theme="dark"] .table tr.mg-mismatch td { background: #46241f; }
/* The Microsoft sign-in button in its dark version (Microsoft's own guidelines: dark grey, white text) */
:root[data-theme="dark"] .login-button { border-color: #5e5e5e; background: #2f2f2f; color: #ffffff; }
:root[data-theme="dark"] .login-button:hover { border-color: var(--accent); background: #3a3a3a; }
/* 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); }

/* Charts (ApexCharts): every app's chart follows the theme here, without being drawn again. The options of each chart give
   the light colours (axis labels #6b7280, grid #eeeeee, white gaps between stacked bars); CSS wins over those SVG
   attributes. The simulated Power BI reports (.pbi) keep Power BI's light look. */
:root[data-theme="dark"] :is(.apexcharts-xaxis-label, .apexcharts-yaxis-label, .apexcharts-xaxis-title-text, .apexcharts-yaxis-title-text):not(.pbi *) { fill: var(--muted); }
:root[data-theme="dark"] :is(.apexcharts-gridline, .apexcharts-grid-borders line, .apexcharts-xaxis-tick, .apexcharts-xaxis line, .apexcharts-yaxis line):not(.pbi *) { stroke: var(--border); }
:root[data-theme="dark"] .apexcharts-legend-text:not(.pbi *) { color: var(--text) !important; }
:root[data-theme="dark"] :is(.apexcharts-bar-area, .apexcharts-pie-area)[stroke="#ffffff"]:not(.pbi *),
:root[data-theme="dark"] :is(.apexcharts-bar-area, .apexcharts-pie-area)[stroke="#fff"]:not(.pbi *) { stroke: var(--panel); }
:root[data-theme="dark"] .apexcharts-tooltip.apexcharts-theme-light:not(.pbi *) { border-color: var(--border); background: var(--panel); color: var(--text); box-shadow: var(--shadow); }
:root[data-theme="dark"] .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title:not(.pbi *) { border-bottom-color: var(--border); background: var(--head-bg); color: var(--muted); }
:root[data-theme="dark"] .apexcharts-tooltip :is(.apexcharts-tooltip-text, .apexcharts-tooltip-text-y-label, .apexcharts-tooltip-text-y-value):not(.pbi *) { color: var(--text); }
:root[data-theme="dark"] .apexcharts-xaxistooltip:not(.pbi *) { border-color: var(--border); background: var(--head-bg); color: var(--text); }
:root[data-theme="dark"] .apexcharts-xaxistooltip-bottom:not(.pbi *)::after { border-bottom-color: var(--head-bg); }
:root[data-theme="dark"] .apexcharts-xaxistooltip-bottom:not(.pbi *)::before { border-bottom-color: var(--border); }
:root[data-theme="dark"] .apexcharts-menu:not(.pbi *) { border-color: var(--border); background: var(--panel); color: var(--text); }
:root[data-theme="dark"] .apexcharts-menu-item:hover { background: var(--chip); }

/* Printing always uses the light colours (white paper) */
@media print {
  :root[data-theme="dark"] {
    --background: #ffffff;
    --panel: #ffffff;
    --panel-2: #fbfaf6;
    --text: #1f2937;
    --muted: #6b7280;
    --faint: #9ca3af;
    --border: rgba(0, 0, 0, 0.1);
    --rule: rgba(0, 0, 0, 0.07);
    color-scheme: light;
  }
}