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

/* 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; }
/* One column up to 1,100 px, as before the split (wave 0.4): in app.css, the .grid-2 of the same element came AFTER this rule
   and its @media (max-width: 1100px) gave one column; now that this file follows app.css, the same width says it here */
@media (max-width: 1100px) { .msg-grid { grid-template-columns: minmax(0, 1fr); } }
.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(--os-accent-fill); background: var(--os-accent-fill); color: var(--os-on-accent-fill); }
.msg-contact.on small { color: var(--os-on-accent-fill); }
.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); } }

/* ===== 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; }
/* Client Messaging, V1.18: the Client section's bar, "Send a text" (UsageSendPage) and the recent numbers of both Send pages */
.us-clientbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.us-clientbar .spacer { flex: 1; }
.demo-bar .us-send-link { margin-left: auto; }
.us-send-filter { width: 100%; margin-top: 8px; }
.msg-contact.us-recent { border-style: dashed; font-weight: 600; }
.us-send-side { display: grid; gap: 16px; align-content: start; min-width: 0; }
.us-contact-form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; }
.us-contact-form input { flex: 1 1 140px; min-width: 0; }
.us-queued-text { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.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; }
}