/**
 * OpenStation — Users app styles.
 *
 * The tab strip, the Add User panel, the Profile tab and the
 * `<os-user-profile>` layout. The User Edit app points its
 * `->style()` at this same sheet: it hosts the same component, and
 * one sheet is one place to keep the two in step. The list layout
 * (toolbar, body, pager, phone bulk footer) is the framework's
 * `.os-app-list__*` family in `assets/css/app-runtime.css`.
 *
 * Cell-content styles are NOT here — `<os-table>` renders into its
 * own shadow DOM; the cells carry inline styles.
 */

/* Tab strip — auto-height, so the active panel below fills the
   column. Without `flex: 0 0 auto` the strip grows and the panel
   collapses to zero height — the "no table" regression. */
.os-users__tabs {
	flex: 0 0 auto;
	padding: 0 18px;
	border-bottom: 1px solid var( --os-ui-border, #dcdcde );
}

/* The Add User tab. Padding lives on the host so the form's own
   footer separator sits flush with the panel edges; the active tab
   fills the remaining height and the inactive one is fully hidden. */
.os-users__add-panel {
	flex: 1 1 auto;
	min-height: 0;
	display: block;
	padding: 32px 24px 28px;
	box-sizing: border-box;
	overflow-y: auto;
}
.os-users__add-panel[ hidden ] {
	display: none;
}

/* Center the form at a comfortable reading width; the os-form does
   the column layout. `min(760px, 100%)` keeps it inside narrow panels. */
.os-users__add-panel > os-form {
	display: block;
	margin-inline: auto;
	width: min( 760px, 100% );
}

.os-users__add-panel [ slot="header" ] {
	margin-bottom: 4px;
}
.os-users__add-panel [ slot="header" ] h2 {
	margin: 0 0 6px;
	font-size: 20px;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var( --os-ui-fg, #1d2327 );
}
.os-users__form-lede {
	margin: 0 0 8px;
	color: var( --os-ui-fg-muted, #50575e );
	font-size: 13px;
	line-height: 1.5;
}
.os-users__form-pwd-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: -4px;
}
.os-users__form-hint {
	margin: 0;
	font-size: 12px;
	color: var( --os-ui-fg-muted, #50575e );
}

/* The bulk bar's clusters: the role pick + Apply, and the reassign
   picker + Delete. */
.os-users__bulk-group {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}
.os-users__bulk-role {
	min-width: 160px;
}
.os-users__reassign {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: var( --os-ui-fg-muted, #50575e );
}
.os-users__reassign-name {
	color: var( --os-ui-fg, #1d2327 );
}
.os-users__reassign-search {
	min-width: 160px;
}

/* Narrow-window trim — at < 540px the side padding gets in the way
   more than it helps. Same breakpoint the form's own grid uses to
   collapse to one column. */
@media ( max-width: 540px ) {
	.os-users__add-panel {
		padding: 20px 14px 16px;
	}
	.os-users__tabs {
		padding: 0 12px;
	}
}

/* Profile tab — the active tabpanel fills the remaining height,
   scrolls its own content, leaves the tab strip pinned at the top. */
.os-users__edit-panel {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.os-users__edit-panel[ hidden ] {
	display: none;
}
/* The User Edit window. The body is a chromeless host;
   `<os-user-profile>` fills the whole space and owns its own scroll.
   Without `min-height: 0` on the chain, the inner `overflow-y: auto`
   never gets a chance to clip and scroll. */
.os-user-edit-window {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	height: 100%;
	min-height: 0;
}
/* The component — the light-DOM host of the layout — fills whatever
   hosts it (the Profile tab panel, the User Edit window) so its
   internal scroll container takes the remaining space. */
os-user-profile {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-height: 0;
}
os-user-profile > .os-users__edit-layout {
	flex: 1 1 auto;
	min-height: 0;
}

/* Sidebar layout — at-a-glance summary on the left, editable form +
   activity feed in the main column on the right. One container query
   collapses the two columns to one stack on narrow widths, where the
   aside moves above the form. */
.os-users__edit-layout {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	display: grid;
	grid-template-columns: 280px minmax( 0, 1fr );
	gap: 28px;
	padding: 28px 32px 32px;
	container-type: inline-size;
	container-name: desktop-mode-user-edit;
}
@container desktop-mode-user-edit ( max-width: 800px ) {
	.os-users__edit-layout {
		grid-template-columns: minmax( 0, 1fr );
	}
}
.os-users__edit-aside {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
	position: sticky;
	top: 0;
	align-self: start;
}
@container desktop-mode-user-edit ( max-width: 800px ) {
	.os-users__edit-aside {
		position: static;
	}
}
.os-users__edit-main {
	min-width: 0;
	width: 100%;
	max-width: 720px;
	/* Center within the `minmax(0, 1fr)` grid cell so the form stays
	   readable on wide windows instead of leaving a large empty band
	   on the right edge. */
	margin-inline: auto;
	display: flex;
	flex-direction: column;
}
.os-users__edit-activity {
	min-width: 0;
}