/* ========== Global Overrides ========== */

/* Links list reset */
ul.links {
	list-style: none;
	margin-left: 0;
	margin-right: 0;
}

/* Section spacing */
section {
	padding: 4em 0;
}

@media only screen and (max-width: 734px) {
	section {
		padding: 2em 0;
	}
}

/* ========== Tabnav Component ========== */

.tn-p {
	display: flex;
	justify-content: center;
}

.tn-platter {
	position: relative;
}

/* ========== Profile List ========== */

.profile-list {
	margin: 2rem 0;
	max-width: 980px;
	margin-left: auto;
	margin-right: auto;
}

.profile-list,
.profile-list ul {
	list-style-type: none;
}

.profile-list.empty {
	display: none;
}

/* Empty notice */
.notice {
	margin: 3em 0 1.5em;
}

.profile-list:not(.empty) + .notice {
	display: none;
}

/* ========== Profile Items ========== */

.profile {
	border-radius: 8px;
	transition: background-color 0.2s ease;
}

.profile:last-child {
	border-bottom: none;
}

.profile.hidden {
	display: none;
}

/* Profile content layout */
.profile-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.55em 1rem;
	min-height: 44px;
}

/* Profile name section */
.profile-name {
	flex: 1;
	margin-right: 2rem;
	line-height: 1.4;
}

.profile-name span {
	display: inline;
	white-space: normal;
}

.profile-name span[data-profile-detail="name"] {
	font-size: 1.15em;
}

/* Platform text styling */
.profile .lighter {
	font-size: 1em;
}

/* Profile actions section */
.profile-actions {
	display: flex;
	gap: 1rem;
	flex-shrink: 0;
}

.profile-actions ul.links {
	margin-bottom: 0;
}

/* Profile links */
.profile-links {
	display: inline-block;
}

.profile-links li {
	display: inline-block;
}

.profile-link:not(:last-child) {
	margin-right: 1em;
}

/* ========== Profile States ========== */

/* Hover states */
.profile:not(.headers):not(.expired):not(.expiring):hover {
	background-color: rgb(232, 232, 237);
}

body[data-color-scheme="dark"] .profile:not(.headers):not(.expired):not(.expiring):hover {
	background-color: rgb(51, 51, 54);
}

/* Expired profiles */
.profile.expired {
	background-color: rgba(255, 88, 83, 0.18);
	border-left: 3px solid #ff5853;
}

.profile.expired [data-profile-detail="name"],
.profile.expired [data-profile-detail="expires"] {
	font-weight: 600;
	color: #ff5853;
}

/* Expiring profiles */
.profile.expiring {
	background-color: rgba(255, 165, 0, 0.18);
	border-left: 3px solid orange;
}

.profile.expiring [data-profile-detail="name"],
.profile.expiring [data-profile-detail="expires"] {
	font-weight: 600;
	color: orange;
}

/* Profile headers */
.profile.headers {
	padding: 0.3em 0 0.135em;
}

.profile.headers p {
	font-size: 15px;
}

/* ========== Legacy Profile Link Styles ========== */

.profile-link-full {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.75rem 1rem;
	text-decoration: none;
	color: inherit;
	border-radius: 8px;
	transition: background-color 0.2s ease;
	min-height: 44px;
}

.profile-link-full:hover {
	text-decoration: none;
	background-color: rgb(232, 232, 237);
}

.profile-link-full .device-name,
.profile-link-full .link {
	text-decoration: none;
}

.profile-link-full:hover .device-name,
.profile-link-full:hover .link {
	text-decoration: none;
}

body[data-color-scheme="dark"] .profile-link-full:hover {
	background-color: rgb(51, 51, 54);
}

/* ========== Utility Classes ========== */

ul.links.small > li {
	margin-bottom: 0;
}

.lighter {
	color: #999;
}

/* ========== Mobile Responsive Styles ========== */

@media screen and (min-width: 320px) and (max-width: 767px) {
	.profile:not(.headers):not(.last) {
		border-bottom: 1px solid #eeeeee;
	}

	.profile-content {
		flex-direction: column;
		align-items: flex-start;
		padding: 0.75em 1rem;
	}

	.profile-name {
		margin-right: 0;
		margin-bottom: 0.5em;
	}

	.profile-actions {
		width: 100%;
		justify-content: flex-start;
	}

	li {
		line-height: 1.2;
	}
}

/* Dark mode mobile border */
@media screen and (min-width: 320px) and (max-width: 767px) {
	body[data-color-scheme="dark"] .profile:not(.headers):not(.last) {
		border-color: var(--fill-secondary);
	}
}

/* Download link specific mobile styles */
@media only screen and (max-width: 734px) {
	.profile-link-full {
		align-items: center;
		padding: 0.75rem 1rem;
		min-height: 60px;
	}

	.profile-link-full .device-name {
		margin-right: 0.75rem;
		font-size: 0.95rem;
		line-height: 1.3;
		max-width: calc(100% - 120px);
	}

	.profile-link-full .link {
		align-self: center;
		width: fit-content;
		margin-top: 0.125rem;
		flex-shrink: 0;
		min-width: 100px;
	}
}

@media only screen and (max-width: 480px) {
	.profile-link-full {
		align-items: stretch;
		padding: 1rem;
		gap: 0.5rem;
	}

	.profile-link-full .device-name {
		margin-right: 0;
		max-width: none;
		margin-bottom: 0.5rem;
	}

	.profile-link-full .link {
		align-self: center;
		margin-top: 0;
		min-width: auto;
	}
}