/* =========================================================================
   Microsoft 365 activity.

   An investigation screen: filter down, scan the table, open one record. The
   layout follows Microsoft's own audit search -- filter rail, result table of
   Date / User / Activity / Workload / IP / Item, and a fly-out with the full
   record -- because anyone who has used the Purview portal already knows how
   to read it.

   Colours and type come from portal-tokens.css. Prefixed .ma- throughout,
   since the surrounding app styles are broad and unscoped.
   ========================================================================= */

.m365_page {
	font-family: var(--pt-sans);
	font-size: var(--pt-size-base);
	color: var(--pt-body);
}

.m365_page .ma-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.m365_page .ma-head h2 {
	margin: 0; padding-bottom: 6px;
	font-size: var(--pt-size-title); font-weight: var(--pt-weight-semi);
	color: var(--pt-ink); line-height: 1.2;
	border-bottom: 3px solid var(--pt-primary);
}
.m365_page .ma-sub { font-size: var(--pt-size-sm); color: var(--pt-muted); }

/* A banner rather than a silent empty table: "no results" and "collection is
   switched off" look identical otherwise, and one of them is not a problem. */
.m365_page .ma-notice {
	background: var(--pt-tint); border-left: 3px solid var(--pt-primary);
	padding: 10px 14px; margin-bottom: 14px; border-radius: 0 var(--pt-radius) var(--pt-radius) 0;
	font-size: var(--pt-size-sm); color: var(--pt-body);
}
.m365_page .ma-notice.ma-warn { background: #fdf6e3; border-left-color: var(--pt-fill-amber); }
.m365_page .ma-notice b { color: var(--pt-ink); }

/* -------------------------------------------------------------- filter bar
   Horizontal, above the results it acts on. Wraps rather than scrolls, so a
   narrow window stacks the fields instead of hiding them. */
.m365_page .ma-bar {
	display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end;
	background: var(--pt-surface); border: 1px solid var(--pt-border);
	border-radius: var(--pt-radius-lg); padding: 12px 14px; margin-bottom: 12px;
}
.m365_page .ma-field { display: flex; flex-direction: column; min-width: 130px; }
.m365_page .ma-field.ma-wide { min-width: 190px; flex: 1 1 190px; }
.m365_page .ma-field > label {
	font-size: var(--pt-size-label); font-weight: var(--pt-weight-semi);
	letter-spacing: .06em; text-transform: uppercase; color: var(--pt-body);
	margin: 0 0 4px;
}
.m365_page .ma-field .form-control { font-size: var(--pt-size-sm); }
.m365_page .ma-quick { font-size: var(--pt-size-sm); padding-bottom: 6px; }

/* Workload has only a handful of values, so it stays a real multi-select
   rather than becoming another dropdown. */
.m365_page .ma-toggles { display: flex; gap: 5px; flex-wrap: wrap; }
.m365_page .ma-tog {
	cursor: pointer; border: 1px solid var(--pt-rule); background: var(--pt-surface);
	border-radius: 13px; padding: 4px 10px; font-size: var(--pt-size-xs);
	color: var(--pt-body); line-height: 1.4;
}
.m365_page .ma-tog:hover { border-color: var(--pt-primary); }
.m365_page .ma-tog b { color: var(--pt-muted); font-weight: var(--pt-weight-semi); }
.m365_page .ma-tog.ma-tog-on {
	background: var(--pt-primary-dark); border-color: var(--pt-primary-dark);
	color: var(--pt-on-fill);
}
.m365_page .ma-tog.ma-tog-on b { color: var(--pt-on-fill); }

/* ------------------------------------------------------------- applied row */
.m365_page .ma-chiprow {
	display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
	margin-bottom: 12px;
}
.m365_page .ma-applied {
	font-size: var(--pt-size-label); font-weight: var(--pt-weight-semi);
	letter-spacing: .06em; text-transform: uppercase; color: var(--pt-muted);
}
.m365_page .ma-chip {
	cursor: pointer; border: 1px solid var(--pt-primary-dark);
	background: var(--pt-tint); color: var(--pt-primary-dark);
	border-radius: 13px; padding: 3px 10px; font-size: var(--pt-size-xs);
	line-height: 1.4;
}
.m365_page .ma-chip:hover { background: var(--pt-primary-dark); color: var(--pt-on-fill); }
.m365_page .ma-chip .ma-x { font-weight: 700; margin-left: 3px; }

/* ------------------------------------------------------------------ layout */
.m365_page .ma-cols { display: flex; gap: 16px; align-items: flex-start; }
.m365_page .ma-rail { width: 250px; flex: none; }
.m365_page .ma-main { flex: 1 1 auto; min-width: 0; }

@media (max-width: 1100px) {
	.m365_page .ma-cols { flex-direction: column; }
	.m365_page .ma-rail { width: 100%; }
}

.m365_page .ma-card {
	background: var(--pt-surface); border: 1px solid var(--pt-border);
	border-radius: var(--pt-radius-lg); padding: 14px;
}

/* ------------------------------------------------------------------ filters */
.m365_page .ma-group { margin-bottom: 16px; }
.m365_page .ma-group > label {
	display: block; font-size: var(--pt-size-label); font-weight: var(--pt-weight-semi);
	letter-spacing: .07em; text-transform: uppercase; color: var(--pt-body);
	margin-bottom: 5px;
}
.m365_page .ma-group .form-control { font-size: var(--pt-size-sm); }

/* Saved searches, in effect. The six signals are the reason this screen
   exists; typing an operation name to find them every time would be silly. */
.m365_page .ma-signal {
	display: flex; justify-content: space-between; align-items: center; gap: 8px;
	width: 100%; text-align: left; cursor: pointer;
	background: none; border: 0; border-radius: var(--pt-radius);
	padding: 6px 8px; font-size: var(--pt-size-sm); color: var(--pt-body);
	line-height: 1.3;
}
.m365_page .ma-signal:hover { background: var(--pt-ground); }
.m365_page .ma-signal.ma-on { background: var(--pt-primary-dark); color: var(--pt-on-fill); }
/* Group heading in the report rail. */
.m365_page .ma-gname {
	font-size: var(--pt-size-label); font-weight: var(--pt-weight-semi);
	letter-spacing: .06em; text-transform: uppercase; color: var(--pt-muted);
	margin: 10px 0 3px 8px;
}
/* The three data protection groups are the point of the screen, so they are
   marked rather than left to be found among the routine ones. */
.m365_page .ma-gname.ma-gfocus { color: var(--pt-primary-dark); }
.m365_page .ma-focus {
	border-left: 2px solid var(--pt-primary);
	padding-left: 6px; margin-left: 2px;
}
/* A report with nothing in it. Dimmed, but still legible -- in the data
   protection groups a zero is a result, not an absence of one. */
.m365_page .ma-signal.ma-zero { color: var(--pt-muted); }
/* A data protection report that DID fire. This is the thing you want your eye
   pulled to on opening the screen. */
.m365_page .ma-signal.ma-hit { font-weight: var(--pt-weight-semi); color: var(--pt-ink); }
.m365_page .ma-signal.ma-hit .ma-n {
	color: var(--pt-on-fill); background: var(--pt-fill-amber);
	border-radius: 9px; padding: 1px 7px; font-weight: var(--pt-weight-semi);
}
.m365_page .ma-signal.ma-on.ma-hit .ma-n { background: rgba(255, 255, 255, .25); }

.m365_page .ma-signal .ma-n {
	font-variant-numeric: tabular-nums; font-size: var(--pt-size-xs);
	color: var(--pt-muted); flex: none;
}
.m365_page .ma-signal.ma-on .ma-n { color: var(--pt-on-fill); }

.m365_page .ma-facet {
	max-height: 190px; overflow-y: auto;
	border: 1px solid var(--pt-rule); border-radius: var(--pt-radius); padding: 4px;
}
.m365_page .ma-facet label {
	display: flex; align-items: center; gap: 6px; margin: 0;
	padding: 3px 5px; font-size: var(--pt-size-xs); font-weight: var(--pt-weight-normal);
	color: var(--pt-body); cursor: pointer; border-radius: 3px;
}
.m365_page .ma-facet label:hover { background: var(--pt-ground); }
.m365_page .ma-facet .ma-n { margin-left: auto; color: var(--pt-muted); font-variant-numeric: tabular-nums; }
.m365_page .ma-facet input { margin: 0; flex: none; }

/* -------------------------------------------------------------------- table */
.m365_page .ma-table { width: 100%; font-size: var(--pt-size-sm); border-collapse: collapse; }
.m365_page .ma-table th {
	background: var(--pt-primary-dark); color: var(--pt-on-fill);
	font-weight: var(--pt-weight-semi); font-size: var(--pt-size-xs);
	text-align: left; padding: 8px 10px; white-space: nowrap;
	position: sticky; top: 0; z-index: 1;
}
.m365_page .ma-table th.ma-sortable { cursor: pointer; }
.m365_page .ma-table th.ma-sortable:hover { background: var(--pt-fill-deep); }
.m365_page .ma-table td {
	padding: 7px 10px; border-bottom: 1px solid var(--pt-rule-lt);
	vertical-align: top; color: var(--pt-ink);
}
.m365_page .ma-table tbody tr { cursor: pointer; }
.m365_page .ma-table tbody tr:hover { background: var(--pt-tint); }
.m365_page .ma-table tbody tr.ma-sel { background: var(--pt-tint); }
.m365_page .ma-scroll { overflow: auto; max-height: calc(100vh - 340px); }

.m365_page .ma-when { white-space: nowrap; font-variant-numeric: tabular-nums; }
.m365_page .ma-mono { font-family: var(--pt-mono); font-size: var(--pt-size-xs); }
/* Paths and mailbox ids are long; let them wrap rather than stretch the table
   past the viewport. */
.m365_page .ma-item { max-width: 380px; word-break: break-all; color: var(--pt-body); }

/* One tint per workload, so a row's origin registers before it is read. Same
   hue family as the asset chips and the org chart. */
.m365_page .ma-op {
	display: inline-block; font-size: var(--pt-size-label); font-weight: 700;
	letter-spacing: .04em; padding: 3px 7px; border-radius: 3px; white-space: nowrap;
	background: #eef1f4; color: var(--pt-body);
}
.m365_page .ma-op.w-sharepoint { background: #e6f0f8; color: #035fa5; }
.m365_page .ma-op.w-onedrive   { background: #e8edfb; color: #3457c9; }
.m365_page .ma-op.w-exchange   { background: #eceafa; color: #4a3fbe; }
.m365_page .ma-op.w-entra      { background: #e0f2f0; color: #00726b; }
.m365_page .ma-op.w-teams      { background: #f5e8fa; color: #9339b3; }
.m365_page .ma-op.w-dlp        { background: #fdeceb; color: #a4262c; }

/* ------------------------------------------------------------------ detail */
.m365_page .ma-detail {
	border: 1px solid var(--pt-border); border-radius: var(--pt-radius-lg);
	background: var(--pt-surface); margin-top: 14px;
}
.m365_page .ma-detail-head {
	display: flex; align-items: center; gap: 10px;
	padding: 10px 14px; border-bottom: 1px solid var(--pt-rule);
}
.m365_page .ma-detail-head strong { color: var(--pt-ink); font-size: var(--pt-size-head); }
.m365_page .ma-props {
	margin: 0; padding: 12px 14px;
	display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 5px 14px;
}
.m365_page .ma-props dt {
	font-size: var(--pt-size-xs); color: var(--pt-body); font-weight: var(--pt-weight-semi);
}
.m365_page .ma-props dd {
	margin: 0; font-size: var(--pt-size-xs); color: var(--pt-ink);
	word-break: break-word; font-family: var(--pt-mono);
}
.m365_page .ma-raw {
	margin: 0 14px 14px; padding: 10px; background: var(--pt-ground);
	border: 1px solid var(--pt-rule); border-radius: var(--pt-radius);
	font-family: var(--pt-mono); font-size: 11.5px; color: var(--pt-ink);
	max-height: 260px; overflow: auto; white-space: pre-wrap; word-break: break-all;
}

.m365_page .ma-empty {
	padding: 30px; text-align: center; color: var(--pt-muted);
	font-size: var(--pt-size-sm);
}
.m365_page .ma-pager {
	display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
	margin-top: 10px; font-size: var(--pt-size-sm); color: var(--pt-body);
}