/*
 * All Zoom Users: the parts All Meetings' table cannot already supply.
 *
 * The table itself is All Meetings'. This screen renders `.mhub-am-table`,
 * `.mhub-am-head`, `.mhub-am-row` and `.mhub-am-cell` from all-meetings.css and
 * inherits the panel, the 68px row, the hairlines, the hover, the head, the
 * toolbar, the tabs, the search field, the buttons and the pager from it. That
 * is the point: two lists in one plugin should not be two tables, and the
 * Tailwind grid this screen used to carry was a second implementation of a
 * component that already existed and was already good.
 *
 * What cannot be inherited is the column set. All Meetings' template is written
 * around its own six cells - a checkbox, a meeting, a platform, a type, a start
 * time and a row of actions - so a users table has to declare its own. It does
 * that behind `.mhub-zu`, at (0,2,0), which beats the (0,1,0) rules in
 * all-meetings.css at every width without touching them.
 *
 * Everything else in this file is a variant the meetings table has no use for:
 * a name that is not a link, a status in three tones, and a 32px copy target.
 *
 * Colours are the meetings table's own custom properties, declared on
 * `.mhub-am`, so this file cannot drift from it.
 */

/* ------------------------------------------------------------- page frame -- */

/*
 * The header and the table on one left edge.
 *
 * `.mhub-am` carries All Meetings' page frame - centred, capped at 1420px, with
 * a 24px gutter each side - and this screen inherits it the moment it renders
 * that table. The header does not: `PageHeader` sits outside it, on the page
 * root, where the legacy `meeting.scss` rule pads 10px on the left and 30px on
 * the right. Measured at a 1600px viewport: the title started at 190px and the
 * table at 230px, so the screen had two left edges 40px apart, and the whole
 * page sat against the sidebar with a gutter a third of the one on the right.
 *
 * The root's asymmetric padding goes, and the header takes the same frame as
 * the table. The id plus the class is (1,1,0), which beats the legacy id rule
 * whichever order the two stylesheets land in the bundle.
 */
#meetinghub_zoom_users.mhub-admin-dasboard-bg {
	padding: 0;
}

.mhub-zoom-users .mhub-page-header {
	box-sizing: border-box;
	max-width: 1420px;
	margin-right: auto;
	margin-left: auto;
	padding-top: 24px;
	padding-right: var( --mhub-page-gutter, 24px );
	padding-left: var( --mhub-page-gutter, 24px );
}

/* ------------------------------------------------------------ the columns -- */

/*
 * Person, plan, status, last seen, joined, copy.
 *
 * The person column takes what is left, because a name and an address are the
 * only cells whose width is content the reader is scanning. Every other track
 * is fixed: a column of pills or dates that resizes as the window does is a
 * column the eye cannot run down.
 *
 * No content-sized track anywhere, for the reason all-meetings.css records at
 * length: `auto` measures the header cell and the body cell separately, and the
 * two disagree, so every heading ends up sitting over the gap beside the column
 * it labels.
 */
.mhub-zu .mhub-am-head,
.mhub-zu .mhub-am-row {
	grid-template-columns:
		minmax( 220px, 1fr )
		116px
		124px
		176px
		140px
		112px;
}

/*
 * Narrow desktop: the join date goes.
 *
 * It is the weakest fact on the row - it explains nothing about whether the
 * account works today - and it is the only one nothing else on the screen
 * depends on.
 */
@media ( max-width: 1280px ) {

	.mhub-zu .mhub-am-head,
	.mhub-zu .mhub-am-row {
		grid-template-columns:
			minmax( 200px, 1fr )
			116px
			124px
			176px
			112px;
	}

	.mhub-zu .mhub-am-cell--joined {
		display: none;
	}
}

/* Below 1024px the row is not a row of columns at all: see the phone block
   below, which replaces the template rather than shrinking it. */

/* -------------------------------------------------------------- the phone -- */

/*
 * Below 1024px the row stops being a row.
 *
 * Six columns cannot be shrunk into 360px, and the two tricks usually reached
 * for both fail here: a horizontal scroller hides the status behind a gesture
 * nobody makes on an admin screen, and squeezing the tracks turns every cell
 * into two words and an ellipsis. So the row becomes what it is on a phone -
 * a person, their state, and one control - with the quieter facts on a second
 * line under them.
 *
 *     [tile]  Nadia Rahman              Active   [copy]
 *             nadia@example.com
 *             Licensed              2 hours ago
 *
 * The placement is written line by line rather than with names, and
 * `grid-template-areas: none` is not optional. all-meetings.css declares areas
 * of its own at 860px - 'check main actions' over '. when actions' - and a row
 * inherits them even though this screen has no check cell and no when cell.
 * Measured before this block existed: the plan, status and joined cells were
 * auto-placed into implicit rows underneath, and every row stood 103px tall
 * instead of 68 with three of its cells stacked down the left.
 */
@media ( max-width: 1024px ) {

	/* A column label with no column under it is just a word. */
	.mhub-zu .mhub-am-head {
		display: none;
	}

	.mhub-zu .mhub-am-row {
		grid-template-columns: minmax( 0, 1fr ) auto 72px;
		grid-template-areas: none;
		align-items: center;
		row-gap: 6px;
		column-gap: 10px;
		padding: 12px 14px;
	}

	.mhub-zu .mhub-am-row .mhub-am-cell--main {
		grid-area: 1 / 1 / 2 / 2;
	}

	.mhub-zu .mhub-am-row .mhub-am-cell--status {
		grid-area: 1 / 2 / 2 / 3;
	}

	/* The control spans both lines and centres against them, so it stays where
	   the thumb expects it whether the row runs to one line or two. */
	/*
	 * The controls span both lines and centre against them, so they stay where
	 * the thumb expects them whether the row runs to one line or two.
	 *
	 * The specificity here is load bearing, as the block comment above records:
	 * all-meetings.css sets `grid-area: actions` on this same cell at 860px,
	 * and this row has `grid-template-areas: none`, so that name resolves to
	 * nothing. Three class selectors beat its two and the explicit lines win.
	 */
	.mhub-zu .mhub-am-row .mhub-am-cell--actions {
		grid-area: 1 / 3 / 3 / 4;
		align-self: center;
	}

	/*
	 * Copy goes; edit and remove stay.
	 *
	 * Three 34px controls need 106px, and on a 390px screen the row has about
	 * 285px of content width once wp-admin has taken its share. Measured with
	 * all three: the name column fell to 106px and truncated at 60px of visible
	 * text, so the buttons were drawn wider than the person they act on. That
	 * inverts the row - the name is what is being scanned, the controls are
	 * what is done afterwards.
	 *
	 * Copy is the one to drop rather than an arbitrary third. It puts a
	 * 22-character id on a clipboard, and the places that id is pasted - a
	 * shortcode, the host selector, a support ticket - are desktop work. Edit
	 * and remove are the two that make sense with a thumb. This screen already
	 * drops the plan chip and the client version by width for the same kind of
	 * reason, so the row keeps thinning in the order the facts stop earning
	 * their space.
	 */
	.mhub-zu .mhub-am-row .mhub-zu-copybtn {
		display: none;
	}

	/*
	 * The plan and the last sign-in come back rather than staying hidden.
	 *
	 * They were dropped from the desktop grid at this width because there were
	 * no columns left to hold them, which is a layout answer to a layout
	 * problem. On a second line they cost nothing, and "Basic" beside "265 days
	 * ago" is most of the reason somebody opens this screen on a phone.
	 */
	.mhub-zu .mhub-am-row .mhub-am-cell--plan,
	.mhub-zu .mhub-am-row .mhub-am-cell--seen {
		display: flex;
		align-items: baseline;
		gap: 6px;
		min-width: 0;
	}

	/*
	 * Indented to the text, not to the tile.
	 *
	 * The second line starts in the first column, which begins under the
	 * avatar, so a plan chip left where the grid puts it hangs 44px to the left
	 * of the name it belongs to and reads as a stray label. 34px of tile plus
	 * the 10px column gap puts it under the first letter of the name.
	 */
	.mhub-zu .mhub-am-row .mhub-am-cell--plan {
		grid-area: 2 / 1 / 3 / 2;
		padding-left: 44px;
	}

	.mhub-zu .mhub-am-row .mhub-am-cell--seen {
		grid-area: 2 / 2 / 3 / 3;
		flex-direction: row;
		justify-content: flex-end;
		white-space: nowrap;
	}

	/* The client version is a caption under a date on a desktop column, and a
	   third fact in a line of three on a phone, which is one too many. */
	.mhub-zu .mhub-am-row .mhub-am-cell--seen .mhub-am-rel {
		display: none;
	}

}

/*
 * Under 480px the plan chip goes as well: the second line is then one date and
 * no room, and the plan is the fact that changes least.
 */
@media ( max-width: 480px ) {

	.mhub-zu .mhub-am-row .mhub-am-cell--plan {
		display: none;
	}

	.mhub-zu .mhub-am-row .mhub-am-cell--seen {
		grid-area: 2 / 1 / 3 / 3;
		justify-content: flex-start;
		padding-left: 44px;
	}
}

/* ------------------------------------------------------------ the toolbar -- */

/*
 * The toolbar, once the three controls stop fitting on one line.
 *
 * The tab strip is 345px wide with four statuses on it, which is wider than a
 * 375px screen minus its gutters, so it overflowed the page rather than the
 * strip: measured at 375px, the document scrolled sideways. It wraps now, and
 * the search field stops being a fixed 240px and takes the line it is on.
 */
@media ( max-width: 782px ) {

	.mhub-zu .mhub-am-toolbar {
		align-items: stretch;
		gap: 10px;
	}

	.mhub-zu .mhub-am-tabs {
		flex-wrap: wrap;
	}

	.mhub-zu .mhub-am-tools {
		display: flex;
		flex-wrap: nowrap;
		gap: 8px;
	}

	.mhub-zu .mhub-am-search {
		flex: 1 1 auto;
		width: auto;
		min-width: 0;
	}

	/* The one primary action keeps its label and its 44px height; only the
	   field beside it gives ground. */
	.mhub-zu .mhub-am-tools .mhub-am-btn--primary {
		flex: 0 0 auto;
	}
}

/* ------------------------------------------------------------- the header -- */

/*
 * The page title has to be allowed to shrink.
 *
 * `.mhub-page-header__text` is a flex child with no `min-width`, and a flex
 * child's floor is its content, so the 389px title block refused to go below
 * that and pushed the document sideways on a 375px screen. The description
 * already truncates; it could not, because the box it is in never got narrow
 * enough to make it. On a phone it wraps instead: two short lines read better
 * than one line with its last four words replaced by an ellipsis.
 */
.mhub-zoom-users .mhub-page-header__text {
	min-width: 0;
}

@media ( max-width: 782px ) {

	.mhub-zoom-users .mhub-page-header__desc {
		overflow: visible;
		white-space: normal;
		text-overflow: clip;
	}
}

/* ---------------------------------------------------------- the last seen -- */

/*
 * A fact and a caption under it, left aligned.
 *
 * All Meetings' `--when` cell is the shape this needs, a column with a 3px gap,
 * but it is also right aligned, because on that screen the start time is the
 * last column before the actions. Here it sits mid-row with the join date after
 * it, and a right aligned column between two left aligned ones reads as a
 * column that has slipped. So the layout is borrowed and the alignment is not,
 * while the two lines keep the meetings table's own `.mhub-am-when` and
 * `.mhub-am-rel` type.
 */
.mhub-zu .mhub-am-cell--seen {
	display: flex;
	flex-direction: column;
	gap: 3px;
	align-items: flex-start;
	text-align: left;
}

/* --------------------------------------------------------------- the name -- */

/*
 * `.mhub-am-title` without the button.
 *
 * On All Meetings the title opens the meeting, so it is a button and says so
 * with a pointer and an underline on hover. A Zoom user has nowhere to open:
 * this plugin has no per-user screen and Zoom's own is behind a separate login.
 * A control that cannot act must not look like one, so the name keeps the
 * meetings title's size, weight and ink and drops its behaviour.
 *
 * #0F172A on white measures 17.85:1.
 */
.mhub-zu .mhub-zu-name {
	display: block;
	overflow: hidden;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	color: var( --mhub-am-ink );
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* The address under it. `.mhub-am-sub` is a wrapping flex row built for chips;
   an email is one string that should truncate rather than wrap onto a second
   line and change the height of the row. */
.mhub-zu .mhub-zu-email {
	display: block;
	overflow: hidden;
	font-size: 12.5px;
	line-height: 1.35;
	color: var( --mhub-am-ink-faint );
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Two letters in the meetings table's own 34px tile, which otherwise holds a
   platform logo. */
.mhub-zu .mhub-am-avatar {
	font-size: 12.5px;
	font-weight: 700;
	color: var( --mhub-am-ink-soft );
	letter-spacing: 0.01em;
}

/* ------------------------------------------------------------- the status -- */

/*
 * Three tones, on `.mhub-am-flag`'s geometry.
 *
 * Measured on their own fills: #12805C on #E6F6F0 is 5.02:1, #A35B00 on #FDF3E4
 * is 5.17:1, and #475569 on #F1F5F9 is 6.87:1. All three clear AA for text at
 * any size, which a status has to: on a scanned row it is often the only word
 * anybody reads, and it is the one cell that decides whether the person in it
 * can host a meeting.
 */
.mhub-zu .mhub-zu-status {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.01em;
	white-space: nowrap;
}

/*
 * #0B6B4B, not the --mhub-am-good token.
 *
 * The token is #12805C and on its own tint it measures 4.41:1, which is under
 * the 4.5 AA asks for text of any size. This is 11px at 600 and it is often the
 * only word read on a scanned row, so it is exactly the wrong place to be a
 * tenth short.
 *
 * #0B6B4B is not a new colour: it is the green all-meetings.css already uses
 * for ink on this same tint, on the copy button's done state, measured there at
 * 5.84:1. The token stays as it is because its other uses are a solid fill and
 * an accent rule, where it is not text and is not short of anything.
 */
.mhub-zu .mhub-zu-status.is-active {
	background: var( --mhub-am-good-tint );
	color: #0b6b4b;
}

.mhub-zu .mhub-zu-status.is-pending {
	background: var( --mhub-am-warn-tint );
	color: var( --mhub-am-warn );
}

.mhub-zu .mhub-zu-status.is-off {
	background: var( --mhub-am-line-soft );
	color: var( --mhub-am-ink-soft );
}

/* ------------------------------------------------------------ the actions -- */

/*
 * There is no copy button in this file any more.
 *
 * It was `.mhub-zu-copy`: 32px, its own hover, its own active, its own tick
 * tint, its own 44px touch override and its own reduced-motion rule - about
 * sixty lines reimplementing `.mhub-am-iconbtn`, which all-meetings.css
 * already ships and which this screen was already loading. The two drifted, as
 * two implementations of one control do: the meetings button had a
 * `:focus-visible` ring and this one never did, so the only way to see where
 * the keyboard was on this table was the browser's default outline.
 *
 * The row now renders `.mhub-am-iconbtn` for all three of its controls, so
 * the ring, the 34px face inside a 44px target, the hover, the active and the
 * done tint all come from the same place the meetings table gets them.
 *
 * What is left below is the one thing that table has no equivalent for: a
 * control that removes somebody.
 */

/*
 * Remove reads as danger only once it is being used.
 *
 * At rest it is the same slate as the two beside it, because a row of icons
 * where one is permanently red makes the red one the first thing the eye lands
 * on - on a table whose job is reading, not deleting. It turns on hover, on
 * focus and while pressed, which is the moment the colour is information
 * rather than decoration.
 *
 * Measured in the page: #B42318 on the #FEF3F2 ground is 6.05:1, and the ring
 * is the same red, so a keyboard lands on the same warning a pointer does.
 */
.mhub-am .mhub-zu-remove:hover,
.mhub-am .mhub-zu-remove:focus,
.mhub-am .mhub-zu-remove:focus-visible,
.mhub-am .mhub-zu-remove:active {
	background: #FEF3F2;
	color: #B42318;
}

.mhub-am .mhub-zu-remove:focus-visible {
	outline-color: #B42318;
}

.mhub-am .mhub-zu-remove:active {
	background: #FEE4E2;
}

/* -------------------------------------------------------------- the header -- */

/* A sortable heading is a button so it is reachable by keyboard and announces
   itself; the head's own type comes from `.mhub-am-head`. */
.mhub-zu .mhub-zu-sort {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	max-width: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	cursor: pointer;
	transition: color 150ms ease;
}

.mhub-zu .mhub-zu-sort:hover,
.mhub-zu .mhub-zu-sort:focus-visible {
	color: var( --mhub-am-ink );
}

.mhub-zu .mhub-zu-sort__mark {
	display: inline-flex;
	color: var( --mhub-am-brand );
}

/* The right-hand columns are numbers and pills rather than sentences, and a
   heading that does not sit over its own column is a heading pointing at the
   wrong data. */
.mhub-zu .mhub-am-cell--actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

/* ---------------------------------------------------------- the short list -- */

/*
 * The users list is three requests to Zoom, one per status, and any of them can
 * fail on its own. When one does, the table is short and looks exactly like a
 * complete table of a smaller account - so the count in the tabs is wrong and
 * nothing on the screen says why. This is that sentence.
 *
 * Amber, at the tone the plugin already uses for "needs your attention but
 * nothing is broken". #78350F on #FFFBEB measures 11.6:1.
 */
.mhub-zu .mhub-zu-note {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 14px;
	padding: 10px 10px 10px 14px;
	border: 1px solid #FDE68A;
	border-radius: 10px;
	background: #FFFBEB;
	color: #78350F;
	font-size: 13px;
	line-height: 1.5;
}

/* ---------------------------------------------------------------- the form -- */

/*
 * Add a user and Edit user, capped at the width of one card.
 *
 * The wizard's 1014px is three columns wide because it carries a step rail and
 * a Pro band beside the panel. These two screens are one card of four rows, and
 * a four-row card stretched across a 1400px monitor puts the label and its
 * control at opposite ends of the desk. 760 is the wizard's own panel track,
 * so a row here measures the same as a row there.
 */
.mhub-zu-form {
	/*
	 * The wizard's brand, borrowed on purpose.
	 *
	 * kit/Segmented draws its keyboard ring from
	 * `.mhub-opt:has( .mhub-opt-input:focus-visible )` in create-meeting.css,
	 * and that rule is written `outline: 2px solid var( --mhub-cm-brand )`.
	 * The selector is unscoped but the variable is not: it is declared on
	 * `.mhub-cm`, the meeting form's wrapper. Outside that wrapper the var
	 * resolves to nothing, the whole shorthand is invalid at computed-value
	 * time, and outline-style stays `none` - so on these two screens the plan
	 * control had no visible focus at all. Measured before: outline-style none
	 * while the input matched :focus-visible.
	 *
	 * Declared here rather than by adding `.mhub-cm` to the markup, because
	 * that class also carries the meeting form's own width, gutter and type.
	 */
	--mhub-cm-brand: #085df2;
}

.mhub-zu-form .mhub-zu-form__body {
	max-width: 760px;
}

/*
 * The rows stack once there is no room to sit side by side.
 *
 * kit/FormRow is a flex row with a fixed 220px label column and no wrap at any
 * width, which is right inside the 760px panel it was drawn for. On a 390px
 * screen it left the control column 80px wide: an email field that shows about
 * eight characters. Measured before: label 220, control 80.
 *
 * Setting the label column to the full width is what forces the wrap, so the
 * label keeps its own line and the control gets all of the next one. The kit is
 * left alone: the meeting wizard has the same shape and its own rail and pill
 * layout to think about, which is not this screen's call to make.
 */
@media ( max-width: 782px ) {

	.mhub-zu-form {
		--mhub-row-label: 100%;
	}

	.mhub-zu-form .mhub-zu-row {
		flex-wrap: wrap;
		row-gap: 6px;
	}

	.mhub-zu-form .mhub-zu-row > * {
		max-width: 100%;
	}
}