/*
 * Elintra OS — Admin module surfaces (Delivery 6).
 * Users, Roles, Sessions, Audit Log.
 */

.eos-adm {
	--eos-adm-gap: 16px;
	--eos-adm-list-w: min(300px, 32vw);
	max-width: var(--eos-os-pane-max);
}

.eos-adm__loading,
.eos-adm__empty,
.eos-adm__error {
	margin: 0;
	padding: 24px 0;
	color: var(--eos-text-muted);
}

.eos-adm__error { color: var(--eos-danger, #c0392b); }

.eos-adm__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: var(--eos-adm-gap);
}

.eos-adm__search,
.eos-adm__input,
.eos-adm__select,
.eos-adm__textarea {
	font: inherit;
	color: var(--eos-text);
	background-color: var(--eos-field-bg, var(--eos-surface-2, var(--eos-surface)));
	border: 1px solid var(--eos-field-border, var(--eos-border-strong));
	border-radius: 8px;
	padding: 8px 12px;
	min-height: 38px;
}

.eos-adm__textarea {
	min-height: 88px;
	width: 100%;
	resize: vertical;
}

.eos-adm__search { flex: 1 1 220px; min-width: 180px; }

/* Shared select styling — cosmetic ONLY (custom caret + appearance reset).
 * Height/padding inherit the compact base rule above. Width is intentionally
 * NOT set here so selects keep their natural/contextual width across every
 * module (Roles & Permissions, Sessions, etc.). Width:100% is applied only
 * within the Users filter/form contexts further below. */
.eos-select,
.eos-adm__select {
	box-sizing: border-box;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-right: 34px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 4.5L6 8L9.5 4.5' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 11px center;
	background-size: 11px;
	line-height: 1.3;
	cursor: pointer;
	text-overflow: ellipsis;
}

[data-eos-theme="dark"] .eos-select,
[data-eos-theme="dark"] .eos-adm__select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 4.5L6 8L9.5 4.5' stroke='%23A1A1AA' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	/* Re-assert single-caret geometry: this is the most specific select rule, so
	 * it guarantees one clean arrow even if a `background` shorthand resets these
	 * elsewhere in the cascade. */
	background-repeat: no-repeat;
	background-position: right 11px center;
	background-size: 11px;
}

.eos-adm__btn {
	font: inherit;
	cursor: pointer;
	border-radius: 8px;
	border: 1px solid var(--eos-btn-border, var(--eos-border-strong));
	background-color: var(--eos-btn-bg, var(--eos-surface));
	color: var(--eos-text);
	padding: 8px 14px;
	min-height: 38px;
}

.eos-adm__btn:hover {
	border-color: var(--eos-border-strong);
	background-color: var(--eos-surface-3, var(--eos-panel-elevated));
}

.eos-adm__btn--primary {
	background: var(--eos-os-btn-primary-bg, #F5F5F2);
	border-color: var(--eos-os-btn-primary-bg, #F5F5F2);
	color: var(--eos-os-btn-primary-fg, #111111);
}

.eos-adm__btn--primary:hover {
	background: var(--eos-os-btn-primary-hover, #FFFFFF);
	border-color: var(--eos-os-btn-primary-hover, #FFFFFF);
}

.eos-adm__btn--ghost {
	background: transparent;
	border-color: var(--eos-border);
	color: var(--eos-text-muted);
}

.eos-adm__btn--ghost:hover {
	color: var(--eos-text);
	border-color: var(--eos-border-strong);
}

.eos-adm__btn--danger {
	border-color: rgba(220, 38, 38, 0.35);
	background: transparent;
	color: var(--eos-danger, #c0392b);
}

.eos-adm__btn--danger:hover {
	background: rgba(220, 38, 38, 0.08);
}

.eos-adm__body {
	display: grid;
	gap: var(--eos-adm-gap);
}

.eos-adm[data-eos-admin-layout="master-detail"] .eos-adm__body,
.eos-adm[data-eos-admin-layout="list-detail"] .eos-adm__body {
	grid-template-columns: var(--eos-adm-list-w) 1fr;
	align-items: start;
}

@media (max-width: 900px) {
	.eos-adm[data-eos-admin-layout="master-detail"] .eos-adm__body,
	.eos-adm[data-eos-admin-layout="list-detail"] .eos-adm__body {
		grid-template-columns: 1fr;
	}
}

.eos-adm__list,
.eos-adm__panel {
	background: var(--eos-surface);
	border: 1px solid var(--eos-border);
	border-radius: var(--eos-os-card-radius, 10px);
	overflow: visible;
}

.eos-adm__panel-body {
	padding: 14px 16px 20px;
	overflow: visible;
}

.eos-adm[data-eos-admin-layout="list-detail"] .eos-adm__body {
	overflow: visible;
	min-height: 0;
}

.eos-adm__rows {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: min(52vh, calc(100vh - 320px));
	overflow: auto;
	scrollbar-width: none;
}
.eos-adm__rows::-webkit-scrollbar { display: none; }

.eos-adm__list-head,
.eos-adm__panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 14px;
	border-bottom: 1px solid var(--eos-border);
}

.eos-adm__list-title,
.eos-adm__panel-title {
	margin: 0;
	font-size: 0.95rem;
	font-weight: 600;
}

.eos-adm__list-meta {
	font-size: 0.8rem;
	color: var(--eos-text-muted);
}


.eos-adm__row {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	text-align: left;
	border: 0;
	border-bottom: 1px solid var(--eos-border);
	background: transparent;
	color: inherit;
	font: inherit;
	cursor: pointer;
	padding: 12px 14px;
}

.eos-adm__row-text {
	flex: 1;
	min-width: 0;
}

.eos-adm__row:hover {
	background: var(--eos-os-nav-hover, #F3F4F5);
}

[data-eos-theme="dark"] .eos-adm__row:hover {
	background: var(--eos-os-nav-hover, #161A1F);
}

.eos-adm__row--active {
	background: var(--eos-os-nav-active, #EEF0F2);
	box-shadow: inset 3px 0 0 var(--eos-border-strong);
}

[data-eos-theme="dark"] .eos-adm__row--active {
	background: var(--eos-os-nav-active, #1E2329);
}

.eos-adm__row-title {
	display: block;
	font-weight: 600;
	font-size: 0.92rem;
}

.eos-adm__row-sub {
	display: block;
	margin-top: 2px;
	font-size: 0.8rem;
	color: var(--eos-text-muted);
}

.eos-adm__chip {
	display: inline-block;
	font-size: 0.72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--eos-surface-2, rgba(127,127,127,0.08));
}

.eos-adm__chip--ok { color: #1e7e34; }
.eos-adm__chip--warn { color: #b86e00; }
.eos-adm__chip--bad { color: #c0392b; }

.eos-adm__panel-body { padding: 14px; }

.eos-adm__kv {
	display: grid;
	grid-template-columns: 140px 1fr;
	gap: 8px 12px;
	margin: 0 0 16px;
	font-size: 0.88rem;
}

.eos-adm__kv dt { margin: 0; color: var(--eos-text-muted); }
.eos-adm__kv dd { margin: 0; word-break: break-word; }

.eos-adm__field { margin-bottom: 12px; }
.eos-adm__label {
	display: block;
	margin-bottom: 5px;
	font-size: 0.82rem;
	color: var(--eos-text-muted);
	line-height: 1.3;
}

.eos-adm__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--eos-border);
}

.eos-adm__perm-grid {
	display: grid;
	gap: 12px;
	max-height: 48vh;
	overflow: auto;
}

.eos-adm__perm-module {
	border: 1px solid var(--eos-border);
	border-radius: 8px;
	padding: 10px 12px;
}

.eos-adm__perm-module h4 {
	margin: 0 0 8px;
	font-size: 0.82rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--eos-text-muted);
}

.eos-adm__perm-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 6px;
}

.eos-adm__check {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 0.86rem;
	cursor: pointer;
}

.eos-adm__modal {
	position: fixed;
	inset: 0;
	z-index: 120;
	display: grid;
	place-items: center;
	padding: 20px;
	background: rgba(0, 0, 0, 0.45);
}

.eos-adm__modal-card {
	width: min(480px, 100%);
	background: var(--eos-surface);
	border: 1px solid var(--eos-border);
	border-radius: 12px;
	padding: 18px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

.eos-adm__modal-title { margin: 0 0 8px; font-size: 1.05rem; }
.eos-adm__modal-lead { margin: 0 0 14px; color: var(--eos-text-muted); font-size: 0.88rem; }

.eos-adm__table-wrap { overflow: auto; max-height: 62vh; }

.eos-adm__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.86rem;
}

.eos-adm__table th,
.eos-adm__table td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--eos-border);
	text-align: left;
	vertical-align: top;
}

.eos-adm__table th {
	position: sticky;
	top: 0;
	background: var(--eos-surface);
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--eos-text-muted);
}

.eos-adm__table tr[data-eos-audit-row] { cursor: pointer; }
.eos-adm__table tr[data-eos-audit-row]:hover { background: var(--eos-surface-2, rgba(127,127,127,0.06)); }

.eos-adm__detail {
	margin-top: var(--eos-adm-gap);
	background: var(--eos-card-bg, var(--eos-surface));
	border: 1px solid var(--eos-border);
	border-radius: var(--eos-os-card-radius, 10px);
	padding: 14px;
	box-shadow: var(--eos-shadow-card, 0 1px 2px rgba(15, 23, 42, 0.05));
}

.eos-adm__detail pre {
	margin: 0;
	padding: 12px;
	border-radius: 8px;
	background: var(--eos-surface-2, rgba(127,127,127,0.06));
	overflow: auto;
	font-size: 0.78rem;
}

.eos-adm__flash {
	margin: 0 0 12px;
	padding: 10px 12px;
	border-radius: 8px;
	font-size: 0.86rem;
	background: var(--eos-os-row-selected);
	border: 1px solid var(--eos-border);
}

.eos-adm__form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px 16px;
}

@media (max-width: 900px) {
	.eos-adm__form-grid { grid-template-columns: 1fr; }
}

.eos-adm__form-grid .eos-adm__field--full { grid-column: 1 / -1; }

.eos-adm__section-title {
	margin: 20px 0 10px;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--eos-text-muted);
}

.eos-adm__generated {
	display: block;
	font-family: var(--eos-font-mono, monospace);
	font-size: 0.92rem;
	padding: 10px 12px;
	border-radius: 8px;
	background: var(--eos-os-row-selected);
	border: 1px solid var(--eos-border);
}

.eos-adm__generated--override {
	border-color: var(--eos-info, #3B82F6);
	box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.15);
}

.eos-adm__badge-preview {
	border: 1px solid var(--eos-border);
	border-radius: 12px;
	padding: 16px;
	background: linear-gradient(145deg, var(--eos-panel-elevated), var(--eos-surface));
	max-width: 320px;
}

.eos-adm__badge-preview-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
	font-weight: 700;
	font-size: 0.82rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--eos-text-muted);
}

.eos-adm__badge-photo {
	width: 56px;
	height: 56px;
	border-radius: 8px;
	background: var(--eos-os-avatar-bg);
	color: var(--eos-os-avatar-fg);
	display: grid;
	place-items: center;
	font-weight: 600;
}

.eos-adm__badge-meta {
	font-size: 0.84rem;
	line-height: 1.45;
}

.eos-adm__badge-code {
	font-family: var(--eos-font-mono, monospace);
	font-size: 1rem;
	margin-top: 8px;
}

.eos-adm__form-split {
	display: grid;
	grid-template-columns: 1fr min(280px, 32%);
	gap: 24px;
	align-items: start;
}

.eos-adm__form-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
	gap: 28px;
	align-items: start;
}

@media (max-width: 1100px) {
	.eos-adm__form-layout { grid-template-columns: 1fr; }
	.eos-adm__form-aside { position: static; }
}

.eos-adm__form-main {
	min-width: 0;
}

.eos-adm__form-aside {
	position: sticky;
	top: 12px;
	min-width: 0;
	max-width: 100%;
}

.eos-adm__badge-rail {
	min-width: 0;
	max-width: 100%;
	overflow: hidden;
	border: 1px solid var(--eos-border);
	border-radius: 10px;
	padding: 14px 12px;
	margin-top: 8px;
	background: var(--eos-panel-elevated, var(--eos-surface));
}

.eos-adm__badge-rail [data-eos-badge-preview],
.eos-adm__badge-rail [data-eos-badge-card-mount] {
	min-width: 0;
	max-width: 100%;
}

.eos-adm__badge-panel {
	margin-bottom: 20px;
}

.eos-adm__badge-panel .eos-adm__badge-rail {
	margin-top: 0;
}

.eos-combobox {
	position: relative;
}

.eos-combobox__input {
	width: 100%;
}

.eos-combobox__list {
	position: absolute;
	z-index: 30;
	left: 0;
	right: 0;
	top: calc(100% + 4px);
	margin: 0;
	padding: 4px;
	list-style: none;
	max-height: 220px;
	overflow: auto;
	background: var(--eos-panel-elevated, var(--eos-surface));
	border: 1px solid var(--eos-border-strong);
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
	scrollbar-width: none;
}

.eos-combobox__list::-webkit-scrollbar { display: none; }

.eos-combobox__option {
	display: block;
	width: 100%;
	text-align: left;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	padding: 8px 10px;
	border-radius: 6px;
	cursor: pointer;
}

.eos-combobox__option:hover,
.eos-combobox__option:focus-visible {
	background: var(--eos-os-nav-hover, var(--eos-os-row-selected));
	outline: none;
}

.eos-adm__gen-status--pending { color: var(--eos-text-muted); }

.eos-os__profile-version {
	font-size: 0.65rem;
	opacity: 0.7;
}

@media (max-width: 960px) {
	.eos-adm__form-split { grid-template-columns: 1fr; }
}

.eos-adm__advanced {
	margin-top: 12px;
	border: 1px solid var(--eos-border);
	border-radius: 8px;
	padding: 8px 12px;
}

.eos-adm__advanced summary {
	cursor: pointer;
	list-style: none;
}

.eos-adm__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 20px;
}

.eos-adm__actions--sticky {
	position: sticky;
	bottom: 0;
	padding: 16px 0 8px;
	margin-top: 24px;
	background: linear-gradient(to top, var(--eos-surface) 70%, transparent);
	z-index: 2;
}

.eos-adm__btn--sm {
	min-height: 32px;
	padding: 4px 10px;
	font-size: 0.82rem;
}

.eos-adm__generated-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.eos-adm__gen-status {
	font-size: 0.72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--eos-text-muted);
}
.eos-adm__gen-status--ok { color: var(--eos-success, #059669); }
.eos-adm__gen-status--bad { color: var(--eos-danger, #DC2626); }
.eos-adm__gen-status--override { color: #475569; }
[data-eos-theme="dark"] .eos-adm__gen-status--override { color: #94A3B8; }

/* Aerospace / government employee credential preview */
.eos-adm__identity-preview {
	border: 1px solid var(--eos-border);
	border-radius: 10px;
	padding: 12px 14px;
	margin-bottom: 16px;
	background: var(--eos-panel-elevated);
}

.eos-adm__identity-dl {
	margin: 0;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 6px 12px;
	font-size: 0.84rem;
}
.eos-adm__identity-dl dt {
	margin: 0;
	color: var(--eos-text-muted);
	font-weight: 600;
	text-transform: uppercase;
	font-size: 0.68rem;
	letter-spacing: 0.05em;
}
.eos-adm__identity-dl dd {
	margin: 0;
	word-break: break-word;
}
.eos-adm__identity-dl code {
	font-size: 0.82rem;
}
.eos-adm__identity-dl__primary {
	font-size: 0.9rem;
	font-weight: 700;
}
.eos-adm__identity-dl__sub {
	color: var(--eos-text-subtle);
	font-size: 0.62rem;
}
.eos-adm__identity-dl dt.eos-adm__identity-dl__sub + dd code {
	font-size: 0.76rem;
	font-weight: 500;
	color: var(--eos-text-muted);
}

/* Form focus — neutral slate, not brand orange */
.eos-adm__input:focus,
.eos-adm__select:focus,
.eos-adm__textarea:focus,
.eos-adm__search:focus,
.eos-combobox__input:focus {
	outline: none;
	border-color: var(--eos-os-input-focus-border, #6B7280);
	box-shadow: 0 0 0 2px var(--eos-os-focus);
}
[data-eos-theme="dark"] .eos-adm__input:focus,
[data-eos-theme="dark"] .eos-adm__select:focus,
[data-eos-theme="dark"] .eos-adm__textarea:focus,
[data-eos-theme="dark"] .eos-adm__search:focus,
[data-eos-theme="dark"] .eos-combobox__input:focus {
	border-color: var(--eos-os-input-focus-border, #8B95A1);
}

.eos-adm__check input[type="checkbox"] {
	accent-color: #475569;
}
[data-eos-theme="dark"] .eos-adm__check input[type="checkbox"] {
	accent-color: #94A3B8;
}

.eos-credential {
	width: min(260px, 100%);
	margin: 0 auto;
	border: 1px solid var(--eos-border-strong);
	border-radius: 4px;
	background: var(--eos-credential-bg, #FFFFFF);
	color: var(--eos-credential-fg, #111827);
	box-shadow: none;
	overflow: hidden;
}

[data-eos-theme="dark"] .eos-credential,
.eos-os[data-theme="dark"] .eos-credential {
	--eos-credential-bg: #14181D;
	--eos-credential-fg: #F3F4F6;
}

.eos-credential__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 12px 8px;
	border-bottom: 1px solid var(--eos-border);
	background: var(--eos-credential-header, rgba(0, 0, 0, 0.03));
}

[data-eos-theme="dark"] .eos-credential__header,
.eos-os[data-theme="dark"] .eos-credential__header {
	--eos-credential-header: rgba(255, 255, 255, 0.04);
}

.eos-credential__org {
	font-family: var(--eos-font-mono, monospace);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.16em;
}

.eos-credential__type {
	font-size: 0.62rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--eos-text-muted);
}

.eos-credential__body {
	padding: 14px 12px 10px;
	text-align: center;
}

.eos-credential__photo {
	width: 76px;
	height: 94px;
	margin: 0 auto 10px;
	border-radius: 3px;
	border: 1px solid var(--eos-border-strong);
	object-fit: cover;
	display: block;
	background: var(--eos-os-avatar-bg);
}

.eos-credential__photo--init {
	display: grid;
	place-items: center;
	font-weight: 700;
	font-size: 1.25rem;
	color: var(--eos-os-avatar-fg);
}

.eos-credential__name {
	font-weight: 700;
	font-size: 0.92rem;
	line-height: 1.25;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.eos-credential__role {
	font-size: 0.78rem;
	margin-top: 4px;
	color: var(--eos-text-muted);
}

.eos-credential__unit {
	font-size: 0.72rem;
	margin-top: 2px;
	color: var(--eos-text-subtle);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.eos-credential__personnel {
	padding: 10px 14px 8px;
	border-top: 1px solid var(--eos-border);
	text-align: center;
}

.eos-credential__personnel-label {
	font-size: 0.58rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--eos-text-muted);
	margin-bottom: 4px;
}

.eos-credential__personnel-value {
	display: block;
	font-family: var(--eos-font-mono, monospace);
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--eos-credential-fg, inherit);
}

.eos-credential__credential {
	padding: 10px 14px 12px;
	border-top: 1px dashed var(--eos-border);
	background: var(--eos-credential-credential-bg, rgba(0, 0, 0, 0.02));
	text-align: center;
}

[data-eos-theme="dark"] .eos-credential__credential {
	--eos-credential-credential-bg: rgba(255, 255, 255, 0.03);
}

.eos-credential__credential-label {
	font-size: 0.56rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--eos-text-subtle);
	margin-bottom: 3px;
}

.eos-credential__credential-value {
	display: block;
	font-family: var(--eos-font-mono, monospace);
	font-size: 0.72rem;
	font-weight: 500;
	color: var(--eos-text-muted);
	margin-bottom: 8px;
}

.eos-credential__scan {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}

.eos-credential__scan-bars {
	display: block;
	width: 100%;
	max-width: 140px;
	height: 28px;
	background: repeating-linear-gradient(
		90deg,
		currentColor 0 1px,
		transparent 1px 3px
	);
	opacity: 0.28;
	border-radius: 1px;
}

.eos-credential__scan-caption {
	font-family: var(--eos-font-mono, monospace);
	font-size: 0.52rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--eos-text-subtle);
}

.eos-credential__footer {
	padding: 10px 14px 12px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	border-top: 1px solid var(--eos-border);
	font-size: 0.62rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.eos-credential__status-pill {
	display: inline-block;
	font-size: 0.58rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	padding: 3px 10px;
	border-radius: 999px;
	border: 1px solid transparent;
}

.eos-credential__status-pill--pending {
	color: #92400E;
	background: rgba(245, 158, 11, 0.14);
	border-color: rgba(245, 158, 11, 0.28);
}

[data-eos-theme="dark"] .eos-credential__status-pill--pending {
	color: #FCD34D;
	background: rgba(251, 191, 36, 0.12);
	border-color: rgba(251, 191, 36, 0.22);
}

.eos-credential__status-pill--active {
	color: #166534;
	background: rgba(16, 185, 129, 0.12);
	border-color: rgba(16, 185, 129, 0.25);
}

.eos-credential__status-pill--revoked,
.eos-credential__status-pill--suspended {
	color: #991B1B;
	background: rgba(220, 38, 38, 0.1);
	border-color: rgba(220, 38, 38, 0.22);
}

.eos-credential__zone {
	color: var(--eos-text-subtle);
	font-size: 0.54rem;
	text-align: center;
}

.eos-combobox__option-main {
	display: block;
	font-weight: 600;
	font-size: 0.88rem;
}
.eos-combobox__option-sub {
	display: block;
	font-size: 0.75rem;
	color: var(--eos-text-muted);
	margin-top: 2px;
}

/* Legacy badge card aliases — kept for edit view compatibility */
.eos-adm__badge-card {
	width: min(240px, 100%);
	margin: 0 auto;
	border: 1px solid var(--eos-border-strong);
	border-radius: 10px;
	background: linear-gradient(180deg, var(--eos-panel-elevated) 0%, var(--eos-surface) 100%);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
	overflow: hidden;
}

.eos-adm__badge-card-brand {
	padding: 10px 12px 6px;
	font-family: var(--eos-font-mono, monospace);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-align: center;
	color: var(--eos-text-muted);
	border-bottom: 1px solid var(--eos-border);
}

.eos-adm__badge-card-body {
	padding: 14px 12px 12px;
	text-align: center;
}

.eos-adm__badge-card-photo {
	width: 72px;
	height: 88px;
	margin: 0 auto 10px;
	border-radius: 4px;
	border: 1px solid var(--eos-border);
	object-fit: cover;
	display: block;
}

.eos-adm__badge-card-photo--init {
	display: grid;
	place-items: center;
	background: var(--eos-os-avatar-bg);
	color: var(--eos-os-avatar-fg);
	font-weight: 700;
	font-size: 1.2rem;
}

.eos-adm__badge-card-name {
	font-weight: 700;
	font-size: 0.95rem;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.eos-adm__badge-card-title,
.eos-adm__badge-card-dept {
	font-size: 0.78rem;
	color: var(--eos-text-muted);
	margin-top: 4px;
}

.eos-adm__badge-card-id {
	font-family: var(--eos-font-mono, monospace);
	font-size: 0.82rem;
	margin-top: 10px;
}

.eos-adm__badge-card-barcode {
	height: 36px;
	margin: 10px auto 6px;
	max-width: 120px;
	background: repeating-linear-gradient(
		90deg,
		var(--eos-text) 0 2px,
		transparent 2px 4px
	);
	opacity: 0.35;
	border-radius: 2px;
}

.eos-adm__badge-card-code {
	font-family: var(--eos-font-mono, monospace);
	font-size: 0.9rem;
	font-weight: 600;
	margin-bottom: 8px;
}

.eos-adm__badge-card-foot {
	padding: 8px 10px;
	font-size: 0.65rem;
	text-align: center;
	color: var(--eos-text-subtle);
	border-top: 1px solid var(--eos-border);
	background: var(--eos-os-row-selected);
}

/* v0.8.5 — record view, avatars, toasts, permissions UX */
.eos-adm__avatar {
	display: inline-grid;
	place-items: center;
	flex-shrink: 0;
	border-radius: 50%;
	overflow: hidden;
	background: var(--eos-os-avatar-bg);
	color: var(--eos-os-avatar-fg);
	border: 1px solid var(--eos-border);
}
.eos-adm__avatar--sm { width: 32px; height: 32px; font-size: 0.72rem; font-weight: 700; }
.eos-adm__avatar--lg { width: 88px; height: 88px; font-size: 1.4rem; font-weight: 700; }
.eos-adm__avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.eos-adm__avatar--init { font-weight: 700; }

.eos-adm__record { display: grid; gap: 18px; }
.eos-adm__record-hero { display: flex; align-items: center; gap: 16px; }
.eos-adm__record-name { margin: 0 0 6px; font-size: 1.1rem; }
.eos-adm__record-toolbar { display: flex; justify-content: flex-end; }
.eos-adm__record-section {
	border: 1px solid var(--eos-border);
	border-radius: 10px;
	padding: 14px 16px;
	background: var(--eos-surface);
}
.eos-adm__record-section--placeholder { opacity: 0.72; }
.eos-adm__record-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 10px;
}
.eos-adm__record-title { margin: 0; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--eos-text-muted); }
.eos-adm__record-soon { font-size: 0.75rem; color: var(--eos-text-subtle); }
.eos-adm__record-grid { display: grid; gap: 8px; }
.eos-adm__record-row { display: grid; grid-template-columns: minmax(120px, 34%) 1fr; gap: 10px; align-items: baseline; padding: 4px 0; border-bottom: 1px solid var(--eos-border); }
.eos-adm__record-row:last-child { border-bottom: 0; }
.eos-adm__record-label { font-size: 0.82rem; color: var(--eos-text-muted); }
.eos-adm__record-value { font-size: 0.92rem; }

.eos-adm__chip--neutral { border-color: var(--eos-border-strong); background: transparent; }
.eos-adm__chip--muted { opacity: 0.65; }

.eos-adm__badge-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.eos-adm__badge-row {
	border: 1px solid var(--eos-border);
	border-radius: 8px;
	padding: 12px 14px;
	background: var(--eos-panel-elevated, var(--eos-surface));
}
.eos-adm__badge-row--muted { opacity: 0.62; }
.eos-adm__badge-row-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.eos-adm__badge-code { font-family: var(--eos-font-mono, monospace); font-size: 0.88rem; font-weight: 600; }
.eos-adm__badge-row-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.eos-adm__perm-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.eos-adm__perm-module { border: 1px solid var(--eos-border); border-radius: 8px; margin-bottom: 10px; background: var(--eos-surface); }
.eos-adm__perm-module-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; cursor: pointer; list-style: none; }
.eos-adm__perm-module-title { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; color: var(--eos-text-muted); }
.eos-adm__perm-module-actions { display: flex; gap: 10px; }
.eos-adm__link-btn { border: 0; background: none; color: var(--eos-text-muted); font: inherit; font-size: 0.78rem; cursor: pointer; text-decoration: underline; padding: 0; }
.eos-adm__check--perm { align-items: flex-start; }
.eos-adm__perm-label { font-size: 0.88rem; }
.eos-adm__search--inline { width: 100%; margin-bottom: 10px; }
.eos-adm__panel-sub { margin: 4px 0 0; font-size: 0.86rem; color: var(--eos-text-muted); }
.eos-adm__actions--footer { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--eos-border); }
.eos-adm__hint { margin: 6px 0 0; font-size: 0.78rem; color: var(--eos-text-subtle); }
.eos-adm__field--photo { display: grid; gap: 8px; margin-bottom: 12px; }

.eos-adm__toast {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 10050;
	padding: 10px 14px;
	border-radius: 8px;
	border: 1px solid var(--eos-border-strong);
	background: var(--eos-panel-elevated, #111);
	color: var(--eos-text);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 180ms ease, transform 180ms ease;
}
.eos-adm__toast--visible { opacity: 1; transform: translateY(0); }
.eos-adm__toast--ok { border-color: var(--eos-success, #2d6a4f); }

/* v0.8.6 — Users view modes, profile tabs, foundation empty states */
.eos-adm__view-toggle { display: inline-flex; gap: 4px; margin-left: auto; }
.eos-adm__view-btn {
	padding: 6px 10px;
	border: 1px solid var(--eos-border);
	border-radius: 6px;
	background: transparent;
	color: var(--eos-text-muted);
	font: inherit;
	font-size: 0.78rem;
	cursor: pointer;
}
.eos-adm__view-btn--active {
	border-color: var(--eos-border-strong);
	background: var(--eos-surface-hover, rgba(255,255,255,0.04));
	color: var(--eos-text);
}
.eos-adm__toolbar-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; width: 100%; }
.eos-adm__filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.eos-adm__filters select { min-width: 120px; font-size: 0.82rem; }
.eos-adm__table-wrap--full { width: 100%; overflow-x: auto; }
.eos-adm__cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 14px;
}
.eos-adm__user-card {
	border: 1px solid var(--eos-border);
	border-radius: 10px;
	padding: 14px;
	background: var(--eos-surface);
	display: grid;
	gap: 10px;
}
.eos-adm__user-card-head { display: flex; gap: 12px; align-items: center; }
.eos-adm__user-card-name { margin: 0; font-size: 1rem; }
.eos-adm__user-card-meta,
.eos-adm__user-card-sub { margin: 0; font-size: 0.82rem; color: var(--eos-text-muted); }
.eos-adm__avatar--md { width: 48px; height: 48px; font-size: 0.95rem; }
.eos-adm__profile-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 14px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--eos-border);
}
.eos-adm__profile-tab {
	padding: 6px 10px;
	border: 1px solid transparent;
	border-radius: 6px;
	background: transparent;
	color: var(--eos-text-muted);
	font: inherit;
	font-size: 0.78rem;
	cursor: pointer;
}
.eos-adm__profile-tab--active {
	border-color: var(--eos-border);
	background: var(--eos-surface);
	color: var(--eos-text);
	font-weight: 600;
}
.eos-adm__foundation-empty {
	border: 1px solid var(--eos-border);
	border-radius: 10px;
	padding: 20px 18px;
	background: var(--eos-card-bg, var(--eos-surface));
	box-shadow: var(--eos-shadow-card, 0 1px 2px rgba(15, 23, 42, 0.05));
}
.eos-adm__foundation-title { margin: 0 0 6px; font-size: 0.95rem; }
.eos-adm__foundation-lead { margin: 0; font-size: 0.84rem; color: var(--eos-text-muted); line-height: 1.5; }
.eos-adm__record--locked .eos-adm__record-row { border-bottom-color: var(--eos-border); }
.eos-adm__record--edit { border: 1px solid var(--eos-border-strong); border-radius: 12px; padding: 16px; background: var(--eos-panel-elevated, var(--eos-surface)); }
.eos-adm__settings { display: grid; gap: 16px; max-width: 720px; }
.eos-adm__news-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.eos-adm__news-item {
	border: 1px solid var(--eos-border);
	border-radius: 8px;
	padding: 12px 14px;
	background: var(--eos-surface);
}

/* v0.8.7 — view toggles, table scaling, news editor, settings, audit */

.eos-adm__view-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid var(--eos-border);
	border-radius: 8px;
	background: transparent;
	color: var(--eos-text-muted);
	cursor: pointer;
	transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.eos-adm__view-btn:hover,
.eos-adm__view-btn:focus-visible {
	border-color: var(--eos-border-strong);
	background: var(--eos-panel-elevated, var(--eos-surface));
	color: var(--eos-text);
	outline: none;
}

.eos-adm__view-btn--active {
	border-color: var(--eos-border-strong);
	background: var(--eos-os-row-selected, rgba(148, 163, 184, 0.14));
	color: var(--eos-text);
}

.eos-adm__table-wrap {
	width: 100%;
	overflow-x: auto;
	border: 1px solid var(--eos-border);
	border-radius: 10px;
	background: var(--eos-table-bg, var(--eos-surface));
	box-shadow: var(--eos-shadow-card, 0 1px 2px rgba(15, 23, 42, 0.05));
}

.eos-adm__table {
	width: 100%;
	min-width: 720px;
	table-layout: auto;
}

.eos-adm__table th,
.eos-adm__table td {
	padding: 10px 14px;
	text-align: left;
	vertical-align: middle;
	white-space: nowrap;
}

.eos-adm__table th:first-child,
.eos-adm__table td:first-child {
	position: sticky;
	left: 0;
	z-index: 1;
	background: var(--eos-surface);
}

.eos-adm__table tbody tr:hover {
	background: var(--eos-os-row-selected, rgba(148, 163, 184, 0.08));
}

.eos-adm__user-card {
	transition: border-color 140ms ease, box-shadow 140ms ease;
}

.eos-adm__user-card:hover {
	border-color: var(--eos-border-strong);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.eos-adm__settings-section {
	padding: 18px 20px;
	border: 1px solid var(--eos-border);
	border-radius: 12px;
	background: var(--eos-surface);
}

.eos-adm__settings {
	display: grid;
	gap: 14px;
	max-width: 720px;
}

.eos-adm__inline-link {
	color: var(--eos-text);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.eos-adm__news-feed {
	display: grid;
	gap: 12px;
}

.eos-adm__news-card {
	padding: 16px 18px;
	border: 1px solid var(--eos-border);
	border-radius: 12px;
	background: var(--eos-surface);
	display: grid;
	gap: 10px;
}

.eos-adm__news-card-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.eos-adm__news-card-title {
	margin: 0;
	font-size: 1.05rem;
}

.eos-adm__news-card-meta,
.eos-adm__news-card-excerpt {
	margin: 0;
	font-size: 0.84rem;
	color: var(--eos-text-muted);
	line-height: 1.45;
}

.eos-adm__news-editor {
	display: grid;
	gap: 16px;
	max-width: 820px;
}

.eos-adm__field-row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 16px;
}

.eos-adm__richeditor {
	min-height: 200px;
	padding: 12px 14px;
	border: 1px solid var(--eos-border);
	border-radius: 8px;
	background: var(--eos-surface-2, var(--eos-surface));
	line-height: 1.55;
}

.eos-adm__richeditor:focus {
	outline: 2px solid var(--eos-os-focus, rgba(148, 163, 184, 0.55));
	outline-offset: 2px;
}

.eos-adm__richtoolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 8px;
}

.eos-adm__btn--xs {
	min-height: 30px;
	padding: 4px 10px;
	font-size: 0.78rem;
}

.eos-adm__news-preview-img,
.eos-adm__news-inline-img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
}

.eos-adm__news-image-preview {
	margin-top: 8px;
}

.eos-adm__toolbar--audit {
	gap: 12px;
}

/* v0.8.8 — full-width layouts, contrast, profile, news rendering */

.eos-adm {
	max-width: none;
	width: 100%;
}

.eos-adm--layout-full .eos-adm__body,
.eos-adm[data-eos-admin-layout="full"] .eos-adm__body {
	grid-template-columns: 1fr !important;
	width: 100%;
}

.eos-adm--layout-full .eos-adm__table-wrap,
.eos-adm[data-eos-admin-layout="full"] .eos-adm__table-wrap {
	max-width: none;
	border-radius: 12px;
}

.eos-adm__btn--secondary {
	background: var(--eos-button-secondary-bg, var(--eos-surface));
	border-color: var(--eos-btn-border, var(--eos-border-strong));
	color: var(--eos-text);
}

.eos-adm__btn--secondary:hover {
	background: var(--eos-panel-elevated);
	border-color: var(--eos-border-strong);
}

.eos-adm__icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	height: 32px;
	padding: 0 8px;
	border: none;
	border-radius: 6px;
	background: transparent;
	color: var(--eos-text-muted);
	cursor: pointer;
	font: inherit;
	font-size: 0.82rem;
}

.eos-adm__icon-btn:hover,
.eos-adm__icon-btn:focus-visible {
	background: var(--eos-os-row-selected, rgba(148, 163, 184, 0.12));
	color: var(--eos-text);
	outline: none;
}

.eos-adm__input,
.eos-adm__textarea,
.eos-adm__search {
	background: var(--eos-surface-2, var(--eos-surface));
	border-color: var(--eos-border-strong);
}

.eos-adm__select,
.eos-select {
	background-color: var(--eos-surface-2, var(--eos-surface));
	border-color: var(--eos-border-strong);
}

.eos-adm__profile-self-head {
	display: flex;
	gap: 18px;
	align-items: center;
	margin-bottom: 20px;
}

.eos-adm__profile-self-name {
	margin: 0 0 4px;
	font-size: 1.35rem;
}

.eos-adm__profile-self-sub {
	margin: 0;
	color: var(--eos-text-muted);
}

.eos-adm__profile-self-grid {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.eos-adm__profile-dl {
	margin: 0;
	display: grid;
	gap: 10px;
}

.eos-adm__profile-row {
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: 10px;
	align-items: baseline;
}

.eos-adm__profile-row dt {
	margin: 0;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--eos-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.eos-adm__profile-row dd {
	margin: 0;
	font-size: 0.92rem;
}

.eos-adm__news-card-body {
	font-size: 0.9rem;
	line-height: 1.55;
	color: var(--eos-text);
	overflow: hidden;
}

.eos-adm__news-card-body img,
.eos-adm__news-inline-img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
	display: block;
	margin: 8px 0;
}

.eos-adm__news-inline-img--sm { max-width: 240px; }
.eos-adm__news-inline-img--md { max-width: 480px; }
.eos-adm__news-inline-img--full { max-width: 100%; }

.eos-adm__toolbar-row--news {
	align-items: center;
}

.eos-adm__select--sm {
	min-height: 32px;
	padding: 4px 8px;
	font-size: 0.78rem;
}

.eos-adm__view-btn {
	border: none;
	background: transparent;
}

.eos-adm__view-btn:hover,
.eos-adm__view-btn--active {
	border: none;
	background: var(--eos-os-row-selected, rgba(148, 163, 184, 0.12));
}

/* v0.9.0 — Delivery 7.0 polish */

.eos-adm__profile-tab--active,
.eos-adm__profile-nav-btn--active {
	background: var(--eos-os-row-selected, rgba(148, 163, 184, 0.14));
	border-color: var(--eos-border-strong);
	color: var(--eos-text);
	font-weight: 600;
	box-shadow: inset 0 0 0 1px var(--eos-border-strong);
}

.eos-adm__news-composer {
	border: 1px solid var(--eos-border-strong);
	border-radius: 14px;
	background: var(--eos-panel-elevated, var(--eos-surface));
	overflow: hidden;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.eos-adm__news-composer-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 14px;
	padding: 18px 20px;
	border-bottom: 1px solid var(--eos-border);
	background: linear-gradient(180deg, var(--eos-panel-elevated) 0%, var(--eos-surface) 100%);
}

.eos-adm__news-composer-body { padding: 16px 20px; }

/* Edit / Preview segmented toggle */
.eos-adm__news-modebar {
	display: inline-flex;
	gap: 2px;
	margin: 14px 20px 0;
	padding: 3px;
	border-radius: 9px;
	background: var(--eos-surface-2, rgba(148, 163, 184, 0.16));
	border: 1px solid var(--eos-border);
}

.eos-adm__seg-btn {
	font: inherit;
	font-size: 0.84rem;
	font-weight: 600;
	cursor: pointer;
	border: 0;
	border-radius: 7px;
	padding: 6px 16px;
	background: transparent;
	color: var(--eos-text-muted);
}

.eos-adm__seg-btn--active {
	background: var(--eos-panel);
	color: var(--eos-text);
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
}

.eos-adm__news-preview {
	padding: 4px 0 2px;
}

.eos-adm__news-card--preview {
	border: 1px solid var(--eos-border);
	border-radius: 12px;
	padding: 16px 18px;
	background: var(--eos-panel);
}

.eos-adm__news-composer-foot {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding: 14px 20px;
	border-top: 1px solid var(--eos-border);
	background: var(--eos-surface);
}

.eos-adm__field--grow { flex: 1 1 280px; }
.eos-adm__input--title { font-size: 1.15rem; font-weight: 600; }
.eos-adm__check--inline { align-self: center; margin-bottom: 8px; }

.eos-adm__news-card--removing,
.eos-adm__notify-item--removing {
	opacity: 0;
	max-height: 0;
	margin: 0;
	padding-top: 0;
	padding-bottom: 0;
	overflow: hidden;
	transition: opacity 220ms ease, max-height 220ms ease, margin 220ms ease, padding 220ms ease;
}

.eos-adm__news-shell { display: grid; gap: 8px; }
.eos-adm__feed-loading,
.eos-adm__feed-end {
	text-align: center;
	padding: 16px;
	color: var(--eos-text-muted);
	font-size: 0.84rem;
}

.eos-adm__news-card-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding-top: 4px;
}

.eos-adm__btn--danger {
	color: var(--eos-danger, #dc2626);
	border-color: rgba(220, 38, 38, 0.35);
	background: rgba(220, 38, 38, 0.06);
}

.eos-adm__btn--danger:hover {
	background: rgba(220, 38, 38, 0.12);
	border-color: rgba(220, 38, 38, 0.5);
}

.eos-ui-host {
	position: fixed;
	inset: 0;
	z-index: 100000;
	pointer-events: none;
}

.eos-ui-host .eos-ui-modal {
	pointer-events: auto;
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.eos-ui-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
	backdrop-filter: blur(4px);
}

.eos-ui-modal__panel {
	position: relative;
	width: min(480px, 100%);
	border: 1px solid var(--eos-border-strong);
	border-radius: 14px;
	background: var(--eos-panel-elevated, var(--eos-surface));
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
	overflow: hidden;
}

.eos-ui-modal__head { padding: 18px 20px 0; }
.eos-ui-modal__title { margin: 0; font-size: 1.05rem; }
.eos-ui-modal__body {
	padding: 12px 20px 18px;
	color: var(--eos-text-muted);
	font-size: 0.9rem;
	line-height: 1.5;
	white-space: pre-wrap;
}

.eos-ui-modal__foot {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	padding: 14px 20px 18px;
	border-top: 1px solid var(--eos-border);
}

/* ---- Lifecycle confirmation (deactivate / archive / mark-test / purge) ---- */
.eos-ui-modal__panel--lifecycle { width: min(540px, 100%); }
.eos-ui-modal__intro {
	margin: 0 0 12px;
	color: var(--eos-text);
	font-size: 0.92rem;
	font-weight: 500;
}
.eos-ui-modal__consequences {
	margin: 0 0 14px;
	padding: 0 0 0 18px;
	display: grid;
	gap: 5px;
	color: var(--eos-text-muted);
	font-size: 0.85rem;
	line-height: 1.45;
}
.eos-ui-modal__notice {
	margin: 0 0 14px;
	padding: 9px 12px;
	border-radius: 9px;
	font-size: 0.82rem;
	line-height: 1.4;
	border: 1px solid var(--eos-border);
}
.eos-ui-modal__notice--warn {
	color: #b45309;
	background: rgba(245, 158, 11, 0.10);
	border-color: rgba(245, 158, 11, 0.32);
}
[data-eos-theme="dark"] .eos-ui-modal__notice--warn { color: #fcd34d; }
.eos-ui-modal__notice--ok {
	color: #047857;
	background: rgba(16, 185, 129, 0.10);
	border-color: rgba(16, 185, 129, 0.30);
}
[data-eos-theme="dark"] .eos-ui-modal__notice--ok { color: #6ee7b7; }
.eos-ui-modal__field {
	display: block;
	margin: 0 0 12px;
}
.eos-ui-modal__field-label {
	display: block;
	margin-bottom: 5px;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--eos-text);
}
.eos-ui-modal__textarea {
	width: 100%;
	resize: vertical;
	min-height: 56px;
}
.eos-ui-modal__field .eos-ui-modal__input { width: 100%; }

.eos-adm__cal--premium .eos-adm__cal-grid {
	border-radius: 12px;
	border-color: var(--eos-border-strong);
	background: var(--eos-border);
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

.eos-adm__cal-day {
	min-height: 96px;
	transition: background-color 140ms ease, box-shadow 140ms ease;
}

.eos-adm__cal-day--today {
	box-shadow: inset 0 0 0 2px #2563eb;
	background: rgba(37, 99, 235, 0.06);
}
.eos-adm__cal-day--today .eos-adm__cal-day-num {
	color: #2563eb;
	font-weight: 700;
}

.eos-adm__cal-day--selected {
	box-shadow: inset 0 0 0 1px var(--eos-border-strong);
	background: var(--eos-os-row-selected, rgba(148, 163, 184, 0.12));
}

/* Off-month leading/trailing cells: a clean muted neutral, never beige. */
.eos-adm__cal-day--pad { background: var(--eos-calendar-off-bg, var(--eos-surface-2)); opacity: 1; }

/* Off days (holiday / closure) get a calm blue wash. */
.eos-adm__cal-day--off { background: rgba(37, 99, 235, 0.07); }

/* ---------------------------------------------------------------------------
 * Premium calendar color system. Each category sets --cal-c (accent) and
 * --cal-bg (tint); the event chip and the filter toggle both consume them so
 * the palette stays in one place. Colors are chosen to read on light + dark.
 * ------------------------------------------------------------------------- */
.eos-adm__cal-event {
	display: block;
	margin: 2px 0 0;
	padding: 2px 8px;
	border-radius: 5px;
	background: var(--cal-c, var(--eos-border-strong));
	color: #ffffff;
	font-size: 0.72rem;
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	cursor: pointer;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
	transition: filter 120ms ease;
}

.eos-adm__cal-event:hover { filter: brightness(1.08); }

.eos-adm__cal-event--highlight {
	outline: 2px solid #2563eb;
	outline-offset: 1px;
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.32);
	animation: eos-cal-hl 1.1s ease 0s 2;
}

@keyframes eos-cal-hl {
	0%, 100% { box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.32); }
	50%      { box-shadow: 0 0 0 6px rgba(37, 99, 235, 0.14); }
}

/* Multi-day leave block: connect day cells so the range reads as one bar
 * instead of three repeated chips. Continuation days lose their side radius
 * and bleed to the cell edge; only the true start/end get rounded corners. */
.eos-adm__cal-event--span {
	border-radius: 0;
	margin-left: -7px;
	margin-right: -7px;
	box-shadow: none;
}
.eos-adm__cal-event--span-start {
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
	margin-left: 0;
}
.eos-adm__cal-event--span-end {
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	margin-right: 0;
}
.eos-adm__cal-event--span-mid { opacity: 0.96; }
.eos-adm__cal-event--locked {
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}

/* Locked / company-observed editor banner */
.eos-adm__cal-locknote {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 14px;
	padding: 10px 12px;
	font-size: 0.82rem;
	line-height: 1.45;
	color: var(--eos-text-muted);
	background: var(--eos-surface-2, rgba(37, 99, 235, 0.06));
	border: 1px solid var(--eos-border);
	border-radius: 10px;
}
.eos-adm__pill--locked {
	flex: 0 0 auto;
	padding: 2px 9px;
	border-radius: 999px;
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #1d4ed8;
	background: rgba(37, 99, 235, 0.14);
}

/* Calendar search finder + results popover */
.eos-adm__cal-search { position: relative; flex: 1 1 240px; min-width: 190px; }
.eos-adm__cal-search .eos-adm__search { width: 100%; }

.eos-adm__cal-search-results {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 60;
	max-height: 340px;
	overflow-y: auto;
	padding: 6px;
	background: var(--eos-panel);
	border: 1px solid var(--eos-border);
	border-radius: 12px;
	box-shadow: 0 16px 40px rgba(15, 23, 42, 0.22);
}

.eos-adm__cal-search-count {
	margin: 2px 6px 6px;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--eos-text-muted);
}

.eos-adm__cal-search-item {
	display: flex;
	align-items: center;
	gap: 9px;
	width: 100%;
	padding: 8px 9px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--eos-text);
	text-align: left;
	cursor: pointer;
	font: inherit;
}

.eos-adm__cal-search-item:hover,
.eos-adm__cal-search-item:focus-visible {
	background: var(--eos-surface-hover, rgba(37, 99, 235, 0.08));
	outline: none;
}

.eos-adm__cal-search-dot {
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--cal-c, var(--eos-border-strong));
}

.eos-adm__cal-search-title {
	flex: 1 1 auto;
	font-weight: 600;
	font-size: 0.84rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.eos-adm__cal-search-date {
	flex: 0 0 auto;
	font-size: 0.74rem;
	color: var(--eos-text-muted);
}

.eos-adm__cal-search-empty {
	margin: 0;
	padding: 14px 12px;
	text-align: center;
	font-size: 0.84rem;
	color: var(--eos-text-muted);
}

.eos-adm__cal-event--chip {
	display: inline-block;
	border-radius: 999px;
	padding: 3px 11px;
}

/* Accent palette (also drives the filter toggle dots). Amber + teal are
 * deepened so white chip text clears WCAG AA. */
.eos-adm__cal-event--payday,
.eos-adm__cal-cat-toggle--payday            { --cal-c: #15803d; }
.eos-adm__cal-event--holiday,
.eos-adm__cal-cat-toggle--holiday           { --cal-c: #2563eb; }
.eos-adm__cal-event--awareness,
.eos-adm__cal-cat-toggle--awareness         { --cal-c: #be185d; }
.eos-adm__cal-event--company_event,
.eos-adm__cal-cat-toggle--company_event     { --cal-c: #4f46e5; }
.eos-adm__cal-event--training,
.eos-adm__cal-cat-toggle--training          { --cal-c: #7c3aed; }
.eos-adm__cal-event--closure,
.eos-adm__cal-cat-toggle--closure           { --cal-c: #6d28d9; }
.eos-adm__cal-event--deadline,
.eos-adm__cal-cat-toggle--deadline          { --cal-c: #b45309; }
.eos-adm__cal-event--hr_notice,
.eos-adm__cal-cat-toggle--hr_notice         { --cal-c: #0f766e; }
.eos-adm__cal-event--operations_notice,
.eos-adm__cal-cat-toggle--operations_notice { --cal-c: #475569; }

/* ---------------------------------------------------------------------------
 * Filter events dropdown panel (replaces the old chip row).
 * ------------------------------------------------------------------------- */
.eos-adm__cal-filter { position: relative; display: inline-block; }

/* Keep the funnel icon, label, and badge on one centered line so the button
 * doesn't read as a stacked icon-over-text control. */
[data-eos-cal-filter-toggle] {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	white-space: nowrap;
	line-height: 1;
}
[data-eos-cal-filter-toggle] svg { flex: 0 0 auto; display: block; }

.eos-adm__cal-filter-badge {
	display: inline-grid;
	place-items: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	margin-left: 7px;
	border-radius: 999px;
	background: #2563eb;
	color: #fff;
	font-size: 0.66rem;
	font-weight: 700;
	line-height: 1;
}
/* A class display rule beats the [hidden] UA default, so re-assert it. */
.eos-adm__cal-filter-badge[hidden] { display: none; }

/* Anchored to the LEFT edge of the Filter button so the panel always opens
 * into the content area (right:0 pushed it under the sidebar and clipped it). */
.eos-adm__cal-filter-panel {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	z-index: 60;
	width: 280px;
	max-width: calc(100vw - 32px);
	padding: 14px;
	background: var(--eos-panel-elevated, var(--eos-surface));
	border: 1px solid var(--eos-border-strong);
	border-radius: 14px;
	box-shadow: 0 22px 50px -18px rgba(0, 0, 0, 0.55), 0 2px 8px -4px rgba(0, 0, 0, 0.25);
}

.eos-adm__cal-filter-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--eos-border);
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--eos-text);
}

.eos-adm__cal-filter-quick { display: inline-flex; gap: 12px; }

.eos-adm__link-btn {
	padding: 0;
	border: none;
	background: none;
	font: inherit;
	font-size: 0.72rem;
	font-weight: 600;
	color: #2563eb;
	cursor: pointer;
}
.eos-adm__link-btn:hover { text-decoration: underline; }

.eos-adm__cal-filter-list {
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
	display: grid;
	gap: 2px;
	max-height: 300px;
	overflow: auto;
}

/* Whole row is the clickable target (the <label> wraps a hidden native
 * checkbox), so a click anywhere on the row toggles selection. */
.eos-adm__cal-filter-row {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 9px 10px;
	border-radius: 9px;
	font-size: 0.85rem;
	color: var(--eos-text);
	cursor: pointer;
	user-select: none;
	transition: background-color 120ms ease;
}
.eos-adm__cal-filter-row:hover { background: var(--eos-os-row-selected, rgba(148, 163, 184, 0.16)); }

/* Native checkbox is visually hidden but remains accessible/focusable. */
.eos-adm__cal-filter-input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	margin: 0;
	pointer-events: none;
}

/* Custom checkbox box. */
.eos-adm__cal-filter-check {
	position: relative;
	flex: 0 0 auto;
	width: 19px;
	height: 19px;
	border-radius: 6px;
	border: 1.5px solid var(--eos-border-strong);
	background: var(--eos-surface);
	transition: background-color 120ms ease, border-color 120ms ease;
}
.eos-adm__cal-filter-check::after {
	content: '';
	position: absolute;
	left: 6px;
	top: 2px;
	width: 5px;
	height: 9px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
	opacity: 0;
	transition: opacity 100ms ease;
}
.eos-adm__cal-filter-input:checked + .eos-adm__cal-filter-check {
	background: #2563eb;
	border-color: #2563eb;
}
.eos-adm__cal-filter-input:checked + .eos-adm__cal-filter-check::after { opacity: 1; }
.eos-adm__cal-filter-input:focus-visible + .eos-adm__cal-filter-check {
	outline: 2px solid #2563eb;
	outline-offset: 2px;
}

.eos-adm__cal-filter-dot {
	width: 11px;
	height: 11px;
	border-radius: 3px;
	flex: 0 0 auto;
	background: var(--cal-c, var(--eos-border-strong));
}

.eos-adm__cal-filter-name { flex: 1 1 auto; }

.eos-adm__cal-filter-foot {
	display: flex;
	gap: 8px;
	padding-top: 12px;
	border-top: 1px solid var(--eos-border);
}
.eos-adm__cal-filter-foot .eos-adm__btn { flex: 1 1 auto; justify-content: center; }

.eos-adm__cal-year {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: 12px;
}

.eos-adm__cal-year-month {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 16px;
	border: 1px solid var(--eos-border);
	border-radius: 12px;
	background: var(--eos-surface);
	cursor: pointer;
	font: inherit;
	color: var(--eos-text);
	transition: border-color 140ms ease, background 140ms ease;
}

.eos-adm__cal-year-month:hover,
.eos-adm__cal-year-month.is-selected {
	border-color: var(--eos-border-strong);
	background: var(--eos-os-row-selected);
}

.eos-adm__cal-year-month strong {
	font-size: 1.25rem;
	color: var(--eos-info, #3b82f6);
}

.eos-adm__news-card-body video,
.eos-adm__news-card-body .eos-rich-video {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
	display: block;
	margin: 8px 0;
}

[data-eos-theme="light"] .eos-adm__news-composer {
	box-shadow: 0 8px 32px rgba(15, 23, 42, 0.08);
}

[data-eos-theme="light"] .eos-ui-modal__panel {
	background: #fff;
}

.eos-adm__module-error {
	padding: 24px 28px;
	border: 1px solid color-mix(in srgb, var(--eos-danger, #dc2626) 35%, transparent);
	border-radius: 12px;
	background: color-mix(in srgb, var(--eos-danger, #dc2626) 8%, var(--eos-surface, #111));
	max-width: 42rem;
}

.eos-adm__module-error-title {
	margin: 0 0 8px;
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--eos-text, #f8fafc);
}

.eos-adm__module-error-detail,
.eos-adm__module-error-ref {
	margin: 0;
	font-size: 0.92rem;
	color: var(--eos-text-muted, #94a3b8);
	line-height: 1.5;
}

.eos-adm__module-error-ref {
	margin-top: 10px;
	font-size: 0.82rem;
	opacity: 0.85;
}

.eos-ui-modal__input {
	width: 100%;
	margin-top: 8px;
}

/* ---------------------------------------------------------------------------
 * Compact density. Applied via [data-eos-density="compact"] on <html> from the
 * saved preference so the toggle is a real, visible control (not decorative).
 * ------------------------------------------------------------------------- */
[data-eos-density="compact"] .eos-adm__row { padding-top: 7px; padding-bottom: 7px; }
[data-eos-density="compact"] .eos-adm__settings-section { padding: 14px 16px; }
[data-eos-density="compact"] .eos-adm__field { margin-bottom: 10px; }
[data-eos-density="compact"] .eos-adm__card { padding: 12px 14px; }
[data-eos-density="compact"] .eos-adm__list-row { padding-top: 6px; padding-bottom: 6px; }

/* -------------------------------------------------------------------------
 * Badge (credential) preview wrapper + actions. Card styles are injected by
 * eos-badge.js; rail rules keep landscape backs from overlapping the form.
 * ------------------------------------------------------------------------- */
.eos-cac-preview { display: flex; justify-content: center; width: 100%; max-width: 100%; min-width: 0; }
.eos-cac-preview--print {
	flex-direction: column;
	align-items: center;
	gap: 14px;
}
.eos-adm__badge-rail .eos-cac--front,
.eos-adm__badge-rail .eos-cac--back {
	margin: 0 auto;
	max-width: 100%;
}

.eos-cac-preview__side {
	width: 100%;
	max-width: 100%;
	display: flex;
	justify-content: center;
	min-width: 0;
	overflow: hidden;
}

/* -------------------------------------------------------------------------
 * Users module — workspace, toolbar, form, table (v0.9.4.18 layout polish).
 * ------------------------------------------------------------------------- */
[data-eos-admin-module="users"] .eos-adm__body {
	display: block;
}

[data-eos-admin-module="users"] .eos-adm__toolbar {
	display: block;
	margin-bottom: 20px;
}

.eos-adm__users-toolbar {
	display: flex;
	flex-direction: column;
	gap: 14px;
	width: 100%;
}

.eos-adm__users-toolbar-top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
}

.eos-adm__search-wrap {
	flex: 0 1 480px;
	max-width: 560px;
	min-width: min(100%, 220px);
}

.eos-adm__search--users {
	flex: none;
	width: 100%;
	min-height: 40px;
	padding: 9px 14px;
	border-radius: 10px;
}

.eos-adm__users-toolbar-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-left: auto;
	flex-shrink: 0;
}

.eos-adm__users-toolbar-actions .eos-adm__view-toggle {
	margin-left: 0;
}

.eos-adm__users-filters {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 18px;
	width: 100%;
	padding: 14px 16px;
	border: 1px solid var(--eos-border);
	border-radius: 12px;
	background: var(--eos-panel-elevated, var(--eos-surface));
}

@media (min-width: 900px) {
	.eos-adm__users-filters {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (min-width: 1280px) {
	.eos-adm__users-filters {
		grid-template-columns: repeat(7, minmax(0, 1fr));
	}
}

.eos-adm__filter-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
	margin: 0;
}

.eos-adm__filter-label {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--eos-text-subtle);
	line-height: 1.2;
}

.eos-adm__select--filter {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	min-height: 36px;
	font-size: 0.84rem;
}

.eos-adm__filter-field .eos-adm__input {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.eos-adm__users-workspace {
	display: grid;
	grid-template-columns: minmax(240px, 300px) minmax(0, 1fr) minmax(280px, 340px);
	gap: 24px;
	align-items: start;
	width: 100%;
}

.eos-adm__users-workspace > .eos-adm__list {
	min-width: 0;
	overflow: hidden;
}

@media (min-width: 1600px) {
	.eos-adm__users-workspace {
		grid-template-columns: minmax(280px, 340px) minmax(680px, 1fr) minmax(320px, 380px);
	}
}

.eos-adm__users-center {
	min-width: 0;
}

.eos-adm__users-center .eos-adm__panel {
	border: 1px solid var(--eos-border);
	border-radius: 14px;
	background: var(--eos-panel, var(--eos-surface));
}

.eos-adm__users-center .eos-adm__panel-body {
	padding: 20px 22px;
}

.eos-adm__users-rail {
	min-width: 0;
	max-width: 380px;
	position: static;
	align-self: start;
	overflow: hidden;
	contain: layout style;
}

.eos-adm__rail-block {
	background: var(--eos-panel-elevated, var(--eos-surface));
	border: 1px solid var(--eos-border);
	border-radius: 12px;
	padding: 16px 14px;
	margin-bottom: 14px;
	overflow: hidden;
}

.eos-adm__rail-block:last-child {
	margin-bottom: 0;
}

.eos-adm__rail-block-title {
	margin: 0 0 12px;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--eos-text-muted);
}

.eos-adm__users-rail .eos-adm__badge-rail {
	border: 0;
	padding: 0;
	margin: 0;
	background: transparent;
}

.eos-adm__users-rail [data-eos-badge-preview] {
	min-width: 0;
	max-width: 100%;
	overflow: hidden;
}

.eos-adm__users-rail .eos-cac-preview__actions {
	margin-top: 10px;
}

/* New user form — section cards + responsive grid */
.eos-adm__form-main--create {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
	max-width: 100%;
}

.eos-adm__form-section {
	background: var(--eos-panel-elevated, var(--eos-surface));
	border: 1px solid var(--eos-border);
	border-radius: 12px;
	padding: 20px 22px;
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
}

.eos-adm__form-section-title {
	margin: 0 0 16px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--eos-border);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--eos-text-muted);
}

/* Controlled 2-column form grid. Fields carry min-width:0 so values never
 * force overflow; collapses to a single column only on narrow viewports. */
.eos-adm__form-main--create .eos-adm__form-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px 20px;
	min-width: 0;
	max-width: 100%;
}

.eos-adm__form-main--create .eos-adm__form-grid--access {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 680px) {
	.eos-adm__form-main--create .eos-adm__form-grid {
		grid-template-columns: 1fr;
	}
}

.eos-adm__form-main--create .eos-adm__field {
	margin-bottom: 0;
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
}

.eos-adm__form-main--create .eos-adm__input,
.eos-adm__form-main--create .eos-adm__select,
.eos-adm__form-main--create .eos-adm__textarea,
.eos-adm__form-main--create .eos-combobox,
.eos-adm__form-main--create .eos-roles__search {
	width: 100%;
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
}

.eos-adm__form-main--create .eos-adm__label {
	margin-bottom: 6px;
}

/* Existing-user detail edit form: inputs fill their field column. */
.eos-adm__record--edit .eos-adm__field .eos-adm__input,
.eos-adm__record--edit .eos-adm__field .eos-adm__select {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.eos-adm__form-main--create .eos-adm__generated {
	word-break: break-all;
	max-width: 100%;
}

.eos-adm__form-actions-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 4px;
	padding: 16px 20px;
	border: 1px solid var(--eos-border);
	border-radius: 12px;
	background: var(--eos-panel-elevated, var(--eos-surface));
}

.eos-adm__file {
	display: block;
	width: 100%;
	max-width: 100%;
	font-size: 0.86rem;
	color: var(--eos-text-muted);
	padding: 8px 0;
}

.eos-adm__file::file-selector-button {
	font: inherit;
	cursor: pointer;
	border: 1px solid var(--eos-border-strong);
	border-radius: 8px;
	background: var(--eos-surface-2, var(--eos-surface));
	color: var(--eos-text);
	padding: 8px 14px;
	margin-right: 12px;
	min-height: 36px;
}

.eos-adm__file::file-selector-button:hover {
	border-color: var(--eos-border-strong);
	background: var(--eos-panel-elevated);
}

/* Users table polish */
[data-eos-admin-module="users"] .eos-adm__table-wrap--full {
	margin-top: 4px;
	border-radius: 12px;
	background: var(--eos-panel, var(--eos-surface));
}

[data-eos-admin-module="users"] .eos-adm__table--users thead th {
	padding: 11px 12px;
	font-size: 0.68rem;
	background: var(--eos-panel-elevated, var(--eos-surface));
	border-bottom: 1px solid var(--eos-border-strong);
	position: sticky;
	top: 0;
	z-index: 1;
}

[data-eos-admin-module="users"] .eos-adm__table-row--placeholder td {
	height: 42px;
	padding: 0 12px;
	border-bottom: 1px solid var(--eos-border);
	background: repeating-linear-gradient(
		90deg,
		transparent,
		transparent 8px,
		var(--eos-border) 8px,
		var(--eos-border) 9px
	);
	background-size: 100% 1px;
	background-repeat: no-repeat;
	background-position: left bottom;
	opacity: 0.35;
}

[data-eos-admin-module="users"] .eos-adm__pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 16px;
	padding: 12px 4px 4px;
	border-top: 1px solid var(--eos-border);
	font-size: 0.86rem;
	color: var(--eos-text-muted);
}

@media (max-width: 1400px) {
	.eos-adm__users-workspace {
		grid-template-columns: minmax(260px, 300px) minmax(0, 1fr) minmax(300px, 340px);
	}
}

@media (max-width: 1280px) {
	.eos-adm__users-workspace {
		grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
	}
	.eos-adm__users-rail {
		grid-column: 1 / -1;
		max-width: none;
	}
	.eos-adm__form-main--create .eos-adm__form-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 960px) {
	.eos-adm__users-workspace {
		grid-template-columns: 1fr;
	}
	.eos-adm__search-wrap {
		flex: 1 1 100%;
		max-width: none;
	}
	.eos-adm__users-toolbar-actions {
		width: 100%;
		justify-content: space-between;
		margin-left: 0;
	}
}

@media (max-width: 720px) {
	.eos-adm__users-filters {
		grid-template-columns: 1fr;
	}
}

.eos-cac-preview__actions {
	display: flex;
	gap: 8px;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 12px;
}

/* -------------------------------------------------------------------------
 * Searchable role selector (chips/tags) — replaces the raw checkbox dump.
 * ------------------------------------------------------------------------- */
.eos-roles { position: relative; }
.eos-roles__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	min-height: 20px;
	margin-bottom: 8px;
}
.eos-roles__empty { font-size: 0.82rem; color: var(--eos-text-subtle); }
.eos-roles__chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 6px 4px 10px;
	border-radius: 999px;
	background: var(--eos-accent-soft, rgba(37, 99, 235, 0.12));
	color: var(--eos-accent-strong, #1d4ed8);
	border: 1px solid var(--eos-accent-border, rgba(37, 99, 235, 0.32));
	font-size: 0.8rem;
	font-weight: 600;
}
[data-eos-theme="dark"] .eos-roles__chip {
	background: rgba(96, 165, 250, 0.16);
	color: #bfdbfe;
	border-color: rgba(96, 165, 250, 0.34);
}
.eos-roles__chip-x {
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
	font-size: 1.05rem;
	line-height: 1;
	padding: 0 2px;
	border-radius: 50%;
}
.eos-roles__chip-x:hover { background: rgba(0, 0, 0, 0.12); }
.eos-roles__menu {
	list-style: none;
	margin: 4px 0 0;
	padding: 6px;
	position: absolute;
	z-index: 40;
	left: 0;
	right: 0;
	max-height: 280px;
	overflow-y: auto;
	background: var(--eos-panel);
	border: 1px solid var(--eos-border-strong);
	border-radius: 10px;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}
.eos-roles__group { list-style: none; }
.eos-roles__group + .eos-roles__group { margin-top: 4px; }
.eos-roles__group-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 6px 8px 4px;
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--eos-text-muted);
}
.eos-roles__group-all {
	border: 0;
	background: transparent;
	color: var(--eos-accent-strong, #1d4ed8);
	font-size: 0.72rem;
	font-weight: 600;
	cursor: pointer;
}
.eos-roles__group-list { list-style: none; margin: 0; padding: 0; }
.eos-roles__option {
	display: flex;
	flex-direction: column;
	width: 100%;
	text-align: left;
	gap: 2px;
	padding: 7px 9px;
	border: 0;
	background: transparent;
	border-radius: 7px;
	cursor: pointer;
	color: var(--eos-text);
}
.eos-roles__option:hover { background: var(--eos-row-hover, rgba(0, 0, 0, 0.05)); }
.eos-roles__option-name { font-size: 0.86rem; font-weight: 600; }
.eos-roles__option-desc { font-size: 0.74rem; color: var(--eos-text-muted); }
.eos-roles__none {
	padding: 10px;
	font-size: 0.82rem;
	color: var(--eos-text-subtle);
	text-align: center;
}
.eos-roles__chips--readonly { margin: 0; }
.eos-roles__chip--static { padding: 4px 10px; }

/* -------------------------------------------------------------------------
 * Users module — premium table / card / detail polish (Phase 4).
 * ------------------------------------------------------------------------- */
.eos-adm__btn--block { display: block; width: 100%; text-align: center; }

/* Sortable table headers */
.eos-adm__table--users { width: 100%; border-collapse: collapse; }
.eos-adm__table--users thead th {
	position: sticky;
	top: 0;
	z-index: 2;
	background: var(--eos-panel);
	border-bottom: 1px solid var(--eos-border-strong);
	white-space: nowrap;
	padding: 10px 12px;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--eos-text-muted);
	text-align: left;
}
.eos-adm__th-sort {
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	cursor: pointer;
	padding: 0;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.eos-adm__th-sort:hover { color: var(--eos-text); }
.eos-adm__th-sort--active { color: var(--eos-accent-strong, #1d4ed8); font-weight: 700; }
.eos-adm__table--users tbody td { padding: 9px 12px; border-bottom: 1px solid var(--eos-border); vertical-align: middle; }
.eos-adm__td-strong { font-weight: 600; color: var(--eos-text); }
.eos-adm__table--users tbody tr[data-eos-users-row] { cursor: pointer; transition: background 0.12s ease; }
.eos-adm__table--users tbody tr[data-eos-users-row]:hover { background: var(--eos-row-hover, rgba(0, 0, 0, 0.045)); }
[data-eos-theme="dark"] .eos-adm__table--users tbody tr[data-eos-users-row]:hover { background: rgba(255, 255, 255, 0.05); }
.eos-adm__table-row--placeholder td { border-bottom: 1px solid var(--eos-border); height: 38px; }
.eos-adm__table-empty { text-align: center; color: var(--eos-text-subtle); padding: 18px 12px; }
.eos-adm__table-wrap--full { width: 100%; overflow-x: auto; border: 1px solid var(--eos-border); border-radius: 12px; }

/* Card view */
.eos-adm__cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 16px;
	padding: 4px;
}
.eos-adm__user-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px;
	border: 1px solid var(--eos-border);
	border-radius: 14px;
	background: var(--eos-panel);
	cursor: pointer;
	transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}
.eos-adm__user-card:hover {
	border-color: var(--eos-border-strong);
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.10);
	transform: translateY(-1px);
}
.eos-adm__user-card-head { display: flex; align-items: center; gap: 12px; }
.eos-adm__user-card-id { flex: 1; min-width: 0; }
.eos-adm__user-card-name { margin: 0; font-size: 0.98rem; font-weight: 700; color: var(--eos-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eos-adm__user-card-title { font-size: 0.8rem; color: var(--eos-text-muted); }
.eos-adm__user-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin: 0; }
.eos-adm__user-card-grid dt { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--eos-text-subtle); margin-bottom: 2px; }
.eos-adm__user-card-grid dd { margin: 0; font-size: 0.85rem; color: var(--eos-text); }


/* =====================================================================
 * VISUAL SYSTEM PASS 2 (v0.9.4.23) — product-grade component polish
 *
 * Refines the existing console/admin component classes into one coherent,
 * enterprise-grade system: card elevation, calmer headers, compact and
 * consistent controls, legible status chips, finished tables, and premium
 * empty states. Scoped entirely to classes that already exist in the
 * markup — no structural/JS changes, so there is no functional regression
 * risk. This block is intentionally last so it settles ties cleanly.
 * ================================================================= */

/* ---- Card elevation: surfaces read as finished cards on the canvas ---- */
.eos-adm__panel,
.eos-adm__list {
	box-shadow: var(--eos-shadow-card, 0 1px 2px rgba(15, 23, 42, 0.05));
}

/* ---- Module header: deliberate, premium spacing + hairline divider ---- */
.eos-os__pane-head {
	margin-bottom: clamp(20px, 2.4vw, 30px);
	padding-bottom: 18px;
	border-bottom: 1px solid var(--eos-border);
}
.eos-os__dash-head { border-bottom: 0; padding-bottom: 0; }
.eos-os__pane-eyebrow { letter-spacing: 0.2em; }

/* ---- Controls: compact, consistent sizing across every module ---- */
.eos-adm__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-height: 36px;
	padding: 7px 14px;
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	white-space: nowrap;
	transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
}
.eos-adm__btn--primary { font-weight: 600; box-shadow: var(--eos-shadow-card, none); }
.eos-adm__btn--sm,
.eos-adm__btn--xs { min-height: 30px; padding: 5px 11px; font-size: 0.8rem; border-radius: 7px; }
.eos-adm__btn--icon { min-height: 34px; min-width: 34px; padding: 6px; }

.eos-adm__search,
.eos-adm__input,
.eos-adm__select,
.eos-adm__textarea {
	min-height: 36px;
	border-radius: 8px;
	transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}

/* ---- Status chips: legible tinted pills, technical mono casing ---- */
.eos-adm__chip {
	font-family: var(--eos-font-mono, monospace);
	font-size: 0.66rem;
	letter-spacing: 0.06em;
	padding: 3px 9px;
	background: var(--eos-chip-neutral-bg, rgba(127, 127, 127, 0.10));
	color: var(--eos-chip-neutral-fg, var(--eos-text-muted));
}
.eos-adm__chip--ok { background: var(--eos-chip-ok-bg); color: var(--eos-chip-ok-fg); }
.eos-adm__chip--warn { background: var(--eos-chip-warn-bg); color: var(--eos-chip-warn-fg); }
.eos-adm__chip--bad { background: var(--eos-chip-bad-bg); color: var(--eos-chip-bad-fg); }
.eos-adm__chip--muted { background: var(--eos-chip-neutral-bg); color: var(--eos-chip-neutral-fg); opacity: 0.8; }

/* ---- Tables: finished header + calm row interaction ---- */
.eos-adm__table th {
	font-family: var(--eos-font-mono, monospace);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--eos-text-subtle);
	background: var(--eos-surface-2);
}
.eos-adm__table tbody tr { transition: background-color 110ms ease; }
.eos-adm__table tbody tr:hover { background: var(--eos-row-hover, rgba(127, 127, 127, 0.05)); }

/* ---- Tabs / segmented controls ---- */
.eos-adm__seg-btn {
	transition: background-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
}

/* ---- Empty states: premium, intentional, never blank ---- */
.eos-adm__empty,
.eos-adm__foundation-empty,
.eos-adm__table-empty {
	color: var(--eos-text-muted);
}
.eos-adm__foundation-empty {
	background: var(--eos-card-bg, var(--eos-surface));
	border-style: solid;
	border-color: var(--eos-border);
}

/* ---- Toolbars / action bars: align the control row cleanly ---- */
.eos-adm__toolbar { row-gap: 8px; }
.eos-adm__actions--footer {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--eos-border);
}

/* ---- Modals/popovers: lift them with the shared elevation token ---- */
.eos-ui-modal__panel { box-shadow: var(--eos-shadow-pop, 0 24px 64px rgba(0, 0, 0, 0.35)); }

/* ---- Dashboard cards: aligned, elevated, balanced ---- */
.eos-os__card {
	box-shadow: var(--eos-shadow-card, none);
	transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}
.eos-os__card:hover { box-shadow: var(--eos-shadow-pop, none); transform: translateY(-1px); }

/* ---- Activity: professional audit timeline ---- */
.eos-adm__timeline {
	list-style: none;
	margin: 0;
	padding: 6px;
	display: flex;
	flex-direction: column;
}
.eos-adm__tl-row {
	display: grid;
	grid-template-columns: 14px 1fr auto;
	align-items: start;
	gap: 12px;
	padding: 12px 12px;
	border-radius: 10px;
	transition: background-color 110ms ease;
}
.eos-adm__tl-row:hover { background: var(--eos-row-hover, rgba(127, 127, 127, 0.05)); }
.eos-adm__tl-row + .eos-adm__tl-row { border-top: 1px solid var(--eos-border); }
.eos-adm__tl-dot {
	width: 9px;
	height: 9px;
	margin-top: 5px;
	border-radius: 999px;
	background: var(--eos-text-subtle);
}
.eos-adm__tl-dot--security { background: #6366f1; }
.eos-adm__tl-dot--danger { background: var(--eos-danger, #dc2626); }
.eos-adm__tl-dot--info { background: #2563eb; }
.eos-adm__tl-main { min-width: 0; }
.eos-adm__tl-title {
	margin: 0;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--eos-text);
	line-height: 1.3;
}
.eos-adm__tl-meta {
	margin: 3px 0 0;
	font-size: 0.8rem;
	color: var(--eos-text-muted);
	line-height: 1.4;
}
.eos-adm__tl-sep { opacity: 0.5; margin: 0 2px; }
.eos-adm__tl-id { font-family: var(--eos-font-mono, monospace); font-size: 0.74rem; color: var(--eos-text-subtle); }
.eos-adm__tl-side {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 4px;
	text-align: right;
	white-space: nowrap;
}
.eos-adm__tl-time { font-size: 0.78rem; color: var(--eos-text-muted); }
.eos-adm__tl-code {
	font-family: var(--eos-font-mono, monospace);
	font-size: 0.66rem;
	letter-spacing: 0.02em;
	color: var(--eos-text-subtle);
	background: var(--eos-surface-2);
	padding: 1px 7px;
	border-radius: 5px;
}
@media (max-width: 640px) {
	.eos-adm__tl-row { grid-template-columns: 14px 1fr; }
	.eos-adm__tl-side { grid-column: 2; flex-direction: row; align-items: center; gap: 8px; }
}

/* ============================================================
 * 0.9.4.24 — Visual defect correction: contrast, surfaces, sizing.
 * Audit Log + Roles search sizing, human-readable audit rows, and a
 * canonical shared component baseline (.eos-* aliases of the .eos-adm__*
 * system) so future markup has named primitives to use.
 * ============================================================ */

/* Audit Log — balanced toolbar: sized search + right-aligned export. */
.eos-adm__toolbar--audit {
	align-items: center;
}
.eos-adm__search--audit {
	flex: 0 1 360px;
	max-width: 360px;
	min-width: 200px;
}
.eos-adm__btn--audit-export {
	margin-left: auto;
}
/* Audit rows: human-readable action primary, raw code as secondary metadata. */
.eos-adm__audit-action {
	display: block;
	font-weight: 600;
	color: var(--eos-text);
	line-height: 1.3;
}
.eos-adm__audit-code {
	display: block;
	margin-top: 2px;
	font-family: var(--eos-font-mono, monospace);
	font-size: 0.7rem;
	letter-spacing: 0.01em;
	color: var(--eos-text-subtle);
}

/* Roles / Access Profiles — search in a calm padded sub-toolbar, not edge-to-edge. */
.eos-adm__list-search {
	padding: 10px 14px 12px;
	border-bottom: 1px solid var(--eos-border);
}
.eos-adm__list-search .eos-adm__search--inline {
	width: 100%;
	margin: 0;
}
.eos-adm__search--sm {
	min-height: 34px;
	padding: 6px 10px;
	font-size: 0.84rem;
}

/* ---- Canonical shared component baseline (aliases of the adm system) ---- */
.eos-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 36px;
	padding: 7px 14px;
	border-radius: 8px;
	border: 1px solid var(--eos-border-strong);
	background: var(--eos-surface-2);
	color: var(--eos-text);
	font-size: 0.86rem;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.eos-button:hover { background: var(--eos-panel-elevated); }
.eos-button--primary {
	background: var(--eos-accent, #b45309);
	border-color: var(--eos-accent, #b45309);
	color: #fff;
}
.eos-button--danger {
	background: var(--eos-danger, #b91c1c);
	border-color: var(--eos-danger, #b91c1c);
	color: #fff;
}
.eos-button--ghost { background: transparent; border-color: transparent; }
.eos-input,
.eos-select {
	min-height: 36px;
	padding: 7px 11px;
	border-radius: 8px;
	border: 1px solid var(--eos-border-strong);
	/* background-COLOR only — never the `background` shorthand here. The shorthand
	 * resets background-repeat/size/position, which (combined with the dark-theme
	 * image-only override) made the select caret tile across the whole control. */
	background-color: var(--eos-surface);
	color: var(--eos-text);
	font-size: 0.86rem;
}
.eos-input::placeholder { color: var(--eos-text-subtle); }
.eos-toolbar,
.eos-action-bar {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}
.eos-card {
	background: var(--eos-surface);
	border: 1px solid var(--eos-border);
	border-radius: 12px;
	box-shadow: var(--eos-shadow-card, 0 1px 2px rgba(15, 23, 42, 0.06));
}
.eos-table { width: 100%; border-collapse: collapse; }
.eos-table th {
	font-family: var(--eos-font-mono, monospace);
	text-transform: uppercase;
	font-size: 0.7rem;
	letter-spacing: 0.04em;
	color: var(--eos-text-subtle);
	text-align: left;
}
.eos-table tbody tr:hover { background: var(--eos-row-hover, rgba(0, 0, 0, 0.03)); }
.eos-chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-family: var(--eos-font-mono, monospace);
	font-size: 0.7rem;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 999px;
}
.eos-empty-state {
	padding: 28px 20px;
	text-align: center;
	color: var(--eos-text-muted);
}
.eos-module-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}

/* ============================================================
 * Elintra OS custom select / combobox (EosSelect).
 * The native <select> is kept as a hidden backing field; this is the
 * user-facing control + a body-portal popover. No native dropdown popup,
 * exactly one caret, cool surfaces only.
 * ============================================================ */
.eos-cs {
	display: inline-flex;
	position: relative;
	max-width: 100%;
	vertical-align: middle;
}
.eos-cs--block { display: flex; width: 100%; }

/* Hidden backing <select> — stays in the DOM/form, invisible and non-tabbable. */
.eos-cs__native {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	border: 0;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
}

.eos-cs__btn {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	min-height: 38px;
	padding: 7px 12px;
	border: 1px solid var(--eos-border-strong);
	border-radius: 8px;
	background-color: var(--eos-field-bg, var(--eos-surface-2, var(--eos-surface)));
	color: var(--eos-text);
	font: inherit;
	font-size: 0.86rem;
	line-height: 1.3;
	text-align: left;
	cursor: pointer;
	transition: border-color 0.14s ease, box-shadow 0.14s ease, background-color 0.14s ease;
}
.eos-cs__btn:hover { border-color: var(--eos-text-subtle, var(--eos-border-strong)); }
.eos-cs__btn:focus-visible,
.eos-cs.is-open .eos-cs__btn {
	outline: none;
	border-color: var(--eos-accent, #475569);
	box-shadow: 0 0 0 3px var(--eos-focus-ring, rgba(71, 85, 105, 0.22));
}
.eos-cs__btn:disabled { opacity: 0.55; cursor: not-allowed; }

.eos-cs__label {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/* One caret — a single chevron glyph, never a tiled background image. */
.eos-cs__caret {
	flex: 0 0 auto;
	width: 11px;
	height: 11px;
	background-color: currentColor;
	opacity: 0.6;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8L9.5 4.5' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 11px 11px;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8L9.5 4.5' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 11px 11px;
	transition: transform 0.14s ease;
}
.eos-cs.is-open .eos-cs__caret { transform: rotate(180deg); }

/* Body-portal popover. Tokens cascade from <html>, so it themes correctly. */
.eos-cs__pop {
	position: fixed;
	z-index: 4000;
	min-width: 160px;
	max-height: 320px;
	overflow-y: auto;
	overflow-x: hidden;
	background-color: var(--eos-popover-bg, var(--eos-surface));
	border: 1px solid var(--eos-border-strong);
	border-radius: 10px;
	box-shadow: var(--eos-shadow-pop, 0 12px 32px rgba(15, 23, 42, 0.18));
	padding: 5px;
	-webkit-overflow-scrolling: touch;
}
.eos-cs__list { list-style: none; margin: 0; padding: 0; }
.eos-cs__opt {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	border-radius: 7px;
	font-size: 0.86rem;
	color: var(--eos-text);
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.eos-cs__opt.is-active { background-color: var(--eos-row-hover, rgba(71, 85, 105, 0.12)); }
.eos-cs__opt.is-selected {
	font-weight: 600;
	color: var(--eos-text);
}
.eos-cs__opt.is-selected::after {
	content: "";
	margin-left: auto;
	width: 13px;
	height: 13px;
	background-color: var(--eos-accent, #475569);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7.5L6 11L11.5 3.5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 13px 13px;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7.5L6 11L11.5 3.5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 13px 13px;
}
.eos-cs__opt.is-disabled { opacity: 0.45; cursor: not-allowed; }

/* ============================================================
 * Phase 4B — HR tab: emergency contacts (functional).
 * ============================================================ */
.eos-adm__hr-ec { margin-top: 4px; }
.eos-adm__hr-ec-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.eos-adm__hr-ec-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 14px;
	background-color: var(--eos-surface);
	border: 1px solid var(--eos-border);
	border-radius: 10px;
}
.eos-adm__hr-ec-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.eos-adm__hr-ec-name { font-weight: 600; color: var(--eos-text); display: flex; align-items: center; gap: 8px; }
.eos-adm__hr-ec-meta { font-size: 0.8rem; color: var(--eos-text-muted); overflow: hidden; text-overflow: ellipsis; }
.eos-adm__hr-ec-actions { display: flex; gap: 6px; flex: 0 0 auto; }
.eos-adm__hr-ec-formwrap {
	margin-top: 14px;
	padding: 16px;
	background-color: var(--eos-surface-2);
	border: 1px solid var(--eos-border);
	border-radius: 10px;
}
.eos-adm__field--center { display: flex; align-items: flex-end; }
.eos-adm__field--center .eos-adm__check { margin-bottom: 8px; }

/* ============================================================
 * Tab-aware profile editor — finished enterprise layout, not a long
 * raw settings form. Two-column responsive grid, contained in the card.
 * ============================================================ */
.eos-adm__edit-form { display: block; }
.eos-adm__field-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 18px;
	margin-bottom: 18px;
}
.eos-adm__field-grid .eos-adm__field { min-width: 0; }
.eos-adm__field-grid .eos-adm__field--full { grid-column: 1 / -1; }
.eos-adm__field-grid .eos-adm__input,
.eos-adm__field-grid .eos-adm__select,
.eos-adm__field-grid .eos-adm__textarea { width: 100%; box-sizing: border-box; }
.eos-adm__field-static {
	min-height: 38px;
	display: flex;
	align-items: center;
	padding: 8px 12px;
	border-radius: 8px;
	background-color: var(--eos-surface-2, var(--eos-surface));
	border: 1px dashed var(--eos-border);
	color: var(--eos-text-muted);
}
.eos-adm__field--photo { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.eos-adm__field-photo-meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.eos-adm__hint--block { margin: 0 0 14px; color: var(--eos-text-muted); font-size: 0.82rem; }

@media (max-width: 700px) {
	.eos-adm__field-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Locked access-profile chip (held protected profile, not removable). */
.eos-roles__chip--locked {
	opacity: 0.9;
	padding-right: 10px;
}
.eos-roles__chip--locked .eos-adm__chip { margin-left: 6px; }

/* ============================================================
 * Containment — long emails / IDs / titles / contacts must stay inside
 * their card. Single-line list metadata truncates with ellipsis; record
 * values wrap rather than escape. (overflow:hidden is never used to hide
 * data silently — truncated list values carry a native title tooltip.)
 * ============================================================ */
.eos-adm__row-title,
.eos-adm__row-sub {
	min-width: 0;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.eos-adm__record-row { min-width: 0; }
.eos-adm__record-value,
.eos-adm__record-label {
	min-width: 0;
	overflow-wrap: anywhere;
	word-break: break-word;
}
.eos-adm__hr-ec-main { min-width: 0; }
.eos-adm__hr-ec-name { min-width: 0; overflow-wrap: anywhere; }
.eos-adm__field-static { overflow-wrap: anywhere; }
.eos-adm__kv > dd { min-width: 0; overflow-wrap: anywhere; }

/* User table: keep long emails contained with an ellipsis + tooltip rather
 * than forcing horizontal overflow. */
.eos-adm__table--users td { max-width: 280px; }
.eos-adm__table--users td.eos-adm__td-email,
.eos-adm__table--users td .eos-adm__td-ellipsis {
	max-width: 240px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.eos-adm__record--profile,
.eos-adm__record--edit { min-width: 0; }
.eos-adm__field-grid > .eos-adm__field { box-sizing: border-box; }

/* ============================================================
 * Containment v2 — global, defensive rules so no value, control, or
 * card can escape its parent at any of the supported widths (1366 / 1440
 * / 1600 / 1920). Grid/flex children get min-width:0 so long content
 * shrinks instead of forcing overflow; all controls are border-box.
 * ============================================================ */

/* Every admin form control sizes to its container, never past it. */
.eos-adm__input,
.eos-adm__select,
.eos-adm__textarea,
.eos-adm__field-static,
.eos-adm__generated,
.eos-combobox,
.eos-combobox__input {
	box-sizing: border-box;
	max-width: 100%;
}
.eos-adm__field,
.eos-adm__form-grid > .eos-adm__field,
.eos-adm__field-grid > .eos-adm__field,
.eos-adm__record-row,
.eos-adm__user-card-grid > div,
.eos-adm__kv > div { min-width: 0; }

/* New User form fields: width-bound inputs/selects/textarea inside the card. */
.eos-adm__form-grid .eos-adm__input,
.eos-adm__form-grid .eos-adm__select,
.eos-adm__form-grid .eos-adm__textarea,
.eos-adm__form-grid .eos-combobox,
.eos-adm__form-grid .eos-combobox__input { width: 100%; box-sizing: border-box; }

/* Generated email / employee ID readouts wrap rather than push the card open. */
.eos-adm__generated {
	min-width: 0;
	overflow-wrap: anywhere;
	word-break: break-word;
}
.eos-adm__generated-row { min-width: 0; flex-wrap: wrap; }

/* User detail hero header — name, ID, job title, department, status chip
 * must stay inside the card; long tokens wrap, never escape. */
.eos-adm__record-hero { min-width: 0; }
.eos-adm__record-hero-text { min-width: 0; }
.eos-adm__record-name {
	min-width: 0;
	overflow-wrap: anywhere;
	word-break: break-word;
}
.eos-adm__record-hero-meta {
	min-width: 0;
	overflow-wrap: anywhere;
	word-break: break-word;
}
.eos-adm__record-hero-meta > span {
	display: inline-block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: bottom;
}

/* User card (grid view) title truncates with tooltip. */
.eos-adm__user-card { min-width: 0; }
.eos-adm__user-card-id { min-width: 0; }
.eos-adm__user-card-title,
.eos-adm__user-card-name {
	min-width: 0;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.eos-adm__user-card-grid dd {
	min-width: 0;
	overflow-wrap: anywhere;
	word-break: break-word;
}

/* User table: every text body cell truncates with ellipsis (+title tooltip)
 * so long departments/titles/sites/supervisors never cross columns. Auto
 * layout is preserved; short chip/avatar/action cells are unaffected. */
.eos-adm__table--users tbody td {
	max-width: 200px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.eos-adm__table--users td.eos-adm__td-email,
.eos-adm__table--users td.eos-adm__td-ellipsis { max-width: 220px; }

/* My Profile description list values wrap inside the card. */
.eos-adm__profile-dl dd,
.eos-adm__profile-self-sub,
.eos-adm__profile-self-name { min-width: 0; overflow-wrap: anywhere; word-break: break-word; }

/* ============================================================
 * Detail-card child containment (root-cause fix)
 * ------------------------------------------------------------
 * `.eos-adm__record` is a single-column CSS grid (display:grid; gap:18px)
 * with NO explicit template, so its implicit column track is `auto`. An
 * `auto` track sizes to the widest descendant's max-content, which lets
 * nested cards (HR section, emergency-contact row, foundation note, record
 * rows, action bar) grow past the parent detail card's right edge — the
 * exact overflow in the screenshot. Constraining the track to
 * `minmax(0, 1fr)` pins it to the container width; min-width:0 on every
 * grid child then lets long content wrap/truncate instead of pushing wider.
 * ============================================================ */
.eos-adm__record {
	grid-template-columns: minmax(0, 1fr);
}
.eos-adm__record > * {
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
	margin-left: 0;
	margin-right: 0;
}

/* Every nested card/panel inside the detail card obeys the content box. */
.eos-adm__record .eos-adm__record-section,
.eos-adm__record .eos-adm__foundation-empty,
.eos-adm__record .eos-adm__edit-form,
.eos-adm__record .eos-adm__actions,
.eos-adm__record-section--tab > *,
.eos-adm__hr-ec,
.eos-adm__hr-ec-formwrap,
.eos-adm__hr-ec-form,
.eos-adm__hr-ec-list,
.eos-adm__hr-ec-row {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	margin-left: 0;
	margin-right: 0;
}

/* Foundation/HR note text wraps rather than widening the card. */
.eos-adm__foundation-empty,
.eos-adm__foundation-lead { overflow-wrap: anywhere; word-break: break-word; }

/* Emergency-contact row: text column shrinks, action buttons keep their size. */
.eos-adm__hr-ec-row { flex-wrap: wrap; gap: 8px; }
.eos-adm__hr-ec-meta { min-width: 0; max-width: 100%; overflow-wrap: anywhere; white-space: normal; }

/* Footer action bar wraps inside the card instead of overflowing. */
.eos-adm__actions--footer { flex-wrap: wrap; min-width: 0; }