/*
 * Elintra OS — Console shell.
 *
 * Owns the authenticated /console/ surface: top bar, left rail, content
 * frame, profile menu, idle warning modal. Everything else (Access page
 * card, base typography, color tokens) is owned by access.css and the
 * theme's base.css.
 *
 * Class contract (must match markup in ConsoleRenderer):
 *
 *   .eos-os                        outer shell, owns CSS variables
 *     .eos-os__topbar              fixed header
 *       .eos-os__brand             logo + product label
 *       .eos-os__crumb             breadcrumb (Elintra OS / [active])
 *       .eos-os__identity          rail-toggle (mobile) + profile menu
 *     .eos-os__layout              row: rail + main
 *       .eos-os__rail              sticky module rail
 *       .eos-os__main              active pane container
 *         .eos-os__pane            one section per module
 *     .eos-os__idle                idle warning modal (overlay)
 *
 * Color/spacing tokens come from theme/base.css. We define one local
 * variable bag here so the console can be tuned without touching base.
 */


/* =====================================================================
 * SURFACE PALETTE GUARANTEE (plugin-owned, cache-busted with the plugin)
 *
 * The design tokens live in the theme's tokens.css, but a stale theme
 * asset (Bluehost edge cache, or the theme zip not reinstalled) could
 * otherwise keep the OLD warm/beige surfaces on screen. This block ships
 * the corrected surface hierarchy WITH THE PLUGIN so the fix lands the
 * moment the plugin updates, independent of theme caching.
 *
 * `html[data-eos-theme=...]` (specificity 0,1,1) intentionally outranks
 * the theme's `[data-eos-theme=...]` (0,1,0), so these values win.
 *
 * Rule: warm off-white is allowed ONLY for the page background. Cards,
 * panels, calendar cells, inputs, tables, and nested sections are clean
 * white / cool neutral (light) or elevated charcoal (dark) — never beige.
 * ================================================================= */

html[data-eos-theme="light"] {
	/* ---- Named surface tokens (single source of truth) ---- */
	--eos-canvas-bg:         #EEF2F7;   /* cool neutral page canvas — never beige */
	--eos-card-bg:           #FFFFFF;   /* cards / panels / lists / tables */
	--eos-panel-bg:          #FFFFFF;
	--eos-table-bg:          #FFFFFF;
	--eos-popover-bg:        #FFFFFF;   /* dropdown / combobox open menu */
	--eos-field-bg:          #F6F8FB;   /* inputs / closed selects — light cool */
	--eos-field-border:      #C5CFDB;   /* visible field boundary */
	--eos-button-primary-bg: #111827;
	--eos-button-secondary-bg: #FFFFFF;
	--eos-calendar-cell-bg:  #FFFFFF;   /* in-month cell */
	--eos-calendar-off-bg:   #E6EBF1;   /* off-month cell — cool muted gray */

	/* ---- Bind legacy variable names so every existing selector picks up
	 *       the corrected, clearly-separated surfaces ---- */
	--eos-bg:                var(--eos-canvas-bg);
	--eos-os-main-bg:        var(--eos-canvas-bg);
	--eos-os-rail-bg:        #FFFFFF;
	--eos-surface:           var(--eos-card-bg);
	--eos-surface-2:         #EEF2F7;   /* nested neutral (off-month, subtle fills) */
	--eos-surface-3:         #E2E8F0;
	--eos-panel:             var(--eos-panel-bg);
	--eos-panel-elevated:    #FFFFFF;
	--eos-btn-bg:            var(--eos-button-secondary-bg);
	--eos-btn-border:        #C5CFDB;
	/* Solid, visible hairlines — cards/tables/fields must read as distinct. */
	--eos-border:            #D5DDE7;
	--eos-border-strong:     #B7C2D0;
	/* Card elevation — restrained, premium, never glowing. */
	--eos-shadow-card:       0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 24px rgba(15, 23, 42, 0.06);
	--eos-shadow-pop:        0 16px 40px rgba(15, 23, 42, 0.16);
	--eos-row-hover:         rgba(15, 23, 42, 0.04);
	/* Status chip tints (cool, legible on white). */
	--eos-chip-ok-bg:        rgba(16, 185, 129, 0.12);
	--eos-chip-ok-fg:        #047857;
	--eos-chip-warn-bg:      rgba(245, 158, 11, 0.14);
	--eos-chip-warn-fg:      #b45309;
	--eos-chip-bad-bg:       rgba(220, 38, 38, 0.12);
	--eos-chip-bad-fg:       #b91c1c;
	--eos-chip-neutral-bg:   rgba(15, 23, 42, 0.06);
	--eos-chip-neutral-fg:   #475569;
}

html[data-eos-theme="dark"] {
	/* ---- Named surface tokens ---- */
	--eos-canvas-bg:         #0A0A0B;   /* near-black canvas */
	--eos-card-bg:           #161619;   /* elevated charcoal card — distinct */
	--eos-panel-bg:          #161619;
	--eos-table-bg:          #161619;
	--eos-popover-bg:        #1F1F23;   /* open menu — raised charcoal */
	--eos-field-bg:          #212127;   /* inputs raised above the card */
	--eos-field-border:      #3C3C42;
	--eos-button-primary-bg: #F5F5F2;
	--eos-button-secondary-bg: #212127;
	--eos-calendar-cell-bg:  #161619;
	--eos-calendar-off-bg:   #0F0F11;

	--eos-bg:                var(--eos-canvas-bg);
	--eos-os-main-bg:        var(--eos-canvas-bg);
	--eos-os-rail-bg:        #0C0C0D;
	--eos-surface:           var(--eos-card-bg);
	--eos-surface-2:         #1F1F23;   /* nested — lighter charcoal */
	--eos-surface-3:         #28282E;
	--eos-panel:             var(--eos-panel-bg);
	--eos-panel-elevated:    #202025;
	--eos-btn-bg:            var(--eos-button-secondary-bg);
	--eos-btn-border:        #3C3C42;
	--eos-border:            #303036;
	--eos-border-strong:     #44444C;
	--eos-shadow-card:       0 1px 2px rgba(0, 0, 0, 0.40), 0 12px 28px rgba(0, 0, 0, 0.45);
	--eos-shadow-pop:        0 18px 44px rgba(0, 0, 0, 0.60);
	--eos-row-hover:         rgba(255, 255, 255, 0.04);
	--eos-chip-ok-bg:        rgba(16, 185, 129, 0.16);
	--eos-chip-ok-fg:        #6ee7b7;
	--eos-chip-warn-bg:      rgba(245, 158, 11, 0.18);
	--eos-chip-warn-fg:      #fcd34d;
	--eos-chip-bad-bg:       rgba(248, 113, 113, 0.18);
	--eos-chip-bad-fg:       #fca5a5;
	--eos-chip-neutral-bg:   rgba(255, 255, 255, 0.07);
	--eos-chip-neutral-fg:   #cbd5e1;
}


/* =====================================================================
 * SHELL — global tokens
 *
 * All color values are token-driven. Light/dark theming is handled by
 * setting [data-eos-theme] on <html>, which swaps the token bag in
 * tokens.css. No theme-specific selectors live here — that keeps the
 * theme system honest: every surface in the console respects the
 * theme automatically.
 * ================================================================= */

.eos-os {
	--eos-os-topbar-h:        56px;
	--eos-os-rail-w:          248px;
	--eos-os-pane-max:        1100px;
	--eos-os-card-radius:     10px;

	display: block;
	min-height: 100vh;
	background: var(--eos-bg);
	color: var(--eos-text);
	font-family: var(--eos-font-sans);
}


/* =====================================================================
 * TOP BAR
 * ================================================================= */

.eos-os__topbar {
	position: sticky;
	top: 0;
	z-index: 50;
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 16px;
	height: var(--eos-os-topbar-h);
	padding: 0 20px;
	background: var(--eos-surface);
	border-bottom: 1px solid var(--eos-border);
	backdrop-filter: saturate(140%) blur(10px);
	-webkit-backdrop-filter: saturate(140%) blur(10px);
}

/* ----- Brand ------------------------------------------------------ */
.eos-os__brand {
	display: flex;
	align-items: center;
}
.eos-os__brandlink {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: inherit;
	text-decoration: none;
}
.eos-os__brandmark {
	height: 26px;
	width: auto;
	display: block;
}
.eos-os__product {
	font-family: var(--eos-font-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--eos-accent);
	padding-left: 10px;
	border-left: 1px solid var(--eos-border);
}

/* ----- Breadcrumb -------------------------------------------------
 *
 * Spec: the redundant "Elintra OS /" prefix was removed — the brand
 * mark on the left already says we're in Elintra OS, repeating it in
 * the breadcrumb wasted attention. The breadcrumb now contains only
 * the active view name. */
.eos-os__crumb {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	font-family: var(--eos-font-mono);
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.eos-os__crumb-here {
	color: var(--eos-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ----- Identity cluster ------------------------------------------ */
.eos-os__identity {
	display: inline-flex;
	align-items: center;
	gap: 12px;
}

/* Rail toggle (mobile only) */
.eos-os__rail-toggle {
	display: none;
	width: 36px;
	height: 36px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--eos-border);
	border-radius: 6px;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	cursor: pointer;
	transition: border-color 160ms var(--eos-easing);
}
.eos-os__rail-toggle:hover,
.eos-os__rail-toggle:focus-visible {
	border-color: var(--eos-border-strong);
	outline: none;
}
.eos-os__rail-toggle-bar {
	display: block;
	width: 16px;
	height: 1.5px;
	background: var(--eos-text);
	transition:
		transform 200ms var(--eos-easing),
		opacity   160ms var(--eos-easing);
}

/* Theme toggle (sun ↔ moon) — small icon button matching rail toggle. */
.eos-os__theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--eos-border);
	border-radius: 6px;
	color: var(--eos-text-muted);
	cursor: pointer;
	transition:
		border-color 160ms var(--eos-easing),
		color        160ms var(--eos-easing);
}
.eos-os__theme-toggle:hover,
.eos-os__theme-toggle:focus-visible {
	border-color: var(--eos-border-strong);
	color: var(--eos-text);
	outline: none;
}
.eos-os__theme-toggle svg {
	width: 18px;
	height: 18px;
}
/* Show only the icon that matches the active theme. */
[data-eos-theme="dark"]  .eos-os__theme-icon--sun  { display: block; }
[data-eos-theme="dark"]  .eos-os__theme-icon--moon { display: none; }
[data-eos-theme="light"] .eos-os__theme-icon--sun  { display: none; }
[data-eos-theme="light"] .eos-os__theme-icon--moon { display: block; }
.eos-os__rail-toggle[aria-expanded="true"] .eos-os__rail-toggle-bar:nth-child(1) {
	transform: translateY(5.5px) rotate(45deg);
}
.eos-os__rail-toggle[aria-expanded="true"] .eos-os__rail-toggle-bar:nth-child(2) {
	opacity: 0;
}
.eos-os__rail-toggle[aria-expanded="true"] .eos-os__rail-toggle-bar:nth-child(3) {
	transform: translateY(-5.5px) rotate(-45deg);
}

/* ----- Notification bell ----------------------------------------- */
.eos-os__notify {
	position: relative;
}
.eos-os__notify-trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	background: transparent;
	border: none;
	border-radius: 999px;
	color: var(--eos-text-muted);
	cursor: pointer;
	position: relative;
	transition: background-color 160ms var(--eos-easing), color 160ms var(--eos-easing);
}
.eos-os__notify-trigger:hover,
.eos-os__notify-trigger:focus-visible {
	background: var(--eos-os-row-selected, rgba(148, 163, 184, 0.14));
	color: var(--eos-text);
	outline: none;
}
.eos-os__notify-trigger[aria-expanded="true"] {
	background: var(--eos-os-row-selected, rgba(148, 163, 184, 0.14));
	color: var(--eos-text);
}
.eos-os__notify-trigger[data-has-unread="true"] .eos-os__notify-icon {
	animation: eos-notify-nudge 1.2s ease 1;
}
@keyframes eos-notify-nudge {
	0%, 100% { transform: rotate(0deg); }
	20% { transform: rotate(-12deg); }
	40% { transform: rotate(12deg); }
	60% { transform: rotate(-8deg); }
	80% { transform: rotate(8deg); }
}
.eos-os__notify-count {
	position: absolute;
	top: -4px;
	right: -4px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 999px;
	font-size: 0.625rem;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
	background: var(--eos-danger, #b42318);
	color: #fff;
}
.eos-os__notify-panel {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	width: min(360px, calc(100vw - 24px));
	max-height: min(420px, 70vh);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--eos-border);
	border-radius: 10px;
	background: var(--eos-panel-elevated, var(--eos-surface));
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
	z-index: 1200;
}
.eos-os__notify-head {
	padding: 12px 14px;
	border-bottom: 1px solid var(--eos-border);
}
.eos-os__notify-title {
	margin: 0;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--eos-text-muted);
}
.eos-os__notify-body {
	overflow-y: auto;
	padding: 8px;
}
.eos-os__notify-empty {
	margin: 0;
	padding: 24px 12px;
	text-align: center;
	font-size: 0.88rem;
	color: var(--eos-text-muted);
}
.eos-os__notify-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.eos-os__notify-item-btn {
	display: grid;
	gap: 4px;
	width: 100%;
	padding: 10px 12px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}
.eos-os__notify-item-btn:hover,
.eos-os__notify-item-btn:focus-visible {
	background: var(--eos-surface-hover, rgba(255, 255, 255, 0.04));
	outline: none;
}
.eos-os__notify-item--unread .eos-os__notify-item-title {
	font-weight: 600;
}
.eos-os__notify-item-title {
	font-size: 0.88rem;
}
.eos-os__notify-item-body {
	font-size: 0.78rem;
	color: var(--eos-text-muted);
}

/* ----- Profile button + menu -------------------------------------
 *
 * Layout: [name] [role chip] [avatar] [chevron]. The avatar lives to
 * the right of the name so coworkers can pattern-match faces without
 * reading. Default = colored circle with monogram initials; an
 * extension hook (eos_user_avatar_html in PHP) can swap in a real
 * employee photo when D6 ships the user-photo upload flow.
 * --------------------------------------------------------------- */
.eos-os__profile {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 2px;
}
/*
 * The user chip is intentionally borderless — the avatar disc is the
 * visual anchor, not a pill outline. Hover/focus shows a soft
 * background tint so the affordance is still discoverable, but the
 * neutral state stays clean and gets out of the way of the rest of
 * the top bar.
 */
.eos-os__profile-trigger {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 44px;
	padding: 3px 10px;
	background: transparent;
	border: none;
	border-radius: 999px;
	color: var(--eos-text);
	cursor: pointer;
	text-decoration: none;
	transition: background-color 160ms var(--eos-easing);
}
.eos-os__profile-trigger:hover,
.eos-os__profile-trigger:focus-visible {
	background: var(--eos-panel);
	outline: none;
}
.eos-os__profile-trigger:focus-visible {
	box-shadow: 0 0 0 2px var(--eos-os-focus);
}

/* Caret button — the menu toggle, separated from the identity link so a
 * click on the name/avatar navigates to My Profile while the caret opens
 * the account menu. */
.eos-os__profile-caret {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	background: transparent;
	border: none;
	border-radius: 50%;
	color: var(--eos-text-muted);
	cursor: pointer;
	transition: background-color 160ms var(--eos-easing);
}
.eos-os__profile-caret:hover,
.eos-os__profile-caret:focus-visible {
	background: var(--eos-panel);
	color: var(--eos-text);
	outline: none;
}
.eos-os__profile-caret:focus-visible {
	box-shadow: 0 0 0 2px var(--eos-os-focus);
}
.eos-os__profile-caret[aria-expanded="true"] .eos-os__profile-chev {
	transform: rotate(180deg);
}
.eos-os__profile-name {
	font-family: var(--eos-font-sans);
	font-size: 0.8125rem;
	font-weight: 600;
	max-width: 16ch;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.eos-os__profile-role {
	font-family: var(--eos-font-mono);
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: var(--eos-text-muted);
	padding-left: 10px;
	border-left: 1px solid var(--eos-border);
}
.eos-os__profile-chev {
	color: var(--eos-text-muted);
	transition: transform 200ms var(--eos-easing);
}

/*
 * Avatar — the visual anchor for "who is this user". Now sized via
 * the inline `width`/`height` style stamped by avatar_html(), so the
 * same disc renders at 36px in the topbar chip and 40px in the
 * dropdown header without per-size CSS variants. Initials are the
 * default content; an uploaded photo replaces the initials via the
 * `eos_user_avatar_html` filter once D6.2 ships the photo upload.
 */
.eos-os__avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--eos-os-avatar-bg, var(--eos-panel-elevated));
	border: 1px solid var(--eos-border);
	color: var(--eos-os-avatar-fg, var(--eos-text-muted));
	font-family: var(--eos-font-mono);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0;
	overflow: hidden;
	user-select: none;
}
.eos-os__avatar img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
}
.eos-os__avatar-initials {
	line-height: 1;
}

.eos-os__profile-menu {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	min-width: 260px;
	padding: 6px;
	background: var(--eos-panel);
	border: 1px solid var(--eos-border-strong);
	border-radius: 8px;
	box-shadow:
		0 1px 0 0 var(--eos-border) inset,
		0 18px 40px -12px rgba(0, 0, 0, 0.55);
	z-index: 60;
}
.eos-os__profile-head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 10px 12px;
	border-bottom: 1px solid var(--eos-border);
}
.eos-os__profile-head-meta {
	min-width: 0;
}
.eos-os__profile-email {
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--eos-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.eos-os__profile-meta {
	margin: 4px 0 0;
	font-family: var(--eos-font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.04em;
	color: var(--eos-text-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.eos-os__profile-meta code {
	font-family: var(--eos-font-mono);
	font-size: inherit;
	color: var(--eos-text);
}
.eos-os__profile-list {
	list-style: none;
	margin: 6px 0;
	padding: 0;
}
/*
 * Profile dropdown rows — every row uses the same height, font size,
 * and padding so Active sessions / My audit trail / Theme / Sign out
 * read as one consistent menu, not a stack of mismatched controls.
 *
 * Common shape (button OR anchor):
 *   - 36px row height (padding + 0.8125rem text + line-height)
 *   - left-aligned label
 *   - 4px corner radius
 *   - hover/focus tints with `--eos-panel-elevated`
 *
 * The theme switch row extends this base with a slider on the right.
 * The sign-out row extends this base with a destructive red hover tint.
 */
.eos-os__profile-item {
	display: flex;
	width: 100%;
	align-items: center;
	gap: 10px;
	min-height: 36px;
	padding: 8px 10px;
	font-family: var(--eos-font-sans);
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1.2;
	color: var(--eos-text);
	background: transparent;
	border: none;
	border-radius: 4px;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color 140ms var(--eos-easing),
		color            140ms var(--eos-easing);
}
.eos-os__profile-item:hover,
.eos-os__profile-item:focus-visible {
	background: var(--eos-panel-elevated);
	outline: none;
}

/* ---- Theme switch row ----
 *
 * Layout:
 *   [ Theme                                       (slider) ]
 *
 * The slider is a 36×20px pill with sun/moon icons living inside the
 * thumb. The thumb slides 16px right when checked (light mode) and
 * the icon inside swaps. Whole row is the click target so the user
 * doesn't have to aim at the 16px thumb. */
.eos-os__profile-item--theme {
	justify-content: space-between;
}
.eos-os__profile-item-label {
	flex: 1 1 auto;
}

.eos-os__theme-switch {
	position: relative;
	display: inline-flex;
	align-items: center;
	width: 38px;
	height: 22px;
	flex: 0 0 auto;
}
.eos-os__theme-switch-track {
	position: absolute;
	inset: 0;
	background: var(--eos-panel-elevated);
	border: 1px solid var(--eos-border);
	border-radius: 999px;
	transition:
		background-color 200ms var(--eos-easing),
		border-color     200ms var(--eos-easing);
}
.eos-os__profile-item--theme:hover .eos-os__theme-switch-track,
.eos-os__profile-item--theme:focus-visible .eos-os__theme-switch-track {
	border-color: var(--eos-border-strong);
}
.eos-os__theme-switch-thumb {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 16px;
	height: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--eos-os-btn-primary-bg, var(--eos-panel-elevated));
	color: var(--eos-os-btn-primary-fg, var(--eos-text));
	border: 1px solid var(--eos-border-strong);
	border-radius: 50%;
	transition: transform 220ms var(--eos-easing);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
/* Light theme = thumb to the right (track length 38 - thumb 16 - 2px
 * padding either side = 18px travel). Active state is encoded on the
 * <html data-eos-theme> attribute, NOT on aria-checked, so the slider
 * mirrors the actual rendered theme even on first paint. */
[data-eos-theme="light"] .eos-os__theme-switch-thumb {
	transform: translateX(18px);
}
.eos-os__theme-switch-thumb .eos-os__theme-icon {
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
}
[data-eos-theme="dark"] .eos-os__theme-switch-thumb {
	background: #F5F5F2;
	border-color: #F5F5F2;
}
[data-eos-theme="dark"] .eos-os__theme-switch-thumb .eos-os__theme-icon {
	color: #111111;
}
[data-eos-theme="light"] .eos-os__theme-switch-thumb {
	background: #111111;
	border-color: #111111;
}
[data-eos-theme="light"] .eos-os__theme-switch-thumb .eos-os__theme-icon {
	color: #FFFFFF;
}
[data-eos-theme="light"] .eos-os__theme-switch-track {
	background: #E5E7EB;
	border-color: rgba(10, 10, 10, 0.15);
}
/* Show only the icon for the active theme inside the thumb. */
[data-eos-theme="dark"]  .eos-os__theme-switch-thumb .eos-os__theme-icon--sun  { display: none; }
[data-eos-theme="dark"]  .eos-os__theme-switch-thumb .eos-os__theme-icon--moon { display: inline-block; }
[data-eos-theme="light"] .eos-os__theme-switch-thumb .eos-os__theme-icon--sun  { display: inline-block; }
[data-eos-theme="light"] .eos-os__theme-switch-thumb .eos-os__theme-icon--moon { display: none; }

/* ---- Sign out row ----
 *
 * Same shape as every other menu row — no border, no panel block, no
 * outline. The red treatment is hover/focus only so users
 * recognize "destructive action" without the menu feeling shouty.
 *
 * The optional gentle pulse runs only WHILE hovered or focused; it
 * never plays at rest, so the menu doesn't keep moving in the
 * peripheral vision. prefers-reduced-motion suppresses the pulse and
 * keeps the color treatment.
 */
.eos-os__profile-item--signout {
	font-weight: 600;
	color: var(--eos-text);
}
.eos-os__profile-item--signout:hover,
.eos-os__profile-item--signout:focus-visible {
	background: rgba(220, 38, 38, 0.08);
	color: var(--eos-danger);
}


/* OS surfaces — neutral focus rings and text selection (no brand orange). */
.eos-os :focus-visible,
.eos-adm :focus-visible {
	outline-color: var(--eos-os-focus);
}

.eos-os ::selection,
.eos-adm ::selection {
	background: rgba(100, 116, 139, 0.35);
	color: inherit;
}

[data-eos-theme="light"] .eos-os ::selection,
[data-eos-theme="light"] .eos-adm ::selection {
	background: rgba(71, 85, 105, 0.22);
}

.eos-os__layout {
	display: grid;
	grid-template-columns: var(--eos-os-rail-w) 1fr;
	min-height: calc(100vh - var(--eos-os-topbar-h));
	background: var(--eos-os-main-bg, var(--eos-bg));
}

.eos-os__rail {
	position: sticky;
	top: var(--eos-os-topbar-h);
	align-self: start;
	height: calc(100vh - var(--eos-os-topbar-h));
	overflow-y: auto;
	overflow-x: hidden;
	padding: 18px 12px 32px;
	background: var(--eos-os-rail-bg, var(--eos-surface));
	border-right: 1px solid var(--eos-border);
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.eos-os__rail::-webkit-scrollbar {
	display: none;
	width: 0;
	height: 0;
}

.eos-os__rail-nav { display: block; }

.eos-os__rail-group {
	margin: 0 0 18px;
}
.eos-os__rail-group-label {
	margin: 0 0 8px;
	padding: 0 8px;
	font-family: var(--eos-font-mono);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: var(--eos-text-subtle);
}
.eos-os__rail-group-toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	cursor: pointer;
	text-align: left;
}
.eos-os__rail-group-icon {
	display: inline-grid;
	place-items: center;
	width: 16px;
	height: 16px;
	font-size: 0.95rem;
	line-height: 1;
	color: var(--eos-text-muted);
	flex-shrink: 0;
}
.eos-os__rail-group[data-collapsed="true"] .eos-os__rail-list {
	display: none;
}
.eos-os__rail-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.eos-os__rail-item {
	display: block;
	margin: 0;
}
.eos-os__rail-link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 8px;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--eos-text-muted);
	text-decoration: none;
	border-radius: 6px;
	border-left: 2px solid transparent;
	transition:
		background-color 140ms var(--eos-easing),
		color            140ms var(--eos-easing),
		border-color     140ms var(--eos-easing);
}
.eos-os__rail-link:hover,
.eos-os__rail-link:focus-visible {
	color: var(--eos-text);
	background: var(--eos-os-nav-hover, #F3F4F5);
	outline: none;
}
.eos-os__rail-link--active {
	color: var(--eos-os-nav-active-text, var(--eos-text));
	background: var(--eos-os-nav-active, #EEF0F2);
	border-left-color: var(--eos-border-strong);
}
[data-eos-theme="dark"] .eos-os__rail-link:hover,
[data-eos-theme="dark"] .eos-os__rail-link:focus-visible {
	background: var(--eos-os-nav-hover, #161A1F);
}
[data-eos-theme="dark"] .eos-os__rail-link--active {
	background: var(--eos-os-nav-active, #1E2329);
	color: var(--eos-os-nav-active-text, #F5F5F2);
}
.eos-os__rail-icon {
	display: inline-flex;
	width: 16px;
	height: 16px;
	color: var(--eos-text-muted);
	flex: 0 0 auto;
}
.eos-os__rail-link--active .eos-os__rail-icon,
.eos-os__rail-link:hover .eos-os__rail-icon {
	color: var(--eos-text);
}
.eos-os__rail-label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}


/* =====================================================================
 * MAIN PANES
 * ================================================================= */

.eos-os__main {
	min-width: 0;
	min-height: calc(100vh - var(--eos-os-topbar-h));
	padding: clamp(20px, 3vw, 36px) clamp(20px, 4vw, 48px) 80px;
	outline: none;
	overflow-x: hidden;
	overflow-y: visible;
}

.eos-os__pane {
	max-width: var(--eos-os-pane-max);
	margin: 0 auto;
}
.eos-os__pane[hidden] { display: none; }

.eos-os__pane-head {
	margin: 0 0 28px;
}
.eos-os__pane-eyebrow {
	margin: 0 0 8px;
	font-family: var(--eos-font-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--eos-text-muted);
}
.eos-os__pane-title {
	margin: 0 0 10px;
	font-family: var(--eos-font-sans);
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--eos-text);
}
.eos-os__pane-lead {
	margin: 0;
	max-width: 60ch;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--eos-text-muted);
}


/* ----- Dashboard cards ------------------------------------------ */

.eos-os__cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 16px;
	margin: 0 0 32px;
}
.eos-os__card {
	padding: 18px 18px 20px;
	background: var(--eos-panel);
	border: 1px solid var(--eos-border);
	border-radius: var(--eos-os-card-radius);
}
.eos-os__card-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 12px;
}
.eos-os__card-title {
	margin: 0;
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0;
	color: var(--eos-text);
}
.eos-os__card-meta {
	font-family: var(--eos-font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: var(--eos-text-subtle);
}
.eos-os__card-empty {
	margin: 0;
	font-size: 0.8125rem;
	color: var(--eos-text-muted);
}

.eos-os__kv {
	display: grid;
	grid-template-columns: 110px 1fr;
	gap: 8px 16px;
	margin: 0;
	font-size: 0.8125rem;
}
.eos-os__kv dt {
	font-family: var(--eos-font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: var(--eos-text-muted);
}
.eos-os__kv dd {
	margin: 0;
	color: var(--eos-text);
	overflow: hidden;
	text-overflow: ellipsis;
}
.eos-os__kv code {
	font-family: var(--eos-font-mono);
	font-size: 0.75rem;
	color: var(--eos-text);
}

.eos-os__chip-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.eos-os__chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	font-family: var(--eos-font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.06em;
	color: var(--eos-text);
	background: var(--eos-panel-elevated);
	border: 1px solid var(--eos-border);
	border-radius: 999px;
}
.eos-os__chip--ok {
	color: var(--eos-success);
	background: rgba(16, 185, 129, 0.10);
	border-color: rgba(16, 185, 129, 0.32);
}

.eos-os__perm-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.eos-os__perm-list li {
	padding: 3px 8px;
	background: var(--eos-panel-elevated);
	border: 1px solid var(--eos-border);
	border-radius: 4px;
}
.eos-os__perm-list code {
	font-family: var(--eos-font-mono);
	font-size: 0.6875rem;
	color: var(--eos-text);
}


/* ----- Roadmap list (dashboard) ---------------------------------- */

.eos-os__roadmap {
	margin: 32px 0 0;
}
.eos-os__roadmap-head {
	margin: 0 0 14px;
}
.eos-os__roadmap-title {
	margin: 0;
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--eos-text);
}
.eos-os__roadmap-list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--eos-border);
}
.eos-os__roadmap-row {
	display: grid;
	grid-template-columns: 18px minmax(160px, 200px) 1fr auto;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid var(--eos-border);
	font-size: 0.8125rem;
}
.eos-os__roadmap-icon {
	color: var(--eos-text-muted);
	display: inline-flex;
}
.eos-os__roadmap-link {
	font-weight: 600;
	color: var(--eos-text);
	text-decoration: none;
	transition: color 140ms var(--eos-easing);
}
.eos-os__roadmap-link:hover,
.eos-os__roadmap-link:focus-visible {
	color: var(--eos-text);
	text-decoration: underline;
	outline: none;
}
.eos-os__roadmap-summary {
	color: var(--eos-text-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.eos-os__roadmap-ships {
	font-family: var(--eos-font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--eos-text-subtle);
	white-space: nowrap;
}


/* ----- Placeholder pane ------------------------------------------ */

.eos-os__placeholder {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 24px;
	padding: 28px 28px 32px;
	background: var(--eos-panel);
	border: 1px solid var(--eos-border);
	border-radius: var(--eos-os-card-radius);
}
.eos-os__placeholder-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--eos-text-muted);
	background: var(--eos-os-row-selected);
	border: 1px solid var(--eos-border);
	border-radius: 8px;
}
.eos-os__placeholder-icon svg {
	width: 22px;
	height: 22px;
}
.eos-os__placeholder-meta {
	margin: 0 0 8px;
	font-family: var(--eos-font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--eos-text-muted);
}
.eos-os__placeholder-title {
	margin: 0 0 8px;
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--eos-text);
}
.eos-os__placeholder-text {
	margin: 0;
	max-width: 60ch;
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--eos-text-muted);
}


/* =====================================================================
 * IDLE WARNING MODAL
 * ================================================================= */

.eos-os__idle {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(0, 0, 0, 0.60);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	z-index: 200;
	animation: eos-os-idle-fade 200ms var(--eos-easing);
}
.eos-os__idle[hidden] { display: none; }
@keyframes eos-os-idle-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* Subtle opacity pulse for the sign-out hover state. The amplitude is
 * intentionally narrow (1.0 → 0.78 → 1.0) so it reads as a soft
 * "warning" rather than a flashing alert. Suppressed entirely when
 * the user prefers reduced motion. */
@keyframes eos-signout-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.78; }
}

.eos-os__idle-card {
	width: 100%;
	max-width: 420px;
	padding: 24px 24px 22px;
	background: var(--eos-panel);
	border: 1px solid var(--eos-border-strong);
	border-radius: 12px;
	box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.7);
	text-align: left;
}
.eos-os__idle-title {
	margin: 4px 0 8px;
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--eos-text);
}
.eos-os__idle-body {
	margin: 0 0 18px;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--eos-text-muted);
}
.eos-os__idle-countdown {
	font-family: var(--eos-font-mono);
	font-weight: 600;
	color: var(--eos-text);
}
.eos-os__idle-actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}
.eos-os__idle-stay,
.eos-os__idle-out {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 0 18px;
	font-family: var(--eos-font-sans);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	border-radius: 6px;
	cursor: pointer;
	transition:
		background-color 140ms var(--eos-easing),
		border-color     140ms var(--eos-easing),
		transform        140ms var(--eos-easing);
}
.eos-os__idle-stay {
	color: var(--eos-os-btn-primary-fg, #fff);
	background: var(--eos-os-btn-primary-bg, #111);
	border: 1px solid var(--eos-os-btn-primary-bg, #111);
}
.eos-os__idle-stay:hover,
.eos-os__idle-stay:focus-visible {
	background: var(--eos-os-btn-primary-hover, #2a2a2a);
	border-color: var(--eos-os-btn-primary-hover, #2a2a2a);
	transform: translateY(-1px);
	outline: none;
}
.eos-os__idle-out {
	color: var(--eos-text);
	background: transparent;
	border: 1px solid var(--eos-border-strong);
}
.eos-os__idle-out:hover,
.eos-os__idle-out:focus-visible {
	background: var(--eos-panel-elevated);
	border-color: var(--eos-text-muted);
	outline: none;
}


/* =====================================================================
 * RESPONSIVE
 * ================================================================= */

@media (max-width: 880px) {
	.eos-os {
		--eos-os-rail-w: 0px;
	}
	.eos-os__crumb {
		display: none;
	}
	.eos-os__profile-name {
		max-width: 10ch;
	}
	.eos-os__profile-role {
		display: none;
	}
	.eos-os__layout {
		grid-template-columns: 1fr;
	}
	.eos-os__rail-toggle {
		display: inline-flex;
	}
	.eos-os__rail {
		position: fixed;
		top: var(--eos-os-topbar-h);
		left: 0;
		width: 280px;
		max-width: 80vw;
		height: calc(100vh - var(--eos-os-topbar-h));
		background: var(--eos-surface);
		border-right: 1px solid var(--eos-border);
		transform: translateX(-100%);
		transition: transform 240ms var(--eos-easing);
		z-index: 40;
	}
	.eos-os__rail[data-open="true"] {
		transform: translateX(0);
		box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
	}
	.eos-os__roadmap-row {
		grid-template-columns: 18px 1fr;
		grid-auto-rows: auto;
	}
	.eos-os__roadmap-summary,
	.eos-os__roadmap-ships {
		grid-column: 2;
	}
	.eos-os__roadmap-summary {
		white-space: normal;
	}
	.eos-os__placeholder {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 520px) {
	.eos-os__brandmark { height: 22px; }
	.eos-os__product   { display: none; }
	.eos-os__profile-trigger { padding: 0 10px; }
}


/* =====================================================================
 * REDUCED MOTION
 * ================================================================= */

@media (prefers-reduced-motion: reduce) {
	.eos-os__rail,
	.eos-os__profile-trigger,
	.eos-os__profile-chev,
	.eos-os__profile-item,
	.eos-os__theme-switch-track,
	.eos-os__theme-switch-thumb,
	.eos-os__rail-link,
	.eos-os__rail-toggle-bar,
	.eos-os__theme-toggle,
	.eos-os__idle-stay,
	.eos-os__idle-out {
		transition: none;
	}
	.eos-os__idle,
	.eos-os__profile-item--signout:hover,
	.eos-os__profile-item--signout:focus-visible {
		animation: none;
	}
	.eos-os__idle-stay:hover,
	.eos-os__idle-stay:focus-visible {
		transform: none;
	}
}

/* v0.8.7 — Delivery 6.7 polish */

.eos-os__notify-panel[hidden],
.eos-os__profile-menu[hidden] {
	display: none !important;
}

.eos-os a:hover,
.eos-os a:focus-visible,
.eos-adm a:hover,
.eos-adm a:focus-visible {
	color: var(--eos-text);
}

.eos-os__dash-news-link:hover,
.eos-adm__inline-link:hover {
	color: var(--eos-text-muted);
	text-decoration: underline;
}

.eos-os__rail-group-label {
	font-weight: 700;
	color: var(--eos-text-muted);
}

.eos-os__rail-group-toggle:hover,
.eos-os__rail-group-toggle:focus-visible {
	background: transparent;
	color: inherit;
}

.eos-os__dash-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px 24px;
	margin-bottom: 24px;
}

.eos-os__dash-head-aside { text-align: right; }

.eos-os__dash-user-name {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 600;
}

.eos-os__dash-user-role {
	margin: 4px 0 0;
	font-family: var(--eos-font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--eos-text-muted);
}

.eos-os__dash-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 16px;
}

.eos-os__dash-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-height: 140px;
	padding: 16px 18px;
	background: var(--eos-surface);
	border: 1px solid var(--eos-border);
	border-radius: 12px;
}

.eos-os__dash-card--wide { grid-column: 1 / -1; }

.eos-os__dash-card-title {
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--eos-text-muted);
}

.eos-os__dash-card-value {
	margin: 0;
	font-size: 1.75rem;
	font-weight: 600;
	line-height: 1.1;
}

.eos-os__dash-card-hint {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.45;
	color: var(--eos-text-muted);
}

.eos-os__dash-card-action {
	margin-top: auto;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--eos-text-muted);
}

.eos-os__dash-news {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 6px;
	flex: 1;
}

.eos-os__dash-kv {
	display: grid;
	gap: 8px;
	margin: 0;
}

.eos-os__dash-kv dt {
	margin: 0;
	font-size: 0.75rem;
	color: var(--eos-text-muted);
}

.eos-os__dash-kv dd {
	margin: 0;
	font-size: 1.125rem;
	font-weight: 600;
}

.eos-os__dash-kv--cols {
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 16px;
}

.eos-os__dash-kv--cols > div {
	display: grid;
	gap: 4px;
}