/* rsd app stylesheet — dependency-free, dark-first with a persisted light toggle (M10). Colour is driven entirely by CSS custom properties: :root holds the dark palette, [data-theme="light"] overrides it. The pre-paint script in the page sets data-theme before first paint, so there is no flash. Keep new colours as semantic vars (never hardcode a hex that must differ between themes). */ :root { color-scheme: dark; --bg: #15171c; --panel: #1d2027; --panel-2: #12141a; --border: #2a2e37; --border-2: #353b46; --text: #e6e6e6; --muted: #8b94a3; --heading: #ffffff; /* brand / active-nav / input text — must invert in light */ --nav-link: #b9c2d0; /* header nav + menu item text */ --nav-hover-bg: rgba(255, 255, 255, .06); --nav-active-bg: rgba(59, 130, 246, .18); --row-hover: rgba(255, 255, 255, .02); --link: #8fb4ff; /* inline text links (a.btnlink) */ --code-bg: #0c0f16; /* 
/ background */
	--code-text: #cdd6e4;
	--accent: #3b82f6;
	--accent-hover: #2f6fe0;
	--green: #2fbf71;
	--green-bg: #16302a;
	--green-border: #2c5d4f;
	--ok-text: #8be0bc;
	--red: #e0565d;
	--red-bg: #3a1d20;
	--red-border: #6b2b30;
	--err-text: #f3b9bd;
	--yellow: #f0c34a;
	--yellow-bg: #322a14;
	--yellow-border: #6b5a23;
	--warn-text: #f0dca0;
	--shadow: rgba(0, 0, 0, .45);
	--affix-bg: #262b34;  /* unit suffix inside an input (slightly lighter than the field) */
}

[data-theme="light"] {
	color-scheme: light;
	--bg: #eef1f6;
	--panel: #ffffff;
	--panel-2: #f4f6fa;
	--border: #dde2eb;
	--border-2: #c6cedb;
	--text: #1d2430;
	--muted: #5d6675;
	--heading: #0f1622;
	--nav-link: #475063;
	--nav-hover-bg: rgba(15, 22, 34, .05);
	--nav-active-bg: rgba(37, 99, 235, .12);
	--row-hover: rgba(15, 22, 34, .03);
	--link: #1d63d6;
	--code-bg: #f0f3f8;
	--code-text: #2a3140;
	--accent: #2563eb;
	--accent-hover: #1d4ed8;
	--green: #178a52;
	--green-bg: #e4f6ec;
	--green-border: #b7e3c9;
	--ok-text: #15784a;
	--red: #c8362d;
	--red-bg: #fbe8e7;
	--red-border: #f0c2bf;
	--err-text: #b3261e;
	--yellow: #b6850c;
	--yellow-bg: #fbf2d6;
	--yellow-border: #ead8a2;
	--warn-text: #876607;
	--shadow: rgba(15, 22, 34, .14);
	--affix-bg: #e7ebf2;  /* unit suffix inside an input (slightly darker than the field) */
}

* { box-sizing: border-box; }

body {
	margin: 0;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	background: var(--bg);
	color: var(--text);
	line-height: 1.45;
}

/* ---- header / nav ---- */
header {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: .6rem 1.1rem;
	background: var(--panel);
	border-bottom: 1px solid var(--border);
}
/* three zones: brand (left) · main-nav (center) · user-menu (right). The side
   zones flex equally so the center nav stays centered regardless of their width. */
header .header-left { flex: 1 1 0; }
header .brand {
	font-weight: 700;
	color: var(--heading);
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	text-decoration: none;
}
header .brand:hover { color: var(--accent); }
header .brand .fa-solid { color: var(--accent); }
/* The shield doubles as a fleet-health beacon: green when all visible repos are
   OK, red while any alert is active. (The bell keeps the warn/error nuance.) */
header .brand.health-ok .fa-solid { color: var(--ok-text); }
header .brand.health-alert .fa-solid { color: var(--err-text); }

header .main-nav { display: flex; gap: .5rem; align-items: center; justify-content: center; }
header .main-nav a { color: var(--nav-link); text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; font-size: .9rem; padding: .4rem .7rem; border-radius: 7px; }
header .main-nav a:hover { color: var(--heading); background: var(--nav-hover-bg); }
header .main-nav a.active { color: var(--heading); background: var(--nav-active-bg); }

/* right zone: theme toggle + user dropdown, pushed to the far right */
header .header-right { flex: 1 1 0; display: flex; align-items: center; justify-content: flex-end; gap: .6rem; }

/* theme toggle (sun in dark, moon in light — shows the mode you switch TO) */
.theme-toggle {
	margin: 0; padding: .4rem .6rem; background: transparent;
	border: 1px solid var(--border-2); border-radius: 7px;
	color: var(--nav-link); cursor: pointer; line-height: 1; font-size: .95rem;
}
.theme-toggle:hover { color: var(--heading); border-color: var(--accent); background: var(--nav-hover-bg); }
.theme-toggle .icon-to-dark { display: none; }
[data-theme="light"] .theme-toggle .icon-to-light { display: none; }
[data-theme="light"] .theme-toggle .icon-to-dark { display: inline-block; }

/* user dropdown (native 
, no JS) */
.user-menu { position: relative; display: flex; }
.user-menu > summary {
	list-style: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .35rem .65rem;
	border: 1px solid var(--border-2);
	border-radius: 7px;
	color: var(--muted);
	font-size: .85rem;
}
.user-menu > summary::-webkit-details-marker { display: none; }
.user-menu > summary:hover,
.user-menu[open] > summary { color: var(--heading); border-color: var(--accent); }
.user-menu > summary .fa-user { color: var(--accent); }
.user-menu > summary .role { color: var(--muted); }
.user-menu .caret { font-size: .7em; transition: transform .15s ease; }
.user-menu[open] .caret { transform: rotate(180deg); }

.user-menu .menu {
	position: absolute;
	top: calc(100% + .4rem);
	right: 0;
	min-width: 210px;
	background: var(--panel);
	border: 1px solid var(--border-2);
	border-radius: 8px;
	padding: .35rem;
	display: flex;
	flex-direction: column;
	gap: .1rem;
	box-shadow: 0 10px 28px var(--shadow);
	z-index: 30;
}
.user-menu .menu form { margin: 0; }
.user-menu .menu a,
.user-menu .menu button {
	display: flex;
	align-items: center;
	gap: .55rem;
	width: 100%;
	margin: 0;
	padding: .5rem .6rem;
	border: 0;
	border-radius: 6px;
	background: none;
	color: var(--nav-link);
	font-size: .85rem;
	font-weight: 500;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}
.user-menu .menu a:hover,
.user-menu .menu button:hover { background: var(--panel-2); color: var(--heading); }
.user-menu .menu .fa-solid { width: 1rem; text-align: center; color: var(--muted); }

main { margin: 1.6rem 1.5rem; }

/* ---- cards ---- */
.card {
	background: var(--panel);
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 1.25rem 1.5rem;
}
.card + .card { margin-top: 1rem; }

/* a detail page's header sub-block: the entity's dashboard-side identity (parent link,
   id, when it was added), one item per row. */
.entity-meta { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; }
.entity-meta > span { display: inline-flex; align-items: center; gap: .35rem; }

/* detail summary grid: 2–3 mini-cards side by side, wrapping to one column when
   the lane gets narrow. Used by the repo/server detail pages to group properties. */
.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 1rem; margin: 1rem 0; align-items: stretch; }
.detail-grid > .card { margin-top: 0; }
.detail-grid > .card + .card { margin-top: 0; }
.detail-grid + .card { margin-top: 1rem; }
.subcard { padding: 1rem 1.15rem; display: flex; flex-direction: column; }
.subcard .card-head { margin-bottom: .5rem; }
.subcard .card-head h2 { margin: 0; font-size: 1.02rem; font-weight: 600; display: inline-flex; align-items: center; gap: .5rem; }
.subcard .card-head h2 .fa-solid { color: var(--accent); font-size: .9em; }
.subcard table.kv th { width: 1%; white-space: nowrap; padding-right: 1.2rem; font-weight: 500; }
.subcard table.kv td { word-break: break-word; }
/* margin-top:auto pins the note to the card's bottom edge when the grid stretches
   it taller than its content (equal-height row). */
.subcard-note { font-size: .78rem; margin: auto 0 0; padding-top: .6rem; }

.narrow { max-width: 440px; margin: 4rem auto; }
/* the server form carries long fields (base URL, 64-hex TLS pin, shoutrrr URLs)
   that don't breathe at 440px — give it a wider lane than the auth/user forms. */
.narrow.narrow-lg { max-width: 640px; }
.card-head { display: flex; align-items: center; gap: .6rem; justify-content: space-between; margin-bottom: 1rem; }
.card-head h1 { margin: 0; }
.card-head h1 .head-count { font-size: .8rem; font-weight: 400; color: var(--muted); }
.head-actions { display: flex; gap: .5rem; align-items: center; }

h1 { font-size: 1.3rem; margin-top: 0; display: inline-flex; align-items: center; gap: .55rem; }
h1 .fa-solid { color: var(--accent); font-size: .95em; }

/* ---- forms ---- */
label { display: block; margin: .8rem 0 .3rem; font-size: .82rem; color: #aab3c0; }
input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="search"], select, textarea {
	width: 100%;
	padding: .55rem .65rem;
	background: var(--panel-2);
	border: 1px solid var(--border-2);
	border-radius: 7px;
	color: var(--heading);
	font-size: .95rem;
}
textarea { resize: vertical; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: .85rem; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); }

/* cron field: the text input plus M/W/D shorthand buttons (@monthly/@weekly/@daily) on one line */
.cron-field { display: flex; align-items: stretch; gap: .4rem; }
.cron-field input { flex: 1 1 auto; min-width: 0; }
.cron-macros { display: flex; gap: .3rem; flex: 0 0 auto; }
.cron-macros .cron-macro { margin: 0; min-width: 2.2rem; justify-content: center; font-weight: 600; }

/* checkbox rows: a flex line, NOT a full-width stretched control */
label.checkline {
	display: flex;
	align-items: center;
	gap: .55rem;
	margin: .9rem 0 0;
	font-size: .9rem;
	color: var(--text);
	cursor: pointer;
}
label.checkline input[type="checkbox"] {
	width: 16px;
	height: 16px;
	margin: 0;
	flex: 0 0 auto;
	accent-color: var(--accent);
	cursor: pointer;
}

/* per-server scope picker on the user form */
.scope-list {
	margin: .9rem 0 0;
	padding: .6rem .8rem .8rem;
	border: 1px solid var(--border-2);
	border-radius: 7px;
}
.scope-list[hidden] { display: none; }
.scope-list legend { padding: 0 .4rem; font-size: .82rem; color: var(--muted); }
.scope-list label.checkline { margin: .5rem 0 0; }

/* ---- settings page ---- */
.settings-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: .35rem 1.5rem;
}
.settings-grid .field { margin-bottom: .55rem; min-width: 0; }
.settings-grid label { margin-top: .35rem; }
.field-hint { display: block; color: var(--muted); font-size: .72rem; line-height: 1.35; margin-top: .25rem; }

/* a card's field groups: each group is its own grid (so it starts on a new row)
   under a quiet label; sibling grids share the auto-fit track count, so columns
   still line up down the card. */
.settings-group {
	margin: 1rem 0 .1rem;
	font-size: .72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--muted);
}
.subhead + .settings-group { margin-top: .2rem; }
.settings-group + .settings-grid { margin-bottom: .3rem; }

/* one card per job kind, laid out side by side: four across on a very wide screen,
   two on a laptop, one full-width lane when the viewport is narrow. min(100%, …)
   keeps the single-column case from overflowing on a phone. */
.job-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr)); gap: 1rem; margin-top: 1rem; }
/* the row is a plain 
, so `.card + .card` does not apply to whatever follows it */
.job-cards + .card { margin-top: 1rem; }
.job-cards > .card { margin-top: 0; display: flex; flex-direction: column; }
.job-card-desc { font-size: .78rem; margin: -.3rem 0 .9rem; }
/* the picker sits at the card's bottom edge, so cards in a row line their grids up
   even when their field lists differ in length. The gap above it is padding, not
   margin: `auto` collapses to 0 in the tallest card of the row, which would leave
   its picker butting straight against the last field. */
.job-card .jobwin { margin-top: auto; }

/* ---- job start-window picker (7 weekdays × 24 hours) ----
   A grid of toggle cells; the hidden input beside it carries the encoded window and
   is the only thing that submits. user-select:none keeps a drag from selecting text.
   The cells are plain  (not buttons): 168 focus stops per grid would swamp
   keyboard navigation, so the weekday/hour headers are the coarse-grained handles. */
.jobwin { padding-top: 1.1rem; user-select: none; }
.jobwin-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; margin-bottom: .4rem; }
.jobwin-title { font-size: .82rem; color: var(--muted); display: inline-flex; align-items: center; gap: .1rem; }
.jobwin-count { font-size: .72rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.jobwin-grid { table-layout: fixed; border-collapse: separate; border-spacing: 1px; }
.jobwin-grid th { padding: 0; border: 0; text-transform: none; letter-spacing: 0; font-size: .68rem; font-weight: 500; text-align: center; }
.jobwin-grid tbody tr:hover { background: none; }
.jobwin-grid .jw-corner { width: 1.6rem; }
.jobwin-grid .jw-day, .jobwin-grid .jw-hour { cursor: pointer; }
.jobwin-grid .jw-day:hover, .jobwin-grid .jw-hour:hover { color: var(--heading); }
.jobwin-grid .jw-hour { text-align: right; padding-right: .3rem; font-variant-numeric: tabular-nums; line-height: 1; }
.jw-cell { padding: 0; border: 0; height: 13px; border-radius: 2px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--border-2); cursor: pointer; }
.jw-cell.on { background: var(--accent); box-shadow: none; }
.jw-cell:hover { box-shadow: inset 0 0 0 1px var(--accent); }
.jobwin-foot { display: flex; align-items: center; gap: .5rem; margin-top: .5rem; flex-wrap: wrap; }
.jobwin-foot button { margin-top: 0; }
.jobwin-foot .field-hint { margin-top: 0; }

/* ---- buttons ---- */
button, .btn {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	margin-top: 1.15rem;
	padding: .55rem 1rem;
	background: var(--accent);
	color: #fff;
	border: 0;
	border-radius: 7px;
	cursor: pointer;
	/*