/* email.css — Managed Email Security tab.
 *
 * Palette and spacing follow firewall.css so the two newest tabs read as one
 * app rather than two. Colours are stated with fallbacks rather than assuming a
 * theme variable exists.
 */

/* ── Range tabs ────────────────────────────────────────────────────────────── */

/* Laid out like the Acronis console's own header so the two screens can be read
   side by side, with the resolved dates spelled out — "last quarter" on its own
   is not a date range anyone can check a figure against. */
.em-toolbar {
  display: flex; align-items: center; gap: 0.6rem;
  margin-bottom: 1rem; border-bottom: 1px solid rgba(127, 127, 127, 0.2);
}
.em-ranges { display: flex; align-items: center; gap: 0.2rem; flex: 1 1 auto; flex-wrap: wrap; }

.em-range-tab {
  background: none; border: 0; border-bottom: 2px solid transparent;
  padding: 0.55rem 0.8rem; font: inherit; font-size: 0.78rem;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: #8C8C8C; cursor: pointer;
}
.em-range-tab:hover { color: inherit; }
.em-range-tab.is-on { color: inherit; border-bottom-color: rgb(var(--tint-rgb)); font-weight: 600; }

.em-range-dates {
  margin-left: auto; font-size: 0.78rem; color: #8C8C8C;
  font-variant-numeric: tabular-nums; padding-right: 0.3rem;
}

/* ── Hero band ─────────────────────────────────────────────────────────────── */

.em-hero {
  display: flex; align-items: stretch; gap: 1.2rem; flex-wrap: wrap;
  padding: 0 0 1rem; margin-bottom: 0.6rem;
  border-bottom: 1px solid rgba(127, 127, 127, 0.18);
}

.em-badge {
  flex: 0 0 auto; min-width: 7.5rem; border-radius: 6px;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 0.7rem 1rem; color: #fff;
}
.em-badge-v { font-size: 1.5rem; font-weight: 700; line-height: 1.1; }
.em-badge-l { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.92; }
.em-badge-good { background: #22C55E; }
.em-badge-fair { background: #F59E0B; }
.em-badge-poor { background: #E8394A; }
/* No rate at all is grey and dashed — never a green badge with an em dash in it,
   which reads at a glance as a pass. */
.em-badge-nd   { background: rgba(127, 127, 127, 0.25); color: #6A6A6A; }
.em-badge-nd .em-nd { color: inherit; }

.em-hero-main { flex: 1 1 16rem; min-width: 0; align-self: center; }
.em-hero-n { font-size: 1.8rem; font-weight: 700; line-height: 1.15; }
.em-hero-n span {
  font-size: 0.8rem; font-weight: 600; color: #8C8C8C;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.em-hero-sub { font-size: 0.85rem; color: #8C8C8C; margin-top: 0.25rem; }
.em-hero-den { font-size: 0.75rem; color: #8C8C8C; margin-top: 0.3rem; opacity: 0.9; }

.em-inline-btn {
  font: inherit; font-size: inherit; color: rgb(var(--tint-rgb)); cursor: pointer;
  background: none; border: 0; padding: 0; text-decoration: underline;
}

.em-counters { display: flex; gap: 0.5rem; align-self: center; flex-wrap: wrap; }
.em-counter {
  min-width: 5.5rem; text-align: center; padding: 0.5rem 0.7rem;
  border: 1px solid rgba(127, 127, 127, 0.2); border-radius: 6px;
  background: transparent; color: inherit; font: inherit;
}
.em-counter-n { font-size: 1.1rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.em-counter-l { font-size: 0.68rem; color: #8C8C8C; text-transform: uppercase; letter-spacing: 0.04em; }

.em-stat-btn { cursor: pointer; }
.em-stat-btn:hover { border-color: rgb(var(--tint-rgb)); }

/* Screen-reader-only label: the search box is obvious by its placeholder to
   someone who can see it, and unlabelled to someone who cannot. */
.em-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ── Sync strip ────────────────────────────────────────────────────────────── */

/* "Can I trust these numbers" is the first question, so it is answered above
   them rather than in a footnote below two hundred alert rows. */
.em-strip {
  font-size: 0.8rem; color: #8C8C8C;
  padding: 0.5rem 0.8rem; margin-bottom: 0.9rem;
  border-radius: 5px; background: rgba(127, 127, 127, 0.07);
  border: 1px solid rgba(127, 127, 127, 0.18);
}
.em-strip.em-warn {
  color: #C0392B; background: rgba(232, 57, 74, 0.07);
  border-color: rgba(232, 57, 74, 0.3);
}

.em-h {
  margin: 1.6rem 0 0.7rem; font-size: 0.95rem; font-weight: 700;
  letter-spacing: 0.01em;
}

.em-note {
  font-size: 0.82rem; line-height: 1.5; color: #8C8C8C;
  padding: 0.6rem 0.8rem; margin: 0.5rem 0;
  border-left: 3px solid rgba(127, 127, 127, 0.3);
  background: rgba(127, 127, 127, 0.06); border-radius: 0 4px 4px 0;
}
.em-note strong { color: inherit; }
.em-note code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.95em;
}
.em-warn { border-left-color: #E8394A; color: #C0392B; background: rgba(232, 57, 74, 0.07); }

/* "No data" is never zero, and never renders like a value. */
.em-nd { color: #8C8C8C; font-weight: 400; }
.em-good { color: #22C55E; }
.em-bad  { color: #E8394A; font-weight: 600; }

/* ── Outcome donut ─────────────────────────────────────────────────────────── */

.em-level-body { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.em-donut-wrap { flex: 0 0 9.5rem; }
.em-donut { width: 9.5rem; height: 9.5rem; transform: rotate(-90deg); }
.em-arc-bg { stroke: rgba(127, 127, 127, 0.15); }
.em-arc { transition: stroke-width .15s ease; }
.em-donut-v, .em-donut-l {
  transform: rotate(90deg); transform-origin: 21px 21px;
  text-anchor: middle; fill: currentColor;
}
.em-donut-v { font-size: 6px; font-weight: 700; }
.em-donut-l { font-size: 2.4px; fill: #8C8C8C; text-transform: uppercase; letter-spacing: 0.08em; }
.em-donut-empty {
  width: 9.5rem; height: 9.5rem; border-radius: 50%;
  border: 5px solid rgba(127, 127, 127, 0.15);
  display: flex; align-items: center; justify-content: center; font-size: 0.8rem;
}

.em-sl-stopped { stroke: #22C55E; background: #22C55E; }
.em-sl-pulled  { stroke: #F59E0B; background: #F59E0B; }
.em-sl-through { stroke: #E8394A; background: #E8394A; }
.em-sl-unknown { stroke: #B4B4B4; background: #B4B4B4; }

.em-slices { margin-top: 0.7rem; display: flex; flex-direction: column; gap: 0.25rem; }
.em-sl-row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; }
.em-sl-n { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }

.em-level-side { display: flex; flex-direction: column; gap: 0.5rem; flex: 1 1 8rem; }
.em-mini {
  padding: 0.5rem 0.7rem; border-radius: 6px;
  border: 1px solid rgba(127, 127, 127, 0.2); border-left-width: 3px;
}
.em-mini-n { font-size: 1.2rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.em-mini-l { font-size: 0.72rem; color: #8C8C8C; }
.em-mini-bad  { border-left-color: #E8394A; }
.em-mini-warn { border-left-color: #F59E0B; }

/* ── Highlighted types and amounts ─────────────────────────────────────────── */

.em-hl { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); }
.em-hl-i { border-left: 1px solid rgba(127, 127, 127, 0.2); padding-left: 0.6rem; }
.em-hl-i:first-child { border-left: 0; padding-left: 0; }
.em-hl-l { font-size: 0.75rem; color: #8C8C8C; line-height: 1.3; min-height: 2.1em; }
.em-hl-n { font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.em-amounts { display: flex; flex-direction: column; }
.em-am {
  display: flex; align-items: flex-start; gap: 0.6rem;
  padding: 0.55rem 0; border-top: 1px solid rgba(127, 127, 127, 0.14);
}
.em-am:first-child { border-top: 0; }
.em-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; margin-top: 0.35rem; }
.em-am-t { flex: 1 1 auto; min-width: 0; }
.em-am-l { font-size: 0.83rem; font-weight: 600; }
.em-am-d { font-size: 0.75rem; color: #8C8C8C; line-height: 1.4; }
.em-am-n { flex: 0 0 auto; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ── Breakdown grid ────────────────────────────────────────────────────────── */

.em-grid {
  display: grid; gap: 0.8rem; margin-top: 0.4rem;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
}
.em-grid-2 { grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr)); }
.em-legend-wrap { flex-wrap: wrap; }
.em-lg { display: inline-flex; align-items: center; gap: 0.3rem; margin-right: 0.6rem; }
.em-card {
  padding: 0.2rem 1rem 1rem; border-radius: 6px;
  border: 1px solid rgba(127, 127, 127, 0.18);
}
.em-card .em-h:first-child { margin-top: 1rem; }

/* ── Trend ─────────────────────────────────────────────────────────────────── */

.em-chart { margin: 0.4rem 0 0.8rem; }
.em-chart svg {
  width: 100%; height: 130px; display: block;
  background: rgba(127, 127, 127, 0.05); border-radius: 5px;
}
/* The background bar is the day's total, so the part left showing above the
   stopped bar is what got through — drawn in the alarming colour, because that
   remainder is the reason to look at this chart at all. */
.em-bar-total     { fill: rgba(232, 57, 74, 0.45); }
.em-bar-contained { fill: #22C55E; }

.em-dates {
  display: flex; justify-content: space-between;
  font-size: 0.72rem; color: #8C8C8C; margin-top: 0.25rem;
  font-variant-numeric: tabular-nums;
}

.em-legend {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: 0.75rem; color: #8C8C8C; margin-top: 0.4rem;
}
.em-key { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.em-k-total     { background: rgba(232, 57, 74, 0.45); }
.em-k-contained { background: #22C55E; }
.em-axis { margin-left: auto; font-variant-numeric: tabular-nums; }

/* ── Breakdown bars ────────────────────────────────────────────────────────── */

.em-bars { display: flex; flex-direction: column; gap: 0.35rem; }
.em-bar-row { display: flex; align-items: center; gap: 0.7rem; font-size: 0.83rem; }
.em-bar-l { flex: 0 0 12rem; }
.em-bar-track {
  flex: 1 1 auto; height: 0.65rem; border-radius: 3px;
  background: rgba(127, 127, 127, 0.14); overflow: hidden;
}
.em-bar-fill { display: block; height: 100%; background: rgb(var(--tint-rgb)); border-radius: 3px; }
.em-bar-n {
  flex: 0 0 3rem; text-align: right; font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* ── Alert filters ─────────────────────────────────────────────────────────── */

.em-tools {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.6rem;
  margin: 0.6rem 0 0.5rem;
}
.em-f { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.75rem; color: #8C8C8C; }
.em-f select { width: auto; }
.em-f-q { flex: 1 1 16rem; min-width: 0; }
.em-f-q input { width: 100%; }

.em-clear {
  font: inherit; font-size: 0.78rem; cursor: pointer;
  padding: 0.3rem 0.6rem; border-radius: 5px;
  color: rgb(var(--tint-rgb)); background: transparent;
  border: 1px solid rgba(var(--tint-rgb), 0.4);
}
.em-clear:hover { color: #fff; background: rgb(var(--tint-rgb)); }

/* What the list is showing, and what it is not. Never quiet: a capped list that
   does not say so is read as a complete one. */
.em-count {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem;
  font-size: 0.78rem; color: #8C8C8C; margin: 0.5rem 0;
}

/* ── Tables ────────────────────────────────────────────────────────────────── */

.em-table { width: 100%; font-size: 0.82rem; }
.em-r { text-align: right; font-variant-numeric: tabular-nums; }
.em-scroll { overflow-x: auto; }

.em-row { cursor: pointer; }
.em-row:hover { background: rgba(var(--tint-rgb), 0.05); }
.em-caret { width: 1.2rem; color: #8C8C8C; }

/* The expanded row: the full subject, wrapped rather than clipped, plus the
   fields the table has no column for. */
.em-detail > td { background: rgba(127, 127, 127, 0.05); }
.em-dl {
  display: grid; grid-template-columns: minmax(8rem, max-content) 1fr;
  gap: 0.25rem 0.9rem; margin: 0.3rem 0; font-size: 0.8rem;
}
.em-dl dt { color: #8C8C8C; }
.em-dl dd { margin: 0; overflow-wrap: anywhere; }

/* Folded away by default — usually correct and boring, but it must stay
   reachable, since a missing classifier entry shows up nowhere else. */
.em-unrec { margin-top: 1.4rem; }
.em-sum { cursor: pointer; }

/* Subjects are attacker-controlled text and can be arbitrarily long. Clamp the
   column so one crafted subject cannot push the outcome column off screen. */
.em-subject {
  max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Unrecognised alert types ──────────────────────────────────────────────── */

.em-types { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.em-type {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.75rem; padding: 0.25rem 0.55rem;
  border: 1px solid rgba(127, 127, 127, 0.25); border-radius: 999px;
  color: #8C8C8C; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.em-type-n {
  font-family: inherit; font-weight: 700; color: inherit; opacity: 0.7;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 700px) {
  .em-bar-l { flex-basis: 7rem; }
  .em-subject { max-width: 10rem; }
}