/* Default dark skin. Mirrors the terminal app's palette. */

:root {
	--bg:                 #1f1f2c;
	--text:               #d9e0ee;
	--text-muted:         #9098b0;

	--input-bg:           #313244;
	--input-text:         #f5f5f5;
	--input-bg-focus:     #45475a;
	--input-text-focus:   #ffffff;
	--input-border:       #2a2a3a;
	--input-border-focus: #cba6f7;

	--accent:             #cba6f7;
	--accent-text:        #1f1f2c;
	--accent-hover:       #b691f0;

	--card-bg:            #262633;
	--card-border:        #2f2f3e;
}

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(244, 63, 94, 0.18);
	color: #fb7185;
	border-color: rgba(244, 63, 94, 0.45);
}
.btn--danger:hover,
.btn--danger:focus {
	background-color: rgba(244, 63, 94, 0.28);
	color: #fda4af;
}

.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);
}

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

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

/* In-card free-form anchors (login/register cross-links etc).
   :not(.btn) keeps anchors that opt into button styling untouched. */
.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(--input-bg);
}
.topbar__nav a:hover {
	background-color: var(--input-bg);
}
.topbar__nav a.is-active {
	background-color: var(--input-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 consumed by .page__bg radial-gradient. */
.page--landing {
	--hero-grad-1: #a78bfa;
	--hero-grad-2: #7c3aed;
	--hero-grad-3: #4c1d95;
}

/* ============================================================
   Grid-list family theme. Shared chrome for incidents / users /
   servers / sessions__admin tables. The 4n zebra targets data
   rows specifically: each data row + its detail panel are 2 DOM
   children, so every other data row sits at child 4n (4, 8, 12…).
   #2c2c3a (hardcoded, not var(--bg)) is one notch lighter than
   --card-bg, giving header (darkest) / odd (mid) / 4n (lightest).
   Admin sessions table has no paired detail panel, so it tints
   odd children instead.
   ============================================================ */
.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: #2c2c3a;
}
/* access-groups compact tables (Members / Excluded servers inside the
   per-group detail panel) don't interleave row+detail siblings the way
   the outer groups list does, so the global :nth-child(4n) rule only
   stripes one in every four rows — looks broken with ≤4 rows. Override
   with proper zebra alternation: head=child 1, rows start at child 2,
   so :nth-child(odd) tints rows at positions 3, 5, 7... (every other
   visible row, starting from row 2 — matches the outer list pattern). */
.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: #2c2c3a;
}
.sessions__admin-row:nth-child(odd) {
	background-color: #2c2c3a;
}
/* session_activity.php — the aggregate view has no detail-panel
   siblings, so the global :nth-child(4n) rule above only stripes
   one in every four rows. Override to clear the 4n stripe AND zebra
   on :nth-child(odd) instead (head at child 1, rows at 2/3/4/..., so
   odd hits rows 3/5/7 — every other visible data row). Same idiom as
   the .access-groups__list--compact override above. */
.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: #2c2c3a;
}
/* Chronological view DOES have rows+detail-panels interleaved
   (head, row, detail, row, detail, ...). That naturally lands every
   other row at child position 4n (rows 2, 4, 6 → positions 4, 8, 12),
   so the global .users__row:nth-child(4n) rule already produces the
   correct zebra. No override needed for chronological. Hover +
   selected rules below carry 3-selector specificity so they win over
   the global stripe on equal weight. */
.session-activity__list .users__row:hover {
	background-color: var(--input-bg);
}
.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: var(--input-bg);
}
.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: var(--input-bg-focus);
	color: var(--input-text-focus);
}

/* Resolved incident rows — soft green wash. Carries .incidents__list as
   an ancestor to beat the zebra / hover / selected rules above (same
   specificity trick the users-page account-state tint uses). */
.incidents__list .incidents__row[data-resolved="1"] {
	background-color: rgba(34, 197, 94, 0.10);
}
.incidents__list .incidents__row[data-resolved="1"]:hover {
	background-color: rgba(34, 197, 94, 0.16);
}
.incidents__list .incidents__row[data-resolved="1"].is-selected,
.incidents__list .incidents__row[data-resolved="1"]:focus-visible {
	background-color: rgba(34, 197, 94, 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(34, 197, 94, 0.18);
	color: #4ade80;
	border-color: rgba(34, 197, 94, 0.35);
}
.badge--degraded {
	background-color: rgba(234, 179, 8, 0.18);
	color: #facc15;
	border-color: rgba(234, 179, 8, 0.35);
}
.badge--offline {
	background-color: rgba(244, 63, 94, 0.18);
	color: #fb7185;
	border-color: rgba(244, 63, 94, 0.35);
}

/* Deployment-state badges. Maps the four state-machine values onto a
   visual hierarchy: pending = neutral, in_progress = info, succeeded =
   green, failed = red. */
.badge--pending {
	background-color: rgba(148, 163, 184, 0.18);
	color: #cbd5e1;
	border-color: rgba(148, 163, 184, 0.35);
}
.badge--in_progress {
	background-color: rgba(59, 130, 246, 0.18);
	color: #60a5fa;
	border-color: rgba(59, 130, 246, 0.35);
}
.badge--succeeded {
	background-color: rgba(34, 197, 94, 0.18);
	color: #4ade80;
	border-color: rgba(34, 197, 94, 0.35);
}
.badge--failed {
	background-color: rgba(244, 63, 94, 0.18);
	color: #fb7185;
	border-color: rgba(244, 63, 94, 0.35);
}

/* Workerbee page chrome. Options blob = monospaced read-only
   panel in the surface color. */
.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(244, 63, 94, 0.12);
	color: #fb7185;
	border: 1px solid rgba(244, 63, 94, 0.35);
}
.card__success {
	background-color: rgba(34, 197, 94, 0.12);
	color: #4ade80;
	border: 1px solid rgba(34, 197, 94, 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: #fb7185;
}
.link-action--danger:hover,
.link-action--danger:focus {
	color: #fda4af;
	text-decoration: underline;
}