/**
 * /wp-content/themes/hasakah-media-network/assets/css/dock-physics.css
 *
 * Hasakah Panel - Sovereign SaaS Smart Dock
 * React/wp.element SPA dock, no jQuery.
 */

:root {
	--hp-navy: rgba(0, 31, 63, 0.75);
	--hp-orange: #ff851b;
	--hp-white: #ffffff;
	--hp-black: #030812;
	--hp-gold: #d4af37;
	--glass-border: rgba(255, 255, 255, 0.15);
	--glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.37);
	--base-icon-size: 50px;
	--hmn-smart-dock-bottom: 20px;
	--hmn-smart-dock-width: min(92vw, 760px);
	--hmn-smart-dock-height: 78px;
	--hmn-smart-dock-radius: 26px;
	--hmn-smart-dock-gap: 12px;
	--hmn-smart-dock-blur: 25px;
	--hmn-smart-dock-z: 999999;
	--hmn-smart-dock-bg: var(--hp-navy);
	--hmn-smart-dock-border: var(--glass-border);
	--hmn-smart-dock-shadow: var(--glass-shadow);
	--hmn-smart-dock-text: #ffffff;
	--hmn-smart-dock-muted: rgba(255, 255, 255, 0.68);
	--hmn-smart-dock-accent: var(--hp-orange);
	--hmn-smart-dock-glow: rgba(255, 133, 27, 0.42);
	--hmn-smart-dock-opacity: 0.96;
}

#hmn-sovereign-dock-root {
	inset: auto;
	pointer-events: none;
	position: static;
	z-index: var(--hmn-smart-dock-z);
}

/* Compatibility guard: disables old dock markup if old cache/plugin prints it. */
.hmn-dock:not(.hmn-smart-dock) {
	display: none !important;
}

.hmn-smart-dock-wrapper {
	align-items: flex-end;
	bottom: calc(var(--hmn-smart-dock-bottom) + env(safe-area-inset-bottom, 0px));
	display: flex;
	height: calc(var(--base-icon-size) * 2.25);
	justify-content: center;
	left: 50%;
	pointer-events: none;
	position: fixed !important;
	right: auto !important;
	top: auto !important;
	transform: translate3d(-50%, 0, 0) !important;
	width: min(96vw, calc(var(--hmn-smart-dock-width) + 44px));
	z-index: var(--hmn-smart-dock-z);
}

.hmn-smart-dock-wrapper[data-dock-theme="macos-glass"],
.hmn-smart-dock-wrapper[data-dock-theme="glass"],
.hmn-smart-dock-wrapper[data-dock-theme="glass-ink"] {
	--hmn-smart-dock-bg: linear-gradient(135deg, rgba(255,255,255,.18), rgba(7,18,34,.72));
	--hmn-smart-dock-border: rgba(255,255,255,.24);
	--hmn-smart-dock-shadow: 0 28px 110px rgba(0,0,0,.44);
}

.hmn-smart-dock-wrapper[data-dock-theme="navy-command"],
.hmn-smart-dock-wrapper[data-dock-theme="broadcast-blue"],
.hmn-smart-dock-wrapper[data-dock-theme="studio-panel"] {
	--hmn-smart-dock-bg: linear-gradient(135deg, rgba(3, 15, 32, .96), rgba(7, 22, 42, .92));
	--hmn-smart-dock-border: rgba(255,133,27,.36);
	--hmn-smart-dock-shadow: 0 20px 80px rgba(255,133,27,.15), 0 28px 110px rgba(0,0,0,.52);
}

.hmn-smart-dock-wrapper[data-dock-theme="orange-pulse"] {
	--hmn-smart-dock-bg: linear-gradient(135deg, rgba(25, 11, 3, .96), rgba(91, 36, 4, .84));
	--hmn-smart-dock-border: rgba(255,133,27,.48);
	--hmn-smart-dock-glow: rgba(255,133,27,.52);
}

.hmn-smart-dock-wrapper[data-dock-theme="gold-sovereign"],
.hmn-smart-dock-wrapper[data-dock-theme="classic-royal"],
.hmn-smart-dock-wrapper[data-dock-theme="desert-gold"] {
	--hmn-smart-dock-bg: linear-gradient(135deg, rgba(14, 10, 4, .96), rgba(55, 35, 10, .92));
	--hmn-smart-dock-border: rgba(212,175,55,.45);
	--hmn-smart-dock-accent: #d4af37;
	--hmn-smart-dock-glow: rgba(212,175,55,.38);
}

.hmn-smart-dock-wrapper[data-dock-theme="neon-cyber"],
.hmn-smart-dock-wrapper[data-dock-theme="matrix-live"] {
	--hmn-smart-dock-bg: rgba(2, 8, 23, .92);
	--hmn-smart-dock-border: rgba(34,211,238,.42);
	--hmn-smart-dock-accent: #22d3ee;
	--hmn-smart-dock-glow: rgba(34,211,238,.42);
}

.hmn-smart-dock-wrapper[data-dock-theme="newswire-white"],
.hmn-smart-dock-wrapper[data-dock-theme="paper-editorial"],
.hmn-smart-dock-wrapper[data-dock-theme="minimal-pill"] {
	--hmn-smart-dock-bg: rgba(255,255,255,.94);
	--hmn-smart-dock-border: rgba(2,6,23,.12);
	--hmn-smart-dock-text: #061225;
	--hmn-smart-dock-muted: rgba(6,18,37,.64);
	--hmn-smart-dock-shadow: 0 20px 70px rgba(2,6,23,.20);
}

.hmn-smart-dock-wrapper[data-dock-theme="black-ops"] {
	--hmn-smart-dock-bg: rgba(4, 6, 11, .96);
	--hmn-smart-dock-border: rgba(255,255,255,.18);
	--hmn-smart-dock-accent: #ffffff;
	--hmn-smart-dock-glow: rgba(255,255,255,.22);
}

.hmn-smart-dock-wrapper[data-dock-theme="aurora"],
.hmn-smart-dock-wrapper[data-dock-theme="future-orbit"] {
	--hmn-smart-dock-bg: linear-gradient(135deg, rgba(14,165,233,.48), rgba(168,85,247,.44), rgba(236,72,153,.34));
	--hmn-smart-dock-border: rgba(255,255,255,.28);
	--hmn-smart-dock-glow: rgba(168,85,247,.42);
}

.hmn-smart-dock-wrapper[data-dock-theme="emerald-live"] {
	--hmn-smart-dock-bg: rgba(4, 48, 32, .94);
	--hmn-smart-dock-border: rgba(52,211,153,.42);
	--hmn-smart-dock-accent: #34d399;
	--hmn-smart-dock-glow: rgba(52,211,153,.38);
}

.hmn-smart-dock-wrapper[data-dock-theme="crimson-alert"] {
	--hmn-smart-dock-bg: rgba(50, 8, 15, .94);
	--hmn-smart-dock-border: rgba(248,113,113,.42);
	--hmn-smart-dock-accent: #f87171;
	--hmn-smart-dock-glow: rgba(248,113,113,.40);
}

.hmn-smart-dock-wrapper[data-dock-theme="silver-wire"] {
	--hmn-smart-dock-bg: linear-gradient(135deg, rgba(15,23,42,.94), rgba(148,163,184,.28));
	--hmn-smart-dock-border: rgba(226,232,240,.34);
	--hmn-smart-dock-accent: #cbd5e1;
}

.hmn-smart-dock {
	align-items: center;
	backdrop-filter: blur(var(--hmn-smart-dock-blur)) saturate(1.35);
	-webkit-backdrop-filter: blur(var(--hmn-smart-dock-blur)) saturate(1.35);
	background: var(--hmn-smart-dock-bg);
	border: 1px solid var(--hmn-smart-dock-border);
	border-radius: var(--hmn-smart-dock-radius);
	box-shadow: var(--hmn-smart-dock-shadow);
	color: var(--hmn-smart-dock-text);
	display: flex;
	gap: var(--hmn-smart-dock-gap);
	height: var(--hmn-smart-dock-height);
	justify-content: center;
	max-width: calc(100vw - 24px);
	opacity: var(--hmn-smart-dock-opacity);
	overflow: visible;
	padding: 10px 15px;
	pointer-events: auto;
	position: relative;
	width: var(--hmn-smart-dock-width);
	will-change: transform;
}

.hmn-smart-dock::before {
	background:
		radial-gradient(circle at 50% 0%, var(--hmn-smart-dock-glow), transparent 52%),
		linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
	border-radius: inherit;
	content: "";
	inset: 0;
	opacity: .82;
	pointer-events: none;
	position: absolute;
}

.hmn-smart-dock-list {
	align-items: flex-end;
	display: flex;
	gap: var(--hmn-smart-dock-gap);
	height: 100%;
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
	width: 100%;
	z-index: 2;
}

.hmn-smart-dock-item {
	--scale: 1;
	--lift: 0px;
	align-items: center;
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	gap: 4px;
	justify-content: flex-end;
	min-width: max(46px, var(--base-icon-size));
	position: relative;
	transform: translate3d(0, calc(var(--lift) * -1), 0) scale(var(--scale));
	transform-origin: 50% 100%;
	transition:
		transform 92ms cubic-bezier(.2,.8,.2,1),
		filter 140ms ease;
	will-change: transform;
}

.hmn-smart-dock-button {
	align-items: center;
	background:
		linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.06)),
		rgba(255,255,255,.08);
	border: 1px solid rgba(255,255,255,.14);
	border-radius: 16px;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
	color: var(--hmn-smart-dock-text);
	cursor: pointer;
	display: grid;
	font: inherit;
	font-weight: 900;
	height: var(--base-icon-size);
	isolation: isolate;
	line-height: 1;
	place-items: center;
	position: relative;
	text-decoration: none;
	width: var(--base-icon-size);
}

.hmn-smart-dock-button:hover,
.hmn-smart-dock-button:focus-visible {
	border-color: var(--hmn-smart-dock-accent);
	box-shadow: 0 0 0 4px rgba(255,255,255,.07), 0 18px 44px var(--hmn-smart-dock-glow);
	outline: none;
}

.hmn-smart-dock-icon {
	display: block;
	font-size: clamp(12px, calc(var(--base-icon-size) * .36), 24px);
	line-height: 1;
	max-width: calc(var(--base-icon-size) - 8px);
	overflow: hidden;
	pointer-events: none;
	text-align: center;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hmn-smart-dock-label {
	color: var(--hmn-smart-dock-muted);
	display: block;
	font-size: 11px;
	font-weight: 900;
	line-height: 1;
	max-width: 76px;
	overflow: hidden;
	pointer-events: none;
	text-align: center;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hmn-smart-dock-item.is-active .hmn-smart-dock-button {
	background:
		linear-gradient(180deg, rgba(255,133,27,.32), rgba(255,133,27,.12)),
		rgba(255,255,255,.08);
	border-color: rgba(255,133,27,.44);
}

.hmn-live-badge {
	animation: hmnPulse 2s infinite;
	background: var(--hmn-smart-dock-accent);
	border-radius: 50%;
	box-shadow: 0 0 8px var(--hmn-smart-dock-accent);
	height: 11px;
	position: absolute;
	right: -3px;
	top: -3px;
	width: 11px;
}

@keyframes hmnPulse {
	0% { box-shadow: 0 0 0 0 var(--hmn-smart-dock-glow); }
	70% { box-shadow: 0 0 0 10px transparent; }
	100% { box-shadow: 0 0 0 0 transparent; }
}

.hmn-smart-dock-menu {
	background: rgba(5,16,33,.97);
	border: 1px solid rgba(255,255,255,.14);
	border-radius: 20px;
	bottom: calc(100% + 14px);
	box-shadow: 0 24px 80px rgba(0,0,0,.38);
	display: grid;
	gap: 6px;
	min-width: 230px;
	opacity: 0;
	padding: 10px;
	pointer-events: none;
	position: absolute;
	transform: translate3d(0, 10px, 0) scale(.98);
	transition: opacity 160ms ease, transform 160ms cubic-bezier(.2,.9,.2,1);
}

.hmn-smart-dock-item.is-open .hmn-smart-dock-menu {
	opacity: 1;
	pointer-events: auto;
	transform: translate3d(0,0,0) scale(1);
}

.hmn-smart-dock-menu a,
.hmn-smart-dock-menu button {
	align-items: center;
	background: rgba(255,255,255,.06);
	border: 1px solid rgba(255,255,255,.08);
	border-radius: 14px;
	color: #fff;
	cursor: pointer;
	display: flex;
	font: inherit;
	font-size: 13px;
	font-weight: 900;
	gap: 8px;
	justify-content: space-between;
	padding: 10px 12px;
	text-decoration: none;
	white-space: nowrap;
	width: 100%;
}

.hmn-smart-dock-menu a:hover,
.hmn-smart-dock-menu button:hover {
	background: rgba(255,133,27,.16);
	border-color: rgba(255,133,27,.28);
}

.hmn-omnibar-overlay {
	align-items: flex-start;
	background: rgba(0,0,0,.52);
	backdrop-filter: blur(10px);
	display: flex;
	inset: 0;
	justify-content: center;
	opacity: 0;
	padding: 12vh 18px 18px;
	pointer-events: none;
	position: fixed;
	transition: opacity .2s ease-in-out;
	z-index: calc(var(--hmn-smart-dock-z) + 1);
}

.hmn-omnibar-overlay.active {
	opacity: 1;
	pointer-events: auto;
}

.hmn-omnibar-modal {
	background: var(--hp-navy);
	border: 1px solid var(--hp-orange);
	border-radius: 20px;
	box-shadow: var(--glass-shadow);
	max-width: 720px;
	overflow: hidden;
	padding: 16px;
	transform: translateY(20px);
	transition: transform .3s cubic-bezier(.175,.885,.32,1.275);
	width: 100%;
}

.hmn-omnibar-overlay.active .hmn-omnibar-modal {
	transform: translateY(0);
}

.hmn-omnibar-input {
	background: transparent;
	border: none;
	color: var(--hp-white);
	font-size: 1.35rem;
	font-weight: 900;
	outline: none;
	padding: 10px;
	width: 100%;
}

.hmn-omnibar-input::placeholder {
	color: rgba(255,255,255,.44);
}

.hmn-omnibar-results {
	border-top: 1px solid rgba(255,255,255,.12);
	display: grid;
	gap: 8px;
	margin-top: 10px;
	max-height: 360px;
	overflow: auto;
	padding-top: 10px;
}

.hmn-omnibar-command {
	align-items: center;
	background: rgba(255,255,255,.07);
	border: 1px solid rgba(255,255,255,.09);
	border-radius: 16px;
	color: #fff;
	cursor: pointer;
	display: flex;
	font: inherit;
	font-weight: 900;
	justify-content: space-between;
	padding: 12px 14px;
	text-align: start;
	width: 100%;
}

.hmn-omnibar-command:hover,
.hmn-omnibar-command.is-selected {
	background: rgba(255,133,27,.18);
	border-color: rgba(255,133,27,.36);
}

@media (max-width: 720px) {
	:root {
		--base-icon-size: 42px;
		--hmn-smart-dock-height: 64px;
		--hmn-smart-dock-gap: 7px;
	}

	.hmn-smart-dock-wrapper {
		width: 96vw;
	}

	.hmn-smart-dock {
		justify-content: flex-start;
		overflow-x: auto;
		scrollbar-width: none;
		width: min(94vw, 560px);
	}

	.hmn-smart-dock::-webkit-scrollbar {
		display: none;
	}

	.hmn-smart-dock-list {
		justify-content: flex-start;
		min-width: max-content;
	}

	.hmn-smart-dock-label {
		display: none;
	}
}