/**
 * Modern UI polish for PHP Server Monitor (Bootstrap 5.3).
 * Loaded after style.min.css. Uses Bootstrap CSS variables so
 * light/dark theme switching keeps working automatically.
 */

/* ---------- Global polish ---------- */

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

.card {
	border-radius: 0.75rem;
	border-color: var(--bs-border-color-translucent);
}

.btn {
	border-radius: 0.5rem;
}

/* Softer outline buttons (layout toggle, secondary actions) */
.btn-outline-secondary {
	--bs-btn-color: var(--bs-secondary-color);
	--bs-btn-border-color: var(--bs-border-color);
	--bs-btn-hover-bg: var(--bs-tertiary-bg);
	--bs-btn-hover-color: var(--bs-body-color);
	--bs-btn-hover-border-color: var(--bs-border-color);
	--bs-btn-active-bg: var(--bs-secondary-bg);
	--bs-btn-active-color: var(--bs-body-color);
	--bs-btn-active-border-color: var(--bs-border-color);
}

/* Let Bootstrap collapse the inner corners of grouped buttons */
.btn-group > .btn:not(:first-child):not(:last-child) {
	border-radius: 0;
}

.btn-group > .btn:first-child:not(:last-child) {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.btn-group > .btn:last-child:not(:first-child) {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.dropdown-menu {
	border-radius: 0.6rem;
	border-color: var(--bs-border-color-translucent);
	box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.12);
}

.form-control,
.form-select {
	border-radius: 0.5rem;
}

.table {
	--bs-table-hover-bg: var(--bs-tertiary-bg);
}

.table > :not(caption) > * > * {
	padding: 0.6rem 0.75rem;
	vertical-align: middle;
}

.table > thead th {
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--bs-secondary-color);
}

.alert {
	border-radius: 0.6rem;
}

.navbar .navbar-nav {
	gap: 0.25rem;
}

.navbar .nav-link {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	border-radius: 0.5rem;
	padding: 0.45rem 0.9rem;
	font-weight: 500;
	color: var(--bs-secondary-color);
	transition: color 0.15s ease;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus-visible {
	color: var(--bs-body-color);
}

.navbar .nav-link .nav-icon {
	font-size: 0.85em;
	opacity: 0.7;
	transition: opacity 0.15s ease;
}

.navbar .nav-link:hover .nav-icon {
	opacity: 1;
}

.navbar .nav-item.active .nav-link,
.navbar .nav-link.active {
	color: var(--bs-body-color);
	font-weight: 600;
}

.navbar .nav-item.active .nav-link .nav-icon,
.navbar .nav-link.active .nav-icon {
	opacity: 1;
	color: var(--bs-primary);
}

/* Active indicator: thin bar under the link (desktop only) */
@media (min-width: 992px) {
	.navbar .nav-link:not(.dropdown-toggle)::after {
		content: "";
		position: absolute;
		left: 0.9rem;
		right: 0.9rem;
		bottom: 0.1rem;
		height: 2px;
		border-radius: 2px;
		background-color: transparent;
		transition: background-color 0.15s ease;
	}

	.navbar .nav-item.active .nav-link:not(.dropdown-toggle)::after,
	.navbar .nav-link.active:not(.dropdown-toggle)::after {
		background-color: var(--bs-primary);
	}
}

/* User menu as a bordered chip */
.navbar .user-chip {
	border: 1px solid var(--bs-border-color);
	border-radius: 2rem;
	padding: 0.4rem 1rem;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.navbar .user-chip:hover,
.navbar .user-chip:focus-visible,
.navbar .user-chip[aria-expanded="true"] {
	color: var(--bs-body-color);
	border-color: var(--bs-secondary-color);
}

.navbar-toggler {
	border: 0;
	border-radius: 0.5rem;
}

.navbar-toggler:focus {
	box-shadow: 0 0 0 0.15rem rgba(var(--bs-primary-rgb), 0.25);
}

/* Collapsed (mobile) menu: full-width rows instead of pills */
@media (max-width: 991.98px) {
	.navbar .navbar-nav {
		gap: 0.15rem;
		padding: 0.5rem 0;
	}

	/* Active page as a subtle tinted row in the collapsed menu */
	.navbar .nav-item.active .nav-link,
	.navbar .nav-link.active {
		background-color: var(--bs-tertiary-bg);
	}

	.navbar .user-chip {
		border: 0;
		padding: 0.45rem 0.9rem;
	}
}

/* ---------- Footer ---------- */

/* Overrides the fixed 60px height hack from style.min.css */
.footer {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: auto;
	line-height: 1.5;
}

.footer .footer-top-link {
	display: inline-flex;
	align-items: center;
	color: var(--bs-secondary-color);
	text-decoration: none;
	border-radius: 2rem;
	padding: 0.35rem 0.85rem;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.footer .footer-top-link:hover,
.footer .footer-top-link:focus-visible {
	color: var(--bs-body-color);
	background-color: var(--bs-tertiary-bg);
}

.footer .footer-top-link .fa-arrow-up {
	font-size: 0.8em;
}

/* Theme toggle lives in the footer as a dropup */
.footer .btn.footer-top-link {
	border: 0;
	background-color: transparent;
}

.footer .btn.footer-top-link:hover,
.footer .btn.footer-top-link:focus-visible,
.footer .btn.footer-top-link[aria-expanded="true"] {
	color: var(--bs-body-color);
	background-color: var(--bs-tertiary-bg);
}

/* ---------- Server status cards ---------- */

.server-card {
	position: relative;
	cursor: pointer;
	background-color: var(--bs-card-bg);
	border: 1px solid var(--bs-border-color-translucent);
	border-left: 4px solid var(--psm-status-color, var(--bs-secondary));
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.server-card:hover,
.server-card:focus-within {
	transform: translateY(-2px);
	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.12);
}

.server-card--online {
	--psm-status-color: var(--bs-success);
}

.server-card--warning {
	--psm-status-color: var(--bs-warning);
}

.server-card--offline {
	--psm-status-color: var(--bs-danger);
}

.server-card .server-card-title {
	color: var(--bs-body-color);
	font-weight: 600;
	text-decoration: none;
	overflow-wrap: anywhere;
}

.server-card .server-card-title:hover {
	color: var(--psm-status-color);
}

.server-card .server-card-meta {
	font-size: 0.85rem;
	color: var(--bs-secondary-color);
	margin-bottom: 0;
}

.server-card .server-card-meta li + li {
	margin-top: 0.25rem;
}

/* Status dot shown inside badges */

.status-dot {
	display: inline-block;
	width: 0.55rem;
	height: 0.55rem;
	border-radius: 50%;
	background-color: currentColor;
	margin-right: 0.35rem;
	vertical-align: baseline;
}

.server-card--offline .status-dot {
	animation: psm-pulse 1.4s ease-in-out infinite;
}

@keyframes psm-pulse {
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: 0.35;
	}
}

@media (prefers-reduced-motion: reduce) {
	.server-card,
	.server-card:hover {
		transition: none;
		transform: none;
	}

	.server-card--offline .status-dot {
		animation: none;
	}
}

/* ---------- Forms ---------- */

form label {
	font-weight: 500;
	margin-bottom: 0.35rem;
}

/* Floating labels (login) must keep their placeholder look */
.form-floating > label {
	font-weight: 400;
	margin-bottom: 0;
}

fieldset {
	margin-bottom: 1.75rem;
}

fieldset legend {
	font-size: 0.85rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--bs-secondary-color);
	border-bottom: 1px solid var(--bs-border-color);
	padding-bottom: 0.5rem;
	margin-bottom: 1.25rem;
}

.form-control:focus,
.form-select:focus {
	border-color: rgba(var(--bs-primary-rgb), 0.5);
	box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.15);
}

.form-check-input,
.form-check-label {
	cursor: pointer;
}

.form-switch .form-check-input {
	width: 2.4em;
	height: 1.25em;
}

.form-text {
	color: var(--bs-secondary-color);
}

/* Settings/log tabs */
.nav-tabs .nav-link {
	font-weight: 500;
	color: var(--bs-secondary-color);
	border-top-left-radius: 0.5rem;
	border-top-right-radius: 0.5rem;
}

.nav-tabs .nav-link:hover {
	color: var(--bs-body-color);
}

.tab-content {
	padding-top: 1.5rem;
}

/* Tabs embedded in a card header (log view) */
.card > .tab-content {
	padding-top: 0;
}

.card .card-header-tabs .nav-link {
	color: var(--bs-secondary-color);
}

.card .card-header-tabs .nav-link.active {
	color: var(--bs-body-color);
	background-color: var(--bs-card-bg);
}

.card .card-header-tabs .nav-link .badge {
	font-size: 0.7em;
	vertical-align: middle;
}

/* ---------- Server detail view ---------- */

.detail-card .card-header {
	background-color: transparent;
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--bs-secondary-color);
	padding-top: 0.85rem;
	padding-bottom: 0.85rem;
}

.detail-card .list-group-item {
	padding-top: 0.7rem;
	padding-bottom: 0.7rem;
}

/* Key/value rows inside detail cards */
.kv-item {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
}

.kv-label {
	color: var(--bs-secondary-color);
	flex-shrink: 0;
}

.kv-value {
	font-weight: 500;
	text-align: end;
	overflow-wrap: anywhere;
}

/* Big status card on the detail page */
.status-hero {
	border-left: 4px solid var(--psm-status-color, var(--bs-secondary));
}

.status-hero--online {
	--psm-status-color: var(--bs-success);
}

.status-hero--warning {
	--psm-status-color: var(--bs-warning);
}

.status-hero--offline {
	--psm-status-color: var(--bs-danger);
}

.status-hero .status-hero-icon {
	color: var(--psm-status-color);
}

/* Raw output (last error / last output) */
.output-block {
	font-family: var(--bs-font-monospace);
	font-size: 0.8rem;
	background-color: var(--bs-tertiary-bg);
	border-radius: 0.5rem;
	padding: 0.6rem 0.75rem;
	margin-top: 0.35rem;
	margin-bottom: 0;
	overflow-wrap: anywhere;
	max-height: 12rem;
	overflow-y: auto;
}

/* ---------- Empty state ---------- */

.psm-empty-state {
	text-align: center;
	padding: 4rem 1rem;
	color: var(--bs-secondary-color);
}

.psm-empty-state .fa-server,
.psm-empty-state i {
	font-size: 2.5rem;
	display: block;
	margin-bottom: 1rem;
	opacity: 0.4;
}