/* Light skin. Same variable surface as default.css; values swapped. */

:root {
	--bg:                 #f4f4f6;
	--text:               #1f1f2c;
	--text-muted:         #5b5f70;

	--input-bg:           #ffffff;
	--input-text:         #1f1f2c;
	--input-bg-focus:     #ffffff;
	--input-text-focus:   #1f1f2c;
	--input-border:       #c4c6d0;
	--input-border-focus: #7c3aed;

	--accent:             #7c3aed;
	--accent-text:        #ffffff;
	--accent-hover:       #6d28d9;

	--card-bg:            #ffffff;
	--card-border:        #d8dae3;
}

body {
	background-color: var(--bg);
	color: var(--text);
}

.field__input {
	background-color: var(--input-bg);
	color: var(--input-text);
	border-color: var(--input-border);
}
.field__input:focus {
	background-color: var(--input-bg-focus);
	color: var(--input-text-focus);
	border-color: var(--input-border-focus);
}

.btn--primary {
	background-color: var(--accent);
	color: var(--accent-text);
	border-color: var(--accent);
}
.btn--primary:hover,
.btn--primary:focus {
	background-color: var(--accent-hover);
	border-color: var(--accent-hover);
}

.btn--danger {
	background-color: rgba(225, 29, 72, 0.10);
	color: #be123c;
	border-color: rgba(225, 29, 72, 0.45);
}
.btn--danger:hover,
.btn--danger:focus {
	background-color: rgba(225, 29, 72, 0.20);
	color: #9f1239;
}

.btn--ghost {
	background-color: transparent;
	color: var(--text-muted);
	border-color: var(--card-border);
}
.btn--ghost:hover,
.btn--ghost:focus {
	background-color: var(--card-bg);
	color: var(--text);
}

.card {
	background-color: var(--card-bg);
	border: 1px solid var(--card-border);
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.card__subtitle,
.card__hint,
.footer,
.hero__subtitle,
.feature__body,
.sitefoot {
	color: var(--text-muted);
}

.footer a,
.sitefoot a {
	color: var(--accent);
}

.card a:not(.btn) {
	color: var(--accent);
}
.card a:not(.btn):hover,
.card a:not(.btn):focus-visible {
	color: var(--accent-hover);
}

/* Top bar */
.topbar {
	background-color: var(--card-bg);
	border-bottom-color: var(--card-border);
}
.topbar__brand,
.topbar__nav a {
	color: var(--text);
}
.topbar__mark {
	background-color: var(--accent);
	color: var(--accent-text);
}
.topbar__signin {
	color: var(--accent);
	border: 1px solid var(--card-border);
}
.topbar__signin:hover {
	background-color: var(--bg);
}
.topbar__nav a:hover {
	background-color: var(--bg);
}
.topbar__nav a.is-active {
	background-color: var(--bg);
	color: var(--accent);
}
.topbar__user {
	color: var(--text-muted);
}

/* Hero / features */
.hero__mark {
	background-color: var(--card-bg);
	border: 1px solid var(--card-border);
	color: var(--accent);
}
.feature {
	background-color: var(--card-bg);
	border-color: var(--card-border);
}
.feature:hover {
	border-color: var(--accent);
}
.feature__title {
	color: var(--text);
}

/* Site footer */
.sitefoot {
	background-color: var(--card-bg);
	border-top-color: var(--card-border);
}

/* Hero gradient palette */
.page--landing {
	--hero-grad-1: #c4b5fd;
	--hero-grad-2: #c084fc;
	--hero-grad-3: #a855f7;
}

/* ============================================================
   Grid-list family theme. See themes/default.css for the 4n
   zebra rationale. Light skin uses #fafafb (a notch lighter
   than --bg) for the zebra tint so the three-tier read stays
   legible (header / odd / 4n). Selected uses #d8d0ff — light
   lavender, deeper than hover — without overriding text colour
   so per-state badge palettes survive.
   ============================================================ */
.incidents__list,
.users__list,
.servers__list,
.sessions__admin-list,
.sftp-audit__list,
.workerbee__list,
.workerbee-deployments__list,
.server-transfer__list {
	border: 1px solid var(--card-border);
}
.incidents__head,
.users__head,
.servers__head,
.sessions__admin-head,
.sftp-audit__head,
.workerbee__head,
.workerbee-deployments__head,
.server-transfer__head {
	background-color: var(--bg);
	color: var(--text-muted);
	border-bottom: 1px solid var(--card-border);
}
.incidents__row,
.users__row,
.servers__row,
.sessions__admin-row,
.sftp-audit__row,
.workerbee__row,
.workerbee-deployments__row,
.server-transfer__row {
	background-color: var(--card-bg);
	border-top-color: var(--card-border);
	color: var(--text);
}
.incidents__row:nth-child(4n),
.users__row:nth-child(4n),
.servers__row:nth-child(4n),
.sftp-audit__row:nth-child(4n),
.workerbee__row:nth-child(4n),
.workerbee-deployments__row:nth-child(4n),
.server-transfer__row:nth-child(4n) {
	background-color: #fafafb;
}
/* access-groups compact tables — see default.css for the rationale. */
.access-groups__list--compact .server-transfer__row:nth-child(4n) {
	background-color: var(--card-bg);
}
.access-groups__list--compact .server-transfer__row:nth-child(odd) {
	background-color: #fafafb;
}
.sessions__admin-row:nth-child(odd) {
	background-color: #fafafb;
}
/* session_activity.php — see default.css for the rationale.
   Aggregate view overrides the global 4n stripe and zebras on
   :nth-child(odd); chronological view's rows+details interleave so
   the global 4n rule applies naturally — no override needed. */
.session-activity__list--aggregate .users__row:nth-child(4n) {
	background-color: var(--card-bg);
}
.session-activity__list--aggregate .users__row:nth-child(odd) {
	background-color: #fafafb;
}
.session-activity__list .users__row:hover {
	background-color: #ebe7ff;
}
.session-activity__list .users__row.is-selected,
.session-activity__list .users__row:focus-visible {
	background-color: var(--input-bg-focus);
	color: var(--input-text-focus);
	outline: none;
}
.incidents__row:hover,
.users__row:hover,
.servers__row:hover,
.sftp-audit__row:hover,
.workerbee__row:hover,
.workerbee-deployments__row:hover,
.server-transfer__row:hover {
	background-color: #ebe7ff;
}
.incidents__row.is-selected, .incidents__row:focus-visible,
.users__row.is-selected,     .users__row:focus-visible,
.servers__row.is-selected,   .servers__row:focus-visible,
.sftp-audit__row.is-selected, .sftp-audit__row:focus-visible,
.workerbee__row.is-selected, .workerbee__row:focus-visible,
.workerbee-deployments__row.is-selected, .workerbee-deployments__row:focus-visible,
.server-transfer__row.is-selected, .server-transfer__row:focus-visible {
	outline: none;
	background-color: #d8d0ff;
}

/* Resolved incident rows — soft green wash. See themes/default.css. */
.incidents__list .incidents__row[data-resolved="1"] {
	background-color: rgba(22, 163, 74, 0.10);
}
.incidents__list .incidents__row[data-resolved="1"]:hover {
	background-color: rgba(22, 163, 74, 0.16);
}
.incidents__list .incidents__row[data-resolved="1"].is-selected,
.incidents__list .incidents__row[data-resolved="1"]:focus-visible {
	background-color: rgba(22, 163, 74, 0.22);
}
.users__detail,
.servers__detail,
.incidents__detail,
.sftp-audit__detail,
.workerbee__detail,
.workerbee-deployments__detail,
.server-transfer__detail,
.session-activity__detail {
	background-color: var(--card-bg);
	border-top-color: var(--card-border);
}
.incidents__cell-primary,
.users__row .users__cell-user,
.servers__row .servers__cell-hostname,
.sftp-audit__row .sftp-audit__cell-server,
.workerbee__row .workerbee__cell-target,
.workerbee-deployments__row .workerbee-deployments__cell-target {
	color: var(--text);
}

.link-action {
	color: var(--accent);
}

/* Status badges */
.badge--online {
	background-color: rgba(22, 163, 74, 0.12);
	color: #15803d;
	border-color: rgba(22, 163, 74, 0.35);
}
.badge--degraded {
	background-color: rgba(202, 138, 4, 0.12);
	color: #a16207;
	border-color: rgba(202, 138, 4, 0.35);
}
.badge--offline {
	background-color: rgba(225, 29, 72, 0.10);
	color: #be123c;
	border-color: rgba(225, 29, 72, 0.35);
}

/* Deployment-state badges. See themes/default.css for the four-state
   rationale. */
.badge--pending {
	background-color: rgba(100, 116, 139, 0.12);
	color: #475569;
	border-color: rgba(100, 116, 139, 0.35);
}
.badge--in_progress {
	background-color: rgba(37, 99, 235, 0.12);
	color: #1d4ed8;
	border-color: rgba(37, 99, 235, 0.35);
}
.badge--succeeded {
	background-color: rgba(22, 163, 74, 0.12);
	color: #15803d;
	border-color: rgba(22, 163, 74, 0.35);
}
.badge--failed {
	background-color: rgba(225, 29, 72, 0.10);
	color: #be123c;
	border-color: rgba(225, 29, 72, 0.35);
}

/* Workerbee page chrome (options blob + sealed-stub). */
.workerbee__options {
	background-color: var(--bg);
	border: 1px solid var(--card-border);
	color: var(--text);
}
.workerbee__sealed {
	color: var(--text-muted);
}

.empty {
	background-color: var(--card-bg);
	border: 1px dashed var(--card-border);
	color: var(--text-muted);
}

.card__error {
	background-color: rgba(225, 29, 72, 0.10);
	color: #be123c;
	border: 1px solid rgba(225, 29, 72, 0.35);
}
.card__success {
	background-color: rgba(22, 163, 74, 0.10);
	color: #166534;
	border: 1px solid rgba(22, 163, 74, 0.35);
}

.modal {
	background-color: var(--card-bg);
	color: var(--text);
	border-color: var(--card-border);
}

.tag-input {
	background-color: var(--input-bg);
	color: var(--input-text);
	border-color: var(--input-border);
}
.tag-input:focus-within {
	background-color: var(--input-bg-focus);
	color: var(--input-text-focus);
	border-color: var(--input-border-focus);
}

.detail-grid {
	color: var(--text);
}

.link-action--danger {
	color: #be123c;
}
.link-action--danger:hover,
.link-action--danger:focus {
	color: #9f1239;
	text-decoration: underline;
}