/* --------------------------------------------------------------
   Modern Power Pages theme overrides (Bootstrap 5 compatible)
   Palette: primary blue, electric teal accent, soft neutrals
-------------------------------------------------------------- */

:root {
	--pp-primary: #2250f4;
	--pp-primary-dark: #102c97;
	--pp-primary-soft: #dfe7ff;
	--pp-accent: #00d1c1;
	--pp-accent-dark: #009b8f;
	--pp-body: #111827;
	--pp-muted: #4b5563;
	--pp-border: #e5e7eb;
	--pp-surface: #ffffff;
	--pp-surface-alt: #f5f7fb;
	--pp-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
	--pp-radius: 14px;
	--pp-radius-sm: 8px;
	--pp-transition: 160ms ease;
}

:root {
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
	:root {
		--pp-body: #f9fafb;
		--pp-muted: #9ca3af;
		--pp-border: #1f2937;
		--pp-surface: #111827;
		--pp-surface-alt: #1f2937;
		--pp-shadow: 0 10px 32px rgba(0, 0, 0, 0.6);
	}
}

@media (prefers-color-scheme: dark) {
  :root {
    --pp-body: #333 !important;
  }

  .navbar .nav-link,
  .navbar .navbar-nav .nav-link,
  .navbar-light .navbar-nav .nav-link,
  .navbar-dark .navbar-nav .nav-link,
  .navbar-primary .nav-link,
  .navbar-nav > li > a,
  .navbar-nav > li.active > a,
  .navbar-nav > li.active > a:focus,
  .navbar-nav > li.active > a:hover {
    color: #333 !important;
  }
}

body {
	font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
	color: var(--pp-body);
	background: var(--pp-surface-alt);
	line-height: 1.6;
	letter-spacing: 0.01em;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: 600;
	color: var(--pp-body);
	letter-spacing: -0.01em;
}

p {
	color: var(--pp-muted);
	max-width: 65ch;
}

a {
	color: var(--pp-primary);
	text-decoration: none;
	transition: color var(--pp-transition);
}

a:hover,
a:focus {
	color: var(--pp-accent);
}

/* Section wrappers */
.pp-section {
	padding: clamp(3rem, 5vw, 5.5rem) 0;
}

.pp-section--alt {
	background: var(--pp-surface);
}

.pp-section__title {
	font-size: clamp(1.75rem, 2.5vw, 2.5rem);
	margin-bottom: 0.5rem;
}

.pp-section__subtitle {
	color: var(--pp-muted);
	max-width: 40rem;
}

/* Cards */
.card,
.list-group-item,
.portal-bootstrap .card {
	border: 1px solid var(--pp-border);
	border-radius: var(--pp-radius);
	box-shadow: var(--pp-shadow);
	transition: transform var(--pp-transition), box-shadow var(--pp-transition);
}

.card:hover {
	transform: translateY(-6px);
	box-shadow: 0 16px 42px rgba(15, 23, 42, 0.12);
}

.card-header,
.card-footer {
	background: transparent;
	border-color: var(--pp-border);
}

.pp-card--accent {
	border: 1px solid rgba(34, 80, 244, 0.2);
	background: linear-gradient(135deg, rgba(34, 80, 244, 0.08), rgba(0, 209, 193, 0.08));
}

/* Navigation & header */
.navbar,
.navbar-light,
.navbar-dark {
	border-bottom: 1px solid var(--pp-border);
	background-color: rgba(255, 255, 255, 0.92) !important;
	backdrop-filter: blur(16px);
}

.navbar .nav-link,
.navbar .navbar-nav .nav-link,
.navbar-light .navbar-nav .nav-link,
.navbar-dark .navbar-nav .nav-link,
.nav-primary .nav-link,
.navbar-nav > li > a,
.navbar-nav > li.active > a,
.navbar-nav > li.active > a:focus,
.navbar-nav > li.active > a:hover {
	font-weight: 600;
	color: var(--pp-body) !important;
	opacity: 0.92;
	padding: 0.75rem 1rem;
	border-radius: var(--pp-radius-sm);
	transition: color var(--pp-transition), background-color var(--pp-transition), opacity var(--pp-transition);
}

.navbar .nav-link.active,
.navbar .nav-link:focus,
.navbar .nav-link:hover,
.navbar .navbar-nav .nav-link.active,
.navbar .navbar-nav .nav-link:focus,
.navbar .navbar-nav .nav-link:hover,
.navbar-nav > li > a:focus,
.navbar-nav > li > a:hover,
.navbar-nav > li.active > a,
.navbar-nav > li.active > a:focus,
.navbar-nav > li.active > a:hover,
.nav-primary .nav-link:focus,
.nav-primary .nav-link:hover,
.nav-primary li.active > a,
.nav-primary li.active > a:focus,
.nav-primary li.active > a:hover {
	color: var(--pp-primary) !important;
	background: none !important;
	box-shadow: none !important;
	opacity: 1;
}

.nav-primary.nav.nav-pills > li > a,
.nav-primary.nav.nav-tabs > li > a,
.navbar-nav.nav-tabs > li > a {
	background: none !important;
	border: none;
}

/* Keep nav icons/images visible even when not hovered */
.navbar .nav-link i,
.navbar .nav-link svg,
.navbar .nav-link img,
.nav-primary .nav-link i,
.nav-primary .nav-link svg,
.nav-primary .nav-link img {
	color: var(--pp-body) !important;
	opacity: 0.92;
	filter: none !important;
	transition: opacity var(--pp-transition), color var(--pp-transition);
}

.navbar .nav-link:hover i,
.navbar .nav-link:hover svg,
.navbar .nav-link:hover img,
.nav-primary .nav-link:hover i,
.nav-primary .nav-link:hover svg,
.nav-primary .nav-link:hover img {
	color: var(--pp-primary) !important;
	opacity: 1;
}

/* Force search button/icon/link to show */
.navbar .nav-link img[src*="search"],
.navbar .navbar-nav img[src*="search"],
.nav-primary img[src*="search"] {
	opacity: 1 !important;
	filter: brightness(0) saturate(100%) invert(10%) sepia(24%) saturate(1395%) hue-rotate(203deg) brightness(88%) contrast(90%);
}

/* Ensure search button/link itself is visible */
a[title*="Search"],
a[aria-label*="Search"],
.navbar a[href*="search"],
.navbar-nav a[href*="search"],
#searchNav,
.search-nav,
.navbar .search-link {
	display: inline-block !important;
	visibility: visible !important;
	opacity: 1 !important;
	color: var(--pp-body) !important;
}

.navbar .glyphicon-search,
.navbar .fa-search,
.navbar .ms-Icon--Search,
.navbar .search-icon,
.navbar .icon-search {
	color: var(--pp-body) !important;
	opacity: 0.95 !important;
	filter: none !important;
}

.navbar .nav-link .glyphicon-search,
.navbar .nav-link .fa-search,
.navbar .nav-link .ms-Icon--Search,
.navbar .nav-link .search-icon,
.navbar .nav-link .icon-search {
	margin-right: 0.35rem;
}

/* Provide fallback icon if markup lacks one */
.navbar a[href*="search"].nav-link::before,
.nav-primary a[href*="search"].nav-link::before {
	content: "";
	display: inline-block;
	width: 1rem;
	height: 1rem;
	margin-right: 0.35rem;
	background: radial-gradient(circle at 50% 50%, var(--pp-body) 60%, transparent 62%),
		radial-gradient(circle at 100% 100%, transparent 30%, var(--pp-body) 32%);
	border-radius: 50%;
	opacity: 0.95;
}

.navbar-brand img {
	max-height: 40px;
}

/* Hero */
.pp-hero {
	background: radial-gradient(circle at 10% 20%, rgba(34, 80, 244, 0.2), transparent 35%),
		radial-gradient(circle at 80% 0%, rgba(0, 209, 193, 0.18), transparent 40%),
		var(--pp-surface);
	border-radius: var(--pp-radius);
	padding: clamp(2.5rem, 5vw, 4.5rem);
}

.pp-hero__title {
	font-size: clamp(2rem, 4vw, 3rem);
}

.pp-hero__cta .btn {
	margin-right: 0.75rem;
}

/* Buttons */
.btn-primary {
	background: var(--pp-primary);
	border-color: var(--pp-primary);
	border-radius: var(--pp-radius-sm);
	font-weight: 600;
	box-shadow: 0 12px 25px rgba(34, 80, 244, 0.25);
}

.btn-primary:hover,
.btn-primary:focus {
	background: var(--pp-primary-dark);
	border-color: var(--pp-primary-dark);
}

.btn-outline-primary {
	color: var(--pp-primary);
	border-radius: var(--pp-radius-sm);
}

.btn-light {
	color: var(--pp-primary);
	background: var(--pp-primary-soft);
	border: none;
}

.btn-icon {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

/* Forms */
.form-control,
.form-select,
.form-control:focus,
.form-select:focus {
	border-radius: var(--pp-radius-sm);
	border-color: var(--pp-border);
	box-shadow: none;
}

.form-control:focus,
.form-select:focus {
	border-color: var(--pp-primary);
	box-shadow: 0 0 0 3px rgba(34, 80, 244, 0.15);
}

.form-floating > label {
	color: var(--pp-muted);
}

.input-group-text {
	border-radius: var(--pp-radius-sm);
	background: var(--pp-surface-alt);
	border-color: var(--pp-border);
}

.form-check-input:checked {
	background-color: var(--pp-primary);
	border-color: var(--pp-primary);
}

/* Tables */
.table {
	border-color: var(--pp-border);
}

.table thead th {
	text-transform: uppercase;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	border: none;
	color: var(--pp-muted);
}

.table-striped tbody tr:nth-of-type(odd) {
	background-color: rgba(34, 80, 244, 0.03);
}

.table-hover tbody tr:hover {
	background-color: rgba(0, 209, 193, 0.07);
}

/* Alerts & badges */
.alert {
	border-radius: var(--pp-radius-sm);
	border: none;
	box-shadow: var(--pp-shadow);
}

.badge {
	font-weight: 600;
	letter-spacing: 0.04em;
	border-radius: 999px;
}

.badge.bg-primary {
	background: var(--pp-primary) !important;
}

.badge.bg-outline {
	border: 1px solid var(--pp-border);
	color: var(--pp-muted);
}

/* Timeline & activity */
.pp-timeline__item {
	position: relative;
	padding-left: 2.5rem;
	margin-bottom: 2rem;
}

.pp-timeline__item::before {
	content: "";
	position: absolute;
	left: 0.65rem;
	top: 0.35rem;
	width: 0.75rem;
	height: 0.75rem;
	border-radius: 50%;
	background: var(--pp-accent);
	box-shadow: 0 0 0 6px rgba(0, 209, 193, 0.2);
}

.pp-timeline__item::after {
	content: "";
	position: absolute;
	left: 1rem;
	top: 1.5rem;
	bottom: -1.5rem;
	width: 2px;
	background: var(--pp-border);
}

.pp-timeline__item:last-child::after {
	display: none;
}

/* Knowledge base tiles */
.pp-knowledge-tile {
	border-radius: var(--pp-radius);
	background: var(--pp-surface);
	padding: 1.75rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	transition: transform var(--pp-transition);
}

.pp-knowledge-tile:hover {
	transform: translateY(-4px);
}

.pp-knowledge-tile__icon {
	width: 3rem;
	height: 3rem;
	border-radius: 1rem;
	background: var(--pp-primary-soft);
	display: grid;
	place-items: center;
	color: var(--pp-primary);
	font-size: 1.4rem;
}

/* Footer */
.pp-footer {
	border-top: 1px solid var(--pp-border);
	background: var(--pp-surface);
	padding: 2.5rem 0;
}

.pp-footer a {
	color: var(--pp-muted);
}

.pp-footer a:hover {
	color: var(--pp-primary);
}

/* Utility helpers */
.shadow-soft {
	box-shadow: var(--pp-shadow) !important;
}

.bg-gradient-primary {
	background: linear-gradient(135deg, var(--pp-primary), var(--pp-accent));
	color: #fff;
}

.text-muted-soft {
	color: var(--pp-muted) !important;
}

.rounded-xl {
	border-radius: var(--pp-radius) !important;
}

.border-dashed {
	border: 2px dashed var(--pp-border) !important;
	border-radius: var(--pp-radius-sm);
}

.glass-panel {
	background: rgba(255, 255, 255, 0.7);
	backdrop-filter: blur(18px);
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: var(--pp-radius);
}

.stagger-grid > * {
	transition: transform var(--pp-transition), opacity var(--pp-transition);
}

.stagger-grid > *:hover {
	transform: translateY(-3px) scale(1.01);
}

/* Responsive tweaks */
@media (max-width: 991.98px) {
	.navbar {
		padding: 0.75rem 1rem;
	}

	.pp-hero {
		text-align: center;
	}

	.pp-hero__cta .btn {
		margin-bottom: 0.75rem;
	}
}

@media (max-width: 575.98px) {
	.card,
	.pp-knowledge-tile,
	.pp-hero {
		padding: 1.5rem;
	}
}
#EntityFormPanel.crmEntityFormView[data-form-name="Product Registration - Portal"] > h2.tab-title {
    display: none !important;
}