/* Palette: MP025
 * Arctic Powder #F1F6F4 · Forsythia #FFC801 · Nocturnal Expedition #114C5A
 * Mystic Mint #D9E8E2 · Deep Saffron #FF9932 · Oceanic Noir #172B36
 *
 * This is the entire visual identity of the hub — see Branding (class-
 * branding.php) for the PHP side of "doesn't look like WordPress"
 * (pruned admin menu, rebranded admin bar + account node, custom SVG menu
 * icon, "Howdy"/core-footer text stripped, custom login screen, no
 * Dashboard/front-end). This file is what makes that pruned-down shell
 * actually look like a real product instead of bare wp-admin.
 *
 * Light theme, deliberately — the wp-admin structure (top admin bar + left
 * sidebar) is unavoidable without a full custom app shell, so the fight for
 * "doesn't read as WordPress" happens almost entirely here: bright surfaces,
 * soft mint/gold accents instead of WP's grey-and-blue, pill-shaped nav
 * states instead of WP's flush rectangular highlight, and the sidebar's
 * collapse toggle + core footer text removed outright rather than restyled
 * (see the "De-WordPress-ing the chrome" section below).
 *
 * Loaded on: every Fleet Hub admin screen (Admin_UI::enqueue_admin_assets,
 * scoped by $hook_suffix) AND wp-login.php (Branding::login_styles) — the
 * "Login screen" section at the bottom is wp-login.php-specific, adminbar/
 * menu sections only ever render on logged-in wp-admin pages.
 */

:root {
	--knock-bg: #F1F6F4;
	--knock-bg-alt: #D9E8E2;
	--knock-ink: #172B36;
	--knock-ink-alt: #114C5A;
	--knock-accent: #FFC801;
	--knock-accent-alt: #FF9932;

	/* Light-theme aliases built from the same palette — everything below
	 * uses these, never the raw hex above, so the whole theme stays a
	 * single source of truth.
	 *
	 * --fleet-accent is deliberately Nocturnal Expedition (navy), NOT
	 * Forsythia — gold text on a white/mint background has terrible
	 * contrast. Forsythia/Deep Saffron are kept for --fleet-accent-gold and
	 * only ever used as a background (buttons, badges, gradients), never as
	 * text-on-light-surface color. */
	--fleet-bg: #F1F6F4;
	--fleet-bg-deep: #FFFFFF;
	--fleet-panel: #FFFFFF;
	--fleet-panel-border: rgba(23, 43, 54, 0.10);
	--fleet-hover: #EAF1EE;
	--fleet-text: #172B36;
	--fleet-text-muted: #5D7480;
	--fleet-accent: #114C5A;
	--fleet-accent-gold: #FFC801;
	--fleet-accent-alt: #FF9932;
	--fleet-danger: #D2483B;
	--fleet-font: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* ---------------------------------------------------------------------
 * Page background + typography — everything inside wp-admin's own
 * #wpcontent wrapper, scoped to Fleet Hub screens only (this stylesheet
 * only loads there).
 * --------------------------------------------------------------------- */
body.wp-admin {
	background: var(--fleet-bg) !important;
	font-family: var(--fleet-font);
}

#wpcontent, #wpbody-content {
	background: var(--fleet-bg);
}

.fleet-shell {
	color: var(--fleet-text);
	max-width: 1200px;
	margin: 12px 0 40px;
}

.fleet-shell h1, .fleet-shell h2, .fleet-shell h3 {
	color: var(--fleet-text);
	font-family: var(--fleet-font);
	letter-spacing: -0.01em;
}

.fleet-shell a {
	color: var(--fleet-accent);
}

.fleet-page-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 4px;
}

.fleet-page-head h1 {
	font-size: 26px;
	font-weight: 700;
	margin: 0;
	padding: 0;
}

/* ---------------------------------------------------------------------
 * De-WordPress-ing the chrome — things that no amount of restyling fixes,
 * so they're removed outright instead. A fixed, always-expanded sidebar
 * with no collapse toggle and no trailing "built with WordPress" credit
 * reads as an actual product's shell, not a reskinned wp-admin.
 * --------------------------------------------------------------------- */
#collapse-menu {
	display: none !important;
}

#wpfooter {
	display: none !important;
}

/* ---------------------------------------------------------------------
 * Admin bar — rebranded by Branding::rebrand_admin_bar() (WP logo/site-
 * name/"Howdy" nodes removed or rewritten, replaced with
 * #wp-admin-bar-fleet-brand + a plain account name), restyled here into a
 * crisp white bar instead of WP's default grey.
 * --------------------------------------------------------------------- */
#wpadminbar {
	background: var(--fleet-bg-deep) !important;
	border-bottom: 1px solid var(--fleet-panel-border);
	height: 36px;
}

#wpadminbar .ab-item, #wpadminbar a.ab-item, #wpadminbar > #wp-toolbar span.ab-label, #wpadminbar > #wp-toolbar span.noticon {
	color: var(--fleet-text) !important;
	line-height: 36px !important;
	height: 36px !important;
}

#wpadminbar .fleet-brand-mark {
	font-weight: 800;
	letter-spacing: 0.12em;
	color: var(--fleet-accent) !important;
	font-size: 13px;
}

#wpadminbar #wp-admin-bar-fleet-brand > .ab-item:hover .fleet-brand-mark {
	color: var(--fleet-accent-alt) !important;
}

#wpadminbar .fleet-account-name {
	font-weight: 600;
	margin-right: 4px;
}

#wpadminbar #wp-admin-bar-my-account img.avatar {
	border-radius: 50%;
	vertical-align: middle;
}

#wpadminbar .ab-top-menu > li.hover > .ab-item, #wpadminbar.nojq .quicklinks .ab-top-menu > li > .ab-item:focus, #wpadminbar:not(.mobile) .ab-top-menu > li:hover > .ab-item, #wpadminbar:not(.mobile) .ab-top-menu > li > .ab-item:focus {
	background: var(--fleet-hover) !important;
	color: var(--fleet-accent) !important;
}

#wpadminbar .quicklinks .ab-sub-wrapper {
	background: var(--fleet-panel) !important;
	border: 1px solid var(--fleet-panel-border);
	box-shadow: 0 8px 24px rgba(23, 43, 54, 0.12);
}

#wpadminbar .ab-submenu .ab-item {
	color: var(--fleet-text-muted) !important;
}

#wpadminbar .ab-submenu .ab-item:hover {
	color: var(--fleet-accent) !important;
	background: var(--fleet-hover) !important;
}

html.wp-toolbar {
	padding-top: 36px;
}

/* ---------------------------------------------------------------------
 * Left sidebar — pruned down to just this plugin's own menu (Branding::
 * prune_admin_menu()), restyled from WP's default grey into a bright
 * white panel with pill-shaped active/hover states instead of WP's flush
 * rectangular highlight (the pill shape specifically is what breaks the
 * "this is a wp-admin sidebar" read at a glance).
 * --------------------------------------------------------------------- */
#adminmenuwrap, #adminmenuback {
	background: var(--fleet-bg-deep);
	border-right: 1px solid var(--fleet-panel-border);
}

#adminmenu, #adminmenu .wp-submenu, #adminmenu li.menu-top {
	background: var(--fleet-bg-deep) !important;
}

#adminmenu a {
	color: var(--fleet-text-muted) !important;
	font-family: var(--fleet-font);
}

#adminmenu li.menu-top {
	margin: 2px 8px;
	border-radius: 8px;
	overflow: hidden;
}

#adminmenu li.menu-top:hover, #adminmenu li.opensub > a.menu-top, #adminmenu li > a.menu-top:focus {
	background: var(--fleet-hover) !important;
}

#adminmenu li.menu-top:hover a, #adminmenu li.opensub > a.menu-top {
	color: var(--fleet-accent) !important;
}

#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu, #adminmenu li.current a.menu-top, #adminmenu .wp-submenu a:focus, #adminmenu a.wp-has-current-submenu:focus {
	color: var(--fleet-text) !important;
}

#adminmenu .wp-submenu {
	background: var(--fleet-bg-deep) !important;
	box-shadow: none !important;
	padding-left: 4px;
}

#adminmenu .wp-submenu li {
	margin: 1px 8px 1px 20px;
}

#adminmenu .wp-submenu a {
	color: var(--fleet-text-muted) !important;
	border-radius: 6px;
}

#adminmenu .wp-submenu a:hover {
	color: var(--fleet-accent) !important;
	background: var(--fleet-hover) !important;
}

#adminmenu .wp-submenu li.current a, #adminmenu .wp-submenu li.current a:hover {
	color: var(--fleet-accent) !important;
	background: var(--knock-bg-alt) !important;
	font-weight: 600;
}

#adminmenu .wp-menu-image img, #adminmenu div.wp-menu-image::before {
	color: var(--fleet-text-muted) !important;
}

#adminmenu li.current div.wp-menu-image::before, #adminmenu a:hover div.wp-menu-image::before {
	color: var(--fleet-accent) !important;
}

/* The little triangle WP draws pointing from the current sidebar item
 * toward the content area — its color has to match the content bg exactly
 * or it looks like a rendering glitch, hence the shared variable rather
 * than a literal color here. */
#adminmenu li.wp-has-current-submenu::after, #adminmenu > li.current::after {
	border-right-color: var(--fleet-bg) !important;
}

/* A thin gold rule under "Overview" at the top of the pruned sidebar, in
 * place of WP's own icon-only top-level row — the closest thing to a logo
 * mark this menu structure allows without injecting extra markup. */
#adminmenu li.toplevel_page_fleet-hub > a.menu-top {
	border-bottom: 2px solid var(--fleet-accent-gold);
	margin-bottom: 6px;
}

/* ---------------------------------------------------------------------
 * Buttons, inputs, panels — Fleet's own component set (.fleet-btn,
 * .fleet-input, .fleet-panel), used instead of WP's .button/.form-table
 * throughout Admin_UI. WP's own .button classes are left alone (still
 * used by a couple of untouched pages) but restyled minimally below too,
 * so nothing left on the old classes looks jarringly out of place.
 * --------------------------------------------------------------------- */
.fleet-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 600;
	font-family: var(--fleet-font);
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.fleet-btn:active {
	transform: translateY(1px);
}

.fleet-btn-primary {
	background: linear-gradient(135deg, var(--fleet-accent-gold), var(--fleet-accent-alt));
	color: var(--knock-ink) !important;
	box-shadow: 0 2px 12px rgba(255, 200, 1, 0.35);
}

.fleet-btn-primary:hover {
	box-shadow: 0 4px 18px rgba(255, 200, 1, 0.5);
	color: var(--knock-ink) !important;
}

.fleet-btn-ghost {
	background: rgba(23, 43, 54, 0.04);
	border-color: var(--fleet-panel-border);
	color: var(--fleet-text) !important;
}

.fleet-btn-ghost:hover {
	background: rgba(255, 200, 1, 0.16);
	border-color: var(--fleet-accent-gold);
	color: var(--fleet-accent) !important;
}

.fleet-btn-ghost:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.fleet-btn-danger {
	background: var(--fleet-danger);
	color: #FFFFFF !important;
}

.fleet-btn-danger:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.fleet-btn-danger-ghost {
	background: transparent;
	border-color: rgba(210, 72, 59, 0.4);
	color: var(--fleet-danger) !important;
	list-style: none;
}

.fleet-btn-danger-ghost::-webkit-details-marker {
	display: none;
}

.fleet-btn-danger-ghost:hover {
	background: rgba(210, 72, 59, 0.08);
}

.fleet-input, input.fleet-input {
	width: 100%;
	max-width: 360px;
	background: var(--fleet-bg-deep);
	border: 1px solid var(--fleet-panel-border);
	border-radius: 6px;
	color: var(--fleet-text);
	padding: 9px 12px;
	font-size: 14px;
	font-family: var(--fleet-font);
}

.fleet-input:focus {
	outline: none;
	border-color: var(--fleet-accent-gold);
	box-shadow: 0 0 0 3px rgba(255, 200, 1, 0.2);
}

.fleet-field-label {
	display: block;
	font-weight: 600;
	margin-bottom: 6px;
	color: var(--fleet-text);
}

.fleet-field-hint {
	color: var(--fleet-text-muted);
	font-size: 13px;
	max-width: 480px;
}

.fleet-panel {
	background: var(--fleet-panel);
	border: 1px solid var(--fleet-panel-border);
	border-radius: 10px;
	padding: 24px;
	margin: 16px 0;
	box-shadow: 0 1px 3px rgba(23, 43, 54, 0.04);
}

.fleet-panel-narrow {
	max-width: 480px;
}

.fleet-panel .form-table th {
	color: var(--fleet-text);
}

.fleet-panel .form-table td {
	color: var(--fleet-text-muted);
}

.fleet-empty-state {
	padding: 48px 24px;
	text-align: center;
	color: var(--fleet-text-muted);
	background: var(--fleet-panel);
	border: 1px dashed var(--fleet-panel-border);
	border-radius: 10px;
}

/* ---------------------------------------------------------------------
 * All Sites — card grid (Admin_UI::render_sites_page()).
 * --------------------------------------------------------------------- */
.fleet-site-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 16px;
	margin-top: 16px;
}

.fleet-site-card {
	background: var(--fleet-panel);
	border: 1px solid var(--fleet-panel-border);
	border-radius: 12px;
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	box-shadow: 0 1px 3px rgba(23, 43, 54, 0.04);
	transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.fleet-site-card:hover {
	border-color: rgba(255, 200, 1, 0.5);
	box-shadow: 0 8px 20px rgba(23, 43, 54, 0.08);
	transform: translateY(-2px);
}

.fleet-site-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.fleet-site-card__slug {
	font-family: ui-monospace, 'SF Mono', Consolas, monospace;
	font-weight: 700;
	font-size: 14px;
	color: var(--fleet-accent);
}

.fleet-site-card__hostname {
	color: var(--fleet-text) !important;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
}

.fleet-site-card__hostname:hover {
	color: var(--fleet-accent) !important;
}

.fleet-site-card__meta {
	color: var(--fleet-text-muted);
	font-size: 12px;
}

.fleet-site-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: auto;
	padding-top: 10px;
}

.fleet-site-card__actions form {
	margin: 0;
}

.fleet-delete-disclosure {
	display: inline-block;
}

.fleet-delete-disclosure summary {
	list-style: none;
}

.fleet-delete-confirm {
	margin-top: 10px;
	padding: 12px;
	background: var(--fleet-bg);
	border-radius: 8px;
	max-width: 320px;
}

.fleet-delete-confirm p {
	color: var(--fleet-text-muted);
	font-size: 12px;
}

.fleet-delete-confirm .fleet-input {
	margin-bottom: 8px;
}

/* Status badges. */
.fleet-setup-incomplete-badge,
.fleet-status-unknown-badge,
.fleet-status-live-badge {
	display: inline-block;
	padding: 2px 8px;
	font-size: 11px;
	font-weight: 700;
	border-radius: 20px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.fleet-setup-incomplete-badge {
	background: rgba(255, 153, 50, 0.16);
	color: #B25A00;
}

.fleet-status-unknown-badge {
	background: rgba(93, 116, 128, 0.12);
	color: var(--fleet-text-muted);
	cursor: help;
}

.fleet-status-live-badge {
	background: rgba(46, 175, 113, 0.15);
	color: #1E8A56;
}

/* ---------------------------------------------------------------------
 * Sync status bar — shared by All Sites and Metrics (Admin_UI::
 * render_refresh_bar()).
 * --------------------------------------------------------------------- */
.fleet-sync-bar {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 10px 0 16px;
	padding: 10px 16px;
	background: var(--fleet-panel);
	border: 1px solid var(--fleet-panel-border);
	border-left: 3px solid var(--fleet-accent-gold);
	border-radius: 6px;
	font-size: 13px;
	color: var(--fleet-text);
}

.fleet-sync-bar__icon {
	color: var(--fleet-accent);
	font-size: 18px;
	width: 18px;
	height: 18px;
}

.fleet-sync-bar__stat {
	font-weight: 600;
	white-space: nowrap;
	color: var(--fleet-text);
}

.fleet-sync-bar__divider {
	color: var(--fleet-text-muted);
	opacity: 0.5;
}

.fleet-sync-bar__spacer {
	flex: 1 1 auto;
}

.fleet-sync-bar__form {
	margin: 0;
}

.fleet-sync-bar__refresh {
	display: inline-flex !important;
	align-items: center;
	gap: 4px;
}

.fleet-sync-bar__refresh .dashicons {
	font-size: 15px;
	width: 15px;
	height: 15px;
	transition: transform 0.2s ease;
}

.fleet-sync-bar__refresh.is-refreshing .dashicons {
	animation: fleet-sync-spin 0.8s linear infinite;
}

@keyframes fleet-sync-spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

/* ---------------------------------------------------------------------
 * Tables (Metrics page still uses wp-list-table for Host/RAM
 * breakdown/Per-site) + notices + RAM bars — restyled in place rather
 * than rebuilt into cards, since these are dense data tables where a
 * table is still the right shape.
 * --------------------------------------------------------------------- */
.fleet-shell .wp-list-table {
	background: var(--fleet-panel);
	color: var(--fleet-text);
	border: 1px solid var(--fleet-panel-border);
	border-radius: 10px;
	overflow: hidden;
}

.fleet-shell .wp-list-table thead th, .fleet-shell .wp-list-table thead td {
	background: var(--fleet-bg);
	color: var(--fleet-text-muted);
	border-bottom: 1px solid var(--fleet-panel-border);
	font-weight: 600;
	text-transform: uppercase;
	font-size: 11px;
	letter-spacing: 0.04em;
}

.fleet-shell .wp-list-table.striped > tbody > :nth-child(odd) {
	background: var(--fleet-panel);
}

.fleet-shell .wp-list-table.striped > tbody > :nth-child(even) {
	background: rgba(23, 43, 54, 0.025);
}

.fleet-shell .wp-list-table td, .fleet-shell .wp-list-table th {
	color: var(--fleet-text);
	border-bottom: 1px solid var(--fleet-panel-border);
}

.fleet-shell .notice {
	background: var(--fleet-panel);
	border-left-width: 4px;
	color: var(--fleet-text);
}

.fleet-shell .notice-success {
	border-left-color: #1E8A56;
}

.fleet-shell .notice-error {
	border-left-color: var(--fleet-danger);
}

.fleet-shell .notice-warning {
	border-left-color: var(--fleet-accent-gold);
}

.fleet-shell .notice-info {
	border-left-color: var(--fleet-accent-alt);
}

.fleet-shell .notice p {
	color: var(--fleet-text);
}

.fleet-shell .description {
	color: var(--fleet-text-muted);
}

.fleet-ram-bar-track {
	background: var(--fleet-bg);
}

.fleet-ram-bar-fill {
	background: linear-gradient(90deg, var(--fleet-accent-gold), var(--fleet-accent-alt));
}

/* ---------------------------------------------------------------------
 * Login screen (wp-login.php) — Branding::login_styles() enqueues this
 * same file there. WP's own #login/#loginform structure is kept (so
 * password managers, autofill, and 2FA plugins all still work), just
 * completely reskinned into a bright card on a soft mint/powder gradient.
 * --------------------------------------------------------------------- */
body.login {
	background: linear-gradient(160deg, #FFFFFF 0%, var(--knock-bg-alt) 100%) !important;
	font-family: var(--fleet-font);
}

body.login #login {
	width: 360px;
}

body.login h1 a {
	background-image: none !important;
	width: auto !important;
	height: auto !important;
	display: block;
	text-indent: 0 !important;
	font-size: 28px;
	font-weight: 800;
	letter-spacing: 0.14em;
	color: var(--fleet-accent) !important;
	text-align: center;
	margin-bottom: 12px;
}

body.login h1 a::before {
	content: "◆ ";
	color: var(--fleet-accent-gold);
}

body.login #loginform {
	background: var(--fleet-panel);
	border: 1px solid var(--fleet-panel-border);
	border-radius: 14px;
	box-shadow: 0 20px 50px rgba(23, 43, 54, 0.14);
	padding: 26px 24px;
}

body.login #loginform label {
	color: var(--fleet-text-muted);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 600;
}

body.login #loginform input[type="text"],
body.login #loginform input[type="password"] {
	background: var(--fleet-bg);
	border: 1px solid var(--fleet-panel-border);
	color: var(--fleet-text);
	box-shadow: none;
	border-radius: 6px;
	font-size: 15px;
	padding: 10px 12px;
}

body.login #loginform input[type="text"]:focus,
body.login #loginform input[type="password"]:focus {
	border-color: var(--fleet-accent-gold);
	box-shadow: 0 0 0 3px rgba(255, 200, 1, 0.2);
}

body.login .forgetmenot label {
	color: var(--fleet-text-muted);
	text-transform: none;
	font-weight: 400;
}

body.login .wp-core-ui .button-primary {
	background: linear-gradient(135deg, var(--fleet-accent-gold), var(--fleet-accent-alt)) !important;
	border: none !important;
	color: var(--knock-ink) !important;
	font-weight: 700;
	text-shadow: none !important;
	box-shadow: 0 4px 18px rgba(255, 200, 1, 0.35) !important;
	border-radius: 6px;
	width: 100%;
	padding: 8px 0;
	height: auto;
}

body.login #nav, body.login #backtoblog {
	text-align: center;
}

body.login #nav a, body.login #backtoblog a {
	color: var(--fleet-text-muted) !important;
	text-decoration: none;
	font-size: 12px;
}

body.login #nav a:hover, body.login #backtoblog a:hover {
	color: var(--fleet-accent) !important;
}

body.login .message, body.login #login_error {
	background: var(--fleet-panel);
	border-left: 4px solid var(--fleet-accent-alt);
	color: var(--fleet-text);
	border-radius: 6px;
}

body.login p#backtoblog {
	display: none; /* No public front end to "go back" to — see App_Shell::maybe_bounce_login(). */
}

/* ---------------------------------------------------------------------
 * The App Shell (class-app-shell.php) — the ACTUAL UI now. No wp-admin
 * markup exists anywhere in this tree (no #wpadminbar, no #adminmenu, no
 * #wpbody) — this is a plain HTML document this plugin renders and owns
 * outright, which is what makes it possible to actually stop looking like
 * WordPress rather than just reskinning wp-admin's fixed DOM. The old
 * #wpadminbar/#adminmenu rules above still exist purely as a safety net for
 * the brief moment before Branding::redirect_dashboard() fires if wp-admin
 * is ever hit directly.
 * --------------------------------------------------------------------- */
body.fleet-app {
	margin: 0;
	background: var(--fleet-bg);
	color: var(--fleet-text);
	font-family: var(--fleet-font);
}

.fleet-app .fleet-brand-mark {
	font-weight: 800;
	letter-spacing: 0.12em;
	color: var(--fleet-accent);
	font-size: 14px;
	text-decoration: none;
}

.fleet-app-shell {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.fleet-app-topbar {
	display: flex;
	align-items: center;
	gap: 12px;
	height: 56px;
	padding: 0 24px;
	background: var(--fleet-bg-deep);
	border-bottom: 1px solid var(--fleet-panel-border);
	flex-shrink: 0;
}

.fleet-app-topbar__spacer {
	flex: 1 1 auto;
}

.fleet-app .fleet-account-name {
	font-weight: 600;
	font-size: 13px;
}

.fleet-app-topbar img.avatar {
	border-radius: 50%;
	vertical-align: middle;
}

.fleet-app-logout {
	color: var(--fleet-text-muted);
	text-decoration: none;
	font-size: 13px;
	font-weight: 600;
	padding: 6px 10px;
	border-radius: 6px;
}

.fleet-app-logout:hover {
	background: var(--fleet-hover);
	color: var(--fleet-accent);
}

.fleet-app-body {
	display: flex;
	flex: 1 1 auto;
	min-height: 0;
}

.fleet-app-sidebar {
	width: 220px;
	flex-shrink: 0;
	background: var(--fleet-bg-deep);
	border-right: 1px solid var(--fleet-panel-border);
	padding: 16px 12px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.fleet-app-nav-item {
	display: block;
	padding: 9px 14px;
	border-radius: 8px;
	color: var(--fleet-text-muted);
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
}

.fleet-app-nav-item:hover {
	background: var(--fleet-hover);
	color: var(--fleet-accent);
}

.fleet-app-nav-item.is-current {
	background: var(--knock-bg-alt);
	color: var(--fleet-accent);
}

.fleet-app-main {
	flex: 1 1 auto;
	padding: 0 32px;
	overflow-x: hidden;
}

.fleet-app-main .fleet-shell {
	margin: 24px 0 40px;
}

/* Custom login card — replaces wp-login.php's own #login/#loginform for
 * the primary sign-in flow (see App_Shell::render_login() /
 * maybe_bounce_login()). Lost-password/reset-password still fall through
 * to plain wp-login.php, restyled by the "Login screen" section above. */
.fleet-login-screen {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(160deg, #FFFFFF 0%, var(--knock-bg-alt) 100%);
}

.fleet-login-card {
	width: 360px;
	padding: 28px;
	background: var(--fleet-panel);
	border: 1px solid var(--fleet-panel-border);
	border-radius: 14px;
	box-shadow: 0 20px 50px rgba(23, 43, 54, 0.14);
}

.fleet-login-brand {
	text-align: center;
	margin-bottom: 18px;
}

.fleet-login-brand .fleet-brand-mark {
	font-size: 22px;
}

.fleet-login-card .fleet-field-label {
	margin-top: 14px;
}

.fleet-login-card .fleet-input {
	max-width: none;
}

.fleet-login-submit {
	width: 100%;
	justify-content: center;
	margin-top: 18px;
}

.fleet-login-lostpassword {
	display: block;
	text-align: center;
	margin-top: 16px;
	font-size: 12px;
	color: var(--fleet-text-muted);
	text-decoration: none;
}

.fleet-login-lostpassword:hover {
	color: var(--fleet-accent);
}